修改登录页样式

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

@@ -1,12 +1,34 @@
 <!-- 模式切换页面 -->
 <template>
-  <div class="main_container">
+  <div class="main_container box">
     <!-- :style="{
       height: authStore?.showMenuFlag
         ? 'calc(100vh - 165px)'
         : 'calc(100vh - 125px)',
     }" -->
-    <div class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
+
+    <el-carousel :interval="5000" type="card" style="width: 60%;margin-left: 20%;height: 70%;">
+      <el-carousel-item class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
+
+        <div class="mode_top">
+          <div class="mode_name">
+            {{ item.name }}
+          </div>
+        </div>
+
+        <div class="mode_img">
+          <img :src="item.img" />
+        </div>
+        <div class="test_button">
+          <el-button size="large" type="primary" @click="handelOpen(item)"
+            :disabled="item.isActive == false">进入检测</el-button>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+
+
+
+    <!-- <div class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
       <div class="mode_top">
         <div class="mode_name">
           <p>
@@ -21,7 +43,7 @@
       <div class="mode_img">
         <img :src="item.img" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -80,7 +102,23 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+.box {
+  background: #ededed;
+  // background-image: url("/src/assets/images/dashboard/DT.jpg");
+  // /* 背景图垂直、水平均居中 */
+  // // background-position: center center;
+  // /* 背景图不平铺 */
+  // background-repeat: no-repeat;
+  // /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+  // background-attachment: fixed;
+  // /* 让背景图基于容器大小伸缩 */
+  // background-size: cover;
+
+
+}
+
 .main_container {
+
   width: 100%;
   // height: calc(100vh - 165px);
   height: 100%;
@@ -90,18 +128,10 @@ onMounted(() => {
   flex-wrap: wrap;
   align-items: center;
 
-  // padding: 20px 2%;
   .mode {
-    flex: none;
+
-    position: relative;
-    margin-top: 3px;
-    width: 32.5%;
     height: 99.5% !important;
     border: 1px solid #eee;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: #fff;
     border-radius: 6px;
     background: linear-gradient(180deg,
         rgba(0, 153, 255, 1) 0%,
@@ -110,18 +140,15 @@ onMounted(() => {
         rgba(0, 51, 255, 1) 100%,
         rgba(0, 51, 255, 1) 100%);
 
+    position: absolute;
 
-    &:hover {
-
-      transform: scale(1.02);
-    }
 
     //   padding: 40px 0;
     .mode_top {
       width: 100%;
       height: 40px;
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
       background: #008aff;
       border-radius: 6px 6px 0 0;
@@ -129,24 +156,15 @@ onMounted(() => {
       .mode_name {
         width: 100%;
         height: 40px;
-        flex: 1;
+        font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
-        display: flex;
+        font-weight: 700;
-        align-items: center;
+        font-style: normal;
-        justify-content: flex-start;
+        font-size: 20px;
-
+        color: #ffffff;
-        p {
+        text-align: center;
-          font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
+        line-height: 40px;
-          font-weight: 700;
+        padding-left: 10px;
-          font-style: normal;
+        // margin-top: 20px;
-          font-size: 16px;
-          color: #ffffff;
-          text-align: center;
-          //   background: #fff;
-          line-height: 40px;
-          text-align: left;
-          padding-left: 10px;
-          // margin-top: 20px;
-        }
 
         .mode_subName {
           font-family: "微软雅黑", sans-serif;
@@ -162,8 +180,9 @@ onMounted(() => {
       }
 
       .test_button {
-        width: 150px;
+        display: flex;
-        height: 100%;
+        text-align: center;
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-end;
@@ -179,6 +198,7 @@ onMounted(() => {
       justify-content: center;
       // padding: 30px 0 50px;
       margin-top: 100px;
+      // margin-bottom: 100px;
 
       img:nth-child(1) {
         width: 60%;
@@ -206,19 +226,6 @@ onMounted(() => {
       justify-content: center;
       margin-bottom: 20px;
 
-      .test_button {
-        width: 120px;
-        height: 100%;
-        border: 1px solid rgba(121, 121, 121, 1);
-        border-radius: 5px;
-        font-family: "微软雅黑", sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        color: #fff;
-        text-align: center;
-        line-height: 40px;
-        cursor: pointer;
-      }
 
       .test_button:hover {
         background: rgba(0, 0, 0, 0.2);
@@ -226,6 +233,22 @@ onMounted(() => {
     }
   }
 
+  .test_button {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 5px;
+    font-family: "微软雅黑", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    color: #fff;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+  }
+
+
   .mode:nth-child(3n + 3) {
     background: linear-gradient(180deg,
         rgba(0, 153, 255, 1) 0%,
@@ -242,6 +265,7 @@ onMounted(() => {
     .mode_subName,
     .test_button {
       color: #fff !important;
+
     }
 
     .test_button:hover {
@@ -256,18 +280,25 @@ onMounted(() => {
   outline: none !important;
 }
 
-.modeBG {
+// .modeBG {
-  &::before {
+//   &::before {
-    content: "";
+//     content: "";
-    position: absolute;
+//     position: absolute;
-    top: 0;
+//     top: 0;
-    left: 0;
+//     left: 0;
-    width: 100%;
+//     width: 100%;
-    height: 100%;
+//     height: 100%;
-    background-color: #70707080;
+//     background-color: #70707080;
-    ;
+//     ;
-  }
+//   }
 
 
+// }
+:deep(.el-carousel__container) {
+  height: 100%;
+}
+
+:deep(.el-carousel__item) {
+  position: relative;
 }
 </style>