首页完毕

card/components/CardDesign.vue

@@ -110,6 +110,7 @@
 
       <!-- edit body -->
       <div class="design-body">
+        <!-- 注意：后台要替换内容，改类名时，要注意 -->
         <div
           :class="[
             'page-box',

src/assets/styles/home.scss

@@ -5,6 +5,7 @@
   height: 100%;
   z-index: auto;
 }
+
 .home-body {
   position: absolute;
   left: 0;
@@ -15,31 +16,38 @@
   background: $--color-background;
   z-index: 98;
 }
+
 .home-body-content {
   position: relative;
   padding: 20px 30px 50px 250px;
   min-height: 100%;
 }
+
 .home-page-main {
   .home-navs {
     bottom: auto;
     height: 50px;
     border-radius: 0;
     background-color: transparent;
+
     &::before {
       display: none;
     }
+
     .head-logo-content {
       padding: 5px 0;
       border: none;
     }
+
     .el-menu {
       display: none;
     }
   }
+
   .home-breadcrumb {
     display: none;
   }
+
   .home-body-content {
     padding-left: 30px;
   }
@@ -76,15 +84,18 @@
     font-size: 20px;
     line-height: 40px;
     text-align: center;
+
     &-content {
       display: block;
       padding: 30px 0;
       border-bottom: 1px solid #eff0f5;
       cursor: pointer;
+
       &:hover {
         opacity: 0.8;
       }
     }
+
     img {
       display: block;
       max-width: 160px;
@@ -104,11 +115,13 @@
     line-height: 20px;
     position: relative;
     font-weight: 500;
+
     > span {
       display: inline-block;
       vertical-align: top;
       font-weight: 600;
     }
+
     &-right-icon {
       position: absolute;
       right: 0;
@@ -125,18 +138,21 @@
   .nav-item {
     overflow: hidden;
     color: $--color-text-dark-1;
+
     &-main {
       padding: 10px 0;
       line-height: 20px;
       position: relative;
       font-weight: 500;
       cursor: pointer;
+
       &-act,
       &:hover {
         font-weight: 600;
         color: $--color-primary;
       }
     }
+
     &-icon {
       display: block;
       position: absolute;
@@ -147,9 +163,11 @@
       text-align: center;
       line-height: 20px;
     }
+
     &-icon-right {
       right: 5px;
     }
+
     &-info {
       display: block;
       position: absolute;
@@ -167,11 +185,14 @@
     }
   }
 }
+
 .el-menu-home {
   padding-top: 20px;
+
   .el-submenu {
     margin-bottom: 20px;
   }
+
   .el-submenu__title {
     padding: 0 40px !important;
     height: 50px;
@@ -182,6 +203,7 @@
       margin-right: 12px;
     }
   }
+
   .el-menu-item {
     height: auto;
     min-height: 40px;
@@ -189,9 +211,11 @@
     padding: 10px 40px !important;
     white-space: normal;
   }
+
   .el-menu-item.is-active {
     font-weight: 600;
   }
+
   .el-submenu__icon-arrow {
     right: 40px;
   }
@@ -251,15 +275,18 @@
         display: inline-block;
         vertical-align: top;
       }
+
       .icon {
         margin-top: -3px;
         margin-right: 6px;
       }
+
       > i {
         margin-right: 6px;
       }
     }
   }
+
   .head-menu {
     flex-grow: 1;
     overflow-y: hidden;
@@ -269,12 +296,15 @@
       white-space: nowrap;
     }
   }
+
   .head-user {
     flex-grow: 0;
     flex-shrink: 0;
+
     .menu-item-account {
       white-space: nowrap;
       padding: 10px;
+
       span {
         max-width: 156px;
         overflow: hidden;
@@ -282,6 +312,7 @@
       }
     }
   }
+
   // .head-menu-btn
   .head-menu-btn {
     display: none;
@@ -289,6 +320,7 @@
     line-height: 36px;
     padding: 12px 15px;
     text-align: center;
+
     > span {
       display: block;
       height: 36px;
@@ -296,12 +328,14 @@
       border-radius: 5px;
       background-color: rgba($color: #fff, $alpha: 0.3);
     }
+
     i {
       font-size: 22px;
       vertical-align: middle;
     }
   }
 }
