style: 学生测试界面一些样式

src/views/quiz/QuizView.vue

@@ -1,15 +1,22 @@
 <template>
-  <tab-side-component>
-    <back-title>具体课件的测验（学生）</back-title>
-    <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: 'student-quiz-detail', params: { quizId: item.id }}">
-        <button>详情</button>
-      </router-link>
+  <div class="quiz-view">
+    <back-title>{{slideInfo ? slideInfo.name + '的所有测验' : "加载中..."}}</back-title>
+    <div v-if="quizList === null" class="no-content-warning">
+      加载中...
     </div>
-  </tab-side-component>
+    <div v-for="item in quizList" :key="item.id" class="quiz-card">
+      <div class="quiz-info">
+        <div>{{ item.name }}</div>
+        <div>测试时间：{{ SlideStateTranslation[item.quizTime] }}</div>
+        <div>测试状态：{{ QuizStateNaming[item.state] }}</div>
+      </div>
+      <div class="quiz-action">
+        <router-link :to="{ name: 'student-quiz-detail', params: { quizId: item.id }}">
+          <c-button theme="green" icon="more">详情</c-button>
+        </router-link>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -17,23 +24,33 @@ 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 { getSlideInfo } from '@/server/slide'
+import CButton from '@/components/Basic/CButton'
+
 export default {
   name: 'QuizView',
-  components: { TabSideComponent, BackTitle },
-  data() {
+  components: { CButton, BackTitle },
+  data () {
     return {
-      quizList: [],
+      quizList: null,
+      slideInfo: null,
 
       SlideStateTranslation,
       QuizStateNaming
     }
   },
-  mounted() {
+  mounted () {
     this.fetchQuiz()
   },
   methods: {
-    fetchQuiz() {
+    fetchSlideInfo () {
+      getSlideInfo({ slideId: this.$route.params }).then(res => {
+        this.slideInfo = res
+      }).catch(err => {
+        this.$setErrorMessage(err.response.data.msg)
+      })
+    },
+    fetchQuiz () {
       const { slideId } = this.$route.params
       getQuizList({ slideId })
         .then(res => (this.quizList = res.quizzes))
@@ -44,9 +61,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.questions {
+.quiz-view {
   margin: 0 auto;
-  max-width: 1100px;
+  max-width: 575px;
   padding: 64px 24px;
 }
+
+.quiz-card {
+  margin: 24px 0;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid #cadaea;
+  border-radius: 6px;
+
+  .quiz-info {
+    margin: 8px 0;
+  }
+  .quiz-action {
+
+  }
+}
 </style>

src/views/student/components/StudentDoQuiz.vue

@@ -1,29 +1,30 @@
 <template>
-  <div>
-    <back-title>{{ quiz.name }}</back-title>
+  <div class="student-do-quiz">
+    <back-title>
+      {{ quiz.name }}
+    </back-title>
     <form @submit.prevent="handleFormSubmit">
-      <button>提交</button>
-      <div :key="question.id" v-for="(question, index) in quiz.questions">
-        <div>{{ index + 1 }}.</div>
-        <markdown-section :raw="question.stem" />
+      <div class="question-card" :key="question.id" v-for="(question, index) in quiz.questions">
+        <div class="index">题号：{{ index + 1 }}</div>
+        <markdown-section :raw="question.stem"/>
         <div v-if="question.kind === QuestionKind.choice">
-          <label :key="index" v-for="(item, index) in question.options">
-            <input v-model="question.studentAnswer" type="radio" :value="index" />
-            <markdown-section style="display: inline" :raw="item" />
+          <label :key="index" v-for="(item, index) in question.options" class="choice-to-select-answer">
+            <input v-model="question.studentAnswer" type="radio" :value="index"/>
+            <markdown-section style="display: inline" :raw="item"/>
           </label>
         </div>
         <div v-else-if="question.kind === QuestionKind.trueOrFalse">
           <label>
-            <input v-model="question.studentAnswer" type="radio" :value="true" />
+            <input v-model="question.studentAnswer" type="radio" :value="true"/>
             √
           </label>
           <label>
-            <input v-model="question.studentAnswer" type="radio" :value="false" />
+            <input v-model="question.studentAnswer" type="radio" :value="false"/>
             ×
           </label>
         </div>
       </div>
-      <button>提交</button>
+      <c-button icon="check" class="mb-24" theme="green">确认提交</c-button>
     </form>
   </div>
 </template>
@@ -33,11 +34,12 @@ import { getQuizById, submitQuiz } from '@/server/quiz'
 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'
 
 export default {
   name: 'StudentDoQuiz',
-  components: { MarkdownSection, BackTitle },
-  data() {
+  components: { CButton, MarkdownSection, BackTitle },
+  data () {
     return {
       quiz: createDefaultQuiz(),
       hasSubmit: false,
@@ -54,17 +56,17 @@ export default {
       next(false)
     }
   },
-  mounted() {
+  mounted () {
     this.fetchQuizDetail()
   },
   methods: {
-    fetchQuizDetail() {
+    fetchQuizDetail () {
       const { quizId } = this.$route.params
       getQuizById(quizId)
         .then(res => (this.quiz = res))
         .catch(err => this.$setErrorMessage(err.response.data.msg))
     },
-    handleFormSubmit() {
+    handleFormSubmit () {
       const { quizId } = this.$route.params
       submitQuiz({ quizId, answers: this.quiz.questions })
         .then(() => {
@@ -79,3 +81,39 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import "~@/style/theme.scss";
+
+.back-title {
+  display: flex;
+  align-items: center;
+}
+
+.student-do-quiz {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+.choice-to-select-answer {
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  input {
+    margin-right: 8px;
+  }
+}
+
+.question-card {
+  margin: 32px 0;
+}
+
+.index {
+  color: $theme-blue;
+  padding: 6px 8px;
+  margin: 8px -8px;
+  background-color: $theme-blue-transparent;
+}
+</style>

src/views/student/components/StudentQuizDetail.vue

@@ -1,13 +1,13 @@
 <template>
   <tab-side-component>
     <back-title>{{quiz.name}}</back-title>
-    <router-link v-if="quiz.state === QuizState.ongoing" :to="`${$route.path}/do-quiz`">
-      <button>做题</button>
-    </router-link>
     <div v-if="quiz.state === QuizState.closed">
       <div>正确：{{passQuestionNums}} 题</div>
       <div>总共：{{totalQuestionNums}} 题</div>
     </div>
+    <router-link v-if="quiz.state === QuizState.ongoing" :to="`${$route.path}/do-quiz`">
+      <c-button theme="green" standout block>做题</c-button>
+    </router-link>
     <quiz-detail-factory :quiz-detail="quiz" />
   </tab-side-component>
 </template>
@@ -19,10 +19,11 @@ import { getQuizById } from '@/server/quiz'
 import QuizDetailFactory from '@/views/quiz/components/QuizDetailFactory'
 import { QuizState } from '@/server/enums/quiz-state'
 import { createDefaultQuiz } from '@/views/quiz/utils/default'
+import CButton from '@/components/Basic/CButton'
 
 export default {
   name: 'StudentQuizDetail',
-  components: { QuizDetailFactory, TabSideComponent, BackTitle },
+  components: { CButton, QuizDetailFactory, TabSideComponent, BackTitle },
   data() {
     return {
       quiz: createDefaultQuiz(),

src/views/student/tabs/StudentQuiz.vue

@@ -1,21 +1,63 @@
 <template>
   <div class="tab complex-tab">
     <div class="left">
-      <h1 class="title">课程测验 <c-tag theme="green">学生</c-tag></h1>
-      <div class="sub-title">待完成的测验</div>
-      <router-link :key="quiz.id" :to="`/student/quiz/${quiz.id}`" v-for="quiz in ongoingQuizzes">
-        <div>{{ quiz.name }}</div>
-        <div>{{ quiz.course && quiz.course.name }}</div>
-        <div>{{ quiz.slide && quiz.slide.name }}</div>
-      </router-link>
-      <div class="sub-title">已完成的测验 & 结果</div>
-      <router-link :key="quiz.id" :to="`/student/quiz/${quiz.id}`" v-for="quiz in closedQuizzes">
-        <div>{{ quiz.name }}</div>
-        <div>{{ quiz.course && quiz.course.name }}</div>
-        <div>{{ quiz.slide && quiz.slide.name }}</div>
-      </router-link>
+      <h1 class="title">课程测验
+        <c-tag theme="green">学生</c-tag>
+      </h1>
+      <div class="quiz-show-type-bar mb-16">
+        <c-button @click="showOngoingQuizzes = true" :right="6" block :theme="showOngoingQuizzes ? 'green' : 'normal'">
+          正在进行
+        </c-button>
+        <c-button @click="showOngoingQuizzes = false" :left="6" block :theme="showOngoingQuizzes ? 'normal' : 'green'">
+          已结束
+        </c-button>
+      </div>
+      <div v-if="showOngoingQuizzes">
+        <div class="sub-title">
+          待完成的测验
+          <c-button :theme="showMore ? 'blue' : 'normal'" :left="8" text
+                    :icon="showMore ? 'unfold_less' : 'unfold_more'"
+                    @click="showMore = !showMore">
+            {{showMore ? '收起' : '展开'}}
+          </c-button>
+        </div>
+        <div class="no-content-warning" v-if="ongoingQuizzes === null">加载中...</div>
+        <div class="quiz-link" :key="quiz.id" v-for="quiz in ongoingQuizzes">
+          <router-link :to="`/student/quiz/${quiz.id}`">
+            <div class="quiz-link--title">{{ quiz.name }}</div>
+            <show-transition-small>
+              <div v-if="showMore" class="quiz-link--info">对应课程：{{ quiz.course && quiz.course.name }}</div>
+            </show-transition-small>
+            <show-transition-small>
+              <div v-if="showMore" class="quiz-link--info">对应课件：{{ quiz.slide && quiz.slide.name }}</div>
+            </show-transition-small>
+          </router-link>
+        </div>
+      </div>
+      <div v-if="!showOngoingQuizzes">
+        <div class="sub-title">
+          已完成的测验
+          <c-button :theme="showMore ? 'blue' : 'normal'" :left="8" text
+                    :icon="showMore ? 'unfold_less' : 'unfold_more'"
+                    @click="showMore = !showMore">
+            {{showMore ? '收起' : '展开'}}
+          </c-button>
+        </div>
+        <div class="no-content-warning" v-if="closedQuizzes === null">加载中...</div>
+        <div :key="quiz.id" class="quiz-link" v-for="quiz in closedQuizzes">
+          <router-link :to="`/student/quiz/${quiz.id}`">
+            <div class="quiz-link--title">{{ quiz.name }}</div>
+            <show-transition-small>
+              <div v-if="showMore" class="quiz-link--info">对应课程：{{ quiz.course && quiz.course.name }}</div>
+            </show-transition-small>
+            <show-transition-small>
+              <div v-if="showMore" class="quiz-link--info">对应课件：{{ quiz.slide && quiz.slide.name }}</div>
+            </show-transition-small>
+          </router-link>
+        </div>
+      </div>
     </div>
-    <router-view />
+    <router-view/>
   </div>
 </template>
 
@@ -23,16 +65,20 @@
 import { getQuizList } from '@/server/quiz'
 import { QuizState } from '@/server/enums/quiz-state'
 import CTag from '@/components/Basic/CTag'
+import CButton from '@/components/Basic/CButton'
+import ShowTransitionSmall from '@/animations/ShowTransitionSmall'
 
 export default {
-  components: { CTag },
-  data() {
+  components: { ShowTransitionSmall, CButton, CTag },
+  data () {
     return {
-      ongoingQuizzes: [],
-      closedQuizzes: []
+      ongoingQuizzes: null,
+      closedQuizzes: null,
+      showOngoingQuizzes: true,
+      showMore: false
     }
   },
-  mounted() {
+  mounted () {
     getQuizList({ state: QuizState.ongoing })
       .then(res => (this.ongoingQuizzes = res.quizzes))
       .catch(err => this.$setErrorMessage(err.response.data.msg))
@@ -46,4 +92,32 @@ export default {
 <style lang="scss" scoped>
 @import "~@/style/theme.scss";
 @import "~@/views/shared/tab-common";
+
+.quiz-show-type-bar {
+  display: flex;
+}
+.sub-title {
+  display: flex;
+  align-items: center;
+}
+.quiz-link {
+  padding: 2px 8px;
+  border: 1px solid #cadaea;
+  border-radius: 6px;
+  margin: 12px 0;
+
+  &--title {
+    margin: 6px 0;
+  }
+
+  &--info {
+    font-size: 12px;
+    line-height: 16px;
+    color: #7a8a9a;
+  }
+
+  &:hover {
+    background-color: $theme-background-grey;
+  }
+}
 </style>