00

src/views/system/Home/Index.vue

@@ -12,8 +12,8 @@
             </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-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="8"
+                      :md="8" :lg="8" :xl="8">
                 <el-card  class="mr-10px mt-5px  ml-10px "
                          :style="{ backgroundColor: item.cardBgColor }">
                   <div class="flex items-center h-120px ">
@@ -63,7 +63,7 @@
             </div>
           </el-card>
           <el-row :gutter="8">
-            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
               <el-card  class="mb-27px h-465px mt-40px mr-15px ="
                        style="min-width: 250px ;background-color: rgb(255,255,255);border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <template #header >
@@ -128,7 +128,7 @@
                 <!--                </div>-->
               </el-card>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
               <el-card  class=" h-465px mb-10px mt-40px mr-15px "
                        style="min-width: 250px ;background-color: rgb(255,255,255);border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <!-- 移除 el-card 的边框 -->
@@ -195,7 +195,7 @@
                 </div>
               </el-card>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="24" :lg="23" :xl="8">
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
               <el-card  class=" mb-27px h-465px mt-40px "
                        style="border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <template #header>
@@ -218,18 +218,20 @@
       <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 " >
             <template #header>
               <div class="h-7 flex justify-between fw-800 text-25px">
                 <span>毕业条件达成统计</span>
               </div>
             </template>
+            <div id="ChartContainer" class="chart-container">
             <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"/>
+              <Echart :options="pieOptionsData" :height="230"/>
             </el-skeleton>
             </el-card>
-            <el-card   class=" mt-15px h-672px " style="min-width:480px;border-radius:10px;border: 3px solid rgba(110,153,243,0.32);">
+            </div>
+            <el-card   class=" mt-20px h-672px " style="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>
@@ -370,6 +372,9 @@ const getCount = async () => {
 }
 
 // /**毕业达成统计 */
+
+
+
 let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 const getGraduateCount = async () => {
   const data = await UserApi.getGraduateCount()
@@ -403,7 +408,7 @@ const getGraduateCount = async () => {
       {
         type: 'pie',
         radius: ['120px', '70px'], // 设定内圈和外圈半径
-        center: ['50%', '85%'], // 中心位置
+        center: ['50%', '95%'], // 中心位置
         startAngle: 180,
         endAngle: 360,
         data: [
@@ -418,7 +423,7 @@ const getGraduateCount = async () => {
                 show: true,
               },
               textStyle: {
-                fontSize: 16, // 增大标注字体大小
+                fontSize: 14, // 增大标注字体大小
                 fontWeight: 'bold', // 加粗标注字体
                 color: '#000' // 调整标注字体颜色
               },
@@ -426,8 +431,8 @@ const getGraduateCount = async () => {
 
             labelLine: {
               show: true,
-              length: 75,
-              length2: 10,
+              length: 65,
+              length2: 5,
               smooth: true,
               lineDash: [5, 5],
             },
@@ -443,15 +448,15 @@ const getGraduateCount = async () => {
                 show: true,
               },
               textStyle: {
-                fontSize: 16, // 增大标注字体大小
+                fontSize: 14, // 增大标注字体大小
                 fontWeight: 'bold', // 加粗标注字体
                 color: '#000' // 调整标注字体颜色
               },
             },
             labelLine: {
               show: true,
-              length: 75,
-              length2: 10,
+              length: 65,
+              length2: 5,
               smooth: true,
               lineDash: [5, 5],
             },
@@ -577,7 +582,7 @@ getAllApi()
   justify-content: center;
   border-radius: 50%;
   aspect-ratio: 1 / 1;
-  margin-right: 20px;
+  margin-right: 10px;
   width: 80px;
   height: 80px;
 }
@@ -589,6 +594,20 @@ getAllApi()
   }
 }
 
+@media (min-width: 768px) and (max-width: 868px) {
+  .circle-icon {
+    width: 90px; /* 中等屏幕下的尺寸 */
+    height: 90px;
+  }
+}
+
+@media (min-width: 869px) and (max-width: 1198px) {
+  .circle-icon {
+    width: 100px; /* 中等屏幕下的尺寸 */
+    height: 100px;
+  }
+}
+
 @media (min-width: 1199px) and (max-width: 1624px) {
   .circle-icon {
     width: 90px; /* 中等屏幕下的尺寸 */
@@ -619,7 +638,6 @@ getAllApi()
 .title {
   font-size: 19px;
 }
-
 .demo {
   width: 100%;
   height: 362px;
@@ -653,7 +671,6 @@ getAllApi()
   overflow: hidden;
   opacity: 0.8;
   font-size: 15px;
-
   margin-top: 20px;
 
 }
@@ -740,13 +757,13 @@ getAllApi()
 }
 
 /* 大于sm屏幕且小于等于md屏幕（例如平板） */
-@media (min-width: 868px) and (max-width:1198px) {
+@media (min-width: 765px) and (max-width:1198px) {
   .text-30px {
-    font-size: 26px;
+    font-size: 18px;
   }
 
   .text-40px {
-    font-size: 36px;
+    font-size: 30px;
   }
 }