style: 教师几处quiz界面样式更新

src/views/quiz/CreateQuiz.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="create-quiz">
-    <quiz-editor @submit="handleSubmit" />
+    <quiz-editor back-title="创建测试" @submit="handleSubmit" />
   </div>
 </template>
 

src/views/quiz/EditQuiz.vue

@@ -1,18 +1,16 @@
 <template>
-  <div>
-    <back-title>修改测试</back-title>
-    <quiz-editor :init-quiz="initQuiz" @submit="handleSubmit" />
+  <div class="edit-quiz">
+    <quiz-editor back-title="修改测试" :init-quiz="initQuiz" @submit="handleSubmit" />
   </div>
 </template>
 
 <script>
-import BackTitle from '@/components/Basic/BackTitle'
 import { getQuizById, updateQuiz } from '@/server/quiz'
 import QuizEditor from '@/views/quiz/components/QuizEditor'
 
 export default {
   name: 'EditQuiz',
-  components: { QuizEditor, BackTitle },
+  components: { QuizEditor },
   data() {
     return {
       initQuiz: {}
@@ -43,5 +41,9 @@ export default {
 </script>
 
 <style scoped>
-
+.edit-quiz {
+  margin: 0 auto;
+  max-width: 1100px;
+  padding: 32px 24px;
+}
 </style>

src/views/quiz/QuestionDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="question-detail">
     <back-title>题目详情</back-title>
     <question-detail-factory :question="question" />
   </div>
@@ -28,3 +28,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.question-detail {
+  max-width: 575px;
+  margin: 0 auto;
+  padding: 64px 24px;
+}
+</style>

src/views/quiz/TeacherQuizSetting.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="teacher-quiz-setting">
-    <back-title>具体课件的测试列表</back-title>
+    <back-title>{{slideInfo ? slideInfo.name + '的所有测试' : '加载中...'}}</back-title>
     <router-link :to="{ name:'teacher-quiz-create', params: { slideId: this.slideId }}">
-      <button>新增测试</button>
+      <c-button theme="green" icon="add">新增测试</c-button>
     </router-link>
-    <router-link to="/questions"><button>题库管理</button></router-link>
-    <div v-for="item in quizList" :key="item.id">
-      <div>{{ item.name }}</div>
-      <div>测试时间：{{ SlideStateTranslation[item.quizTime] }}</div>
-      <div>测试状态：{{ QuizStateNaming[item.state] }}</div>
-      <router-link :to="{ name: 'quiz-detail', params: { quizId: item.id }}">
-        <button>详情</button>
-      </router-link>
-      <router-link :to="{ name: 'edit-quiz', params: { quizId: item.id }}">
-        <button>修改</button>
-      </router-link>
+    <router-link to="/questions">
+      <c-button theme="blue" :left="12" icon="assignment">题库管理</c-button>
+    </router-link>
+    <div v-if="quizList === null" class="no-content-warning">加载中...</div>
+    <div v-for="item in quizList" :key="item.id" class="mt-24 quiz-card">
+      <div class="content">
+        <div class="content-title">{{ item.name }}</div>
+        <div class="content-info">测试时间：{{ SlideStateTranslation[item.quizTime] }}</div>
+        <div class="content-info">测试状态：{{ QuizStateNaming[item.state] }}</div>
+      </div>
+      <div class="actions">
+        <router-link :to="{ name: 'quiz-detail', params: { quizId: item.id }}">
+          <c-button theme="green" icon="more">详情</c-button>
+        </router-link>
+        <router-link :to="{ name: 'edit-quiz', params: { quizId: item.id }}">
+          <c-button theme="blue" icon="edit">编辑</c-button>
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -24,28 +31,36 @@ import BackTitle from '@/components/Basic/BackTitle'
 import { getQuizList } from '@/server/quiz'
 import SlideStateTranslation from '@/server/enums/slide-state-translation'
 import { QuizStateNaming } from '@/server/enums/quiz-state'
+import { getSlideInfo } from '@/server/slide'
+import CButton from '@/components/Basic/CButton'
 
 export default {
   name: 'TeacherQuizSetting',
-  components: { BackTitle },
-  data() {
+  components: { CButton, BackTitle },
+  data () {
     return {
-      quizList: [],
+      quizList: null,
+      slideInfo: null,
 
       SlideStateTranslation,
       QuizStateNaming
     }
   },
   computed: {
-    slideId() {
+    slideId () {
       return this.$route.params.slideId
     }
   },
-  mounted() {
+  created () {
+    getSlideInfo({ slideId: this.slideId }).then(res => {
+      this.slideInfo = res
+    }).catch(err => {
+      this.$setErrorMessage(err.response.data.msg)
+    })
     this.fetchQuiz()
   },
   methods: {
-    fetchQuiz() {
+    fetchQuiz () {
       const { slideId } = this.$route.params
       getQuizList({ slideId })
         .then(res => (this.quizList = res.quizzes))
@@ -57,8 +72,37 @@ export default {
 
 <style lang="scss" scoped>
 .teacher-quiz-setting {
-  max-width: 1000px;
+  max-width: 575px;
   margin: 0 auto;
   padding: 64px 24px;
 }
+
+.quiz-card {
+  font-size: 14px;
+  border: 1px solid #cadaea;
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .content {
+    div {
+      margin: 8px 0;
+    }
+    .content-title {
+      font-size: 16px;
+    }
+    .content-info {
+      color: #7a8a9a;
+    }
+  }
+
+  .actions {
+    .c-button {
+      display: flex;
+      margin: 8px;
+    }
+  }
+}
 </style>

src/views/quiz/components/QuestionCard.vue

@@ -70,6 +70,7 @@ export default {
 
 .question-card__header {
   display: flex;
+  break-inside: auto;
 
   h3 {
     display: flex;

src/views/quiz/components/QuizEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="quiz-editor">
     <div>
-      <back-title>创建测试</back-title>
+      <back-title>{{backTitle}}</back-title>
       <div class="quiz-form">
         <div class="sub-title mb-16">测试详情</div>
         <div class="input-title mb-8">
@@ -12,7 +12,7 @@
           开放测试所需课件状态:
         </div>
         <c-select disabled-display="[ 未选择 ]" v-model="quiz.quizTime" class="mb-24" :list="selectItems"></c-select>
-        <c-button theme="green" icon="check" block @click="handleSubmit">创建测试</c-button>
+        <c-button theme="green" icon="check" block @click="handleSubmit">{{backTitle}}</c-button>
       </div>
       <div class="selected-question-card mt-24 mb-24" :key="question.id" v-for="(question, index) in selectedQuestions">
         <div class="selected-question-card-header">
@@ -49,6 +49,10 @@ export default {
     initQuiz: {
       type: Object,
       default: () => ({})
+    },
+    backTitle: {
+      type: String,
+      required: true
     }
   },
   data () {