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

style(teacher-end): 统一重构教师端按钮样式规范

Browse Source 
1.  给页面内所有普通操作按钮添加type="primary"统一风格
2.  重构全局scss按钮样式，区分实心按钮、文字按钮、朴素按钮的样式规则
3.  调整表格操作列按钮为文字按钮样式，统一交互体验
fix/exam-question-access-material-excel-delete-draft
qinzhenpen 4 weeks ago
parent d875a518e2
commit 77d5fc373b
5 changed files with 141 additions and 99 deletions
Show Stats Download Patch File Download Diff File

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

@ -260,19 +260,28 @@
box-shadow: none;
transform: none;
// 默认按钮
&:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(.is-link) {
background-color: #ffffff !important;
border-color: #c9d8e8 !important;
color: #2c4a6a !important;
// 默认按钮（无 type）：统一蓝实心 + 白字，和 primary 完全一致
&:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(.is-link):not(.is-plain) {
background-color: #1e88e5 !important;
border-color: #1e88e5 !important;
color: #ffffff !important;
box-shadow: none !important;
&:hover,
&:focus {
background-color: #f0f7ff !important;
border-color: #1e88e5 !important;
color: #1e88e5 !important;
box-shadow: none !important;
transform: none !important;
background-color: #42a5f5 !important;
border-color: #42a5f5 !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(30, 136, 229, 0.22) !important;
}
&.is-disabled,
&.is-disabled:hover {
background-color: #e8f3fe !important;
border-color: #9cc8ef !important;
color: #64b5f6 !important;
opacity: 1;
cursor: not-allowed !important;
}
}
@ -813,73 +822,28 @@
margin-right: 2px;
}
// 把文字按钮（is-text / is-link）重置为实心
// 表格操作列的文字按钮（is-text / is-link）：透明底 + 彩色字
// 颜色由 Section 6 / Section 16 的 is-text 规则控制，这里只保证透明度 & 尺寸
&.is-text,
&.is-link {
&.el-button--primary {
background-color: #1e88e5 !important;
border-color: #1e88e5 !important;
color: #ffffff !important;
&:hover,
&:focus {
background-color: #42a5f5 !important;
border-color: #42a5f5 !important;
color: #ffffff !important;
}
}
&.el-button--success {
background-color: #2ba471 !important;
border-color: #2ba471 !important;
color: #ffffff !important;
&:hover,
&:focus {
background-color: #3cbb85 !important;
border-color: #3cbb85 !important;
color: #ffffff !important;
}
}
&.el-button--warning {
background-color: #e8a33d !important;
border-color: #e8a33d !important;
color: #ffffff !important;
&:hover,
&:focus {
background-color: #f2b45a !important;
border-color: #f2b45a !important;
color: #ffffff !important;
}
}
&.el-button--danger {
background-color: #e05a5a !important;
border-color: #e05a5a !important;
color: #ffffff !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
font-weight: 500 !important;
&:hover,
&:focus {
background-color: #ec7272 !important;
border-color: #ec7272 !important;
color: #ffffff !important;
}
&:hover:not(.is-disabled) {
background: rgba(30, 136, 229, 0.08) !important;
box-shadow: none !important;
}
// 无类型的文字按钮 -> 白底描边
&:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
background-color: #ffffff !important;
border-color: #c9d8e8 !important;
color: #2c4a6a !important;
&:hover,
&:focus {
background-color: #f0f7ff !important;
border-color: #1e88e5 !important;
color: #1e88e5 !important;
}
&.is-disabled {
background: #f0f7ff !important;
background-image: none !important;
background-color: #f0f7ff !important;
border-color: transparent !important;
cursor: not-allowed !important;
}
}
@ -1940,25 +1904,103 @@ body.teacher-light-mode {
color: #8aa8c4 !important;
}
// 按钮暗黑渐变
.el-button--primary {
border-color: #1976d2 !important;
background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
box-shadow: 0 4px 12px rgba(30, 136, 229, 0.22) !important;
}
// 按钮（AppMain.vue .teacher-main 暗黑按钮覆盖，优先级高于 Section 6）
// 实心按钮（非 text/link/plain）
.el-button:not(.is-text):not(.is-link):not(.is-plain) {
// primary 实心
&.el-button--primary {
border-color: #1e88e5 !important;
background: #1e88e5 !important;
color: #ffffff !important;
box-shadow: none !important;
&:hover, &:focus {
background: #42a5f5 !important;
border-color: #42a5f5 !important;
color: #ffffff !important;
}
&.is-disabled {
background: #e8f3fe !important;
border-color: #9cc8ef !important;
color: #64b5f6 !important;
}
}
// success 实心
&.el-button--success {
border-color: #2ba471 !important;
background: #2ba471 !important;
color: #ffffff !important;
&:hover { background: #3cbb85 !important; border-color: #3cbb85 !important; }
&.is-disabled { background: #e5f7ee !important; border-color: #b0dfc5 !important; color: #6bbf95 !important; }
}
// warning 实心
&.el-button--warning {
border-color: #e8a33d !important;
background: #e8a33d !important;
color: #ffffff !important;
&:hover { background: #f2b45a !important; border-color: #f2b45a !important; }
&.is-disabled { background: #fdf3e2 !important; border-color: #f3d3a0 !important; color: #d4a059 !important; }
}
// danger 实心
&.el-button--danger {
border-color: #e05a5a !important;
background: #e05a5a !important;
color: #ffffff !important;
&:hover { background: #ec7272 !important; border-color: #ec7272 !important; }
&.is-disabled { background: #fdecec !important; border-color: #f3b0b0 !important; color: #d98a8a !important; }
}
.el-button--warning {
border-color: #e6a23c !important;
background: #e6a23c !important;
color: #ffffff !important;
// default（无 type）：蓝实心 + 白字，和 primary 完全一致
&:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
background: #1e88e5 !important;
border-color: #1e88e5 !important;
color: #ffffff !important;
&:hover { background: #42a5f5 !important; border-color: #42a5f5 !important; color: #ffffff !important; }
&.is-disabled { background: #e8f3fe !important; border-color: #9cc8ef !important; color: #64b5f6 !important; cursor: not-allowed !important; }
}
}
.el-button.is-text {
color: #1976d2 !important;
// text/link 文字按钮：透明底 + 彩色字（操作列用）
.el-button.is-text,
.el-button.is-link {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
&.el-button--primary { color: #1976d2 !important; }
&.el-button--success { color: #1a7d4f !important; }
&.el-button--warning { color: #b36a14 !important; }
&.el-button--danger { color: #d04545 !important; }
&.el-button--info { color: #5e6b7c !important; }
&:hover:not(.is-disabled) {
background: rgba(30, 136, 229, 0.08) !important;
box-shadow: none !important;
}
&.is-disabled {
background: #f0f7ff !important;
background-image: none !important;
background-color: #f0f7ff !important;
border-color: transparent !important;
color: #9cc8ef !important;
cursor: not-allowed !important;
}
}
.el-button--danger.is-text {
color: #f56c6c !important;
// plain 朴素按钮：浅色底 + 深字
.el-button.is-plain {
&.el-button--primary { background: #e8f3fe !important; border-color: #9cc8ef !important; color: #1565c0 !important; &:hover { background: #1e88e5 !important; color: #fff !important; border-color: #1e88e5 !important; } }
&.el-button--success { background: #e5f7ee !important; border-color: #b0dfc5 !important; color: #1a7d4f !important; &:hover { background: #2ba471 !important; color: #fff !important; border-color: #2ba471 !important; } }
&.el-button--warning { background: #fdf3e2 !important; border-color: #f3d3a0 !important; color: #b36a14 !important; &:hover { background: #e8a33d !important; color: #fff !important; border-color: #e8a33d !important; } }
&.el-button--danger { background: #fdecec !important; border-color: #f3b0b0 !important; color: #c0392b !important; &:hover { background: #e05a5a !important; color: #fff !important; border-color: #e05a5a !important; } }
&.is-disabled { opacity: 0.55; }
}
// 表格 CSS 变量（暗黑 table 的根源）

6
src/views/teacherEnd/class/index.vue
Unescape Escape View File

@ -1,4 +1,4 @@
<template>
<template>
<div class="class-page">
<!-- 页面头部 -->
<div class="page-header">
@ -43,7 +43,7 @@
</el-icon>
查询
</el-button>
<el-button @click="refresh">
<el-button type="primary" @click="refresh">
<el-icon>
<Refresh />
</el-icon>
@ -206,7 +206,7 @@
</el-icon>
查询
</el-button>
<el-button @click="refreshMemberList">
<el-button type="primary" @click="refreshMemberList">
<el-icon>
<Refresh />
</el-icon>

2
src/views/teacherEnd/defaultTask/index.vue
Unescape Escape View File

@ -15,7 +15,7 @@
<p>为本校教学班尚未单独配置任务时提供默认任务。教学班已配置的任务不受这里改动影响。</p>
</div>
<div class="toolbar-actions">
<el-button :loading="loading" @click="loadTasks">刷新</el-button>
<el-button type="primary" :loading="loading" @click="loadTasks">刷新</el-button>
<el-button v-if="!isReady" type="warning" :loading="retrying" @click="retryInitialization">立即重试</el-button>
<el-button type="primary" :disabled="!isReady" :loading="saving" @click="saveTasks">保存配置</el-button>
</div>

8
src/views/teacherEnd/exam/index.vue
Unescape Escape View File

@ -13,11 +13,11 @@
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="questionQuery.keyword" placeholder="搜索题干" clearable :prefix-icon="Search" @keyup.enter="loadQuestions" />
<el-button :icon="Search" @click="loadQuestions">查询</el-button>
<el-button type="primary" :icon="Search" @click="loadQuestions">查询</el-button>
<div class="toolbar-spacer" />
<el-button :icon="Download" @click="downloadTemplate">下载导入模板</el-button>
<el-button type="primary" :icon="Download" @click="downloadTemplate">下载导入模板</el-button>
<el-upload :show-file-list="false" accept=".docx" :http-request="doImport">
<el-button :icon="Upload">Word 批量导入</el-button>
<el-button type="primary" :icon="Upload">Word 批量导入</el-button>
</el-upload>
</section>
<el-table v-loading="loading" :data="questions" class="data-table">
@ -36,7 +36,7 @@
<el-tab-pane label="考评管理" name="exams">
<section class="toolbar" aria-label="考试筛选">
<el-input v-model="examKeyword" placeholder="搜索考试名称" clearable :prefix-icon="Search" @keyup.enter="loadExams" />
<el-button :icon="Search" @click="loadExams">查询</el-button>
<el-button type="primary" :icon="Search" @click="loadExams">查询</el-button>
</section>
<el-table v-loading="loading" :data="exams" class="data-table">
<el-table-column prop="name" label="考试名称" min-width="210" />

10
src/views/teacherEnd/student/index.vue
Unescape Escape View File

@ -1,4 +1,4 @@
<!--
<!--
* @Author: qinzhenpen qzp1807@126.com
* @Date: 2025-05-13 16:22:46
* @LastEditors: qinzhenpen qzp1807@126.com
@ -97,25 +97,25 @@
<el-table-column label="操作" align="center" width="500">
<template #default="{ row }">
<div class="action-group">
<el-button type="primary" @click="editSchool(row)">
<el-button type="primary" text @click="editSchool(row)">
<el-icon>
<Edit />
</el-icon>
编辑
</el-button>
<el-button type="danger" @click="delSchool(row)">
<el-button type="danger" text @click="delSchool(row)">
<el-icon>
<Delete />
</el-icon>
删除
</el-button>
<el-button type="success" @click="initPassword(row, 0)">
<el-button type="success" text @click="initPassword(row, 0)">
<el-icon>
<Lock />
</el-icon>
密码初始化
</el-button>
<el-button type="warning" @click="initPassword(row, 1)">
<el-button type="warning" text @click="initPassword(row, 1)">
<el-icon>
<Refresh />
</el-icon>

Write Preview
Loading…
Cancel
Save