237 lines
6.8 KiB
Vue
237 lines
6.8 KiB
Vue
<template>
|
|
<view class="mt-[44rpx]" hover-class="none" :hover-stop-propagation="false">
|
|
<view
|
|
class="flex items-center justify-between mb-[30rpx] mx-[36rpx]"
|
|
hover-class="none"
|
|
:hover-stop-propagation="false"
|
|
>
|
|
<text class="text-[32rpx] text-[#333333] font-semibold w-max">热门排行榜</text>
|
|
|
|
<view class="w-[40rpx] h-[40rpx]">
|
|
<image
|
|
src="https://api.static.ycymedu.com/src/images/home/right.svg"
|
|
@click="toSchool('0')"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="flex items-center overflow-x-auto hot-rank-outer gap-[16rpx] h-[462rpx] px-[32rpx]"
|
|
hover-class="none"
|
|
:hover-stop-propagation="false"
|
|
>
|
|
<!-- 骨架屏 -->
|
|
<template v-if="isLoading">
|
|
<view
|
|
v-for="(_skeleton, index) in skeletonItems"
|
|
:key="'skeleton-' + index"
|
|
:class="`hot-rank-item flex-none skeleton-item`"
|
|
hover-class="none"
|
|
:hover-stop-propagation="false"
|
|
>
|
|
<view class="skeleton-text mx-[32rpx] mt-[32rpx] h-[40rpx] w-[120rpx] rounded"></view>
|
|
|
|
<view
|
|
class="flex items-center justify-left mt-[30rpx] mx-[32rpx]"
|
|
v-for="i in 3"
|
|
:key="i"
|
|
>
|
|
<view class="skeleton-text w-[20rpx] h-[28rpx] mr-[10rpx] rounded"></view>
|
|
<view
|
|
class="skeleton-image w-[80rpx] h-[80rpx] rounded-full flex-none mr-[16rpx]"
|
|
></view>
|
|
<view class="flex flex-col w-full">
|
|
<view class="skeleton-text h-[28rpx] w-[120rpx] rounded"></view>
|
|
<view class="skeleton-text h-[22rpx] w-[100rpx] mt-[10rpx] rounded"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 真实数据 -->
|
|
<template v-else>
|
|
<view
|
|
:class="`hot-rank-item flex-none`"
|
|
hover-class="none"
|
|
:hover-stop-propagation="false"
|
|
v-for="typeWrap in universityTypeRankList"
|
|
:key="typeWrap.type"
|
|
@click="toSchool(typeWrap.type)"
|
|
v-show="typeWrap.rows.length > 0"
|
|
>
|
|
<text
|
|
class="font-semibold text-[#303030] text-[32rpx] inline-block mx-[32rpx] mt-[32rpx]"
|
|
>
|
|
{{ typeWrap.name }}
|
|
</text>
|
|
|
|
<view
|
|
class="flex items-center justify-left mt-[30rpx] mx-[32rpx]"
|
|
v-for="(item, index) in typeWrap.rows"
|
|
:key="index"
|
|
>
|
|
<text class="font-[28rpx] text-[#999999] font-normal mr-[10rpx]">
|
|
{{ item.rank }}
|
|
</text>
|
|
<view class="w-[80rpx] h-[80rpx] rounded-full">
|
|
<image
|
|
class="flex-none mr-[16rpx] w-full h-full rounded-full"
|
|
:src="item.logo"
|
|
></image>
|
|
</view>
|
|
<view class="truncate flex flex-col" hover-class="none">
|
|
<text class="font-normal text-[#333333] text-[28rpx] truncate">
|
|
{{ item.universityName }}
|
|
</text>
|
|
<text class="text-[22rpx] text-[#999999] font-normal mt-[10rpx]">
|
|
{{ item.cityName }}.{{ item.uType }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useUnSortType } from '@/hooks/useUnSortType'
|
|
import { getUniversityRank } from '@/service/index/api'
|
|
|
|
const toSchool = (id: string) => {
|
|
uni.navigateTo({
|
|
url: `/pages-sub/home/schoolRank/index?type=${id}`,
|
|
})
|
|
}
|
|
|
|
const { unSortTypeList } = useUnSortType()
|
|
const universityTypeRankList = ref([])
|
|
const isLoading = ref(true)
|
|
|
|
// 创建默认的骨架屏数据
|
|
const skeletonItems = ref([
|
|
{ type: 'skeleton-1', name: '综合排名', rows: [] },
|
|
{ type: 'skeleton-2', name: '理工排名', rows: [] },
|
|
{ type: 'skeleton-3', name: '文科排名', rows: [] },
|
|
{ type: 'skeleton-4', name: '医科排名', rows: [] },
|
|
])
|
|
|
|
watch(
|
|
() => unSortTypeList.value,
|
|
(newVal) => {
|
|
if (newVal && newVal.length > 0) {
|
|
Promise.all(
|
|
newVal.map((item) =>
|
|
getUniversityRank({
|
|
Year: 2023,
|
|
Type: item.type,
|
|
PageIndex: 1,
|
|
PageSize: 3,
|
|
}),
|
|
),
|
|
)
|
|
.then((res) => {
|
|
universityTypeRankList.value = []
|
|
res.forEach((item, index) => {
|
|
universityTypeRankList.value.push({
|
|
...newVal[index],
|
|
rows: (item.result as { rows: any[] }).rows,
|
|
loaded: true,
|
|
})
|
|
})
|
|
isLoading.value = false
|
|
})
|
|
.catch(() => {
|
|
isLoading.value = false
|
|
})
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hot-rank-item {
|
|
position: relative;
|
|
width: 356rpx;
|
|
height: 452rpx;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.hot-rank-item::before {
|
|
position: absolute;
|
|
top: -2rpx;
|
|
left: -2rpx;
|
|
z-index: -1;
|
|
width: 360rpx;
|
|
height: 456rpx;
|
|
content: '';
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.hot-rank-outer .hot-rank-item:nth-child(1) {
|
|
background: linear-gradient(180deg, #caddff 0%, #eaf1ff 23%, #fff 100%);
|
|
}
|
|
.hot-rank-outer .hot-rank-item:nth-child(1)::before {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(201.8750050663948, 221.00000202655792, 255, 1),
|
|
rgba(233.7500050663948, 241.39999777078629, 255, 1)
|
|
);
|
|
}
|
|
|
|
.hot-rank-outer .hot-rank-item:nth-child(2) {
|
|
background: linear-gradient(180deg, #cef5e1 0%, #ddf7ea 23%, #fff 100%);
|
|
}
|
|
.hot-rank-outer .hot-rank-item:nth-child(2)::before {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(205.5883178114891, 245.07227271795273, 225.3302800655365, 1),
|
|
rgba(221.00000202655792, 247.00000047683716, 234.00000125169754, 1)
|
|
);
|
|
}
|
|
|
|
.hot-rank-outer .hot-rank-item:nth-child(3)::before {
|
|
background: linear-gradient(180deg, rgba(245, 237, 255, 1), rgba(245, 237, 255, 1));
|
|
}
|
|
.hot-rank-outer .hot-rank-item:nth-child(3) {
|
|
background: linear-gradient(180deg, #f7e7ff 0%, rgba(245, 237, 255, 0) 23%, #fff 100%);
|
|
}
|
|
|
|
.hot-rank-outer .hot-rank-item:nth-child(4)::before {
|
|
background: linear-gradient(180deg, rgba(255, 228, 196, 1), rgba(255, 228, 196, 1));
|
|
}
|
|
.hot-rank-outer .hot-rank-item:nth-child(4) {
|
|
background: linear-gradient(180deg, #ffe4c4 0%, rgba(255, 228, 196, 0) 23%, #fff 100%);
|
|
}
|
|
|
|
.hot-rank-outer .hot-rank-item:nth-child(5)::before {
|
|
background: linear-gradient(180deg, rgba(213, 255, 196, 0), rgba(213, 255, 196, 0));
|
|
}
|
|
.hot-rank-outer .hot-rank-item:nth-child(5) {
|
|
background: linear-gradient(180deg, #e5ffc4 0%, rgba(213, 255, 196, 0) 23%, #fff 100%);
|
|
}
|
|
/* 骨架屏样式 */
|
|
.skeleton-text,
|
|
.skeleton-image {
|
|
background-color: #e0e0e0;
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-item {
|
|
background: linear-gradient(180deg, #eaeaea 0%, #f5f5f5 23%, #fff 100%);
|
|
}
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
</style>
|