优化工作台

src/components/workbench/index/header.vue

@@ -13,6 +13,10 @@ export default {};
   height: 85px;
   line-height: 85px;
   background: #fff;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
   padding: 0 40px;
   .company-title {
     font-size: 34px;

src/views/workbench/index.vue

@@ -1,6 +1,156 @@
 <template>
   <div class="app-container">
     <workbenchHeader></workbenchHeader>
+    <div class="work-module">
+      <div class="head">
+        <p class="l-title">协同效率</p>
+      </div>
+      <div class="main-body">
+        <ul class="work-item clear">
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">考勤打卡</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="work-module">
+      <div class="head">
+        <p class="l-title">协同效率</p>
+      </div>
+      <div class="main-body">
+        <ul class="work-item clear">
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">考勤打卡</p></router-link
+            >
+          </li>
+          <li>
+            <router-link to="/"
+              ><p class="icon-wrap">
+                <van-image
+                  :src="iconList.attendance"
+                  :width="iconWidthHeight"
+                  :height="iconWidthHeight"
+                />
+              </p>
+              <p class="text-wrap">签到</p></router-link
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,7 +160,12 @@ export default {
   name: "workbench",
   components: { workbenchHeader },
   data() {
-    return {};
+    return {
+      iconWidthHeight: "1.2rem",
+      iconList: {
+        attendance: "../../static/images/icon.png",
+      },
+    };
   },
   mounted() {},
   methods: {},
@@ -19,5 +174,41 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+  padding-top: 85px;
+  .work-module {
+    margin: 18px;
+    padding: 18px;
+    background: #fff;
+    border-radius: 15px;
+    .head {
+      line-height: 50px;
+      height: 50px;
+      margin-bottom: 8px;
+      .l-title {
+        font-size: 32px;
+        padding-left: 24px;
+      }
+    }
+    .main-body {
+      width: 100%;
+      .work-item {
+        box-sizing: border-box;
+        padding-top: 10px;
+        li {
+          width: 20%;
+          float: left;
+          margin-bottom: 20px;
+          text-align: center;
+          a {
+            color: #333;
+          }
+          .text-wrap {
+            font-size: 26px;
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>