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

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">