［修改］dashboard loading

src/views/student/Dashboard/index.vue

@@ -1,24 +1,19 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '小白大王的工作台', path: 'dashboard/' }]">
+    <page-header
+      :loading="isStudentDashBoardLoading"
+      :routes="[{ name: '小白大王的工作台', path: 'dashboard/' }]"
+    >
       <template slot="title">
         工作台
       </template>
       <template slot="content">
         当前<strong>&nbsp;5&nbsp;</strong>份作业进行中
       </template>
-      <!--<template slot="extraContent">-->
-      <!--Here might be a page title-->
-      <!--</template>-->
-      <!--<template slot="logo">-->
-      <!--Here might-->
-      <!--</template>-->
-      <!--<template slot="action">-->
-      <!--Here might be a page title-->
-      <!--</template>-->
     </page-header>
     <page-body>
-      <div class="data-table">
+      <page-section-loading :show="isStudentDashBoardLoading" />
+      <div v-if="!isStudentDashBoardLoading" class="data-table">
         <div class="subtitle">代码作业</div>
         <div class="columns is-multiline is-desktop">
           <div class="column is-4"><card hoverable>代码作业一</card></div>
@@ -41,11 +36,23 @@
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import Card from "@/components/Card";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
+
 export default {
   components: {
     PageBody,
     PageHeader,
-    Card
+    Card,
+    PageSectionLoading
+  },
+  data() {
+    return {
+      isStudentDashBoardLoading: true
+    };
+  },
+  mounted() {
+    //获取学生所有正在进行中的作业
+    this.isTeacherDashBoardLoading = false;
   }
 };
 </script>

src/views/teacher/Dashboard/index.vue

@@ -1,37 +1,72 @@
 <template>
   <div>
-    <page-header :routes="[{ name: '小白大王的工作台', path: 'dashboard/' }]">
+    <page-header
+      :loading="isTeacherDashBoardLoading"
+      :routes="[{ name: '小白大王的工作台', path: 'dashboard/' }]"
+    >
       <template slot="title">
         工作台
       </template>
       <template slot="content">
         当前<strong>&nbsp;5&nbsp;</strong>份作业进行中
       </template>
-      <!--<template slot="extraContent">-->
-      <!--Here might be a page title-->
-      <!--</template>-->
-      <!--<template slot="logo">-->
-      <!--Here might-->
-      <!--</template>-->
-      <!--<template slot="action">-->
-      <!--Here might be a page title-->
-      <!--</template>-->
     </page-header>
     <page-body>
-      <div class="data-table">
+      <page-section-loading :show="isTeacherDashBoardLoading" />
+      <div v-if="!isDashBoardLoading" class="data-table">
         <div class="subtitle">代码作业</div>
         <div class="columns is-multiline is-desktop">
-          <div class="column is-4"><card hoverable>代码作业一</card></div>
-          <div class="column is-4"><card hoverable>代码作业二</card></div>
-          <div class="column is-4"><card hoverable>代码作业三</card></div>
+          <div class="column is-4">
+            <card hoverable>
+              <div class="homework-title">代码作业一</div>
+              <div class="time">2018-01-29 ~ 2018-02-25</div>
+              <div class="submit-condition">
+                <span>提交情况:</span> 150 / 200
+              </div>
+            </card>
+          </div>
+          <div class="column is-4">
+            <card hoverable>
+              <div class="homework-title">代码作业二</div>
+              <div class="time">2018-01-29 ~ 2018-02-25</div>
+              <div class="submit-condition">
+                <span>提交情况:</span> 150 / 200
+              </div>
+            </card>
+          </div>
+          <div class="column is-4">
+            <card hoverable>
+              <div class="homework-title">代码作业三</div>
+              <div class="time">2018-01-29 ~ 2018-02-25</div>
+              <div class="submit-condition">
+                <span>提交情况:</span> 150 / 200
+              </div>
+            </card>
+          </div>
         </div>
         <div class="subtitle">文档作业</div>
         <div class="columns is-multiline is-desktop">
-          <div class="column is-4"><card hoverable>文档作业一</card></div>
+          <div class="column is-4">
+            <card hoverable>
+              <div class="homework-title">文档作业一</div>
+              <div class="time">2018-01-29 ~ 2018-02-25</div>
+              <div class="submit-condition">
+                <span>提交情况:</span> 150 / 200
+              </div>
+            </card>
+          </div>
         </div>
         <div class="subtitle">互评作业</div>
         <div class="columns is-multiline is-desktop">
-          <div class="column is-4"><card hoverable>互评作业一</card></div>
+          <div class="column is-4">
+            <card hoverable>
+              <div class="homework-title">互评作业一</div>
+              <div class="time">2018-01-29 ~ 2018-02-25</div>
+              <div class="submit-condition">
+                <span>提交情况:</span> 150 / 200
+              </div>
+            </card>
+          </div>
         </div>
       </div>
     </page-body>
@@ -41,11 +76,23 @@
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import Card from "@/components/Card";
+import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
+
 export default {
   components: {
     PageBody,
     PageHeader,
-    Card
+    Card,
+    PageSectionLoading
+  },
+  data() {
+    return {
+      isTeacherDashBoardLoading: true
+    };
+  },
+  mounted() {
+    //获取当前所有进行中的作业及作业提交情况
+    this.isTeacherDashBoardLoading = false;
   }
 };
 </script>
@@ -56,4 +103,21 @@ export default {
   padding-bottom: 10px;
   border-bottom: 1px solid #dbdbdb;
 }
+.homework-title {
+  font-weight: bold;
+  font-size: 1.3rem;
+}
+.time {
+  color: #7a7a7a;
+  font-size: 0.9rem;
+  span {
+    font-weight: bold;
+  }
+}
+.submit-condition {
+  font-size: 1rem;
+  span {
+    margin-right: 5px;
+  }
+}
 </style>