117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
<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);
|
|
// 处理数据
|
|
import { useDataStore } from "@/stores/index";
|
|
const dataStore = useDataStore();
|
|
const { provinceDto } = storeToRefs(dataStore)
|
|
|
|
|
|
const state = reactive<any>({
|
|
list: [],
|
|
defaultOption: {
|
|
...defaultOption.value,
|
|
singleHeight: 205, //单步运动停止的高度，与滚动盒子的高度进行适配
|
|
limitScrollNum: 3,
|
|
// singleWaitTime:3000, // 停顿间隔
|
|
step:1 //滚动速度，数字越大，滚动越快
|
|
},
|
|
scroll: true,
|
|
});
|
|
|
|
const comName = computed(() => {
|
|
if (indexConfig.value.rightBottomSwiper) {
|
|
return SeamlessScroll;
|
|
} else {
|
|
return EmptyCom;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<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': true }">
|
|
<!-- <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 provinceDto">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.right_bottom {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.table-title {
|
|
display: flex;
|
|
height: 50px;
|
|
align-items: center;
|
|
color: #545e70;
|
|
border-radius: 10px 10px 0px 0px;
|
|
border: 1px solid #33343F;
|
|
|
|
.title-item {
|
|
width: 100px;
|
|
text-align: center;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.right_bottom_wrap {
|
|
overflow: hidden;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.overflow-y-auto {
|
|
overflow-y: auto;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
</style>
|