00

src/views/Home/Index.vue

@@ -236,7 +236,7 @@
 
                 <vue3ScrollSeamless class="scroll-wraps text-color" :classOptions="class2Options" :dataList="list2">
                   <div v-if="list2.length > 0">
-                    <el-row v-for="(item, i) of list2" :key="i" class="shouye">
+                    <el-row v-for="(item, i) of list2" :key="i" class="shouye" >
                       <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
                         <div>{{ item.ID }}</div>
                       </el-col> -->
@@ -827,7 +827,7 @@ getAllApi()
 }
 
 .scroll-wrap {
-  width: 95%;
+  width: 100%;
   height: 330px;
   margin: 0 auto;
   overflow: hidden;
@@ -835,7 +835,7 @@ getAllApi()
   opacity: 0.6;
   font-size: 15px;
   margin-top: 20px;
-  margin-left: 18px;
+  //margin-left: 18px;
 
 }
 

src/views/system/Home/Index.vue

@@ -2,135 +2,116 @@
   <el-skeleton :loading="loading" animated>
     <el-row :gutter="8">
       <!-- 第一部分 -->
-      <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
-        <el-card class="h-940px mb-10px">
+      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="17" style="min-width:600px">
+        <el-card class=" mb-5px " >
           <el-card shadow="never" class="h-100%">
-    
             <template #header>
-              <div class="h-7 flex justify-between fw-800 text-20px">
+              <div class="h-7 flex justify-between fw-800 text-25px">
                 <span>基本信息</span>
               </div>
             </template>
-    
+
             <el-row style="flex-wrap: wrap; ">
-              <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
-                <el-card shadow="hover" class="mr-5px mt-5px " style="background-color:#2585a6 ">
-                  <div class="flex items-center h-75px ">
+              <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="24"
+                      :md="24" :lg="8" :xl="8">
+                <el-card  class="mr-10px mt-5px  ml-10px "
+                         :style="{ backgroundColor: item.cardBgColor }">
+                  <div class="flex items-center h-120px ">
                     <!-- <Icon :icon="item.icon" :size="25" class="mr-8px" /> -->
-                    <Icon :icon="item.icon" :size="38" class="mr-8px " />
-                    <span class="text-17px c-white">{{ item.name }}</span>
+                    <Icon :icon="item.icon" :size="80"
+                          :style="{ backgroundColor: item.iconBgColor, color: item. iconColor, borderRadius: '50%' }"
+                          class="circle-icon"/>
+                    <span class="text-30px c-black ">{{ item.name }}</span>
+                  </div>
+                  <div class="mb-18px text-40px c-#233B59FF ml-20px text-center">{{
+                      t(item.message)
+                    }}
                   </div>
-                  <div class="mb-18px text-32px c-white ml-20px text-center">{{ t(item.message) }}</div>
                   <!-- <div class="mt-12px flex justify-between text-12px text-gray-400">                                                                  </div> -->
                 </el-card>
               </el-col>
             </el-row>
           </el-card>
-    
-          <el-card shadow="never" class=" h-100% mt-10px ">
-            <template #header>
-              <div class="h-5 flex justify-between fw-800 text-20px">
-                <span>实时出勤统计</span>
+
+        </el-card>
+        <el-card class=" mt-10px mb-10px pb-15px">
+          <template #header>
+            <div class="h-7 flex justify-between fw-800 text-25px ml-15px">
+              <span>实时出勤统计</span>
+            </div>
+          </template>
+          <el-card  class="pr-5px  mt-10px"
+                   style="background-color:#52afff ;opacity: 0.8; width: 90%; margin: auto">
+            <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>
+                <CountTo class="text-28px" :start-val="0" :end-val="totalSate.normalNum"
+                         :duration="2600"/>
               </div>
