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; box-shadow: none;
transform: none; transform: none;
// 默认按钮 // 默认按钮（无 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(.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: #ffffff !important; background-color: #1e88e5 !important;
border-color: #c9d8e8 !important; border-color: #1e88e5 !important;
color: #2c4a6a !important; color: #ffffff !important;
box-shadow: none !important;
&:hover, &:hover,
&:focus { &:focus {
background-color: #f0f7ff !important; background-color: #42a5f5 !important;
border-color: #1e88e5 !important; border-color: #42a5f5 !important;
color: #1e88e5 !important; color: #ffffff !important;
box-shadow: none !important; box-shadow: 0 4px 12px rgba(30, 136, 229, 0.22) !important;
transform: none !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; margin-right: 2px;
} }
// 把文字按钮（is-text / is-link）重置为实心 // 表格操作列的文字按钮（is-text / is-link）：透明底 + 彩色字
// 颜色由 Section 6 / Section 16 的 is-text 规则控制，这里只保证透明度 & 尺寸
&.is-text, &.is-text,
&.is-link { &.is-link {
&.el-button--primary { background: transparent !important;
background-color: #1e88e5 !important; background-image: none !important;
border-color: #1e88e5 !important; background-color: transparent !important;
color: #ffffff !important; border-color: transparent !important;
box-shadow: none !important;
&:hover, font-weight: 500 !important;
&: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;
&:hover, &:hover:not(.is-disabled) {
&:focus { background: rgba(30, 136, 229, 0.08) !important;
background-color: #ec7272 !important; box-shadow: none !important;
border-color: #ec7272 !important;
color: #ffffff !important;
}
} }
// 无类型的文字按钮 -> 白底描边 &.is-disabled {
&:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) { background: #f0f7ff !important;
background-color: #ffffff !important; background-image: none !important;
border-color: #c9d8e8 !important; background-color: #f0f7ff !important;
color: #2c4a6a !important; border-color: transparent !important;
cursor: not-allowed !important;
&:hover,
&:focus {
background-color: #f0f7ff !important;
border-color: #1e88e5 !important;
color: #1e88e5 !important;
}
} }
} }
@ -1940,25 +1904,103 @@ body.teacher-light-mode {
color: #8aa8c4 !important; color: #8aa8c4 !important;
} }
// 按钮暗黑渐变 // 按钮（AppMain.vue .teacher-main 暗黑按钮覆盖，优先级高于 Section 6）
.el-button--primary { // 实心按钮（非 text/link/plain）
border-color: #1976d2 !important; .el-button:not(.is-text):not(.is-link):not(.is-plain) {
background: linear-gradient(135deg, #1e88e5, #1565c0) !important; // primary 实心
box-shadow: 0 4px 12px rgba(30, 136, 229, 0.22) !important; &.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 { // default（无 type）：蓝实心 + 白字，和 primary 完全一致
border-color: #e6a23c !important; &:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
background: #e6a23c !important; background: #1e88e5 !important;
color: #ffffff !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 { // text/link 文字按钮：透明底 + 彩色字（操作列用）
color: #1976d2 !important; .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 { // plain 朴素按钮：浅色底 + 深字
color: #f56c6c !important; .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 的根源） // 表格 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="class-page">
<!-- 页面头部 --> <!-- 页面头部 -->
<div class="page-header"> <div class="page-header">
@ -43,7 +43,7 @@
</el-icon> </el-icon>
查询 查询
</el-button> </el-button>
<el-button @click="refresh"> <el-button type="primary" @click="refresh">
<el-icon> <el-icon>
<Refresh /> <Refresh />
</el-icon> </el-icon>
@ -206,7 +206,7 @@
</el-icon> </el-icon>
查询 查询
</el-button> </el-button>
<el-button @click="refreshMemberList"> <el-button type="primary" @click="refreshMemberList">
<el-icon> <el-icon>
<Refresh /> <Refresh />
</el-icon> </el-icon>

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

@ -15,7 +15,7 @@
<p>为本校教学班尚未单独配置任务时提供默认任务。教学班已配置的任务不受这里改动影响。</p> <p>为本校教学班尚未单独配置任务时提供默认任务。教学班已配置的任务不受这里改动影响。</p>
</div> </div>
<div class="toolbar-actions"> <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 v-if="!isReady" type="warning" :loading="retrying" @click="retryInitialization">立即重试</el-button>
<el-button type="primary" :disabled="!isReady" :loading="saving" @click="saveTasks">保存配置</el-button> <el-button type="primary" :disabled="!isReady" :loading="saving" @click="saveTasks">保存配置</el-button>
</div> </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-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-input v-model="questionQuery.keyword" placeholder="搜索题干" clearable :prefix-icon="Search" @keyup.enter="loadQuestions" /> <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" /> <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-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> </el-upload>
</section> </section>
<el-table v-loading="loading" :data="questions" class="data-table"> <el-table v-loading="loading" :data="questions" class="data-table">
@ -36,7 +36,7 @@
<el-tab-pane label="考评管理" name="exams"> <el-tab-pane label="考评管理" name="exams">
<section class="toolbar" aria-label="考试筛选"> <section class="toolbar" aria-label="考试筛选">
<el-input v-model="examKeyword" placeholder="搜索考试名称" clearable :prefix-icon="Search" @keyup.enter="loadExams" /> <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> </section>
<el-table v-loading="loading" :data="exams" class="data-table"> <el-table v-loading="loading" :data="exams" class="data-table">
<el-table-column prop="name" label="考试名称" min-width="210" /> <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 * @Author: qinzhenpen qzp1807@126.com
* @Date: 2025-05-13 16:22:46 * @Date: 2025-05-13 16:22:46
* @LastEditors: qinzhenpen qzp1807@126.com * @LastEditors: qinzhenpen qzp1807@126.com
@ -97,25 +97,25 @@
<el-table-column label="操作" align="center" width="500"> <el-table-column label="操作" align="center" width="500">
<template #default="{ row }"> <template #default="{ row }">
<div class="action-group"> <div class="action-group">
<el-button type="primary" @click="editSchool(row)"> <el-button type="primary" text @click="editSchool(row)">
<el-icon> <el-icon>
<Edit /> <Edit />
</el-icon> </el-icon>
编辑 编辑
</el-button> </el-button>
<el-button type="danger" @click="delSchool(row)"> <el-button type="danger" text @click="delSchool(row)">
<el-icon> <el-icon>
<Delete /> <Delete />
</el-icon> </el-icon>
删除 删除
</el-button> </el-button>
<el-button type="success" @click="initPassword(row, 0)"> <el-button type="success" text @click="initPassword(row, 0)">
<el-icon> <el-icon>
<Lock /> <Lock />
</el-icon> </el-icon>
密码初始化 密码初始化
</el-button> </el-button>
<el-button type="warning" @click="initPassword(row, 1)"> <el-button type="warning" text @click="initPassword(row, 1)">
<el-icon> <el-icon>
<Refresh /> <Refresh />
</el-icon> </el-icon>

Write Preview
Loading…
Cancel
Save