132 lines
4.3 KiB
Vue
132 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { useDataStore } from "@/stores/index";
|
|
const dataStore = useDataStore();
|
|
const { totalDto,forecast } = storeToRefs(dataStore)
|
|
// 预报到总人数 forecast.total
|
|
|
|
// 迎新总进度 已预报到总人数/预报到总人数
|
|
const progress = computed(() => {
|
|
return ((totalDto.value.reportNumber / totalDto.value.totalNumber) * 100).toFixed(1)
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="left-top">
|
|
<div class="top-item-img">
|
|
<div class="top-item-icon">
|
|
<img src="@/assets/img/zheke/left_top1.png">
|
|
</div>
|
|
<div class="top-item">
|
|
<div class="top-item-title">已报到人数</div>
|
|
<div class="top-item-content">{{ totalDto.reportNumber ?? '0' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-item-img">
|
|
<div class="top-item-icon">
|
|
<img src="@/assets/img/zheke/left_top2.png">
|
|
</div>
|
|
<div class="top-item">
|
|
<div class="top-item-title title-red">未报到人数</div>
|
|
<div class="top-item-content content-red"> {{ totalDto.notReportNumber ?? '0' }} </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-bottom">
|
|
<div class="bottom-item">
|
|
<div class="bottom-item-title">预报到总人数</div>
|
|
<div class="bottom-item-content"> {{ forecast.total ?? '0' }} </div>
|
|
</div>
|
|
<div class="bottom-item">
|
|
<div class="bottom-item-title">录取总人数</div>
|
|
<div class="bottom-item-content"> {{ totalDto.totalNumber ?? '0' }} </div>
|
|
</div>
|
|
<div class="bottom-item">
|
|
<div class="bottom-item-title">迎新总进度</div>
|
|
<div class="bottom-item-content"> {{ isNaN(progress) ? '0' : progress}}% </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.left-top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.top-item-img {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.top-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
|
|
.top-item-title {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
color: #FFFFFF;
|
|
line-height: 28px;
|
|
text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
|
|
// background: #3652AB;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(126, 219, 254, 0.14) 0%, rgba(126, 219, 254, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);
|
|
|
|
}
|
|
|
|
.top-item-content {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
font-size: 36px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(182, 198, 229, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%, );
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.title-red {
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(228, 140, 140, 0.14) 0%, rgba(247, 118, 93, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);
|
|
|
|
}
|
|
|
|
.content-red {
|
|
background: linear-gradient(80deg, rgba(255, 131, 106, 0.8) 0%, rgba(230, 152, 152, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.left-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
padding: 0 20px;
|
|
|
|
.bottom-item {
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #fbeedb;
|
|
text-shadow: 0px 2px 6px rgba(27, 24, 19, 0.31);
|
|
font-style: italic;
|
|
|
|
// background: linear-gradient(0deg, rgba(152,115,58,1) 0%, rgba(205,169,114,1) 41.89453125%, rgba(232,215,190,1) 84.1796875%, rgba(255,236,221,0.27) 100%);
|
|
// -webkit-background-clip: text;
|
|
// -webkit-text-fill-color: transparent;
|
|
.bottom-item-content {
|
|
margin-top: 10px;
|
|
font-size: 26px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|