00

src/views/system/Home/Index.vue

@@ -6,7 +6,7 @@
         <el-card class=" mb-5px " >
           <el-card shadow="never" class="h-100%">
             <template #header>
-              <div class="h-7 flex justify-between fw-800 text-25px">
+              <div class="h-5 flex justify-between fw-800 text-28px">
                 <span>基本信息</span>
               </div>
             </template>
@@ -41,7 +41,7 @@
             </div>
           </template>
           <el-card  class="pr-5px  mt-10px"
-                   style="background-color:#52afff ;opacity: 0.8; width: 90%; margin: auto">
+                   style="background-color:#56adfc ;opacity: 0.8; width: 90%; margin: auto;border-radius:10px">
             <div class="h-35px flex items-center justify-center flex-wrap mt-0px c-white mb-15px">
               <div class="px-25px text-center" style="margin: auto;">
                 <div class="mb-5px text-20px text-white fw-550">打卡人数</div>
@@ -63,12 +63,12 @@
             </div>
           </el-card>
           <el-row :gutter="8">
-            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
               <el-card  class="mb-27px h-465px mt-40px mr-15px ="
-                       style="min-width: 250px ;background-color: rgba(61,41,255,0.1);">
+                       style="min-width: 250px ;background-color: rgb(255,255,255);border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <template #header >
                   <div class="h-7 flex justify-between fw-800 text-22px ">
-                    <span style="color: #042b52">实时打卡状态</span>
+                    <span style="color: rgba(4,53,103,0.89)">实时打卡状态</span>
                   </div>
                 </template>
                 <!--                <div class="demo" >-->
@@ -97,7 +97,7 @@
                                     :dataList="list">
                   <div v-if="list.length > 0">
                     <el-row v-for="(item, i) of list" :key="i" class="shouye"
-                            style="margin-bottom: 5px; display: flex; justify-content: center;background :rgb(253,253,253);">
+                            style="margin-bottom: 5px; display: flex; justify-content: center;background :rgba(147,208,255,0.18);padding: 5px">
                       <el-col :span="6" class="center"
                               style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                         <div style="font-weight: 900">{{ item.studentName }}</div>
@@ -128,13 +128,13 @@
                 <!--                </div>-->
               </el-card>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
+            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
               <el-card  class=" h-465px mb-10px mt-40px mr-15px "
-                       style="min-width: 250px ;background-color: rgba(165,216,255,0.2);">
+                       style="min-width: 250px ;background-color: rgb(255,255,255);border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <!-- 移除 el-card 的边框 -->
                 <template #header>
                   <div class="h-7 flex justify-between fw-800 text-22px">
-                    <span style="color: #042b52">缺勤预警</span>
+                    <span style="color: rgba(4,53,103,0.89)">缺勤预警</span>
                   </div>
                 </template>
 
@@ -165,7 +165,7 @@
                                       :dataList="list2">
                     <div v-if="list2.length > 0">
                       <el-row v-for="(item, i) of list2" :key="i" class="shouye"
-                              style="margin-bottom: 5px; display: flex; justify-content: center;background :rgb(253,253,253);padding: 5px">
+                              style="margin-bottom: 5px; display: flex; justify-content: center;background :rgba(147,208,255,0.18);padding:2px">
                         <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
                           <div>{{ item.ID }}</div>
                         </el-col> -->
@@ -197,10 +197,10 @@
             </el-col>
             <el-col :xs="24" :sm="24" :md="24" :lg="23" :xl="8">
               <el-card  class=" mb-27px h-465px mt-40px "
-                       style=" background-color: rgba(169,165,130,0.03);">
+                       style="border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <template #header>
                   <div class="h-7 flex justify-between fw-800 text-20px">
-                    <span style="color: #042b52">周出勤情况</span>
+                    <span style="color: rgba(4,53,103,0.89)">周出勤情况</span>
                   </div>
                 </template>
                 <el-card shadow="never" class=" h-365px ">
@@ -218,18 +218,18 @@
       <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="7" class="h-480px">
         <!-- 第一个el-row -->
         <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-          <el-card  class=" mt-0px h-1123px mb-10px " style="min-width:520px">
+          <el-card  class=" mt-0px h-1123px mb-10px " style="min-width:520px;">
             <template #header>
               <div class="h-7 flex justify-between fw-800 text-25px">
                 <span>毕业条件达成统计</span>
               </div>
             </template>
-            <el-card >
+            <el-card style="border-radius:10px;border: 3px solid rgba(110,153,243,0.32)">
             <el-skeleton :loading="loading" animated>
               <Echart :options="pieOptionsData" :height="250"/>
             </el-skeleton>
             </el-card>
-            <el-card   class=" mt-15px h-672px " style="min-width:480px">
+            <el-card   class=" mt-15px h-672px " style="min-width:480px;border-radius:10px;border: 3px solid rgba(110,153,243,0.32);">
               <template #header>
                 <div class="h-7 flex justify-between fw-800 text-20px">
                   <span style="color: #042b52">学生毕业条件达成率</span>
@@ -253,7 +253,7 @@
                                     :dataList="list1">
                   <div v-if="list1.length > 0">
                     <el-row v-for="(item, i) of list1" :key="i" class="shouye"
-                            style="margin-bottom: 10px ;  display: flex; justify-content: center;background: rgba(138,193,248,0.17);padding: 5px">
+                            style="margin-bottom: 10px ;  display: flex; justify-content: center;background: rgba(138,193,248,0.17);padding: 2px">
                       <!-- 增加行与行之间的间距 -->
                       <el-col :span="12" class="center" style="padding: 15px;"> <!-- 增加内边距 -->
                         <div style="font-weight: 550;color: black">{{ item.name }}</div>
@@ -708,8 +708,6 @@ getAllApi()
 
 .shouye {
   flex-wrap: nowrap;
-
-
 }
 
 ::v-deep .el-divider.el-divider--vertical {
@@ -753,18 +751,18 @@ getAllApi()
 }
 
 /* 大于md屏幕且小于等于lg屏幕（例如小桌面） */
-@media (min-width: 1199px) and (max-width: 1399px) {
+@media (min-width: 1199px) and (max-width: 1499px) {
   .text-30px {
-    font-size: 21px;
+    font-size: 18px;
   }
 
   .text-40px {
-    font-size: 32px;
+    font-size: 30px;
   }
 }
 
 /* 大于lg屏幕（例如大桌面） */
-@media (min-width: 1400px) {
+@media (min-width: 1500px) {
   .text-30px {
     font-size: 26px; /* 在大屏幕上使用默认字体大小 */
   }