修改样式

frontend/src/views/home/tabs/model.vue

@@ -6,7 +6,7 @@
         ? 'calc(100vh - 165px)'
         : 'calc(100vh - 125px)',
     }" -->
-    <div class="mode" v-for="(item, index) in modeList" :key="index">
+    <div class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
       <div class="mode_top">
         <div class="mode_name">
           <p>
@@ -14,13 +14,8 @@
           </p>
         </div>
         <div class="test_button">
-          <el-button
-            size="small"
-            type="primary"
-            @click="handelOpen(item)"
-            :disabled="item.isActive == false"
-            >进入检测</el-button
-          >
+          <el-button size="small" type="primary" @click="handelOpen(item)"
+            :disabled="item.isActive == false">进入检测</el-button>
         </div>
       </div>
       <div class="mode_img">
@@ -33,7 +28,7 @@
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { useAuthStore } from "@/stores/modules/auth";
-import { useModeStore ,useAppSceneStore} from "@/stores/modules/mode"; // 引入模式 store
+import { useModeStore, useAppSceneStore } from "@/stores/modules/mode"; // 引入模式 store
 import { ref } from "vue";
 const authStore = useAuthStore();
 const modeStore = useModeStore(); // 使用模式 store
@@ -43,24 +38,24 @@ const router = useRouter();
 const modeList = [
   {
     name: "模拟式模块",
-    code:"模拟式",
+    code: "模拟式",
     subName: "未启用模拟式检测计划",
     img: "/src/assets/images/dashboard/1.svg",
     isActive: true,
   },
   {
     name: "数字式模块",
-    code:"数字式",
+    code: "数字式",
     subName: "启用数字检测计划",
     img: "/src/assets/images/dashboard/2.svg",
-    isActive: true,
+    isActive: false,
   },
   {
     name: "比对式模块",
-    code:"比对式",
+    code: "比对式",
     subName: "启用比对式检测计划",
     img: "/src/assets/images/dashboard/3.svg",
-    isActive: true,
+    isActive: false,
   },
 ];
 const handelOpen = async (item: any) => {
@@ -94,9 +89,11 @@ onMounted(() => {
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
+
   // padding: 20px 2%;
   .mode {
     flex: none;
+    position: relative;
     margin-top: 3px;
     width: 32.5%;
     height: 99.5% !important;
@@ -106,14 +103,19 @@ onMounted(() => {
     align-items: center;
     background: #fff;
     border-radius: 6px;
-    background: linear-gradient(
-      180deg,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 102, 255, 1) 65%,
-      rgba(0, 51, 255, 1) 100%,
-      rgba(0, 51, 255, 1) 100%
-    );
+    background: linear-gradient(180deg,
+        rgba(0, 153, 255, 1) 0%,
+        rgba(0, 153, 255, 1) 0%,
+        rgba(0, 102, 255, 1) 65%,
+        rgba(0, 51, 255, 1) 100%,
+        rgba(0, 51, 255, 1) 100%);
+
+
+    &:hover {
+
+      transform: scale(1.02);
+    }
+
     //   padding: 40px 0;
     .mode_top {
       width: 100%;
@@ -123,6 +125,7 @@ onMounted(() => {
       align-items: center;
       background: #008aff;
       border-radius: 6px 6px 0 0;
+
       .mode_name {
         width: 100%;
         height: 40px;
@@ -130,6 +133,7 @@ onMounted(() => {
         display: flex;
         align-items: center;
         justify-content: flex-start;
+
         p {
           font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
           font-weight: 700;
@@ -143,6 +147,7 @@ onMounted(() => {
           padding-left: 10px;
           // margin-top: 20px;
         }
+
         .mode_subName {
           font-family: "微软雅黑", sans-serif;
           font-weight: 400;
@@ -165,6 +170,7 @@ onMounted(() => {
         padding-right: 5px;
       }
     }
+
     .mode_img {
       width: 100%;
       height: auto;
@@ -173,28 +179,33 @@ onMounted(() => {
       justify-content: center;
       // padding: 30px 0 50px;
       margin-top: 100px;
+
       img:nth-child(1) {
         width: 60%;
         height: auto;
         display: block;
       }
+
       img:nth-child(2) {
         width: 70%;
         height: auto;
         display: block;
       }
+
       img:nth-child(3) {
         width: 60%;
         height: auto;
         display: block;
       }
     }
+
     .mode_test {
       width: 100%;
       height: 40px;
       display: flex;
       justify-content: center;
       margin-bottom: 20px;
+
       .test_button {
         width: 120px;
         height: 100%;
@@ -208,6 +219,7 @@ onMounted(() => {
         line-height: 40px;
         cursor: pointer;
       }
+
       .test_button:hover {
         background: rgba(0, 0, 0, 0.2);
       }
@@ -215,29 +227,47 @@ onMounted(() => {
   }
 
   .mode:nth-child(3n + 3) {
-    background: linear-gradient(
-      180deg,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 153, 255, 1) 0%,
-      rgba(0, 102, 255, 1) 39%,
-      rgba(102, 51, 204, 1) 100%,
-      rgba(102, 51, 204, 1) 100%
-    );
+    background: linear-gradient(180deg,
+        rgba(0, 153, 255, 1) 0%,
+        rgba(0, 153, 255, 1) 0%,
+        rgba(0, 102, 255, 1) 39%,
+        rgba(102, 51, 204, 1) 100%,
+        rgba(102, 51, 204, 1) 100%);
+
   }
+
   .mode_off {
+
     .mode_name,
     .mode_subName,
     .test_button {
       color: #fff !important;
     }
+
     .test_button:hover {
       // background: rgba(0, 0, 0, 0.2) !important;
       cursor: pointer;
     }
   }
 }
+
 :deep(.el-sub-menu__title) {
   border-bottom: 0 !important;
   outline: none !important;
 }
+
+.modeBG {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #70707080;
+    ;
+  }
+
+
+}
 </style>