-            </template>
-            <el-card shadow="never" class="ml-2px  pr-10px  mt-10px" style="background-color:#33a3dc ;opacity: 0.8; ">
-              <div class="h-70px flex items-center justify-center flex-wrap mt-10px c-white">
-                <div class="px-25px text-center" style="margin: auto;">
-                  <div class="mb-16px text-18px text-white ">打卡人数</div>
-                  <CountTo class="text-28px" :start-val="0" :end-val="totalSate.normalNum" :duration="2600" />
-                </div>
-                <el-divider direction="vertical" border-style="dashed" />
-                <div class="px-8px text-center" style="margin: auto;">
-                  <div class="mb-16px text-18px text-white ">未打卡人数</div>
-                  <CountTo class="text-28px" :start-val="0" :end-val="totalSate.errorNum" :duration="2600" />
-                </div>
-                <el-divider direction="vertical" border-style="dashed" />
-                <div class="px-8px text-center" style="margin: auto;">
-                  <div class="mb-16px text-18px text-white ">请假人数</div>
-                  <CountTo class="text-28px" :start-val="0" :end-val="totalSate.excuseNum" :duration="2600" />
-                </div>
+              <el-divider direction="vertical" border-style="dashed"/>
+              <div class="px-8px text-center " style="margin: auto;">
+                <div class="mb-5px text-20px text-white fw-550">未打卡人数</div>
+                <CountTo class="text-28px" :start-val="0" :end-val="totalSate.errorNum"
+                         :duration="2600"/>
               </div>
-            </el-card>
-          </el-card>
-    
-          <el-card shadow="hover" class=" mt-10px">
-            <template #header>
-              <div class="h-5 flex justify-between fw-800 text-20px">
-                <span>毕业条件达成统计</span>
+              <el-divider direction="vertical" border-style="dashed"/>
+              <div class="px-8px text-center" style="margin: auto;">
+                <div class=" text-20px text-white fw-550">请假人数</div>
+                <CountTo class="text-28px" :start-val="0" :end-val="totalSate.excuseNum"
+                         :duration="2600"/>
               </div>
-            </template>
-            <el-skeleton :loading="loading" animated>
-              <Echart :options="pieOptionsData" :height="250" />
-            </el-skeleton>
+            </div>
           </el-card>
-        </el-card>
-      </el-col>
-      <!-- 第二部分 -->
-      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" class="h-480px">
-        <!-- 第一个el-row -->
-        <el-row :gutter="15">
-          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-            <el-card shadow="never" class=" mb-10px h-465px ">
-              <template #header>
-                <div class="h-7 flex justify-between fw-800 text-20px">
-                  <span>周出勤情况</span>
-                </div>
-              </template>
-              <el-card shadow="hover" class=" h-365px ">
-                <el-skeleton :loading="loading" animated >
-                  <Echart :options="barOptionsData" :height="350" style="margin-top: -30px;"/>
-                </el-skeleton>
-              </el-card>
-            </el-card>
-          </el-col>
-    
-          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-            <el-card shadow="never" class="mb-10px h-465px ">
-              <template #header>
-                <div class="h-7 flex justify-between fw-800 text-20px">
-                  <span>实时打卡状态</span>
+          <el-row :gutter="8">
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :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);">
+                <template #header >
+                  <div class="h-7 flex justify-between fw-800 text-22px ">
+                    <span style="color: #042b52">实时打卡状态</span>
+                  </div>
+                </template>
+                <!--                <div class="demo" >-->
+                <div class="table-header" >
+                  <div class="header" >
+                    <el-row class="shouye" >
+                      <el-col :span="6" class="center text-18px" >
+                        <div style="font-weight:550">姓名</div>
+                      </el-col>
+                      <el-col :span="6" class="center text-18px" >
+                        <div style="font-weight:550">学号</div>
+                      </el-col>
+                      <el-col :span="6" class="center text-18px" >
+                        <div style="font-weight:550">工作间</div>
+                      </el-col>
+                      <el-col :span="6" class="center text-18px" >
+                        <div style="font-weight:550">打卡时间</div>
+                      </el-col>
+                      <!-- <el-col :span="10" class="center text-18px" style="border: none;">
+                        <div>缺勤时间段</div>
+                      </el-col> -->
+                    </el-row>
+                  </div>
                 </div>