+
 // menu-dialog
 .menu-dialog {
   .el-dialog.is-fullscreen {
@@ -310,6 +344,7 @@
 
     .el-dialog__body {
       padding: 10px;
+
       &::after {
         display: none;
       }
@@ -345,11 +380,13 @@
   .breadcrumb-tips {
     display: inline-block;
     vertical-align: middle;
+
     > i {
       margin-top: -2px;
       margin-right: 8px;
     }
   }
+
   .el-breadcrumb {
     line-height: 16px;
     display: inline-block;
@@ -361,6 +398,7 @@
         color: $--color-text-gray-2;
       }
     }
+
     .el-breadcrumb__separator {
       margin: 0 5px;
     }
@@ -382,9 +420,11 @@
   color: $--color-text-gray-3;
   text-align: center;
   font-size: 13px;
+
   a {
     color: $--color-text-gray-3;
   }
+
   a:hover {
     color: $--color-text-gray;
   }
@@ -392,33 +432,47 @@
 
 // home-page
 .home-page {
-  width: 1000px;
+  width: 1200px;
   margin: 0 auto;
 
+  .hp-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+
+    &-left {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: 340px;
+      margin-right: 20px;
+    }
+
+    &-right {
+      flex-grow: 2;
+    }
+  }
+
   .tab-summary {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     font-size: 0;
 
     &-item {
       position: relative;
       display: inline-block;
+      width: 100%;
       vertical-align: top;
-      width: 137px;
       margin-right: 10px;
-      border-radius: 16px;
-      padding: 20px;
+      border-radius: 12px;
+      padding: 16px 20px 16px;
       color: #fff;
       text-align: right;
+      background: #3a5ae5;
 
-      &:nth-of-type(1) {
+      &.item-done {
         background: #9877ff;
-        box-shadow: 0px 10px 10px 0px rgba(152, 119, 255, 0.3);
-      }
-      &:nth-of-type(2) {
-        background: #3fcb98;
-        box-shadow: 0px 10px 10px 0px rgba(63, 203, 152, 0.3);
       }
     }
+
     &-rp {
       display: block;
       position: absolute;
@@ -431,18 +485,21 @@
       border-radius: 50%;
       z-index: 9;
     }
+
     &-icon {
       display: block;
       position: absolute;
-      top: 20px;
-      left: 20px;
-      font-size: 16px;
+      top: 16px;
+      left: 16px;
       z-index: auto;
     }
+
     &-title {
       font-size: 12px;
       margin-bottom: 7px;
+      opacity: 0.6;
     }
+
     &-cont {
       height: 38px;
       font-size: 32px;
@@ -452,56 +509,68 @@
   }
 
   .tab-box {
-    border-radius: 16px;
+    border-radius: 12px;
     background-color: #fff;
     margin-bottom: 20px;
     min-height: 100px;
     padding: 20px;
+
     &-title {
       font-weight: bold;
       font-size: 16px;
+      line-height: 1;
       color: #1f222f;
       margin-bottom: 10px;
     }
   }
+
   .shortcut-list {
     font-size: 0;
-    white-space: nowrap;
-    overflow: auto;
+    margin-top: 20px;
   }
+
   .shortcut-item {
     display: inline-block;
     vertical-align: top;
-    padding: 10px 0;
-    width: 100px;
-    text-align: center;
+    padding: 0 18px;
+    width: 180px;
+    border-radius: 8px;
+    border: 1px solid #eff0f5;
+    height: 52px;
+    line-height: 50px;
+    margin: 10px;
+    text-align: left;
     cursor: pointer;
 
     &:hover {
-      opacity: 0.8;
+      opacity: 0.7;
+    }
+
+    > * {
+      display: inline-block;
+      vertical-align: middle;
     }
   }
-  .shortcut-icon {
-    width: 40px;
-    height: 40px;
-    background: #3a5ae5;
-    border-radius: 6px;
-    font-size: 20px;
-    line-height: 40px;
-    margin: 0 auto;
+
+  .icon {
+    margin-right: 18px;
   }
+
   .shortcut-name {
-    margin-top: 12px;
     font-size: 14px;
     font-weight: 500;
     color: #434656;
   }
 
+  .tab-task {
+    min-height: 190px;
+  }
   .tab-task-item {
     display: flex;
     justify-content: space-between;
-    align-items:center;
+    align-items: center;
     padding: 10px 0;
+
     &:not(:last-child) {
       border-bottom: 1px solid #eff0f5;
     }
@@ -512,32 +581,149 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      line-height: 32px;
-    }
-    &-type,
-    &-action {
-      flex-shrink: 0;
-      flex-grow: 0;
+      line-height: 24px;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.7;
+      }
     }
 
     &-type {
+      flex-shrink: 0;
+      flex-grow: 0;
       font-size: 12px;
-      color: #fff;
+      color: rgba(58, 90, 229, 1);
       border-radius: 6px;
       text-align: center;
       width: 36px;
-      height: 22px;
-      line-height: 22px;
+      height: 24px;
+      line-height: 24px;
+      background: rgba(58, 90, 229, 0.1);
+    }
+  }
+
+  .guide-map {
+    padding: 40px 0;
+    text-align: center;
+  }
+  .guide-item {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin: 0 10px;
+
+    &:not(:last-child):after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 10px;
+      background-image: url(../images/icon-narrow.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+
+      top: 50%;
+      right: -20px;
+      margin-top: -5px;
+    }
+  }
+
+  .guide-spin {
+    width: 136px;
+    height: 136px;
+    background: #afb3c7;
+    border-radius: 68px;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    color: #1f222f;
+    font-size: 14px;
+    font-weight: bold;
+
+    &.spin-large {
+      width: 192px;
+      height: 192px;
+      border-radius: 96px;
     }
-    .type-flow{
-      background: #FFBF00;
+
+    &.spin-small {
+      width: 108px;
+      height: 108px;
+      border-radius: 54px;
+    }
+
+    &.spin-light {
+      background: #e1e3eb;
+    }
+  }
+  .island-item {
+    width: 282px;
+    background: #afb3c7;
+    border-radius: 20px;
+    padding: 30px;
+    border: 2px solid #fff;
+    position: relative;
+  }
+  .island-bottom {
+    background: #e1e3eb;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 40px;
+      border-width: 10px 20px;
+      border-style: solid;
+      border-color: transparent #e1e3eb transparent transparent;
+      top: -10px;
+      right: 50%;
+      z-index: 9;
     }
-    .type-stmms{
-      background: #832FF3;
+  }
+  .island-top {
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 40px;
+      border-width: 10px 20px;
+      border-style: solid;
+      border-color: transparent transparent transparent #afb3c7;
+      bottom: -10px;
+      left: 50%;
+      z-index: 9;
     }
-    .type-analysis{
-      background: #2A9BF2;
+
+    .island-btn {
+      width: 100%;
+    }
+  }
+  .island-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #1f222f;
+    line-height: 21px;
+    margin-bottom: 20px;
+    text-align: left;
+  }
+  .island-cont {
+    font-size: 0;
+  }
+  .island-btn {
+    display: inline-block;
+    vertical-align: top;
+    height: 40px;
+    background: #ffffff;
+    border-radius: 6px;
+    font-weight: 500;
+    color: #434656;
+    padding: 14px 20px;
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+
+    & + .island-btn {
+      margin-left: 10px;
     }
-  
   }
 }

src/assets/styles/icons.scss

@@ -90,59 +90,70 @@
     height: 12px;
   }
   // home-page
+
+  &-wait-task {
+    background-image: url(../images/icon-wait-task.png);
+    width: 16px;
+    height: 19px;
+  }
+  &-done-task {
+    background-image: url(../images/icon-done-task.png);
+    width: 16px;
+    height: 19px;
+  }
   &-exam-task {
     background-image: url(../images/icon-exam-task.png);
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
   }
   &-marker-login {
     background-image: url(../images/icon-marker-login.png);
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 16px;
   }
   &-marker-leader-login {
     background-image: url(../images/icon-marker-leader-login.png);
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 16px;
   }
   &-print-plan {
     background-image: url(../images/icon-print-plan.png);
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
   }
   &-report-teacher {
     background-image: url(../images/icon-report-teacher.png);
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 17px;
   }
   &-report-office-teacher {
     background-image: url(../images/icon-report-office-teacher.png);
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 16px;
   }
   &-report-president {
     background-image: url(../images/icon-report-president.png);
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 16px;
   }
   &-score-archive {
     background-image: url(../images/icon-score-archive.png);
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 18px;
   }
   &-task-apply {
     background-image: url(../images/icon-task-apply.png);
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 16px;
   }
   &-task-paper {
     background-image: url(../images/icon-task-paper.png);
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 16px;
   }
   &-task-review {
     background-image: url(../images/icon-task-review.png);
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 16px;
   }
 }

