图片添加

src/views/main/screenEntry.vue

@@ -8,7 +8,7 @@
         class="sys-item"
         @click="gotoScreen(item.routeName)"
       >
-        <img alt="" class="sys-item-img" />
+        <img :src="item.src" class="sys-item-img" />
         <h3 class="sys-item-title">{{ item.name }}</h3>
       </div>
     </div>
@@ -22,11 +22,27 @@ import { useFullscreen } from "@vueuse/core";
 const el = ref<HTMLElement>();
 const { isFullscreen, toggle, enter, exit } = useFullscreen(el);
 const screenData = ref([
-  { name: "综合监控大屏", routeName: "mainScreen" },
-  { name: "质量综合大屏", routeName: "qualityScreen" },
-  { name: "总装车间看板", routeName: "workScreen" },
-  { name: "设备监控看板", routeName: "deviceScreen" },
-  { name: "测试大屏", routeName: "totalScreen" },
+  {
+    name: "综合监控大屏",
+    routeName: "mainScreen",
+    src: "/img/mainScreen.png",
+  },
+  {
+    name: "质量综合大屏",
+    routeName: "qualityScreen",
+    src: "/img/qualityScreen.png",
+  },
+  {
+    name: "总装车间看板",
+    routeName: "workScreen",
+    src: "/img/workScreen.png",
+  },
+  {
+    name: "设备监控看板",
+    routeName: "deviceScreen",
+    src: "/img/deviceScreen.png",
+  },
+  { name: "测试大屏", routeName: "totalScreen", src: "/img/deviceScreen.png" },
 ]);
 
 const router = useRouter();
@@ -56,6 +72,7 @@ const gotoScreen = (routeName: string) => {
   .sys-item-img {
     width: 120px;
     height: 100px;
+    border-radius: 5px;
   }
 
   .sys-item-title {