-              </template>
-              <div class="demo">
-                <div class="table-header">
-                          <div class="header">
-                            <el-row class="shouye" style="border: none;">
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>姓名</div>
-                              </el-col>
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>学号</div>
-                              </el-col>
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>工作间</div>
-                              </el-col>
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>打卡时间</div>
-                              </el-col>
-                              <!-- <el-col :span="10" class="center text-18px" style="border: none;">
-                                <div>缺勤时间段</div>
-                              </el-col> -->
-                            </el-row>
-                          </div>
-                        </div>
-                <vue3ScrollSeamless class="scroll-wrap text-color" :classOptions="classOptions" :dataList="list">
+                <vue3ScrollSeamless class="scroll-wrap text-color " :classOptions="classOptions"
+                                    :dataList="list">
                   <div v-if="list.length > 0">
                     <el-row v-for="(item, i) of list" :key="i" class="shouye"
-                      style="margin-bottom: 10px; display: flex; justify-content: center;">
+                            style="margin-bottom: 5px; display: flex; justify-content: center;background :rgb(253,253,253);">
                       <el-col :span="6" class="center"
-                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
-                        <div>{{ item.studentName }}</div>
+                              style="display: flex; justify-content: center; align-items: center; padding: 6px;">
+                        <div style="font-weight: 900">{{ item.studentName }}</div>
                       </el-col>
                       <el-col :span="6" class="center"
-                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
+                              style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                         <div>{{ item.userNumber }}</div>
                       </el-col>
                       <el-col :span="6" class="center"
-                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
+                              style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                         <div>{{ item.daptName }}</div>
                       </el-col>
                       <el-col :span="6" class="center"
-                        style="display: flex; justify-content: center; align-items: center; padding: 6px;">
+                              style="display: flex; justify-content: center; align-items: center; padding: 6px;">
                         <div>{{ formatDate(item.clockInTime) }}</div>
                       </el-col>
                     </el-row>
@@ -140,151 +121,191 @@
                     暂无预测记录
                   </div> -->
                 </vue3ScrollSeamless>
-                <div v-if="list.length == 0" style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
+                <div v-if="list.length == 0"
+                     style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
                   <el-empty description="暂无数据"/>
                 </div>
-              </div>
-            </el-card>
-    
-          </el-col>
-        </el-row>
-      </el-col>
-              <!-- 第二个el-row -->
-      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7">
-        <el-row :gutter="15" align="center">
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
-            <el-card shadow="never" class=" h-465px mb-10px "> <!-- 移除 el-card 的边框 -->
-              <template #header>
-                <div class="h-7 flex justify-between fw-800 text-20px">
-                  <span>缺勤预警</span>
-                </div>
-              </template>
-    
-              <div class="demos">
-                <div class="table-header">
-                          <div class="header">
-                            <el-row class="shouye" style="border: none;">
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>姓名</div>
-                              </el-col>
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>学号</div>
-                              </el-col>
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>工作间</div>
-                              </el-col>
-                              <el-col :span="6" class="center text-18px" style="border: none;">
-                                <div>导师</div>
-                              </el-col>
-                              <!-- <el-col :span="10" class="center text-18px" style="border: none;">
-                                <div>缺勤时间段</div>
-                              </el-col> -->
-                            </el-row>
-                          </div>
-                        </div>
-    
-                <vue3ScrollSeamless class="scroll-wraps text-color" :classOptions="class2Options" :dataList="list2">
-                  <div v-if="list2.length > 0">
-                    <el-row v-for="(item, i) of list2" :key="i" class="shouye">
-                      <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
-                        <div>{{ item.ID }}</div>
-                      </el-col> -->
-                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
-                        <div>{{ item.studentName }}</div>
-                      </el-col>
-                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
-                        <div>{{ item.userNumber }}</div>
-                      </el-col>
-                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
-                        <div>{{ item.deptName }}</div>
-                      </el-col>
-                      <el-col :span="6" class="center" style="padding: 10px; border: none;">
-                        <div>{{ item.supervisor }}</div>
-                      </el-col>
-                    </el-row>
+                <!--                </div>-->
+              </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :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);">
+                <!-- 移除 el-card 的边框 -->
+                <template #header>
+                  <div class="h-7 flex justify-between fw-800 text-22px">
+                    <span style="color: #042b52">缺勤预警</span>
+                  </div>
+                </template>
+
+                <div class="demos">
+                  <div class="table-header">
+                    <div class="header">
+                      <el-row class="shouye" style="border: none;">
+                        <el-col :span="6" class="center text-18px" style="border: none;">
+                          <div style="font-weight:550">姓名</div>
+                        </el-col>
+                        <el-col :span="6" class="center text-18px" style="border: none;">
+                          <div style="font-weight:550">学号</div>
+                        </el-col>
+                        <el-col :span="6" class="center text-18px" style="border: none;">
+                          <div style="font-weight:550">工作间</div>
+                        </el-col>
+                        <el-col :span="6" class="center text-18px" style="border: none;">
+                          <div style="font-weight:550">导师</div>
+                        </el-col>
+                        <!-- <el-col :span="10" class="center text-18px" style="border: none;">
+                          <div>缺勤时间段</div>
+                        </el-col> -->
+                      </el-row>
+                    </div>
+                  </div>
+
+                  <vue3ScrollSeamless class="scroll-wraps text-color" :classOptions="class2Options"
+                                      :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">
+                        <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
+                          <div>{{ item.ID }}</div>
+                        </el-col> -->
+                        <el-col :span="6" class="center" style="padding: 10px; border: none;">
+                          <div style="font-weight: 900">{{ item.studentName }}</div>
+                        </el-col>
+                        <el-col :span="6" class="center" style="padding: 10px; border: none;">
+                          <div>{{ item.userNumber }}</div>
+                        </el-col>
+                        <el-col :span="6" class="center" style="padding: 10px; border: none;">
+                          <div>{{ item.deptName }}</div>
+                        </el-col>
+                        <el-col :span="6" class="center" style="padding: 10px; border: none;">
+                          <div style="font-weight: 900">{{ item.supervisor }}</div>
+                        </el-col>
+                      </el-row>
+                    </div>
+                    <!-- <div v-if="list2.length == 0"
+                      style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
+                      暂无预测记录
+                    </div> -->
+                  </vue3ScrollSeamless>
+                  <div v-if="list2.length == 0"
+                       style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
+                    <el-empty description="暂无数据"/>
                   </div>
