|
|
@@ -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;
|
|
|
}
|
|
|
}
|
|
|
|
