［修改］成绩管理、题目管理样式

mock/modules/question/index.js

@@ -6,18 +6,28 @@ const QuestionTypeSerializer = require("../../serializers/question/QuestionTypeS
 //获取全部题目分类
 router.route("/teacher/questionType").get((req, res) => {
   res.send({
-    data: [
-      QuestionTypeSerializer(),
-      QuestionTypeSerializer(),
-      QuestionTypeSerializer()
-    ]
+    data: [QuestionTypeSerializer(), QuestionTypeSerializer()]
   });
 });
 
 //按题目分类获得题目(分页) || 根据作业分类获得题目
 router.route("/teacher/questions").get((req, res) => {
   res.send({
-    data: [QuestionSerializer(), QuestionSerializer(), QuestionSerializer()],
+    data: [
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer(),
+      QuestionSerializer()
+    ],
     pageNum: 1
   });
 });

mock/serializers/question/QuestionSerializer.js

@@ -22,9 +22,9 @@ const fileSerializer = require("../FileSerializer");
 module.exports = () => {
   return {
     id: makeId(),
-    name: "物流系统需求规格说明书",
+    name: "独立的小易",
     description:
-      "某公司为xxx快递公司，请为该公司设计一个物流管理系统...此物流管理系统的用户分别为，管理员、快递员",
+      "小易为了向他的父母表现他已经长大独立了,他决定搬出去自己居住一段时间。一个人生活增加了许多花费: 小易每天必须吃一个水果并且需要每天支付x元的房屋租金。当前小易手中已经有f个水果和d元钱,小易也能去商店购买一些水果,商店每个水果售卖p元。小易为了表现他独立生活的能力,希望能独立生活的时间越长越好,小易希望你来帮他计算一下他最多能独立生活多少天。",
     assignmentType: {
       name: "DOCUMENT",
       value: "文档作业"

src/layouts/courseLayouts/LayoutStructure.vue

@@ -87,7 +87,7 @@ $top-section-height: 4.25rem;
 .menu-section {
   //min-width: $menu-width;
   //width: $left-width-calc;
-  width: 300px;
+  max-width: 300px;
   /*background: white;*/
   /*border-right: 3px solid rgb(159, 148, 254);*/
   padding-left: $left-padding-calc;

src/views/teacher/Question/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '查看题目', path: 'question' }]">
+    <page-header :routes="[{ name: `查看题目`, path: 'question' }]">
       <template slot="title">
         查看题目
       </template>
@@ -37,27 +37,20 @@
           <b-table
             :data="data"
             paginated
-            per-page="5"
+            per-page="10"
             detailed
             detail-key="id"
-            @details-open="
-              (row, index) => $toast.open(`Expanded ${row.user.first_name}`)
-            "
           >
             <template slot-scope="props">
               <b-table-column field="id" label="ID" width="40" numeric sortable>
-                <!--{{ props.row.id }}-->1
+                {{ props.row.id }}
               </b-table-column>
 
-              <b-table-column field="user.first_name" label="题目名称">
+              <b-table-column label="题目名称">
                 {{ props.row.name }}
               </b-table-column>
 
-              <b-table-column
-                field="user.last_name"
-                label="题目描述"
-                width="400"
-              >
+              <b-table-column label="题目描述" width="400">
                 <div class="description">{{ props.row.description }}</div>
               </b-table-column>
 
@@ -67,8 +60,10 @@
                 sortable
                 centered
               >
-                <span class="tag is-success">
-                  {{ props.row.difficulty == 1 ? "简单" : "困难" }}
+                <span
+                  :class="['tag', `${difficultyClass(props.row.difficulty)}`]"
+                >
+                  {{ difficultyType(props.row.difficulty) }}
                 </span>
               </b-table-column>
 
@@ -80,23 +75,31 @@
               >
                 {{ props.row.expectTime }}分钟
               </b-table-column>
-              <b-table-column label="题目标签">
-                {{ props.row.assignmentType.value }}
-              </b-table-column>
             </template>
 
             <template slot="detail" slot-scope="props">
               <article class="media">
-                <!--<figure class="media-left">-->
-                <!--<p class="image is-64x64">-->
-                <!--<img src="/static/img/placeholder-128x128.png">-->
-                <!--</p>-->
-                <!--</figure>-->
                 <div class="media-content">
                   <div class="content">
-                    <p>
+                    <p class="detail-content">
                       <strong>{{ props.row.name }}</strong>
-                      <small>@{{ props.row.expectTime }}分钟</small> <br />
+                      <small
+                        ><b-tag type="is-info"
+                          >{{ props.row.expectTime }}分钟</b-tag
+                        ></small
+                      >
+                      <small
+                        ><b-tag
+                          :type="`${difficultyClass(props.row.difficulty)}`"
+                          >{{ difficultyType(props.row.difficulty) }}</b-tag
+                        ></small
+                      >
+                      <small
+                        ><b-tag type="is-link">{{
+                          props.row.assignmentType.value
+                        }}</b-tag></small
+                      >
+                      <br /><br />
                       {{ props.row.description }}
                     </p>
                   </div>
@@ -169,6 +172,32 @@ export default {
       value => (this.review = value.data)
     );
     getTeacherQuestions().then(value => (this.data = value.data));
+  },
+  methods: {
+    difficultyType: level => {
+      switch (level) {
+        case 1:
+          return "简单";
+        case 2:
+          return "中等";
+        case 3:
+          return "困难";
+        default:
+          return "--";
+      }
+    },
+    difficultyClass: level => {
+      switch (level) {
+        case 1:
+          return "is-success";
+        case 2:
+          return "is-warning";
+        case 3:
+          return "is-danger";
+        default:
+          return "is-link";
+      }
+    }
   }
 };
 </script>
@@ -199,4 +228,13 @@ export default {
   word-break: break-all;
   display: -webkit-box;
 }
+.detail-content {
+  strong {
+    font-size: 1.2rem;
+    margin-right: 10px;
+  }
+  small {
+    margin-right: 10px;
+  }
+}
 </style>

src/views/teacher/Result/index.vue

@@ -19,7 +19,9 @@
           </b-field>
         </div>
         <!--成绩图表-->
-        <div class="chart"><canvas id="result-chart"></canvas></div>
+        <div class="chart">
+          <canvas id="result-chart" style="width: 100% !important;"></canvas>
+        </div>
         <!--题目table-->
         <div class="question-list">
           <b-table :data="data" paginated per-page="5" detailed detail-key="id">
@@ -451,10 +453,13 @@ export default {
 }
 .homework-layout {
   display: flex;
+  justify-content: space-between;
   .document-homework {
     margin-right: 3rem;
     .homework-class {
       font-weight: bold;
+      border-bottom: 1px solid #dbdbdb;
+      margin-bottom: 10px;
     }
   }
 }