-                  <!-- <div v-if="list2.length == 0"
-                    style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
-                    暂无预测记录
-                  </div> -->
-                </vue3ScrollSeamless>
-                <div v-if="list2.length == 0" style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
-                  <el-empty description="暂无数据"/>
                 </div>
+              </el-card>
+            </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);">
+                <template #header>
+                  <div class="h-7 flex justify-between fw-800 text-20px">
+                    <span style="color: #042b52">周出勤情况</span>
+                  </div>
+                </template>
+                <el-card shadow="never" class=" h-365px ">
+                  <el-skeleton :loading="loading" animated>
+                    <Echart :options="barOptionsData" :height="350" style="margin-top: -30px;"/>
+                  </el-skeleton>
+                </el-card>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+
+      <!-- 第二部分 -->
+      <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">
+            <template #header>
+              <div class="h-7 flex justify-between fw-800 text-25px">
+                <span>毕业条件达成统计</span>
               </div>
+            </template>
+            <el-card >
+            <el-skeleton :loading="loading" animated>
+              <Echart :options="pieOptionsData" :height="250"/>
+            </el-skeleton>
             </el-card>
-    
-          </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
-            <el-card shadow="never" class=" mt-1px h-465px ">
+            <el-card   class=" mt-15px h-672px " style="min-width:480px">
               <template #header>
                 <div class="h-7 flex justify-between fw-800 text-20px">
-                  <span>学生毕业条件达成率</span>
+                  <span style="color: #042b52">学生毕业条件达成率</span>
                 </div>
               </template>
-        
+
               <div class="demoss">
                 <div class="header">
