选择题功能样式统一为系统主题:弹窗主色改#2563eb系(边框/浅底/文字对齐teacher-light),编辑题目按钮升级为主按钮蓝底白字,两端一致

fix/exam-question-access-material-excel-delete-draft
陈沅 2 weeks ago
parent ea38d895d5
commit 5209376aa6

@ -130,16 +130,16 @@ function close(value = false) {
<style lang="scss"> <style lang="scss">
.step-one-question-editor { .step-one-question-editor {
.el-dialog { overflow: hidden; border: 1px solid #cfe2f5; background: #ffffff; box-shadow: 0 24px 80px rgba(30, 58, 95, 0.46), inset 0 1px rgba(255, 255, 255, 0.14); } .el-dialog { overflow: hidden; border: 1px solid #dbeafe; background: #ffffff; box-shadow: 0 24px 80px rgba(17, 24, 39, 0.18), inset 0 1px rgba(255, 255, 255, 0.14); }
.el-dialog__header { margin: 0; padding: 20px 24px; border-bottom: 1px solid #cfe2f5; } .el-dialog__header { margin: 0; padding: 20px 24px; border-bottom: 1px solid #dbeafe; }
.el-dialog__title { color: #1e3a5f; font-size: 18px; font-weight: 800; } .el-dialog__title { color: #1f2937; font-size: 18px; font-weight: 800; }
.el-dialog__body { max-height: min(66vh, 720px); overflow-y: auto; padding: 20px 24px; } .el-dialog__body { max-height: min(66vh, 720px); overflow-y: auto; padding: 20px 24px; }
.el-dialog__footer { padding: 16px 24px; border-top: 1px solid #cfe2f5; } .el-dialog__footer { padding: 16px 24px; border-top: 1px solid #dbeafe; }
} }
.choice-editor-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding:15px 17px; border-left:3px solid #1e88e5; background:linear-gradient(90deg,rgba(187, 222, 251, 0.5),transparent); } .choice-editor-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding:15px 17px; border-left:3px solid #2563eb; background:linear-gradient(90deg,rgba(219, 234, 254, 0.6),transparent); }
.choice-editor-actions { display:flex; flex-shrink:0; gap:10px; } .choice-editor-actions { display:flex; flex-shrink:0; gap:10px; }
/* 只命中左上角的 STEP 01 标签,避免染蓝按钮内文字(el-button 文字渲染在 span 中) */ /* 只命中左上角的 STEP 01 标签,避免染蓝按钮内文字(el-button 文字渲染在 span 中) */
.choice-editor-intro > div > span { color:#1e88e5; font-size:12px; font-weight:800; letter-spacing:.12em; }.choice-editor-intro p { margin:5px 0 0; color:#5a7a9a; line-height:1.6; } .choice-editor-intro > div > span { color:#2563eb; font-size:12px; font-weight:800; letter-spacing:.12em; }.choice-editor-intro p { margin:5px 0 0; color:#6b7280; line-height:1.6; }
.choice-question-list { display:grid; gap:16px; }.choice-question-card { padding:16px; border:1px solid #cfe2f5; border-radius:10px; background:#f0f6fd; }.choice-question-card header { display:flex; align-items:center; gap:9px; margin-bottom:13px; color:#2c4a6a; }.choice-question-number { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#ffffff; background:#1e88e5; font-size:12px; font-weight:900; }.choice-question-remove { margin-left:auto; color:#ff92a5; cursor:pointer; border:0; background:transparent; }.choice-options { display:grid; gap:9px; margin:13px 0 7px; }.choice-option-row { display:grid; grid-template-columns:94px 28px minmax(0,1fr) 52px; align-items:center; gap:8px; }.choice-option-row .el-radio { margin-right:0; color:#2c4a6a; }.choice-option-key { display:grid; place-items:center; width:25px; height:25px; color:#1e88e5; font-weight:900; border:1px solid #cfe2f5; border-radius:5px; } .choice-question-list { display:grid; gap:16px; }.choice-question-card { padding:16px; border:1px solid #dbeafe; border-radius:10px; background:#eff6ff; }.choice-question-card header { display:flex; align-items:center; gap:9px; margin-bottom:13px; color:#374151; }.choice-question-number { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#ffffff; background:#2563eb; font-size:12px; font-weight:900; }.choice-question-remove { margin-left:auto; color:#ff92a5; cursor:pointer; border:0; background:transparent; }.choice-options { display:grid; gap:9px; margin:13px 0 7px; }.choice-option-row { display:grid; grid-template-columns:94px 28px minmax(0,1fr) 52px; align-items:center; gap:8px; }.choice-option-row .el-radio { margin-right:0; color:#374151; }.choice-option-key { display:grid; place-items:center; width:25px; height:25px; color:#2563eb; font-weight:900; border:1px solid #dbeafe; border-radius:5px; }
@media (max-width:640px) { .choice-editor-intro { align-items:flex-start; flex-direction:column; }.choice-option-row { grid-template-columns:78px 25px minmax(0,1fr); }.choice-option-row > .el-button { grid-column:3; justify-self:end; } } @media (max-width:640px) { .choice-editor-intro { align-items:flex-start; flex-direction:column; }.choice-option-row { grid-template-columns:78px 25px minmax(0,1fr); }.choice-option-row > .el-button { grid-column:3; justify-self:end; } }
</style> </style>

@ -108,29 +108,29 @@ function close(value = false) {
<style lang="scss"> <style lang="scss">
.step-one-bank-picker { .step-one-bank-picker {
.el-dialog { overflow: hidden; border: 1px solid #cfe2f5; background: #ffffff; box-shadow: 0 24px 80px rgba(30, 58, 95, 0.46); } .el-dialog { overflow: hidden; border: 1px solid #dbeafe; background: #ffffff; box-shadow: 0 24px 80px rgba(17, 24, 39, 0.18); }
.el-dialog__header { margin: 0; padding: 20px 24px; border-bottom: 1px solid #cfe2f5; } .el-dialog__header { margin: 0; padding: 20px 24px; border-bottom: 1px solid #dbeafe; }
.el-dialog__title { color: #1e3a5f; font-size: 18px; font-weight: 800; } .el-dialog__title { color: #1f2937; font-size: 18px; font-weight: 800; }
.el-dialog__body { max-height: min(64vh, 700px); overflow-y: auto; padding: 20px 24px; } .el-dialog__body { max-height: min(64vh, 700px); overflow-y: auto; padding: 20px 24px; }
.el-dialog__footer { padding: 16px 24px; border-top: 1px solid #cfe2f5; } .el-dialog__footer { padding: 16px 24px; border-top: 1px solid #dbeafe; }
} }
.bank-picker-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding:15px 17px; border-left:3px solid #1e88e5; background:linear-gradient(90deg,rgba(187,222,251,.5),transparent); } .bank-picker-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding:15px 17px; border-left:3px solid #2563eb; background:linear-gradient(90deg,rgba(219,234,254,.6),transparent); }
/* 只命中左上角标签,避免染蓝按钮内文字 */ /* 只命中左上角标签,避免染蓝按钮内文字 */
.bank-picker-intro > div > span { color:#1e88e5; font-size:12px; font-weight:800; letter-spacing:.12em; } .bank-picker-intro > div > span { color:#2563eb; font-size:12px; font-weight:800; letter-spacing:.12em; }
.bank-picker-intro p { margin:5px 0 0; color:#5a7a9a; line-height:1.6; } .bank-picker-intro p { margin:5px 0 0; color:#6b7280; line-height:1.6; }
.bank-picker-count { flex-shrink:0; padding:6px 14px; color:#1e88e5; font-size:13px; font-weight:800; border:1px solid #cfe2f5; border-radius:16px; background:#f0f6fd; } .bank-picker-count { flex-shrink:0; padding:6px 14px; color:#2563eb; font-size:13px; font-weight:800; border:1px solid #dbeafe; border-radius:16px; background:#eff6ff; }
.bank-question-list { display:grid; gap:12px; min-height:120px; } .bank-question-list { display:grid; gap:12px; min-height:120px; }
.bank-question-card { display:flex; gap:12px; padding:14px 16px; border:1px solid #cfe2f5; border-radius:10px; background:#ffffff; cursor:pointer; transition:all .16s ease; .bank-question-card { display:flex; gap:12px; padding:14px 16px; border:1px solid #dbeafe; border-radius:10px; background:#ffffff; cursor:pointer; transition:all .16s ease;
&:hover { border-color:#1e88e5; background:#f6fafe; } &:hover { border-color:#2563eb; background:#f6fafe; }
&.is-checked { border-color:#1e88e5; background:#eaf3fd; } &.is-checked { border-color:#2563eb; background:#eaf3fd; }
} }
.bank-check { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; margin-top:2px; color:#1e88e5; font-size:12px; font-weight:900; border:1px solid #cfe2f5; border-radius:50%; background:#f0f6fd; } .bank-check { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; margin-top:2px; color:#2563eb; font-size:12px; font-weight:900; border:1px solid #dbeafe; border-radius:50%; background:#eff6ff; }
.bank-question-card.is-checked .bank-check { color:#ffffff; background:#1e88e5; border-color:#1e88e5; } .bank-question-card.is-checked .bank-check { color:#ffffff; background:#2563eb; border-color:#2563eb; }
.bank-body { min-width:0; .bank-body { min-width:0;
h4 { margin:0 0 8px; color:#1f2937; font-size:14px; line-height:1.6; } h4 { margin:0 0 8px; color:#1f2937; font-size:14px; line-height:1.6; }
} }
.bank-options { display:grid; gap:4px; .bank-options { display:grid; gap:4px;
span { color:#5a7a9a; font-size:13px; line-height:1.55; } span { color:#6b7280; font-size:13px; line-height:1.55; }
b { margin-right:6px; color:#1e88e5; font-weight:700; } b { margin-right:6px; color:#2563eb; font-weight:700; }
} }
</style> </style>

@ -410,7 +410,7 @@
<span class="step-number">{{ index + 1 }}</span> <span class="step-number">{{ index + 1 }}</span>
<el-input v-model="step.name" placeholder="步骤名称" /> <el-input v-model="step.name" placeholder="步骤名称" />
<template v-if="index === 0 && supportsStepOneChoice(taskForm.taskKey)"> <template v-if="index === 0 && supportsStepOneChoice(taskForm.taskKey)">
<el-button v-if="!isReadonly" class="step-question-btn" @click="choiceEditorVisible = true"> <el-button v-if="!isReadonly" type="primary" class="step-question-btn" @click="choiceEditorVisible = true">
编辑题目{{ stepOneQuestionCount ? `(${stepOneQuestionCount}题)` : "" }} 编辑题目{{ stepOneQuestionCount ? `(${stepOneQuestionCount}题)` : "" }}
</el-button> </el-button>
<span v-else class="step-question-tag">已配置 {{ stepOneQuestionCount }} 道题</span> <span v-else class="step-question-tag">已配置 {{ stepOneQuestionCount }} 道题</span>

@ -362,7 +362,7 @@
<span class="step-number">{{ index + 1 }}</span> <span class="step-number">{{ index + 1 }}</span>
<el-input v-model="step.name" placeholder="步骤名称" /> <el-input v-model="step.name" placeholder="步骤名称" />
<template v-if="index === 0 && supportsStepOneChoice(taskForm.taskKey)"> <template v-if="index === 0 && supportsStepOneChoice(taskForm.taskKey)">
<el-button v-if="!isReadonly" class="step-question-btn" <el-button v-if="!isReadonly" type="primary" class="step-question-btn"
@click="choiceEditorVisible = true"> @click="choiceEditorVisible = true">
编辑题目{{ stepOneQuestionCount ? `(${stepOneQuestionCount}题)` : "" }} 编辑题目{{ stepOneQuestionCount ? `(${stepOneQuestionCount}题)` : "" }}
</el-button> </el-button>

Loading…
Cancel
Save