LeiBoWen/en-edu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): 优化页面布局和样式细节

Browse Source 
- admid页面将主区域拆分为两栏布局，调整新增用户按钮颜色统一为primary
- admid页面生成邀请码区域样式微调，增加标题字体大小并统一边距
- 全局主色从#409eff更改为#2563eb，更新顶部加载条颜色
- class页和learningPlan页整体布局调整，包含容器内间距、面板样式统一及按钮样式修改
- uploadpng页布局调整，容器添加内边距，使用panel-shell统一面板样式
- header组件logo图片添加width和height属性，调整导航栏最小高度及z-index提升层级
- 修改CSS变量定义，统一主色调、圆角和背景样式，实现暗黑模式和浅色模式背景渐变效果
- 移除一些多余的class名和调整padding，统一整体界面空间分布和层次感
This commit is contained in:
lbw
2026-01-04 12:11:39 +08:00
parent fe7128dd4e
commit 679241588f
7 changed files with 103 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
enlish-vue/src/App.vue
View File

@@ -14,6 +14,6 @@ const locale = zhCn
<style>
/* 自定义顶部加载 Loading 颜色 */
#nprogress .bar {
background: #409eff !important;
background: #2563eb !important;
}
</style>

26
enlish-vue/src/assets/main.css
View File

