style: refine teacher exam workspace

src/views/teacherEnd/exam/index.vue

@@ -29,8 +29,8 @@
             <el-button link type="primary" @click="openQuestion(row)">编辑</el-button>
             <el-button link type="danger" @click="removeQuestion(row)">删除</el-button>
           </template></el-table-column>
+          <template #empty><el-empty class="table-empty" :image-size="92" description="暂无题目" /></template>
         </el-table>
-        <el-empty v-if="!loading && !questions.length" description="暂无题目" />
       </el-tab-pane>
 
       <el-tab-pane label="考评管理" name="exams">
@@ -59,8 +59,8 @@
               <el-button link type="danger" @click="removeExam(row)">删除</el-button>
             </template>
           </template></el-table-column>
+          <template #empty><el-empty class="table-empty" :image-size="92" description="暂无考试" /></template>
         </el-table>
-        <el-empty v-if="!loading && !exams.length" description="暂无考试" />
       </el-tab-pane>
     </el-tabs>
 
@@ -137,15 +137,244 @@ function formatTime(value) { return value ? new Date(value).toLocaleString("zh-C
 </script>
 
 <style scoped lang="scss">
-.exam-admin { color: #1f2937; }
+.exam-admin.app-container {
-.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; h1 { margin: 0; font-size: 24px; letter-spacing: 0; } p { margin: 6px 0 0; color: #6b7280; } }
+  --exam-accent: #39c9ff;
-.workspace-tabs { --el-color-primary: #176b87; :deep(.el-tabs__header) { margin-bottom: 18px; } }
+  --exam-text: #eaf8ff;
-.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; .el-select { width: 150px; } .el-input { width: 260px; } }
+  --exam-muted: #9fc2d8;
-.toolbar-spacer { flex: 1; }
+  --exam-border: rgba(69, 185, 236, 0.3);
-.data-table { width: 100%; border-top: 1px solid #e5e7eb; }
+  position: relative;
-.option-editor { width: 100%; }
+  min-height: 0 !important;
-.option-row { display: grid; grid-template-columns: 28px 42px 1fr 36px; align-items: center; gap: 6px; margin-bottom: 10px; }
+  overflow: hidden;
-.option-label { font-weight: 700; }
+  color: var(--exam-text);
-.file-name { margin-left: 12px; color: #176b87; }
+  background:
-@media (max-width: 760px) { .page-head, .toolbar { align-items: stretch; flex-direction: column; } .toolbar-spacer { display: none; } .toolbar .el-input, .toolbar .el-select { width: 100%; } }
+    radial-gradient(circle at 88% 0%, rgba(27, 126, 194, 0.16), transparent 31%),
+    linear-gradient(145deg, rgba(6, 25, 40, 0.92), rgba(3, 13, 24, 0.9));
+}
+
+.exam-admin::before {
+  position: absolute;
+  top: 0;
+  right: 28px;
+  left: 28px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(79, 207, 255, 0.72), transparent);
+  content: "";
+}
+
+.page-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 10px;
+  padding: 4px 2px 8px;
+
+  h1 {
+    margin: 0;
+    color: #f4fbff;
+    font-size: 26px;
+    line-height: 1.3;
+    letter-spacing: 0.02em;
+    text-shadow: 0 0 18px rgba(58, 199, 255, 0.16);
+  }
+
+  p {
+    margin: 7px 0 0;
+    color: var(--exam-muted);
+    font-size: 14px;
+  }
+}
+
+.workspace-tabs {
+  --el-color-primary: var(--exam-accent);
+
+  :deep(.el-tabs__header) {
+    margin-bottom: 18px;
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+    background-color: rgba(99, 187, 226, 0.26);
+  }
+
+  :deep(.el-tabs__item) {
+    height: 44px;
+    padding: 0 24px;
+    color: #aac9dc;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  :deep(.el-tabs__item:hover),
+  :deep(.el-tabs__item.is-active) {
+    color: #73ddff;
+  }
+
+  :deep(.el-tabs__active-bar) {
+    height: 3px;
+    border-radius: 3px 3px 0 0;
+    background: linear-gradient(90deg, #27c9ff, #5be4ef);
+    box-shadow: 0 0 12px rgba(39, 201, 255, 0.45);
+  }
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+  padding: 14px;
+  border: 1px solid rgba(53, 162, 214, 0.25);
+  border-radius: 10px;
+  background: rgba(2, 18, 31, 0.6);
+  box-shadow: inset 0 1px 0 rgba(157, 224, 255, 0.04);
+
+  .el-select {
+    width: 160px;
+  }
+
+  .el-input {
+    width: 280px;
+  }
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+:deep(.toolbar .el-input__wrapper),
+:deep(.toolbar .el-select__wrapper) {
+  min-height: 38px;
+  border-color: rgba(71, 181, 229, 0.42);
+  background: rgba(3, 28, 45, 0.92);
+}
+
+:deep(.toolbar .el-input__inner),
+:deep(.toolbar .el-select__selected-item),
+:deep(.toolbar .el-select__placeholder) {
+  color: #e6f7ff;
+}
+
+:deep(.toolbar .el-input__inner::placeholder) {
+  color: #7fa5bc;
+}
+
+:deep(.toolbar .el-button:not(.el-button--primary)) {
+  min-height: 38px;
+  color: #d8f2ff;
+  border-color: rgba(80, 181, 229, 0.46);
+  background: rgba(5, 32, 50, 0.88);
+}
+
+:deep(.toolbar .el-button:not(.el-button--primary):hover),
+:deep(.toolbar .el-button:not(.el-button--primary):focus) {
+  color: #ffffff;
+  border-color: rgba(91, 217, 255, 0.82);
+  background: rgba(10, 63, 91, 0.92);
+  box-shadow: 0 0 16px rgba(28, 174, 226, 0.14);
+}
+
+.data-table {
+  --el-table-border-color: rgba(59, 164, 213, 0.24);
+  --el-table-header-text-color: #e5f7ff;
+  --el-table-text-color: #cce7f6;
+  --el-table-row-hover-bg-color: rgba(16, 100, 143, 0.22);
+  width: 100%;
+  margin-top: 0 !important;
+  border: 1px solid rgba(59, 164, 213, 0.24);
+  border-radius: 10px;
+  background: rgba(2, 16, 27, 0.62);
+}
+
+:deep(.data-table th.el-table__cell) {
+  height: 50px;
+  padding: 0;
+  color: #e9f8ff !important;
+  background: linear-gradient(180deg, rgba(14, 77, 111, 0.98), rgba(8, 49, 75, 0.98)) !important;
+}
+
+:deep(.data-table td.el-table__cell) {
+  padding: 13px 0;
+  color: #cce7f6;
+  border-bottom-color: rgba(51, 143, 187, 0.18);
+  background: rgba(2, 17, 29, 0.74);
+}
+
+:deep(.data-table .el-table__empty-block) {
+  min-height: 238px;
+  background:
+    radial-gradient(circle at 50% 42%, rgba(37, 147, 196, 0.1), transparent 28%),
+    rgba(2, 15, 25, 0.5);
+}
+
+:deep(.table-empty) {
+  padding: 26px 0 30px;
+}
+
+:deep(.table-empty .el-empty__description) {
+  margin-top: 12px;
+}
+
+:deep(.table-empty .el-empty__description p) {
+  color: #9fc4d9;
+  font-size: 14px;
+}
+
+.option-editor {
+  width: 100%;
+}
+
+.option-row {
+  display: grid;
+  grid-template-columns: 28px 42px 1fr 36px;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.option-label {
+  font-weight: 700;
+}
+
+.file-name {
+  margin-left: 12px;
+  color: var(--exam-accent);
+}
+
+@media (max-width: 960px) {
+  .toolbar-spacer {
+    flex-basis: 100%;
+    height: 0;
+  }
+}
+
+@media (max-width: 760px) {
+  .exam-admin.app-container {
+    padding: 16px 14px 20px;
+  }
+
+  .page-head,
+  .toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .page-head {
+    gap: 14px;
+  }
+
+  .toolbar-spacer {
+    display: none;
+  }
+
+  .toolbar .el-input,
+  .toolbar .el-select {
+    width: 100%;
+  }
+
+  :deep(.toolbar .el-button) {
+    width: 100%;
+  }
+}
 </style>