Merge branch 'develop' into feature/page-components-bay

src/assets/scss/_variables.scss

@@ -130,7 +130,7 @@ $pre-background: $background !default;
 
 // Link colors
 
-$link: $blue !default;
+$link: #6172ec !default;
 $link-invert: $blue-invert !default;
 $link-visited: $purple !default;
 

src/layouts/courseLayouts/LayoutStructure.vue

@@ -93,11 +93,12 @@ $top-section-height: 4.25rem;
   /*border-right: 3px solid rgb(159, 148, 254);*/
   padding-left: $left-padding-calc;
   box-shadow: $default-shadow;
-  z-index: 99;
+  z-index: 31;
   /*TODO: 寻找更好的图片或背景颜色*/
   /*background-image: url("../../assets/sideBar.png");*/
   /*background-image: linear-gradient(to top, #493a9e 0%, #4f54e9 100%);*/
-  background: linear-gradient(to top, #7c71bd 0%, #4f62e9 100%);
+  /*background: linear-gradient(to top, #7c71bd 0%, #4f62e9 100%);*/
+  background: linear-gradient(to top, #7c71bdc7 0%, #6172ec 100%);
   background-size: cover;
   position: sticky;
   overflow-y: auto;
@@ -122,7 +123,8 @@ $top-section-height: 4.25rem;
       line-height: $top-section-height;
       margin: 0 -24px;
       /* background: black; */
-      background-color: #4f62e9;
+      background-color: transparent;
+      border-bottom: 2px solid rgba(255, 255, 255, 0.16);
       /*background-image: linear-gradient(to left, #4f62e9 0%, #161aa7 100%);*/
       padding-left: 24px;
       a {

src/router/routes.js

@@ -67,6 +67,10 @@ export default [
       {
         path: "question",
         component: () => import("@/views/teacher/Question")
+      },
+      {
+        path: "result",
+        component: () => import("@/views/teacher/Result")
       }
     ]
   },

src/views/teacher/Question/index.vue

@@ -4,12 +4,12 @@
       <ul>
         <li><router-link :to="{ name: 'HOME' }">所有课程</router-link></li>
         <li>
-          <router-link :to="`/course-teacher/${course.id}`">{{
+          <router-link :to="`/course-teacher/${course.id}/dashboard`">{{
             course.name
           }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="`/student-course/${course.id}/review`"
+          <router-link :to="`/student-course/${course.id}/question`"
             >查看题目</router-link
           >
         </li>
@@ -63,7 +63,7 @@
             </b-table-column>
 
             <b-table-column field="user.last_name" label="题目描述">
-              {{ props.row.description }}
+              <div class="description">{{ props.row.description }}</div>
             </b-table-column>
 
             <b-table-column
@@ -189,4 +189,13 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  word-wrap: break-word;
+  word-break: break-all;
+  display: -webkit-box;
+}
 </style>

src/views/teacher/Result/index.vue

@@ -0,0 +1,356 @@
+<template>
+  <div>
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        <li><router-link :to="{ name: 'HOME' }">所有课程</router-link></li>
+        <li>
+          <router-link :to="`/course-teacher/${course.id}/dashboard`">{{
+            course.name
+          }}</router-link>
+        </li>
+        <li class="is-active">
+          <router-link :to="`/student-course/${course.id}/result`"
+            >查看成绩</router-link
+          >
+        </li>
+      </ul>
+    </nav>
+    <!-- container面板-->
+    <div class="data-table">
+      <!--下拉框&搜索框-->
+      <div class="form-group">
+        <!--下拉框-->
+        <b-field> <a class="button is-link">导出作业成绩</a> </b-field>
+        <b-field>
+          <a class="button is-link" @click="isCardModalActive = true"
+            >成绩比例调控</a
+          >
+        </b-field>
+      </div>
+      <!--题目table-->
+      <div class="question-list">
+        <b-table :data="data" paginated per-page="5" detailed detail-key="id">
+          <template slot-scope="props">
+            <b-table-column field="id" label="ID" width="40" numeric sortable>
+              {{ props.row.id }}
+            </b-table-column>
+
+            <b-table-column label="文档作业" centered>
+              <div
+                class="result"
+                v-for="item in props.row.documentHomeworkResult"
+                :key="item.id"
+              >
+                {{ item.name }} : {{ item.result }}
+              </div>
+            </b-table-column>
+
+            <b-table-column label="代码作业" centered>
+              <div
+                class="result"
+                v-for="item in props.row.codeHomeworkResult"
+                :key="item.id"
+              >
+                {{ item.name }} : {{ item.result }}
+              </div>
+            </b-table-column>
+
+            <b-table-column label="互评作业" centered>
+              <div
+                class="result"
+                v-for="item in props.row.reviewHomeworkResult"
+                :key="item.id"
+              >
+                {{ item.name }} : {{ item.result }}
+              </div>
+            </b-table-column>
+            <b-table-column field="difficulty" label="总评" sortable centered>
+              <span
+                :class="[
+                  'tag',
+                  props.row.finalResult > 60 ? 'is-success' : 'is-danger'
+                ]"
+              >
+                {{ props.row.finalResult }}
+              </span>
+            </b-table-column>
+          </template>
+
+          <template slot="detail">
+            <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>
+                    <strong>成绩详情</strong>
+                    <small>这里可以放具体的作业成绩，前面可以放总评啥的</small>
+                    <br />
+                  </p>
+                </div>
+              </div>
+            </article>
+          </template>
+        </b-table>
+      </div>
+    </div>
+    <!-- 成绩比例调控模态框 -->
+    <b-modal :active.sync="isCardModalActive" :width="320" scroll="keep">
+      <div class="card">
+        <div class="title">
+          成绩比例调控<small>&nbsp;&nbsp;请按百分比填写</small>
+        </div>
+        <div class="content">
+          <b-field label="文档作业比例">
+            <b-input v-model="name"></b-input>
+          </b-field>
+          <b-field label="互评作业比例">
+            <b-input v-model="name"></b-input>
+          </b-field>
+          <b-field label="代码作业比例">
+            <b-input v-model="name"></b-input>
+          </b-field>
+          <a class="button is-link" @click="isCardModalActive = false"
+            >确认调整</a
+          >
+        </div>
+      </div>
+    </b-modal>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import { getStudentCourseReviewList } from "@/api/review";
+const data = [
+  {
+    id: 1,
+    documentHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      },
+      {
+        id: 3,
+        name: "第三次作业",
+        result: 99
+      }
+    ],
+    reviewHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      }
+    ],
+    codeHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      }
+    ],
+    finalResult: 99
+  },
+  {
+    id: 2,
+    documentHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      },
+      {
+        id: 3,
+        name: "第三次作业",
+        result: 99
+      }
+    ],
+    reviewHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      }
+    ],
+    codeHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      }
+    ],
+    finalResult: 99
+  },
+  {
+    id: 3,
+    documentHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      },
+      {
+        id: 3,
+        name: "第三次作业",
+        result: 99
+      }
+    ],
+    reviewHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      }
+    ],
+    codeHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      }
+    ],
+    finalResult: 99
+  },
+  {
+    id: 4,
+    documentHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      },
+      {
+        id: 3,
+        name: "第三次作业",
+        result: 99
+      }
+    ],
+    reviewHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      }
+    ],
+    codeHomeworkResult: [
+      {
+        id: 1,
+        name: "第一次作业",
+        result: 80
+      },
+      {
+        id: 2,
+        name: "第二次作业",
+        result: 85
+      }
+    ],
+    finalResult: 99
+  }
+];
+
+export default {
+  components: {},
+  computed: {
+    ...mapState({
+      course: state => state.course.currentCourse
+    })
+  },
+  data() {
+    return {
+      courses: [],
+      review: [],
+      questionType: [
+        { id: 1, title: "文档作业题目" },
+        { id: 2, title: "代码作业题目" }
+      ],
+      data,
+      isCardModalActive: false
+    };
+  },
+  mounted() {
+    getStudentCourseReviewList(this.courses.id).then(
+      value => (this.review = value.data)
+    );
+  }
+};
+</script>
+<style lang="scss" scoped>
+.breadcrumb a {
+  /*color: #7957d5;*/
+  font-weight: bold;
+}
+.data-table {
+  width: 100%;
+  padding: 30px;
+  min-height: 80vh;
+  background-color: #ffffff;
+}
+.question-list {
+  margin-top: 30px;
+}
+.form-group {
+  display: flex;
+  justify-content: space-between;
+}
+.result {
+  font-size: 0.8rem;
+}
+.card {
+  padding: 30px;
+  .title {
+    font-size: 1.25rem;
+    small {
+      color: gray;
+      font-size: 1rem;
+    }
+  }
+  .content {
+    a {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
+}
+.button {
+  background-color: #6172ec;
+}
+</style>