@@ -16,4 +16,30 @@
border-color: rgba(255, 255, 255, 0.1);
background: rgba(55, 65, 81, 0.4);
}
.sidebar-fixed {
width: 220px;
min-width: 220px;
flex: 0 0 220px;
box-sizing: border-box;
}
}
:root {
--el-color-primary: #2563eb;
--el-border-radius-base: 10px;
--el-border-radius-small: 8px;
--el-border-radius-round: 9999px;
}
html, body, #app {
min-height: 100%;
background: radial-gradient(1200px at 10% 10%, #e0f2fe 0%, transparent 40%),
radial-gradient(1200px at 90% 10%, #dbeafe 0%, transparent 40%),
linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.dark html, .dark body, .dark #app {
background: radial-gradient(1000px at 10% 10%, rgba(30,58,138,0.35) 0%, transparent 40%),
radial-gradient(1000px at 90% 10%, rgba(2,132,199,0.3) 0%, transparent 40%),
linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

5
enlish-vue/src/layouts/components/Header.vue
View File

@@ -5,7 +5,7 @@
<nav class="fluent-nav px-4 lg:px-6 py-2.5">
<div class="flex flex-wrap justify-between items-center">
<a href="#" class="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" width="24" height="24" />
<span class="self-center text-xl font-semibold whitespace-nowrap">Flowbite</span>
</a>
<div class="flex items-center lg:order-2">
@@ -109,6 +109,7 @@ onBeforeUnmount(() => {
background: transparent;
border-bottom: 0;
backdrop-filter: none;
min-height: 56px;
}
:global(.dark) .fluent-nav {
background: transparent;
@@ -167,5 +168,7 @@ onBeforeUnmount(() => {
:global(.el-header) {
overflow: visible;
padding: 0;
position: relative;
z-index: 1000;
}
</style>

10
enlish-vue/src/pages/LearningPlan.vue
View File

@@ -5,14 +5,14 @@
<Header></Header>
</el-header>
<el-container>
<el-container class="pt-4">
<el-aside width="200px" class="pt-4">
<el-aside width="200px" class="">
<Sidebar />
</el-aside>
<el-main class="p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<el-main class="">
<div class="panel-shell p-6">
<div class="text-lg font-semibold mb-4">学案查询</div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<el-input v-model="searchName" placeholder="按姓名查询" clearable style="max-width: 220px" />
@@ -39,7 +39,7 @@
<el-button type="primary" size="small"
:loading="downloadingIds.includes(plan.id)"
@click="onDownload(plan)">下载</el-button>
<el-button class="ml-2" type="success" size="small"
<el-button class="ml-2" type="primary" size="small"
:disabled="plan.isFinished === 1"
:loading="finishingIds.includes(plan.id)"
@click="onFinish(row.id, plan.id, plan)">完成</el-button>

82
enlish-vue/src/pages/admid/admid.vue
View File

@@ -6,49 +6,49 @@
</el-header>
<el-container>
<el-main class="p-4">
<el-card>
<div class="flex items-center mb-4">
<el-input v-model="query.name" placeholder="姓名" clearable style="max-width:220px" />
<el-button type="primary" class="ml-2" @click="fetchList">查询</el-button>
<el-button class="ml-2" @click="resetSearch">重置</el-button>
<el-button type="success" class="ml-2" @click="openCreate">新增用户</el-button>
</div>
<el-table :data="list" v-loading="loading" border stripe>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="roleName" label="角色" />
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination background :current-page="page" :page-size="pageSize" :total="totalCount"
layout="prev, pager, next, sizes, total" @current-change="onPageChange"
@size-change="onSizeChange" />
</div>
</el-card>
<el-card class="mt-4">
<template #header>
<div class="flex items-center justify-between">
<span>生成邀请码</span>
<el-main class="p-2">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="panel-shell p-6">
<div class="flex items-center mb-4">
<el-input v-model="query.name" placeholder="姓名" clearable style="max-width:220px" />
<el-button type="primary" class="ml-2" @click="fetchList">查询</el-button>
<el-button class="ml-2" @click="resetSearch">重置</el-button>
<el-button type="primary" class="ml-2" @click="openCreate">新增用户</el-button>
</div>
<el-table :data="list" v-loading="loading" border stripe>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="roleName" label="角色" />
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination background :current-page="page" :page-size="pageSize" :total="totalCount"
layout="prev, pager, next, sizes, total" @current-change="onPageChange"
@size-change="onSizeChange" />
</div>
</template>
<el-form :model="inviteForm" :rules="inviteRules" ref="inviteFormRef" label-width="120px">
<el-form-item label="使用次数限制" prop="limit">
<el-input-number v-model="inviteForm.limit" :min="1" :max="9999" />
</el-form-item>
<el-form-item label="有效期（天）" prop="expire">
<el-input-number v-model="inviteForm.expire" :min="1" :max="3650" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="inviteLoading"
@click="submitInvite">生成邀请码</el-button>
<el-button class="ml-2" @click="resetInvite">重置</el-button>
</el-form-item>
</el-form>
<div v-if="inviteCode" class="mt-2">
<el-alert type="success" :closable="false" :title="`邀请码：${inviteCode}`" show-icon />
</div>
</el-card>
<div class="panel-shell p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-lg font-semibold">生成邀请码</span>
</div>
<el-form :model="inviteForm" :rules="inviteRules" ref="inviteFormRef" label-width="120px">
<el-form-item label="使用次数限制" prop="limit">
<el-input-number v-model="inviteForm.limit" :min="1" :max="9999" />
</el-form-item>
<el-form-item label="有效期（天）" prop="expire">
<el-input-number v-model="inviteForm.expire" :min="1" :max="3650" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="inviteLoading"
@click="submitInvite">生成邀请码</el-button>
<el-button class="ml-2" @click="resetInvite">重置</el-button>
</el-form-item>
</el-form>
<div v-if="inviteCode" class="mt-2">
<el-alert type="success" :closable="false" :title="`邀请码：${inviteCode}`" show-icon />
</div>
</div>
</div>
<el-dialog v-model="createVisible" title="新增用户" width="420px">
<el-form :model="createForm" :rules="rules" ref="createFormRef" label-width="80px">

45
enlish-vue/src/pages/class.vue
View File

@@ -5,22 +5,20 @@
<Header></Header>
</el-header>
<el-container>
<el-aside width="200px" class="pt-4">
<el-container class="pt-4">
<el-aside width="200px">
<Sidebar></Sidebar>
</el-aside>
<el-main class="p-4">
<el-main class="">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="lg:col-span-1 flex flex-col gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-lg font-semibold mb-4">班级列表</div>
<el-table ref="classTableRef" :data="classes" border class="w-full" v-loading="loading"
highlight-current-row row-key="id" :current-row-key="selectedClassId"
@row-click="onClassRowClick">
<el-table-column prop="title" label="班级名称" min-width="120" />
<el-table-column prop="gradeName" label="年级" min-width="120" />
<div class="panel-shell p-6">
<div class="text-lg font-semibold mb-4">班级列表</div>
<el-table ref="classTableRef" :data="classes" border class="w-full" v-loading="loading" highlight-current-row
row-key="id" :current-row-key="selectedClassId" @row-click="onClassRowClick">
<el-table-column prop="title" label="班级名称" min-width="120" />
<el-table-column prop="gradeName" label="年级" min-width="120" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button type="danger" size="small"
@@ -41,13 +39,12 @@
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-2">
<div class="text-lg font-semibold mb-4">学生查询</div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<el-input v-model="studentName" placeholder="按姓名查询" clearable
style="max-width: 220px" />
<el-tag v-if="selectedClassId" effect="plain">班级：{{ selectedClassTitle }} (ID: {{
selectedClassId }})</el-tag>
<div class="panel-shell p-6 lg:col-span-1 lg:row-span-2">
<div class="text-lg font-semibold mb-4">学生查询</div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<el-input v-model="studentName" placeholder="按姓名查询" clearable style="max-width: 220px" />
<el-tag v-if="selectedClassId" effect="plain">班级：{{ selectedClassTitle }} (ID: {{
selectedClassId }})</el-tag>
<el-tag v-if="selectedGradeId" effect="plain">年级：{{ selectedGradeTitle }} (ID: {{
selectedGradeId }})</el-tag>
<el-button type="primary" @click="fetchStudents">查询</el-button>
@@ -116,12 +113,12 @@
</el-dialog>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="gradeLoading">
<div class="text-lg font-semibold mb-4">年级列表</div>
<el-table ref="gradeTableRef" :data="grades" border class="w-full" highlight-current-row
row-key="id" :current-row-key="selectedGradeId" @row-click="onGradeRowClick">
<el-table-column prop="title" label="年级名称" min-width="160" />
</el-table>
<div class="panel-shell p-6" v-loading="gradeLoading">
<div class="text-lg font-semibold mb-4">年级列表</div>
<el-table ref="gradeTableRef" :data="grades" border class="w-full" highlight-current-row
row-key="id" :current-row-key="selectedGradeId" @row-click="onGradeRowClick">
<el-table-column prop="title" label="年级名称" min-width="160" />
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination background layout="prev, pager, next, sizes, total"
:total="gradeTotalCount" :page-size="gradePageSize" :current-page="gradePageNo"

10
enlish-vue/src/pages/uploadpng.vue
View File

@@ -5,19 +5,19 @@
<Header></Header>
</el-header>
<el-container>
<el-aside width="200px" class="pt-4">
<el-container class="pt-4">
<el-aside width="200px" class="">
<Sidebar />
</el-aside>
<el-main class="p-4">
<el-main class="">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="panel-shell p-6">
<div class="text-lg font-semibold mb-4">上传图片</div>
<el-upload :show-file-list="false" :http-request="doUpload" accept="image/*">
<el-button type="primary">选择图片并上传</el-button>
</el-upload>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="panel-shell p-6">
<div class="text-lg font-semibold mb-4">结果集</div>
<el-form :inline="true" class="mb-4">
<el-form-item label="班级">