build: 首页数据卡片样式

src/layout/components/Navbar.vue

@@ -51,7 +51,7 @@ function logout() {
 const schoolData = ref<SchoolList[]>([
   {
     school_id: 0,
-    name: "全部学校",
+    name: "全部学校全部学校全部学校全部学校",
   },
   {
     school_id: 1,

src/styles/sidebar.scss

@@ -16,6 +16,7 @@
     height: 100%;
     overflow: hidden;
     background-color: $menuBg;
+    box-shadow: 0 0 10px #eeeeee;
     transition: width 0.28s;
 
     // reset element-ui css

src/views/dashboard/components/DataCard.vue

@@ -61,74 +61,35 @@ onMounted(() => {
 });
 </script>
 <template>
-  <el-row :gutter="40" class="mb-4">
-    <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
-      <div class="data-box">
-        <div
-          class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
-        >
-          <svg-icon icon-class="uv" size="3em" />
-        </div>
-        <div class="flex flex-col space-y-3">
-          <div class="text-[var(--el-text-color-secondary)]">全部班级</div>
-          <div class="text-lg">{{ Math.round(classCountOutput) }}</div>
-        </div>
+  <el-row :gutter="40" class="data-card">
+    <el-col :xs="24" :sm="8" :lg="5">
+      <div class="card c1">
+        <span class="n">{{ Math.round(classCountOutput) }}</span
+        ><span>全部班级</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
-      <div class="data-box">
-        <div
-          class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
-        >
-          <svg-icon icon-class="uv" size="3em" />
-        </div>
-        <div class="flex flex-col space-y-3">
-          <div class="text-[var(--el-text-color-secondary)]">全部教师</div>
-          <div class="text-lg">{{ Math.round(teacherCountOutput) }}</div>
-        </div>
+    <el-col :xs="24" :sm="8" :lg="5">
+      <div class="card c2">
+        <span class="n">{{ Math.round(teacherCountOutput) }}</span
+        ><span>全部教师</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
-      <div class="data-box">
-        <div
-          class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
-        >
-          <svg-icon icon-class="uv" size="3em" />
-        </div>
-        <div class="flex flex-col space-y-3">
-          <div class="text-[var(--el-text-color-secondary)]">全部学生</div>
-          <div class="text-lg">{{ Math.round(studentCountOutput) }}</div>
-        </div>
+    <el-col :xs="24" :sm="8" :lg="5">
+      <div class="card c3">
+        <span class="n">{{ Math.round(studentCountOutput) }}</span
+        ><span>全部学生</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
-      <div class="data-box">
-        <div
-          class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
-        >
-          <svg-icon icon-class="message" size="3em" />
-        </div>
-        <div class="flex flex-col space-y-3">
-          <div class="text-[var(--el-text-color-secondary)]">设备套数</div>
-          <div class="text-lg">
-            {{ Math.round(equipmentCountOutput) }}
-          </div>
-        </div>
+    <el-col :xs="24" :sm="8" :lg="5">
+      <div class="card c4">
+        <span class="n">{{ Math.round(equipmentCountOutput) }}</span
+        ><span>设备套数</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
-      <div class="data-box">
-        <div
-          class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
-        >
-          <svg-icon icon-class="money" size="3em" />
-        </div>
-        <div class="flex flex-col space-y-3">
-          <div class="text-[var(--el-text-color-secondary)]">累计训练次数</div>
-          <div class="text-lg">
-            {{ Math.round(trainingCountOutput) }}
-          </div>
-        </div>
+    <el-col :xs="24" :sm="8" :lg="5">
+      <div class="card c5">
+        <span class="n">{{ Math.round(trainingCountOutput) }}</span
+        ><span>累计训练次数</span>
       </div>
     </el-col>
   </el-row>
@@ -141,17 +102,42 @@ onMounted(() => {
     flex: 0 0 20%;
   }
 }
-.data-box {
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
-  font-weight: bold;
-  color: var(--el-text-color-regular);
-  background: var(--el-bg-color-overlay);
-  border-color: var(--el-border-color);
-  box-shadow: var(--el-box-shadow-dark);
-}
-.svg-icon {
-  fill: currentcolor !important;
+.data-card {
+  margin: 0 auto !important;
+  padding: 42px;
+  background: #ffffff;
+  border-radius: 30px;
+  .card {
+    box-sizing: border-box;
+    width: 265px;
+    height: 134px;
+    padding: 32px 0 0 145px;
+    &.c1 {
+      background-image: url("../../../assets/index/classes.png");
+    }
+    &.c2 {
+      background-image: url("../../../assets/index/teachers.png");
+    }
+    &.c3 {
+      background-image: url("../../../assets/index/students.png");
+    }
+    &.c4 {
+      background-image: url("../../../assets/index/equipments.png");
+    }
+    &.c5 {
+      background-image: url("../../../assets/index/trainings.png");
+    }
+    span {
+      display: block;
+      color: #142141;
+      &.n {
+        font-size: 26px;
+        font-weight: bold;
+      }
+    }
+  }
+  //.data1{
+  //background-image:url("../../../assets/index/classes.png");
+  //}
 }
 </style>

src/views/dashboard/index.vue

@@ -71,9 +71,9 @@ const dialogVisible = ref(false);
     />
 
     <!-- 班级选择 及 案例展示 -->
-    <el-row class="row-bg" justify="space-between">
+    <el-row class="row-bg">
       <el-col :span="12">
-        <el-select v-model="classNumber" class="m-2" placeholder="全部班级">
+        <el-select v-model="classNumber" placeholder="全部班级" size="large">
           <el-option
             v-for="item in classData"
             :key="item.id"