JiXinHui
/
AIzhushou-screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
AIzhushou-screen/src/views/index/right-bottom.vue

831 lines
18 KiB
Vue
Raw Normal View History

迁移
2024-05-22 08:44:08 +08:00
<script setup lang="ts">
import { rightBottom } from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";
const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
list: [],
defaultOption: {
...defaultOption.value,
静态页面
2024-05-24 17:42:14 +08:00
singleHeight: 205, //单步运动停止的高度，与滚动盒子的高度进行适配
迁移
2024-05-22 08:44:08 +08:00
limitScrollNum: 3,
静态页面
2024-05-24 17:42:14 +08:00
// singleWaitTime:3000, // 停顿间隔
step:1 //滚动速度，数字越大，滚动越快
迁移
2024-05-22 08:44:08 +08:00
},
scroll: true,
});
const getData = () => {
静态页面
2024-05-24 17:42:14 +08:00
state.list = [
{
"provinceName": "北京",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "上海",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "天津",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "重庆",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "河北",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 1
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "山西",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "内蒙古",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "辽宁",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "吉林",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "黑龙江",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "江苏",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "浙江",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "安徽",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "福建",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "江西",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "山东",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 1
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "河南",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 1
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "湖北",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 2
}
]
},
{
"provinceName": "湖南",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "广东",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "广西",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "海南",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "四川",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "贵州",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "云南",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "西藏",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "陕西",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "甘肃",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "青海",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "宁夏",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "香港",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "澳门",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "台湾",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
},
{
"provinceName": "新疆",
"progress": 0,
"degreesDto": [
{
"degreesName": "统招专科",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招专升本",
"paymentCompleted": 0,
"nonPayment": 0
},
{
"degreesName": "统招本科",
"paymentCompleted": 0,
"nonPayment": 0
}
]
}
]
迁移
2024-05-22 08:44:08 +08:00
};
const comName = computed(() => {
if (indexConfig.value.rightBottomSwiper) {
return SeamlessScroll;
} else {
return EmptyCom;
}
});
静态页面
2024-05-24 17:42:14 +08:00
迁移
2024-05-22 08:44:08 +08:00
onMounted(() => {
getData();
});
</script>
<template>
静态页面
2024-05-24 17:42:14 +08:00
<div class="right_bottom">
<div class="table-title">
<div class="title-item">排名</div>
<div class="title-item">省份/地市 </div>
<div class="title-item">本科</div>
<div class="title-item">专科</div>
<div class="title-item">专升本</div>
</div>
<div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
<component :is="comName" :list="state.list" v-model="state.scroll"
:singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
:limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
:singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel">
<div class="table-row" v-for="(item, i) in state.list">
<div class="row-item">{{ i + 1 }}</div>
<div class="row-item">{{ item.provinceName }}</div>
<div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
</div>
</component>
</div>
迁移
2024-05-22 08:44:08 +08:00
</div>
</template>
<style scoped lang="scss">
.right_bottom {
width: 100%;
height: 100%;
静态页面
2024-05-24 17:42:14 +08:00
.table-title {
迁移
2024-05-22 08:44:08 +08:00
display: flex;
静态页面
2024-05-24 17:42:14 +08:00
height: 50px;
迁移
2024-05-22 08:44:08 +08:00
align-items: center;
静态页面
2024-05-24 17:42:14 +08:00
color: #545e70;
border-radius: 10px 10px 0px 0px;
border: 1px solid #33343F;
迁移
2024-05-22 08:44:08 +08:00
静态页面
2024-05-24 17:42:14 +08:00
.title-item {
width: 100px;
text-align: center;
迁移
2024-05-22 08:44:08 +08:00
}
}
}
.right_bottom_wrap {
overflow: hidden;
静态页面
2024-05-24 17:42:14 +08:00
height: 210px;
.table-row {
display: flex;
height: 50px;
border-bottom: 1px solid #33343F;
border-top: 1px solid #33343F;
line-height: 50px;
margin-bottom: 2px;
color:#E6E6FB;
&:hover{
background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
}
.row-item {
width: 100px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
迁移
2024-05-22 08:44:08 +08:00
}
.overflow-y-auto {
overflow-y: auto;
}
</style>