-                <el-row class="shouye h-25px" style="border: none;">
-                  <el-col :span="12" class="center text-18px" style="border: none;padding: 8px;margin-left: 5px; margin-top: -5px;">
-                    <div>工作间</div>
-                  </el-col>
-                  <el-col :span="12" class="center text-18px" style="border: none;padding: 8px;margin-left: -15px; margin-top: -5px;">
-                    <div>达成率</div>
-                  </el-col>
-                </el-row>
-              </div>
-                <vue3ScrollSeamless class="scroll-wrapss  text-color" :classOptions="list1Options" :dataList="list1">
+                  <el-row class="shouye h-40px" style="border: none;">
+                    <el-col :span="12" class="center text-18px"
+                            style="border: none;padding: 8px;margin-left: 5px; margin-top: -5px;">
+                      <div style="font-weight:550">工作间</div>
+                    </el-col>
+                    <el-col :span="12" class="center text-18px"
+                            style="border: none;padding: 8px;margin-left: -15px; margin-top: -5px;">
+                      <div style="font-weight:550">达成率</div>
+                    </el-col>
+                  </el-row>
+                </div>
+                <vue3ScrollSeamless class="scroll-wrapss  text-color" :classOptions="list1Options"
+                                    :dataList="list1">
                   <div v-if="list1.length > 0">
-                    <el-row v-for="(item, i) of list1" :key="i" class="shouye" :style="{ marginBottom: '10px' }">
+                    <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">
                       <!-- 增加行与行之间的间距 -->
-                      <el-col :span="12" class="center" style="padding: 8px;"> <!-- 增加内边距 -->
-                        <div>{{ item.name }}</div>
+                      <el-col :span="12" class="center" style="padding: 15px;"> <!-- 增加内边距 -->
+                        <div style="font-weight: 550;color: black">{{ item.name }}</div>
                       </el-col>
-                      <el-col :span="12" class="center" style="padding: 8px;">
-                        <div>{{ item.graduationRate }}%</div>
+                      <el-col :span="12" class="center" style="padding: 15px;">
+                        <div style="font-weight: 550 ;color: black">{{ item.graduationRate }}%</div>
                       </el-col>
                     </el-row>
                   </div>
                   <div v-if="list1.length == 0"
-                    style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
+                       style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
                     暂无预测记录
                   </div>
                 </vue3ScrollSeamless>
               </div>
             </el-card>
-          </el-col>
-        </el-row>
+          </el-card>
+        </el-col>
+
       </el-col>
+      <!--        </el-row>-->
+
+      <!-- 第二个el-row -->
+
     </el-row>
   </el-skeleton>
 </template>
 
 <script lang="ts" setup>
-import { EChartsOption, List } from 'echarts'
-import { formatTime } from '@/utils'
+import {EChartsOption, List} from 'echarts'
+import {formatTime} from '@/utils'
 import {formatDate} from "@/utils/formatTime";
-import { useUserStore } from '@/store/modules/user'
-import { useWatermark } from '@/hooks/web/useWatermark'
-import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
-import { pieOptions, barOptions } from './echarts-data'
-import { reactive, onMounted, watchEffect } from "vue";
-import { vue3ScrollSeamless } from "vue3-scroll-seamless";
+import {useUserStore} from '@/store/modules/user'
+import {useWatermark} from '@/hooks/web/useWatermark'
+import type {WorkplaceTotal, Project, Notice, Shortcut} from './types'
+import {pieOptions, barOptions} from './echarts-data'
+import {reactive, onMounted, watchEffect} from "vue";
+import {vue3ScrollSeamless} from "vue3-scroll-seamless";
 import * as UserApi from '@/api/system/user'
 import * as  DeptApi from '@/api/system/dept'
-import  { StudentAttendanceApi } from '@/api/system/studentAttendance'
+import {StudentAttendanceApi} from '@/api/system/studentAttendance'
 
-defineOptions({ name: 'SystemHome' })
+defineOptions({name: 'SystemHome'})
 
-const { t } = useI18n()
+const {t} = useI18n()
 const userStore = useUserStore()
-const { setWatermark } = useWatermark()
+const {setWatermark} = useWatermark()
 const loading = ref(true)
 const avatar = userStore.getUser.avatar
 const username = userStore.getUser.nickname
 
 
