chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增纯顶部导航模式，统一平台管理员样式

Browse Source 
新增纯顶部导航模式（超管/校管），移除侧边栏并调整布局样式；统一按钮、卡片、统计图标等视觉风格为教育蓝体系，优化弹窗、输入框、主按钮等组件样式，确保平台管理员界面一致性。
fix/exam-question-access-material-excel-delete-draft
qinzhenpen 2 weeks ago
parent 9893e33a56
commit a23ab33ca5
7 changed files with 147 additions and 83 deletions
Show Stats Download Patch File Download Diff File

21
src/assets/styles/sidebar.scss
Unescape Escape View File

@ -249,6 +249,13 @@
}
}
/* 纯顶部导航模式（超管/校管，不渲染侧边栏）：清除侧边菜单默认宽度的占位 */
/* 需压过 #app .teacherLayout .main-container 的 margin-left:180px !important（位置更靠后），用双类提权 */
.topNavbarOnly.teacherLayout .main-container,
.topNavbarOnly .main-container {
margin-left: 0 !important;
}
/* 超管端主区域：与教师端一致改浅色（body.teacher-light-mode 时），保留暗色作为无亮色主题时的兜底 */
.platform-admin-main {
height: calc(100vh - 50px);
@ -273,17 +280,19 @@
/* @at-root 跳出 #app 并提升特异性（压过 #app .platform-admin-main 的 ID 权重深色规则） */
@at-root body.teacher-light-mode #app .platform-admin-main {
background:
radial-gradient(circle at 12% 18%, rgba(30, 136, 229, 0.05), transparent 34%),
radial-gradient(circle at 78% 6%, rgba(66, 165, 245, 0.04), transparent 28%),
linear-gradient(135deg, #f7fafd 0%, #eef4fb 48%, #f5f8fc 100%) !important;
// 纯白画布，与教师端/学生端亮色体系一致（禁渐变、禁浅灰底）
background: #ffffff !important;
&::-webkit-scrollbar-track {
background: rgba(30, 60, 100, 0.06);
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.35);
background: #d1d5db;
&:hover {
background: #9ca3af;
}
}
}

85
src/assets/styles/teacher-light.scss
Unescape Escape View File

