控制台完成

ZR.Vue/src/assets/image/console/1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692067522479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1579" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M93.090909 930.909091h930.909091v93.090909H0V0h93.090909v930.909091z m93.090909-442.181818h93.090909v372.363636H186.181818V488.727273z m209.454546-139.636364h93.090909v512h-93.090909V349.090909z m209.454545 139.636364h93.090909v372.363636h-93.090909V488.727273z m209.454546-186.181818h93.090909v558.545454h-93.090909V302.545455z m-555.985455 15.45309l-51.665455-77.451636L442.181818 83.688727l205.381818 136.936728 182.597819-162.327273 61.858909 69.585454-236.311273 210.036364L442.181818 195.584l-183.621818 122.414545z" fill="#333333" p-id="1580"></path></svg>

ZR.Vue/src/views/index_v1.vue

@@ -83,8 +83,14 @@
       <div class="chart-box">
         <div class="item"><div id="item1" class="item1"></div></div>
         <div class="item"><div id="item2" class="item2"></div></div>
-        <div class="item">1</div>
-        <div class="item">1</div>
+      </div>
+      <p>快捷菜单</p>
+
+      <div class="quick-box">
+        <div class="item1" v-for="(item, index) in quickData" :key="index">
+          <el-image style="width: 40px; height: 40px" :src="item.imageurl" :fit="fit"></el-image>
+          <p>{{ item.title }}</p>
+        </div>
       </div>
     </div>
   </div>
@@ -100,6 +106,8 @@ import Scroll from 'vue-seamless-scroll'
 import { listNewArticle } from '@/api/system/article.js'
 import * as echarts from 'echarts'
 
+import Img1 from '@/assets/image/console/1.svg'
+
 require('echarts/theme/macarons') // echarts theme
 
 const lineChartData = {
@@ -208,6 +216,14 @@ export default {
           },
         },
       ],
+      quickData: [
+        { imageurl: Img1, title: '员工绩效' },
+        { imageurl: Img1, title: '工资报表' },
+        { imageurl: Img1, title: '不良品项分布' },
+        { imageurl: Img1, title: '不良品项汇总' },
+        { imageurl: Img1, title: '生产报表' },
+        { imageurl: Img1, title: '产量统计' },
+      ],
     }
   },
   created() {
@@ -514,7 +530,7 @@ export default {
   }
   .chart-box {
     display: grid;
-    grid-template-rows: 500px 1fr;
+    grid-template-rows: 400px;
     grid-template-columns: 700px 1fr;
     grid-gap: 0.5em;
     .item {
@@ -531,5 +547,27 @@ export default {
       }
     }
   }
+
+  .quick-box {
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 0.5em;
+    .item1 {
+      background: #ffffff;
+      height: 200px;
+      width: 400px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      &:hover {
+        background-color: #f5f5f5;
+      }
+      p{
+        font-size: 25px;
+      }
+    }
+  }
 }
 </style>