style: 测试界面merge

src/components/Cards/QuizCard.vue

@@ -99,6 +99,6 @@ export default {
   }
 
   .c-icon {
-    transform: scale(1.3);
+    transform: scale(1.1);
   }
 </style>

src/views/quiz/QuizView.vue

@@ -1,11 +1,11 @@
 <template>
-  <tab-side-component>
-    <back-title>{{slideInfo ? slideInfo.name + '的所有测验' : "加载中..."}}</back-title>
+  <div class="quiz-view">
+    <back-title>{{slideInfo ? slideInfo.name + '测验列表' : "加载中..."}}</back-title>
     <quiz-card
       v-for="item in quizList" :key="item.id"
       :nav-path="{ name: 'student-quiz-detail', params: { quizId: item.id } }"
       :quiz="item" hide-quiz-state hide-quiz-time />
-  </tab-side-component>
+  </div>
 </template>
 
 <script>
@@ -13,12 +13,11 @@ import BackTitle from '@/components/Basic/BackTitle'
 import SlideStateTranslation from '@/server/enums/slide-state-translation'
 import { QuizStateNaming } from '@/server/enums/quiz-state'
 import { getQuizList } from '@/server/quiz'
-import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import QuizCard from '@/components/Cards/QuizCard'
 import { getSlideInfo } from '@/server/slide'
 export default {
   name: 'QuizView',
-  components: { QuizCard, TabSideComponent, BackTitle },
+  components: { QuizCard, BackTitle },
   data() {
     return {
       quizList: null,
@@ -30,10 +29,11 @@ export default {
   },
   mounted () {
     this.fetchQuiz()
+    this.fetchSlideInfo()
   },
   methods: {
     fetchSlideInfo () {
-      getSlideInfo({ slideId: this.$route.params }).then(res => {
+      getSlideInfo({ slideId: this.$route.params.slideId }).then(res => {
         this.slideInfo = res
       }).catch(err => {
         this.$setErrorMessage(err.response.data.msg)
@@ -50,9 +50,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.questions {
+.quiz-view {
   margin: 0 auto;
-  max-width: 1100px;
+  max-width: 600px;
   padding: 64px 24px;
 }
 </style>

src/views/quiz/components/QuizDetailFactory.vue

@@ -5,7 +5,7 @@
     <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 }}
-        <c-icon v-if="!isEmpty(item.pass)"
+        <c-icon v-if="!isEmpty(item.pass)" bold :size="20" :left="6"
                 :theme="item.pass ? 'green' : 'red'">
           {{ item.pass ? 'check' : 'close' }}
         </c-icon></div>
@@ -60,6 +60,8 @@ export default {
   color: #7a8a9a;
 }
 .index {
+  display: flex;
+  align-items: center;
   color: $theme-blue;
   padding: 6px 8px;
   margin: 0 -8px;

src/views/student/components/StudentDoQuiz.vue

@@ -2,7 +2,7 @@
   <div class="do-quiz">
     <back-title>{{ quiz.name }}</back-title>
     <form @submit.prevent="handleFormSubmit">
-      <c-button class="mb-16" theme="green" block>提交</c-button>
+      <c-button class="mb-16" theme="green" icon="check">提交答案</c-button>
       <div class="quiz-list mb-16" :key="question.id" v-for="(question, index) in quiz.questions">
         <div class="quiz-list__index">{{ index + 1 }}.</div>
         <div>
@@ -17,17 +17,17 @@
           <div v-else-if="question.kind === QuestionKind.trueOrFalse">
             <label class="option">
               <input v-model="question.studentAnswer" type="radio" :value="true" />
-              √
+              <c-icon>check</c-icon>
             </label>
             <label class="option">
               <input v-model="question.studentAnswer" type="radio" :value="false" />
-              ×
+              <c-icon>close</c-icon>
             </label>
           </div>
         </div>
 
       </div>
-      <c-button class="mb-16" theme="green" block>提交</c-button>
+      <c-button class="mb-16" theme="green" icon="check">提交答案</c-button>
     </form>
   </div>
 </template>
@@ -38,10 +38,11 @@ import { createDefaultQuiz } from '@/views/quiz/utils/default'
 import QuestionKind from '@/server/enums/question-kind'
 import MarkdownSection from '@/views/quiz/components/MarkdownSection'
 import CButton from '@/components/Basic/CButton'
+import CIcon from '@/components/Basic/CIcon'
 
 export default {
   name: 'StudentDoQuiz',
-  components: { CButton, MarkdownSection, BackTitle },
+  components: { CIcon, CButton, MarkdownSection, BackTitle },
   data() {
     return {
       quiz: createDefaultQuiz(),
@@ -88,7 +89,7 @@ export default {
 <style lang="scss" scoped>
   .do-quiz {
     margin: 0 auto;
-    max-width: 1100px;
+    max-width: 1000px;
     padding: 64px 24px;
   }
   .quiz-list{
@@ -104,7 +105,7 @@ export default {
       margin-top: 8px;
 
       input{
-        margin-right: 4px;
+        margin-right: 12px;
       }
     }
   }

src/views/student/components/StudentQuizDetail.vue

@@ -1,16 +1,15 @@
 <template>
-  <tab-side-component>
+  <div class="student-quiz-detail">
     <back-title>{{quiz.name}}</back-title>
     <router-link v-if="quiz.state === QuizState.ongoing" :to="{ name: 'student-do-quiz', params: { quizId: quiz.id}}">
       <c-button class="mb-16" theme="green" icon="edit" block>做题</c-button>
     </router-link>
     <quiz-detail-factory :quiz-detail="quiz" />
-  </tab-side-component>
+  </div>
 </template>
 
 <script>
 import BackTitle from '@/components/Basic/BackTitle'
-import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import { getQuizById } from '@/server/quiz'
 import QuizDetailFactory from '@/views/quiz/components/QuizDetailFactory'
 import { QuizState } from '@/server/enums/quiz-state'
@@ -19,7 +18,7 @@ import CButton from '@/components/Basic/CButton'
 
 export default {
   name: 'StudentQuizDetail',
-  components: { CButton, QuizDetailFactory, TabSideComponent, BackTitle },
+  components: { CButton, QuizDetailFactory, BackTitle },
   data() {
     return {
       quiz: createDefaultQuiz(),
@@ -48,3 +47,10 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.student-quiz-detail {
+  max-width: 575px;
+  padding: 64px 24px;
+  margin: 0 auto;
+}
+</style>

src/views/student/tabs/StudentQuiz.vue

@@ -2,16 +2,38 @@
   <div class="tab complex-tab">
     <div class="left">
       <h1 class="title">课程测验 <c-tag theme="green">学生</c-tag></h1>
-      <div class="sub-title">待完成的测验</div>
-      <quiz-card
-        :key="quiz.id" v-for="quiz in ongoingQuizzes"
-        :nav-path="{ name: 'student-quiz-detail', params: { quizId: quiz.id } }"
-        :quiz="quiz" hide-quiz-state hide-quiz-time />
-      <div class="sub-title">已完成的测验 & 结果</div>
-      <quiz-card
-        :key="quiz.id" v-for="quiz in closedQuizzes"
-        :nav-path="{ name: 'student-quiz-detail', params: { quizId: quiz.id } }"
-        :quiz="quiz" hide-quiz-state hide-quiz-time />
+      <div class="show-quiz-type-bar mb-24">
+        <c-button block :right="6" @click="showOngoing = true" :theme="showOngoing ? 'green' : 'normal'">进行中</c-button>
+        <c-button block :left="6" @click="showOngoing = false" :theme="showOngoing ? 'normal' : 'green'">已结束</c-button>
+      </div>
+      <div v-if="showOngoing">
+        <div class="sub-title">
+          待完成测验
+          <c-button text :left="4" theme="blue" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
+            {{showMore ? '收起' : '展开'}}详情
+          </c-button>
+        </div>
+        <quiz-card
+          :hide-slide-name="!showMore"
+          :hide-course-name="!showMore"
+          :key="quiz.id" v-for="quiz in ongoingQuizzes"
+          :nav-path="{ name: 'student-quiz-detail', params: { quizId: quiz.id } }"
+          :quiz="quiz" hide-quiz-state hide-quiz-time />
+      </div>
+      <div v-else>
+        <div class="sub-title">
+          已结束测验
+          <c-button text :left="4" theme="blue" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
+            {{showMore ? '收起' : '展开'}}详情
+          </c-button>
+        </div>
+        <quiz-card
+          :hide-slide-name="!showMore"
+          :hide-course-name="!showMore"
+          :key="quiz.id" v-for="quiz in closedQuizzes"
+          :nav-path="{ name: 'student-quiz-detail', params: { quizId: quiz.id } }"
+          :quiz="quiz" hide-quiz-state hide-quiz-time />
+      </div>
     </div>
     <router-view />
   </div>
@@ -22,18 +44,33 @@ import { getQuizList } from '@/server/quiz'
 import { QuizState } from '@/server/enums/quiz-state'
 import CTag from '@/components/Basic/CTag'
 import QuizCard from '@/components/Cards/QuizCard'
+import CButton from '@/components/Basic/CButton'
 
 export default {
-  components: { QuizCard, CTag },
+  components: { CButton, QuizCard, CTag },
   data() {
     return {
       ongoingQuizzes: [],
-      closedQuizzes: []
+      closedQuizzes: [],
+      showOngoing: true,
+      showMore: false
+    }
+  },
+  watch: {
+    showOngoing (newValue) {
+      if (newValue) {
+        this.showMore = this.ongoingQuizzes.length < 5
+      } else {
+        this.showMore = this.closedQuizzes.length < 5
+      }
     }
   },
   mounted() {
     getQuizList({ state: QuizState.ongoing })
-      .then(res => (this.ongoingQuizzes = res.quizzes))
+      .then(res => {
+        this.ongoingQuizzes = res.quizzes
+        this.showMore = res.quizzes.length < 5
+      })
       .catch(err => this.$setErrorMessage(err.response.data.msg))
     getQuizList({ state: QuizState.closed })
       .then(res => (this.closedQuizzes = res.quizzes))
@@ -45,4 +82,13 @@ export default {
 <style lang="scss" scoped>
 @import "~@/style/theme.scss";
 @import "~@/views/shared/tab-common";
+
+.show-quiz-type-bar {
+  display: flex;
+}
+
+.sub-title {
+  display: flex;
+  align-items: center;
+}
 </style>