build: 首页卡片基础样式

src/layout/components/Navbar.vue

@@ -104,14 +104,16 @@ watch(
         </div>
       </div>
       <!-- 学校选择下拉框 -->
-      <el-select v-model="schoolNumber" size="large" placeholder="全部学校">
-        <el-option
-          v-for="item in schoolData"
-          :key="item.school_id"
-          :label="item.name"
-          :value="item.school_id"
-        />
-      </el-select>
+      <div class="nav-select">
+        <el-select v-model="schoolNumber" size="large" placeholder="全部学校">
+          <el-option
+            v-for="item in schoolData"
+            :key="item.school_id"
+            :label="item.name"
+            :value="item.school_id"
+          />
+        </el-select>
+      </div>
       <!-- 用户头像 -->
       <div class="avatar-container">
         <span class="spl">|</span>
@@ -152,10 +154,6 @@ watch(
       }
     }
   }
-  .el-select {
-    padding: 15px 0;
-    margin-left: 12px;
-  }
   .avatar-container {
     display: flex;
     align-items: center;
@@ -180,5 +178,54 @@ watch(
   .svg-icon {
     margin-bottom: -2px;
   }
+  .el-select {
+    padding: 15px 0;
+    width: 280px;
+    margin-left: 12px;
+  }
+}
+/* 自定义 el-select 样式 */
+:deep(.el-input__wrapper) {
+  background: #efefef;
+  border-radius: 12px;
+}
+
+/* el-select 各种边框线隐藏**/
+:deep(.el-select) {
+  --el-select-input-focus-border-color: none !important;
+}
+:deep(.el-input__wrapper) {
+  box-shadow: none !important;
+}
+:deep(.el-select .el-input.is-focus .el-input__wrapper) {
+  box-shadow: none !important;
+}
+:deep(.el-select .el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
+:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
+  box-shadow: none !important;
+}
+//移动端兼容
+.mobile {
+  .navbar {
+    .nav-select {
+      position: absolute;
+      left: 0;
+      top: 80px;
+      z-index: 1;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 24px;
+      .el-select {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+      }
+      :deep(.el-input__wrapper) {
+        background: #ffffff;
+      }
+    }
+  }
 }
 </style>

src/views/dashboard/components/DataCard.vue

@@ -99,19 +99,24 @@ onMounted(() => {
   .el-col-lg-5 {
     display: block;
     max-width: 20%;
+    min-width: 285px;
     flex: 0 0 20%;
   }
 }
 .data-card {
   margin: 0 auto !important;
-  padding: 42px;
+  padding: 22px 42px;
   background: #ffffff;
   border-radius: 30px;
   .card {
     box-sizing: border-box;
     width: 265px;
     height: 134px;
+    max-width: 100%;
     padding: 32px 0 0 145px;
+    margin: 20px 0;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
     &.c1 {
       background-image: url("../../../assets/index/classes.png");
     }
@@ -136,8 +141,5 @@ onMounted(() => {
       }
     }
   }
-  //.data1{
-  //background-image:url("../../../assets/index/classes.png");
-  //}
 }
 </style>