@ -1569,9 +1569,10 @@ body.teacher-light-mode {
}
}
// ===== 弹窗（teacher-dialog / admin-edit-dialog：扁平纯白 + 教育风令牌）=====
// ===== 弹窗（teacher-dialog / admin-edit-dialog / platform-admin-dialog：扁平纯白 + 教育风令牌）=====
.teacher-dialog,
.admin-edit-dialog {
.admin-edit-dialog,
.platform-admin-dialog {
// dialog 作用域内重设 EP CSS 变量，防止 html.dark 的 --el-color-primary:#00aaff 污染
--el-color-primary: #3b82f6;
--el-color-primary-light-3: #60a5fa;
@ -1582,6 +1583,20 @@ body.teacher-light-mode {
--el-color-primary-dark-2: #2563eb;
--el-color-white: #ffffff;
// 令牌重设：teleport 到 body 的弹层继承不到 #app .teacherLayout 上的变量，必须在本作用域重发
--edu-primary: #3b82f6;
--edu-primary-deep: #2563eb;
--edu-primary-soft: #eff6ff;
--text-strong: #1f2937;
--text-body: #4b5563;
--text-muted: #9ca3af;
--border-color: #e5e7eb;
--r-card: 12px;
--r-control: 8px;
--fs-page: 17px;
--fs-body: 12px;
--fs-tag: 11px;
background: #ffffff !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--r-card) !important;
@ -1647,6 +1662,50 @@ body.teacher-light-mode {
font-size: var(--fs-body);
}
// 输入框 / 选择器外壳：白底灰边（覆盖 admin-theme.scss 的深色 wrapper 残留）
// select 边框在 .el-select__wrapper 上，必须与 .el-input__wrapper 同步覆盖
.el-input__wrapper,
.el-select__wrapper,
.el-select .el-input__wrapper,
.el-textarea__inner {
background: #ffffff !important;
background-image: none !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
&:hover {
border-color: #d1d5db !important;
}
&.is-focus,
&.is-focused,
&:focus-within {
border-color: var(--edu-primary) !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}
}
// 禁用态：浅灰底
.el-input.is-disabled .el-input__wrapper,
.el-select .el-select__wrapper.is-disabled,
.el-select.is-disabled .el-select__wrapper {
background: #f3f4f6 !important;
border-color: var(--border-color) !important;
}
// select 选中值 / placeholder 文字颜色（覆盖 admin-theme 暗色残留）
.el-select__placeholder,
.el-select__selected-item,
.el-select__input {
color: var(--text-strong) !important;
}
.el-select__placeholder.is-transparent,
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
color: var(--text-muted) !important;
}
// input / textarea / select 文字
.el-input__inner,
.el-textarea__inner {
@ -1713,6 +1772,28 @@ body.teacher-light-mode {
}
}
// 主按钮（保存/提交）：方案 A 实心深蓝，恢复被上方默认兜底漂白的 primary
.el-button--primary:not(.is-text):not(.is-link) {
background: #2563eb !important;
background-image: none !important;
border-color: #2563eb !important;
color: #ffffff !important;
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35) !important;
&:hover,
&:focus {
background: #1d4ed8 !important;
border-color: #1d4ed8 !important;
color: #ffffff !important;
}
&.is-disabled {
background: #93c5fd !important;
border-color: #93c5fd !important;
color: #ffffff !important;
}
}
// ===== radio-button（题型选择器）：教育风蓝色选中 =====
// 注意：不能用 --el-color-primary CSS 变量，因为 html.dark 可能设成暗色 #00aaff，
// 必须显式写 var(--edu-primary) 让 teacher-light-mode 令牌生效

12
src/layout/components/Navbar.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template>
<div :class="['navbar', { 'teacher-navbar': role === 3, 'student-navbar': role === 4 }]">
<div :class="['navbar', { 'teacher-navbar': role === 3 || role === 1, 'student-navbar': role === 4 }]">
<!-- 背景装饰（学生端已移除，仅平台/学校管理员保留） -->
<svg v-if="role === 1 || role === 2" class="nav-bg-decoration" viewBox="0 0 1920 60" preserveAspectRatio="xMidYMid slice">
<defs>
@ -81,7 +81,7 @@
</div>
<div class="divider"></div>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click" :popper-class="role === 3 ? 'teacher-dropdown-popper' : role === 4 ? 'student-dropdown-popper' : ''">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click" :popper-class="role === 3 || role === 1 ? 'teacher-dropdown-popper' : role === 4 ? 'student-dropdown-popper' : ''">
<div class="avatar-wrapper">
<div class="avatar-ring">
<img src="../../assets/images/头像.webp" class="user-avatar" />
@ -608,7 +608,9 @@ onMounted(() => {
.nav-bg-decoration { display: none; }
// 品牌区：去渐变去模糊，logo 描边收敛为教育蓝
.TnavTitle {
// 超管端（role=1）品牌区使用 .navTitle，教师端（role=3）使用 .TnavTitle，统一覆盖
.TnavTitle,
.navTitle {
background: transparent;
backdrop-filter: none;
@ -620,11 +622,13 @@ onMounted(() => {
path:first-child { fill: rgba(59, 130, 246, 0.1); }
}
span {
span,
.nacber-name {
color: #1f2937;
font-size: 15px;
font-weight: 700;
letter-spacing: 0;
text-shadow: none;
}
}
}

1
src/layout/index.vue
Unescape Escape View File

@ -42,6 +42,7 @@ const classObj = computed(() => ({
mobile: device.value === "mobile",
teacherLayout: role.value === 3 || role.value === 1,
studentLayout: role.value !== 1 && role.value !== 2 && role.value !== 3,
topNavbarOnly: role.value === 1 || role.value === 2,
}));
const { width, height } = useWindowSize();

59
src/views/index.vue
Unescape Escape View File

@ -102,7 +102,7 @@
<!-- 教师管理卡片 -->
<div class="quick-card" @click="go('/platform-teachers/index')">
<div class="card-icon teacher">
<div class="card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
@ -155,8 +155,8 @@
</div>
</div>
<div class="stat-card">
<div class="stat-icon accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff6b35" stroke-width="1.5">
<div class="stat-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
</svg>
@ -173,8 +173,8 @@
</div>
</div>
<div class="stat-card">
<div class="stat-icon success">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2ba471" stroke-width="1.5">
<div class="stat-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="1.5">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<path d="M22 4L12 14.01l-3-3"/>
</svg>
@ -191,8 +191,8 @@
</div>
</div>
<div class="stat-card">
<div class="stat-icon warning">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffbe00" stroke-width="1.5">
<div class="stat-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
@ -224,14 +224,14 @@
</div>
<div class="activity-list">
<div class="activity-item">
<div class="activity-dot school"></div>
<div class="activity-dot"></div>
<div class="activity-content">
<p class="activity-text"><strong>华东理工大学</strong> 提交入驻申请</p>
<span class="activity-time">10 分钟前</span>
</div>
</div>
<div class="activity-item">
<div class="activity-dot teacher"></div>
<div class="activity-dot"></div>
<div class="activity-content">
<p class="activity-text"><strong>张老师</strong> 申请成为管理教师</p>
<span class="activity-time">25 分钟前</span>
@ -245,7 +245,7 @@
</div>
</div>
<div class="activity-item">
<div class="activity-dot teacher"></div>
<div class="activity-dot"></div>
<div class="activity-content">
<p class="activity-text"><strong>李老师</strong> 完成教师认证</p>
<span class="activity-time">2 小时前</span>
@ -331,7 +331,7 @@ const schoolAdminLinks = [
align-items: center;
justify-content: center;
border-radius: 10px;
background: #e5e7eb;
background: #ffffff;
border: 1px solid #e5e7eb;
}
@ -380,12 +380,6 @@ const schoolAdminLinks = [
background: #eff6ff;
border: 1px solid #dbeafe;
color: #2563eb;
&.teacher {
background: rgba(234, 88, 12, 0.08);
border-color: rgba(234, 88, 12, 0.25);
color: #ea580c;
}
}
h2 {
@ -440,7 +434,7 @@ const schoolAdminLinks = [
&:hover {
border-color: #3b82f6;
background: #f9fafb;
background: #ffffff;
}
}
@ -452,22 +446,7 @@ const schoolAdminLinks = [
justify-content: center;
border-radius: 12px;
background: #eff6ff;
border: 1px solid #e5e7eb;
&.accent {
background: rgba(234, 88, 12, 0.08);
border-color: rgba(234, 88, 12, 0.25);
}
&.success {
background: rgba(43, 164, 113, 0.1);
border-color: rgba(43, 164, 113, 0.3);
}
&.warning {
background: rgba(232, 163, 61, 0.12);
border-color: rgba(232, 163, 61, 0.3);
}
border: 1px solid #dbeafe;
}
.stat-info {
@ -532,7 +511,7 @@ const schoolAdminLinks = [
transition: all 0.2s;
&:hover {
background: #f9fafb;
background: #ffffff;
border-color: #e5e7eb;
}
}
@ -543,20 +522,10 @@ const schoolAdminLinks = [
border-radius: 50%;
margin-top: 5px;
flex-shrink: 0;
&.school {
background: #2563eb;
box-shadow: 0 0 8px rgba(37, 99, 235, 0.35);
}
&.teacher {
background: #ea580c;
box-shadow: none;
}
&.success {
background: #2ba471;
box-shadow: none;
}
}

26
src/views/platformAdmin/school/index.vue
Unescape Escape View File

@ -353,7 +353,7 @@ onMounted(load);
}
.config-hint {
color: #7a8499;
color: #9ca3af;
font-size: 12px;
line-height: 1.6;
margin-top: 6px;
@ -387,42 +387,42 @@ onMounted(load);
// 查看按钮
&.view {
color: #00aaff;
color: #3b82f6;
.btn-icon {
background: rgba(0, 170, 255, 0.12);
background: rgba(59, 130, 246, 0.12);
}
&:hover {
background: rgba(0, 170, 255, 0.1);
background: rgba(59, 130, 246, 0.1);
.btn-icon {
background: rgba(0, 170, 255, 0.25);
background: rgba(59, 130, 246, 0.25);
}
}
}
// 编辑按钮
&.edit {
color: #00ff9d;
color: #3b82f6;
.btn-icon {
background: rgba(0, 255, 157, 0.1);
background: rgba(59, 130, 246, 0.1);
}
&:hover {
background: rgba(0, 255, 157, 0.1);
background: rgba(59, 130, 246, 0.1);
.btn-icon {
background: rgba(0, 255, 157, 0.2);
background: rgba(59, 130, 246, 0.2);
}
}
}
// 删除按钮
&.delete {
color: #ff6b6b;
color: #ef4444;
.btn-icon {
background: rgba(255, 107, 107, 0.1);
background: rgba(239, 68, 68, 0.1);
}
&:hover {
background: rgba(255, 107, 107, 0.1);
background: rgba(239, 68, 68, 0.1);
.btn-icon {
background: rgba(255, 107, 107, 0.2);
background: rgba(239, 68, 68, 0.2);
}
}
}

24
src/views/platformAdmin/schoolAdmin/index.vue
Unescape Escape View File

@ -266,42 +266,42 @@ onMounted(async () => {
// 查看按钮
&.view {
color: #00aaff;
color: #3b82f6;
.btn-icon {
background: rgba(0, 170, 255, 0.12);
background: rgba(59, 130, 246, 0.12);
}
&:hover {
background: rgba(0, 170, 255, 0.1);
background: rgba(59, 130, 246, 0.1);
.btn-icon {
background: rgba(0, 170, 255, 0.25);
background: rgba(59, 130, 246, 0.25);
}
}
}
// 编辑按钮
&.edit {
color: #00ff9d;
color: #3b82f6;
.btn-icon {
background: rgba(0, 255, 157, 0.1);
background: rgba(59, 130, 246, 0.1);
}
&:hover {
background: rgba(0, 255, 157, 0.1);
background: rgba(59, 130, 246, 0.1);
.btn-icon {
background: rgba(0, 255, 157, 0.2);
background: rgba(59, 130, 246, 0.2);
}
}
}
// 删除按钮
&.delete {
color: #ff6b6b;
color: #ef4444;
.btn-icon {
background: rgba(255, 107, 107, 0.1);
background: rgba(239, 68, 68, 0.1);
}
&:hover {
background: rgba(255, 107, 107, 0.1);
background: rgba(239, 68, 68, 0.1);
.btn-icon {
background: rgba(255, 107, 107, 0.2);
background: rgba(239, 68, 68, 0.2);
}
}
}

Write Preview
Loading…
Cancel
Save