'调解首页开发'

src/api/system/homepage.js

+import request from '@/utils/request'
+
+// 查询首页待办
+export function todoCount(data) {
+    return request({
+        url: '/caseApplication/todoCount',
+        method: 'get',
+        params: data
+    })
+}

src/views/index.vue

 <template>
   <div class="app-container home">
-    调解系统
+    <div class="header">
+      <div class="iconTitle"></div>
+      <div class="headerMain">我的待办</div>
+    </div>
+    <div class="homeMain">
+      <div class="cardList" v-for="(item, index) in pendingTasks" :key="index" @click="pushPage(item.caseFlowId)">
+        <div class="badge">{{item.caseCount}}</div>
+        <div class="cardMain">
+          <img class="iconImg" src="@/assets/images/daiban.png" alt="" />
+        </div>
+        <div class="cardMain">
+          <div class="imgTitle">{{ item.caseStatusName }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { todoCount } from "@/api/system/homepage.js";
 export default {
   name: "Index",
   data() {
     return {
       // 版本号
-      version: "3.8.6"
+      version: "3.8.6",
+      pendingTasks: [], //案件代办状态
     };
   },
+  created() {
+    this.gettodoCount();
+  },
   methods: {
     goTarget(href) {
       window.open(href, "_blank");
+    },
+    // 查询代办状态
+    gettodoCount() {
+      todoCount({}).then((res) => {
+      this.pendingTasks = res.data.toDoCountList
+      console.log(res.data.toDoCountList, "this.pendingTasks");
+      });
+    },
+    // 点击待办按钮跳转
+    pushPage(status) {
+      this.$router.push({ path: '/caseManagement/caseManagement/caseList', query: { caseFlowId: status + '' } })
     }
-  }
+  },
 };
 </script>
 
 <style scoped lang="scss">
+.home {
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  color: #676a6c;
+  overflow-x: hidden;
+  background-color: #f1f1f1;
+  height: 100vh;
+
+  .header {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+
+    .iconTitle {
+      width: 5px;
+      height: 25px;
+      background-color: #0f5c9b;
+      margin-right: 25px;
+    }
+
+    .headerMain {
+      font-size: 20px;
+    }
+  }
+
+  .homeMain {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+
+    .cardList {
+      width: 13%;
+      height: 200px;
+      border-radius: 30px;
+      background-color: #ffffff;
+      position: relative;
+      margin-right: 38px;
+      margin-bottom: 30px;
+
+      .badge {
+        width: 50px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        font-size: 18px;
+        font-weight: 500;
+        color: #e32a4f;
+        border-radius: 10px 30px 10px 30px;
+        background-color: #05baf1;
+        position: absolute;
+        right: 0;
+      }
 
+      .cardMain {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+
+        .iconImg {
+          width: 100px;
+          height: 110px;
+        }
+
+        .imgTitle {
+          font-size: 15px;
+          font-weight: 900;
+        }
+      }
+    }
+  }
+}
 </style>
 

src/views/login.vue

     </div>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2023 乙巢（上海）企业管理服务有限公司.</span>
+      <div>Copyright © 2023 乙巢（上海）企业管理服务有限公司.</div>
+      <div>Version：1.0.1</div>
     </div>
   </div>
 </template>
 }
 .el-login-footer {
   background-color: rgb(126, 131, 135);
-  height: 40px;
-  line-height: 40px;
+  height: 55px;
+  line-height: 55px;
   position: fixed;
   bottom: 0;
   width: 100%;
   font-family: Arial;
   font-size: 12px;
   letter-spacing: 1px;
+  div {
+    height: 30%;
+  }
 }
 .login-code-img {
   height: 38px;