src/views/HomePage.vue

@@ -1,55 +1,97 @@
 <template>
   <div class="home-page">
-    <div v-if="hasWaitTaskPrivilege" class="tab-summary">
-      <div class="tab-summary-item">
-        <i v-if="summary.waitTaskCount" class="tab-summary-rp"></i>
-        <i class="tab-summary-icon icon icon-wait"></i>
-        <h4 class="tab-summary-title">待办任务</h4>
-        <p class="tab-summary-cont">{{ summary.waitTaskCount }}</p>
-      </div>
-      <div class="tab-summary-item">
-        <i class="tab-summary-icon icon icon-done"></i>
-        <h4 class="tab-summary-title">已办任务</h4>
-        <p class="tab-summary-cont">{{ summary.doneTaskCount }}</p>
-      </div>
-    </div>
-    <div v-if="shortcutList.length" class="tab-box tab-shortcut">
-      <h2 class="tab-box-title">快捷入口</h2>
-      <div class="tab-box-body shortcut-list">
-        <div
-          v-for="(item, ind) in shortcutList"
-          :key="ind"
-          class="shortcut-item"
-          @click="toMenu(item)"
-        >
-          <div class="shortcut-icon"><i :class="['icon', item.icon]"></i></div>
-          <div class="shortcut-name">{{ item.name }}</div>
+    <div class="hp-top">
+      <div v-if="hasWaitTaskPrivilege" class="hp-top-left">
+        <el-row class="tab-summary" type="flex" :gutter="10">
+          <el-col :span="12">
+            <div class="tab-summary-item">
+              <i class="tab-summary-icon icon icon-wait-task"></i>
+              <h4 class="tab-summary-title">待办任务</h4>
+              <p class="tab-summary-cont">{{ summary.waitTaskCount }}</p>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="tab-summary-item item-done">
+              <i class="tab-summary-icon icon icon-done-task"></i>
+              <h4 class="tab-summary-title">已办任务</h4>
+              <p class="tab-summary-cont">{{ summary.doneTaskCount }}</p>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="tab-box tab-task">
+          <h2 class="tab-box-title">待办任务</h2>
+          <div class="tab-box-body tab-task-list">
+            <div
+              v-for="item in waitTaskList"
+              :key="item.id"
+              class="tab-task-item"
+            >
+              <div :class="['tab-task-item-type', `type-${item.type}`]">
+                {{ typeNames[item.type] }}
+              </div>
+              <div
+                class="tab-task-item-cont"
+                title="立即处理"
+                @click="toDo(item)"
+              >
+                {{ item.content }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <div v-if="hasWaitTaskPrivilege" class="tab-box tab-task">
-      <h2 class="tab-box-title">代办任务</h2>
-      <div class="tab-box-body tab-task-list">
-        <div v-for="item in waitTaskList" :key="item.id" class="tab-task-item">
-          <div :class="['tab-task-item-type', `type-${item.type}`]">
-            {{ typeNames[item.type] }}
-          </div>
-          <div class="tab-task-item-cont">{{ item.content }}</div>
-          <div class="tab-task-item-action action-column">
-            <el-button
-              class="btn-primary"
-              size="small"
-              type="text"
-              @click="toDo(item)"
-              >立即处理</el-button
-            >
+      <div v-if="shortcutList.length" class="tab-box tab-shortcut hp-top-right">
+        <h2 class="tab-box-title">快捷入口</h2>
+        <div class="tab-box-body shortcut-list">
+          <div
+            v-for="(item, ind) in shortcutList"
+            :key="ind"
+            class="shortcut-item"
+            @click="toMenu(item)"
+          >
+            <i :class="['icon', item.icon]"></i>
+            <span class="shortcut-name">{{ item.name }}</span>
           </div>
         </div>
       </div>
     </div>
+
     <div class="tab-box tab-guide">
       <h2 class="tab-box-title">业务引导图</h2>
-      <div class="tab-box-body"></div>
+      <div class="tab-box-body guide-map">
+        <div class="guide-item">
+          <div class="guide-spin">命题组卷</div>
+        </div>
+        <div class="guide-item">
+          <div class="guide-spin spin-large spin-light">试卷题卡线上审核</div>
+        </div>
+        <div class="guide-item guide-island">
+          <div class="island-item island-top">
+            <h4 class="island-title">线上考试</h4>
+            <div class="island-cont">
+              <div class="island-btn">
+                AI防作弊考试 / 集中无纸化机考
+              </div>
+            </div>
+          </div>
+          <div class="island-item island-bottom">
+            <h4 class="island-title">线下考试</h4>
+            <div class="island-cont">
+              <div class="island-btn">印刷+智能分拣</div>
+              <div class="island-btn">高速扫描</div>
+            </div>
+          </div>
+        </div>
+        <div class="guide-item">
+          <div class="guide-spin spin-small">阅卷</div>
+        </div>
+        <div class="guide-item">
+          <div class="guide-spin spin-light">教研分析</div>
+        </div>
+        <div class="guide-item">
+          <div class="guide-spin">归档管理</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -75,6 +117,7 @@ export default {
         doneTaskCount: 0
       },
       shortcutList: [],
+      taskList: [[], [], []],
       waitTaskList: [],
       waitTaskFilter: {
         pageNumber: 1,
@@ -148,10 +191,25 @@ export default {
       await this.updateWaitTaskCount();
       this.summary.waitTaskCount = this.waitTaskCount;
 
-      this.waitTaskList = [];
-      this.getFlowWaitTaskList();
-      this.getStmmsWaitTaskList();
-      this.getAnalysisWaitTaskList();
+      await this.getFlowWaitTaskList();
+      await this.getStmmsWaitTaskList();
+      await this.getAnalysisWaitTaskList();
+      this.getWaitTaskList();
+    },
+    getWaitTaskList() {
+      let waitTaskList = [];
+      const hasAllTypeTask = !this.taskList.some(item => !item.length);
+      if (hasAllTypeTask) {
+        this.taskList.forEach(item => {
+          waitTaskList.push(item[0]);
+        });
+        this.waitTaskList = waitTaskList;
+      } else {
+        this.taskList.forEach(item => {
+          waitTaskList.push(...item);
+        });
+        this.waitTaskList = waitTaskList.slice(0, 3);
+      }
     },
     async getFlowWaitTaskList() {
       const data = await waitExamTaskListPage(this.waitTaskFilter);
@@ -163,7 +221,7 @@ export default {
           content: `${flowTaskName}，试卷编号${item.paperNumber}，${item.courseName}（${item.courseCode}）`
         };
       });
-      this.waitTaskList.push(...dataList);
+      this.taskList[0] = dataList;
     },
     async getStmmsWaitTaskList() {
       const data = await stmmsTaskListPage(this.waitTaskFilter);
@@ -174,7 +232,7 @@ export default {
           content: `${item.thirdRelateName}（${item.thirdRelateId}），试卷编号${paperNumber}，${item.paperType}`
         };
       });
-      this.waitTaskList.push(...dataList);
+      this.taskList[1] = dataList;
     },
     async getAnalysisWaitTaskList() {
       const data = await analysisTaskListPage(this.waitTaskFilter);
@@ -185,7 +243,7 @@ export default {
           content: `${item.semesterName}，${item.examName}，${item.courseName}（${item.courseCode}）`
         };
       });
-      this.waitTaskList.push(...dataList);
+      this.taskList[2] = dataList;
     },
     toMenu(item) {
       this.$router.push({