style: 教师界面测试部分的UI修改

src/animations/ShowTransition.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="show">
+  <transition name="show" mode="out-in">
     <slot></slot>
   </transition>
 </template>

src/views/quiz/CreateQuiz.vue

@@ -28,7 +28,7 @@ export default {
 <style lang="scss" scoped>
 .create-quiz {
   margin: 0 auto;
-  max-width: 1100px;
+  max-width: 1200px;
   padding: 32px 24px;
 }
 </style>

src/views/quiz/EditQuiz.vue

@@ -43,7 +43,7 @@ export default {
 <style scoped>
 .edit-quiz {
   margin: 0 auto;
-  max-width: 1100px;
+  max-width: 1200px;
   padding: 32px 24px;
 }
 </style>

src/views/quiz/QuizDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="quiz-detail">
     <back-title>{{ quizDetail.name }}</back-title>
     <quiz-result v-if="quizDetail.state === QuizState.closed" :quiz-id="$route.params.quizId" />
     <quiz-detail-factory :quiz-detail="quizDetail" />
@@ -36,3 +36,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.quiz-detail {
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 64px 24px;
+}
+</style>

src/views/quiz/TeacherQuizSetting.vue

@@ -8,7 +8,8 @@
       <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 v-for="item in quizList" :key="item.id" class="mt-24 quiz-card"
+         :class="item.state === QuizState.ongoing ? 'quiz-card-ongoing' : ''">
       <div class="content">
         <div class="content-title">{{ item.name }}</div>
         <div class="content-info">测试时间：{{ SlideStateTranslation[item.quizTime] }}</div>
@@ -16,7 +17,7 @@
       </div>
       <div class="actions">
         <router-link :to="{ name: 'quiz-detail', params: { quizId: item.id }}">
-          <c-button theme="green" icon="more">详情</c-button>
+          <c-button no-bold 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>
@@ -30,7 +31,7 @@
 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 { QuizStateNaming, QuizState } from '@/server/enums/quiz-state'
 import { getSlideInfo } from '@/server/slide'
 import CButton from '@/components/Basic/CButton'
 
@@ -43,7 +44,8 @@ export default {
       slideInfo: null,
 
       SlideStateTranslation,
-      QuizStateNaming
+      QuizStateNaming,
+      QuizState
     }
   },
   computed: {
@@ -71,6 +73,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/style/theme.scss";
 .teacher-quiz-setting {
   max-width: 575px;
   margin: 0 auto;
@@ -90,9 +93,11 @@ export default {
     div {
       margin: 8px 0;
     }
+
     .content-title {
       font-size: 16px;
     }
+
     .content-info {
       color: #7a8a9a;
     }
@@ -104,5 +109,9 @@ export default {
       margin: 8px;
     }
   }
+
+  &-ongoing {
+    background-color: lighten($theme-green-transparent, 25);
+  }
 }
 </style>

src/views/quiz/components/QuizDetailFactory.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div>测试时间：{{ SlideStateTranslation[quizDetail.quizTime] }}</div>
-    <div>测试状态：{{ QuizStateNaming[quizDetail.state] }}</div>
-    <div class="mb-32" :key="item.id" v-for="(item, index) in quizDetail.questions">
-      <div>{{ index + 1 }}.</div>
+    <div class="quiz-info">测试时间：{{ SlideStateTranslation[quizDetail.quizTime] }}</div>
+    <div class="quiz-info">测试状态：{{ QuizStateNaming[quizDetail.state] }}</div>
+    <div class="mt-32 mb-32" :key="item.id" v-for="(item, index) in quizDetail.questions">
+      <div class="index">题号：{{ index + 1 }}</div>
       <question-detail-factory :question="item" />
     </div>
   </div>
@@ -34,3 +34,15 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+@import "~@/style/theme.scss";
+.quiz-info {
+  margin: 12px 0;
+}
+.index {
+  color: $theme-blue;
+  padding: 6px 8px;
+  margin: 0 -8px;
+  background-color: $theme-blue-transparent;
+}
+</style>

src/views/quiz/components/QuizEditor.vue

@@ -14,14 +14,24 @@
         <c-select disabled-display="[ 未选择 ]" v-model="quiz.quizTime" class="mb-24" :list="selectItems"></c-select>
         <c-button theme="green" icon="check" block @click="handleSubmit">{{backTitle}}</c-button>
       </div>
+      <div class="sub-title mt-32">
+        测试题目列表
+        <c-button :left="4" @click="isFold = !isFold" text :icon="isFold ? 'unfold_more' : 'unfold_less'" theme="blue">
+          {{isFold ? '展开' : '收起'}}题目
+        </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">
           <div>题号：<span>{{ index + 1 }}</span></div>
           <div class="spacer"></div>
           <c-button @click="moveIndexQuestionUp(index)" text theme="blue" icon="arrow_upward">上移</c-button>
-          <c-button @click="moveIndexQuestionUp(index + 1)" :right="-8" text theme="green" icon="arrow_downward">下移</c-button>
+          <c-button @click="moveIndexQuestionUp(index + 1)" :right="-8" text theme="green" icon="arrow_downward">下移
+          </c-button>
+        </div>
+        <question-detail-factory v-if="!isFold" :question="question"/>
+        <div v-else class="question-preview">
+          题干概览：{{question.stem.length > 50 ? question.stem.substr(50) + '...' : question.stem}}
         </div>
-        <question-detail-factory :question="question"/>
       </div>
     </div>
     <div>
@@ -59,7 +69,8 @@ export default {
     return {
       quiz: { name: '', quizTime: '' },
       selectedQuestions: [],
-      unfoldList: {},
+      // 默认折叠题目，只显示题干
+      isFold: true,
 
       QuestionKindNaming,
       QuizStateNaming,
@@ -109,6 +120,11 @@ export default {
   color: #5a6a7a;
 }
 
+.sub-title {
+  display: flex;
+  align-items: center;
+}
+
 .quiz-editor {
   display: flex;
   width: 100%;
@@ -118,6 +134,7 @@ export default {
   & > div {
     margin: 0 24px;
     flex: 1;
+    width: 30%;
   }
 
   .quiz-form {
@@ -154,6 +171,7 @@ export default {
     margin: 0 auto;
 
     & > div {
+      width: unset;
       margin: unset;
     }
 
@@ -164,4 +182,10 @@ export default {
     }
   }
 }
+
+.question-preview {
+  margin: 24px 0 12px 0;
+  font-size: 14px;
+  word-break: break-all;
+}
 </style>