-
 /*基本信息*/
 const detail = reactive({
   deptNum: undefined,
@@ -305,22 +326,31 @@ const getProject = async () => {
     {
       name: '学院工作间数量',
       icon: 'svg-icon:gzs',
+      iconBgColor: 'rgba(2,178,248,0.7)', // 图标背景颜色
+      iconColor: '#ffffff',// 图标颜色
+      cardBgColor: 'rgba(19,190,248,0.15)',
       message: String(detail.deptNum || 0) + '个',
       time: new Date()
     },
     {
       name: '导师数量',
       icon: 'svg-icon:ds',
+      iconBgColor: 'rgba(103,82,239,0.7)', // 图标背景颜色
+      iconColor: '#ffffff',
+      cardBgColor:'rgba(103,82,239,0.15)',
       message: String(detail.teacherNum || 0) + '人',
       time: new Date()
     },
     {
       name: '在校生数量',
       icon: 'svg-icon:zxs',
+      iconBgColor: 'rgba(55,84,183,0.7)', // 图标背景颜色
+      iconColor: '#ffffff',
+      cardBgColor: 'rgba(139,173,248,0.15)',
       message: String(detail.studentNum || 0) + '人',
       time: new Date()
     }
-  
+
   ]
   projects = Object.assign(projects, data)
 }
@@ -350,7 +380,12 @@ const getGraduateCount = async () => {
     title: {
       text: null,
       left: 'center',
-      top: '20px'
+      top: '25px',
+      textStyle: {
+        fontSize: 20, // 增大标题字体大小
+        fontWeight: 'bold', // 加粗标题字体
+        color: '#333' // 调整标题字体颜色
+      }
     },
     tooltip: {
       trigger: 'item',
@@ -358,6 +393,11 @@ const getGraduateCount = async () => {
     legend: {
       top: '10%',  // 顶部位置
       left: 'left', // 左侧位置
+      textStyle: {
+        fontSize: 18, // 增大图例字体大小
+        fontWeight: 'bold',
+        color: '#555' // 调整图例字体颜色
+      }
     },
     series: [
       {
@@ -377,7 +417,13 @@ const getGraduateCount = async () => {
               emphasis: {
                 show: true,
               },
+              textStyle: {
+                fontSize: 16, // 增大标注字体大小
+                fontWeight: 'bold', // 加粗标注字体
+                color: '#000' // 调整标注字体颜色
+              },
             },
+
             labelLine: {
               show: true,
               length: 75,
@@ -396,6 +442,11 @@ const getGraduateCount = async () => {
               emphasis: {
                 show: true,
               },
+              textStyle: {
+                fontSize: 16, // 增大标注字体大小
+                fontWeight: 'bold', // 加粗标注字体
+                color: '#000' // 调整标注字体颜色
+              },
             },
             labelLine: {
               show: true,
@@ -409,25 +460,31 @@ const getGraduateCount = async () => {
         itemStyle: {
           // 设置饼图的颜色
           color: function (params) {
-            const colorList = ['#2585a6','#5cb5e3' ]; // 定义颜色数组
+            const colorList = ['rgba(89,218,246,0.96)', '#6e99f3']; // 定义颜色数组
             return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
           }
         }
       },
     ],
   };
-  
-     // set(
-     //   pieOptionsData,
-     //   'legend.data',
-     //   data.map((v) => t(v.name))
-     // );
-  
+
+  // set(
+  //   pieOptionsData,
+
+  //   'legend.data',
+  //   data.map((v) => t(v.name))
+  // );
+
   pieOptionsData = Object.assign(pieOptionsData, options);
 };
 
 /**周出勤情况 */
 let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+barOptionsData.textStyle = {
+  fontSize: 14, // 设置字体大小
+  color: '#333', // 设置字体颜色
+  fontWeight: 'bold'
+};
 const getWeekend = async () => {
   const data = await StudentAttendanceApi.getWeekendAttendance();
   console.log("周出勤情况", data);
@@ -472,7 +529,7 @@ const list1 = reactive([]);
 const getGraduationSource = async () => {
   const data = await DeptApi.getGraduationSource()
   console.log("毕业条件达成率", data);
-  list1.splice(0, list1.length,  ...data);
+  list1.splice(0, list1.length, ...data);
 }
 const list1Options = reactive({
   step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
@@ -514,6 +571,38 @@ getAllApi()
 </script>
 
 <style scoped>
+.circle-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  margin-right: 20px;
+  width: 80px;
+  height: 80px;
+}
+
+@media (max-width: 1198px) {
+  .circle-icon {
+    width: 130px; /* 小屏幕下的尺寸 */
+    height: 130px;
+  }
+}
+
+@media (min-width: 1199px) and (max-width: 1624px) {
+  .circle-icon {
+    width: 90px; /* 中等屏幕下的尺寸 */
+    height: 90px;
+  }
+}
+
+@media (min-width: 1625px) {
+  .circle-icon {
+    width: 120px; /* 大屏幕下的尺寸 */
+    height: 120px;
+  }
+}
+
 .center {
   text-align: center;
 }
@@ -532,48 +621,46 @@ getAllApi()
 }
 
 .demo {
-  width: 99%;
+  width: 100%;
   height: 362px;
 }
 
 .demos {
-  width: 95%;
+  width: 100%;
   height: 100%;
 }
 
 .demoss {
-  width: 95%;
+  width: 100%;
   height: 100%;
 }
 
 .scroll-wrap {
-  width: 95%;
-  height: 330px;
+  width: 100%;
+  height: 320px;
   margin: 0 auto;
   overflow: hidden;
-  /* background-color: #feeeed; */
-  opacity: 0.6;
+  opacity: 0.8;
   font-size: 15px;
   margin-top: 20px;
-  margin-left: 18px;
 
 }
 
 .scroll-wraps {
-  width: 101%;
-  height: 350px;
+  width: 100%;
+  height: 320px;
   margin: 0 auto;
   overflow: hidden;
-  opacity: 0.6;
+  opacity: 0.8;
   font-size: 15px;
-  border: none;
+
   margin-top: 20px;
 
 }
 
 .scroll-wrapss {
   width: 90%;
-  height: 350px;
+  height: 515px;
   margin: 0 auto;
   overflow: hidden;
   /* background-color: rgba(198, 204, 238, 0.3); */
@@ -614,17 +701,76 @@ getAllApi()
 
 /* .text-color {
  color: rgb(15, 131, 233);
-} */
+/* .text-color {
 
+} */
 
 
 .shouye {
   flex-wrap: nowrap;
-  border-bottom: 1px solid;
+
+
 }
 
 ::v-deep .el-divider.el-divider--vertical {
   border-left: 1px solid white;
 }
+
+/* 默认样式，适用于所有屏幕 */
+.text-30px {
+  font-size: 30px;
+}
+
+.text-30px.c-black {
+  font-weight: bold; /* 加粗字体 */
+}
+
+.text-40px {
+  font-size: 40px;
+  font-weight: bold;
+}
+
+/* 小于等于sm屏幕（例如手机） */
+@media (max-width: 867px) {
+  .text-30px {
+    font-size: 26px; /* 在小屏幕上减小字体大小 */
+  }
+
+  .text-40px {
+    font-size: 36px; /* 在小屏幕上减小字体大小 */
+  }
+}
+
+/* 大于sm屏幕且小于等于md屏幕（例如平板） */
+@media (min-width: 868px) and (max-width:1198px) {
+  .text-30px {
+    font-size: 26px;
+  }
+
+  .text-40px {
+    font-size: 36px;
+  }
+}
+
+/* 大于md屏幕且小于等于lg屏幕（例如小桌面） */
+@media (min-width: 1199px) and (max-width: 1399px) {
+  .text-30px {
+    font-size: 21px;
+  }
+
+  .text-40px {
+    font-size: 32px;
+  }
+}
+
+/* 大于lg屏幕（例如大桌面） */
+@media (min-width: 1400px) {
+  .text-30px {
+    font-size: 26px; /* 在大屏幕上使用默认字体大小 */
+  }
+
+  .text-40px {
+    font-size: 36px; /* 在大屏幕上使用默认字体大小 */
+  }
+}
 </style>
-                                                  

src/views/system/Home/echarts-data.ts

@@ -139,7 +139,7 @@ export const barOptions: EChartsOption = {
     ],
     axisTick: {
       alignWithLabel: true
-    }
+    },
   },
   yAxis: {
     type: 'value'
@@ -158,7 +158,7 @@ export const barOptions: EChartsOption = {
       data: [],
       type: 'bar',
       itemStyle: {
-        color: '#CD5C5C'
+        color: '#ec8077'
       }
     },
     {