init

src/layout/components/worker/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="worker-container">
+    <div class="card" v-for="i in 13">
+      <el-card class="box-card" shadow="hover">
+        <div slot="header" class="clearfix">
+          <span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">卡片名称</span>
+          <i class="el-icon-more" style="float: right;font-size: 20px;"></i>
+        </div>
+        <div v-for="o in 4" :key="o" class="text item">
+          {{'列表内容 ' + o }}
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.worker-container{
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  padding: 10px 0 10px 10px;
+
+  .card{
+    flex-shrink: 0;
+    flex-grow: 1;
+    min-width: 20vw;
+
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    .box-card{
+      background: linear-gradient(to bottom, rgba(133, 182, 231, 0.96),#fff 30%);
+    }
+  }
+}
+</style>

src/layout/index.vue

@@ -2,20 +2,21 @@
   <div :class="classObj" class="app-wrapper">
     <div class="top-head-bar">
       <div class="top-head-bar__logo">
-        环境监测中心
+        <img style="height: 24px;" src="../assets/logo.png"></img>
       </div>
 
       <ul>
-        <li class="li-active">工作台</li>
-        <li>1</li>
-        <li>2</li>
-        <li>3</li>
+        <li :class="{'li-active':active === 0}" @click="active = 0,$router.push('/worker')">工作台</li>
+        <li :class="{'li-active':active === 1}" @click="active = 1,$router.push('/dashboard')">合同管理</li>
+        <li :class="{'li-active':active === 2}" @click="active = 2,$router.push('/bookmanage')">图书管理</li>
+        <li :class="{'li-active':active === 3}" @click="active = 3">系统设置</li>
       </ul>
 
       <div class="top-head-bar__user">
         <el-dropdown class="avatar-container" trigger="click">
           <div class="avatar-wrapper">
             <img src="../assets/face.jpg" class="user-avatar">
+            <div class="avatar-wrapper__name">{{ $store.state.user.name }}</div>
             <i class="el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown" class="user-dropdown">
@@ -34,22 +35,13 @@
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
 
     <template v-if="$route.path === '/worker'">
-      <el-scrollbar style="margin-top: 50px;">
-        <div class="worker-container">
-          <div class="card" v-for="i in 10">
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>卡片名称</span>
-                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
-              </div>
-              <div v-for="o in 4" :key="o" class="text item">
-                {{'列表内容 ' + o }}
-              </div>
-            </el-card>
-          </div>
-        </div>
+      <el-scrollbar style="padding-top: 50px;height: 100%;">
+        <worker></worker>
       </el-scrollbar>
     </template>
+    <template v-else-if="$route.path === '/bookmanage'">
+      <iframe style="width: 100%;height: 100%;padding-top: 50px;" src="http://hjjc-book-service-test.ali251.langye.net/"></iframe>
+    </template>
     <template v-else>
       <sidebar class="sidebar-container" />
       <div class="main-container">
@@ -71,18 +63,19 @@
     AppMain
   } from './components'
   import ResizeMixin from './mixin/ResizeHandler'
-
+import worker from "./components/worker"
   export default {
     name: 'Layout',
     components: {
       Navbar,
       Sidebar,
-      AppMain
+      AppMain,
+      worker
     },
     mixins: [ResizeMixin],
     data(){
       return {
-        active:'1'
+        active:0
       }
     },
     computed: {
@@ -110,6 +103,8 @@
           withoutAnimation: false
         })
       }
+    },
+    mounted() {
     }
   }
 </script>
@@ -135,8 +130,8 @@
     height: 50px;
     filter: drop-shadow(0 1px 1px #49a0f3);
     display: grid;
-    grid-template-columns: auto 2fr 6fr .5fr 1fr;
-    grid-template-rows: auto;
+    grid-template-columns: auto .5fr 6fr .2fr 1.2fr;
+    grid-template-rows: 50px;
     grid-template-areas:
       "logo . menu . user";
 
@@ -147,14 +142,18 @@
     right: 0;
 
     &__logo{
-      color: #fff;
-      font-size: 20px;
-      line-height: 50px;
-      font-weight: 600;
+      height: 50px;
       grid-area:logo;
+      display: flex;
+      align-items: center;
 
       padding:0 20px;
     }
+    @media screen and (max-width: 1000px){
+      &__logo{
+        display: none;
+      }
+    }
 
     &__user{
       grid-area: user;
@@ -175,6 +174,9 @@
         transition: all 300ms ease-out;
         border-top-right-radius: 6px;
         border-top-left-radius: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         padding: 0 20px;
         position: relative;
@@ -241,32 +243,37 @@
   }
 
   .avatar-container {
+    height: 100%;
     margin-right: 30px;
 
-    .avatar-wrapper {
-      margin-top: 5px;
-      position: relative;
-
+    .avatar-wrapper{
+      height: 100%;
+      display: flex;
+      align-items: center;
       .user-avatar {
         cursor: pointer;
         width: 40px;
         height: 40px;
         border-radius: 10px;
       }
+      &__name{
+        color: #fff;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
+        padding: 0 6px;
+      }
       .el-icon-caret-bottom {
         cursor: pointer;
+        color: #FFF;
         position: absolute;
         right: -20px;
-        top: 25px;
+        top: 32px;
         font-size: 12px;
       }
     }
   }
 
-  .worker-container{
-    display: flex;
-    align-content: flex-start;
-    flex-wrap: wrap;
-  }
+
 </style>

src/views/dashboard/index.vue

@@ -195,9 +195,9 @@
             align: 'left',
             fixed: "right",
             customFn: (row) => {
-              let m2 = row.money_total_2;
-              let m1 = row.money_total_1;
-              let m3 = row.use_money_total;
+              let m2 = row?.money_total_2;
+              let m1 = row?.money_total_1;
+              let m3 = row?.use_money_total;
               let per = 0;
 
               if (m2 != 0) {