423 lines
14 KiB
Vue
423 lines
14 KiB
Vue
<template>
|
||
<div class="ability-ranking">
|
||
<div class="main">
|
||
<div class="top">
|
||
能力排行
|
||
<span class="line"></span>
|
||
</div>
|
||
<div class="tabClass">
|
||
<div v-for="(item, index) in tabData" :key="item" class="tabClass-son">
|
||
<div
|
||
class="tabClass-photo"
|
||
@click="tabswitch(item, index)"
|
||
:style="{
|
||
backgroundImage: `url(${photoOld[index]}) `,
|
||
}"
|
||
></div>
|
||
<div
|
||
style="position: relative"
|
||
:class="taboldName == item ? 'bianlan' : ''"
|
||
@click="tabswitch(item, index)"
|
||
>
|
||
{{ item }}
|
||
<a-tooltip placement="right">
|
||
<template #title>
|
||
<span v-if="item === '好评榜'">
|
||
根据能力能力评价平均分排名，申请无评分则计3分，排名相同时按上架时间倒序排列
|
||
</span>
|
||
<span v-else-if="item === '热门榜'">
|
||
根据近30天能力申请量排名，申请量相同时按收藏量、访问量以及上架时间进行倒序排列
|
||
</span>
|
||
<span v-else-if="item === '明星榜'">
|
||
采取5分制，根据浏览量、收藏量、申请量以及评价平均分以占比1:2:3:4计算综合评分，综合评分相同时按上架时间倒序排列
|
||
</span>
|
||
<span v-else>
|
||
根据能力15日增幅排名，增幅相同时按上架时间倒序排列
|
||
</span>
|
||
</template>
|
||
|
||
<svg
|
||
t="1666146422372"
|
||
class="icon"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="4749"
|
||
width="20"
|
||
height="20"
|
||
style="position: absolute"
|
||
>
|
||
<path
|
||
d="M530.64 211.33a36 36 0 1 1-36 36 36 36 0 0 1 36-36z m66.86 193.53l-90.2 336.63a90.25 90.25 0 0 0 62.93-41.33c0-0.07 0.61-1 0 0a11.15 11.15 0 0 1 20.44 8.41l-6.44 24A108 108 0 0 1 452 809a36 36 0 0 1-25.45-44.09l90.2-336.63a90.26 90.26 0 0 0-62.93 41.34c0 0.06-0.61 1 0 0a11.15 11.15 0 0 1-20.44-8.42l6.44-24a108 108 0 0 1 132.28-76.37 36 36 0 0 1 25.4 44.03z"
|
||
p-id="4750"
|
||
fill="#707070"
|
||
></path>
|
||
</svg>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-bg">
|
||
<div class="content">
|
||
<div
|
||
class="content-son"
|
||
v-for="(item, index) in dataList"
|
||
:key="item"
|
||
@click="viewDetails(item.resourceId)"
|
||
>
|
||
<div class="content-son-css" style="position: relative">
|
||
<div class="content-index">{{ index + 1 }}</div>
|
||
<div class="content-neirong">{{ item.resourceName }}</div>
|
||
<div class="content-fangwenliang" v-if="taboldName === '好评榜'">
|
||
评分：{{ item.score }}
|
||
</div>
|
||
<div
|
||
class="content-fangwenliang"
|
||
v-else-if="taboldName === '热门榜'"
|
||
>
|
||
申请量：{{ item.applyCount }}
|
||
</div>
|
||
<div
|
||
class="content-fangwenliang"
|
||
v-else-if="taboldName === '明星榜'"
|
||
>
|
||
热度值：
|
||
<a-rate v-model:value="item.fireNum" allow-half disabled>
|
||
<template #character>
|
||
<fire-outlined />
|
||
</template>
|
||
</a-rate>
|
||
</div>
|
||
<div class="content-fangwenliang" v-else>
|
||
<template v-if="item.isNew == 1">
|
||
增幅率：100%+
|
||
<svg
|
||
style="position: absolute; top: 6px; left: 0"
|
||
t="1666230976498"
|
||
class="icon"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3440"
|
||
width="50"
|
||
height="50"
|
||
>
|
||
<path
|
||
d="M0 0v1024L1024 0H0z m333.625806 576.412903L143.690323 540.077419l-1.651613 1.651613 112.309677 112.309678-21.470968 23.12258L82.580645 526.864516l23.122581-23.122581 188.283871 34.683871 1.651613-1.651612-112.309678-112.309678 23.122581-23.122581 150.296774 150.296775-23.122581 24.774193z m52.851613-52.851613l-150.296774-150.296774 107.354839-107.354839 19.819355 19.819355-84.232258 84.232258 42.941935 42.941936 79.277419-79.27742 19.819355 19.819355-79.277419 79.27742 47.896774 47.896774 89.187097-89.187097 19.819355 19.819355-112.309678 112.309677z m188.283871-188.283871l-24.774193 24.774194-193.23871-107.354839 26.425807-26.425806L528.516129 313.806452l1.651613-1.651613-85.883871-146.993549 24.774194-24.774193 146.993548 85.883871 1.651613-1.651613L528.516129 80.929032l26.425806-26.425806L660.645161 249.393548l-24.774193 24.774194-146.993549-85.883871-1.651613 1.651613 87.535484 145.341935z"
|
||
fill="#fa4002"
|
||
p-id="3441"
|
||
></path>
|
||
</svg>
|
||
</template>
|
||
<template v-else>增幅率：{{ item.growthRate }}</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cha-kan-geng-duo-father" @click="jumpPage()">
|
||
<span>查看更多</span>
|
||
<span class="cha-kan-geng-duo"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
// import { onMounted } from 'vue'
|
||
import {
|
||
// pageWithAttrs,
|
||
getPraiseList,
|
||
getPopularList,
|
||
getStarList,
|
||
getPotentialList,
|
||
} from '@/api/abilityStatistics'
|
||
import { useRouter } from 'vue-router'
|
||
import { FireOutlined } from '@ant-design/icons-vue'
|
||
const router = useRouter()
|
||
//查看详情方法
|
||
function viewDetails(id) {
|
||
console.log('id=========>', id)
|
||
// router.push({
|
||
// path: '/details',
|
||
// query: {
|
||
// id: id,
|
||
// },
|
||
// })
|
||
const detailPage = router.resolve({
|
||
path: '/details', // 跳转的页面路由
|
||
query: {
|
||
id: id,
|
||
hiddenBackFlag: true,
|
||
},
|
||
})
|
||
window.open(detailPage.href, '_blank')
|
||
}
|
||
// 获取榜单数据
|
||
const praiseList = ref([])
|
||
const popularList = ref([])
|
||
const starList = ref([])
|
||
const potentialList = ref([])
|
||
getPraiseList().then((res) => {
|
||
praiseList.value = res.data.data
|
||
res.data.data.map((val) => {
|
||
val.score = Math.round(val.score * 100) / 100
|
||
})
|
||
tabswitch('好评榜', 0)
|
||
})
|
||
getPopularList().then((res) => {
|
||
popularList.value = res.data.data
|
||
})
|
||
getStarList().then((res) => {
|
||
starList.value = res.data.data
|
||
})
|
||
getPotentialList().then((res) => {
|
||
potentialList.value = res.data.data
|
||
})
|
||
//跳转查看更多页面
|
||
function jumpPage() {
|
||
let snum = {
|
||
select: '',
|
||
}
|
||
router.push({
|
||
path: '/DetailsPageconetent',
|
||
query: snum,
|
||
})
|
||
}
|
||
//tab标签
|
||
const tabData = ref(['好评榜', '热门榜', '明星榜', '潜力榜'])
|
||
let photoOld = ref([
|
||
require('../../../assets/abilityStatistics/once.png'),
|
||
require('../../../assets/abilityStatistics/two.png'),
|
||
require('../../../assets/abilityStatistics/three.png'),
|
||
require('../../../assets/abilityStatistics/four.png'),
|
||
])
|
||
let photoOldJiLu = ref([
|
||
require('../../../assets/abilityStatistics/one.png'),
|
||
require('../../../assets/abilityStatistics/two.png'),
|
||
require('../../../assets/abilityStatistics/three.png'),
|
||
require('../../../assets/abilityStatistics/four.png'),
|
||
])
|
||
let photoNew = ref([
|
||
require('../../../assets/abilityStatistics/once.png'),
|
||
require('../../../assets/abilityStatistics/twos.png'),
|
||
require('../../../assets/abilityStatistics/threes.png'),
|
||
require('../../../assets/abilityStatistics/fours.png'),
|
||
])
|
||
//记录点击的tab页
|
||
let taboldName = ref('好评榜')
|
||
const tabswitch = (name, index) => {
|
||
photoOldJiLu.value.map((item, index) => {
|
||
photoOld.value[index] = item
|
||
})
|
||
photoOld.value[index] = photoNew.value[index]
|
||
console.log('name===========>', name)
|
||
switch (name) {
|
||
case '好评榜':
|
||
dataList.value = praiseList.value
|
||
break
|
||
case '热门榜':
|
||
dataList.value = popularList.value
|
||
break
|
||
case '明星榜':
|
||
dataList.value = starList.value
|
||
break
|
||
case '潜力榜':
|
||
dataList.value = potentialList.value
|
||
break
|
||
}
|
||
taboldName.value = name
|
||
}
|
||
//能力排行接口
|
||
let dataList = ref([]) //数据初始化
|
||
// const mySelectMostPopular = (name) => {
|
||
// const data = {
|
||
// deptIds: [],
|
||
// districtId: '',
|
||
// infoList: [],
|
||
// name: '',
|
||
// orderField: name,
|
||
// orderType: 'DESC',
|
||
// pageNum: 1,
|
||
// pageSize: 10,
|
||
// type: '',
|
||
// }
|
||
// pageWithAttrs(data).then((res) => {
|
||
// dataList.value = res.data.data.records
|
||
// console.log('aaaaaa111aaaaaaa', res)
|
||
// })
|
||
// }
|
||
// onMounted(() => {
|
||
// watch(
|
||
// tabName,
|
||
// (value) => {
|
||
// mySelectMostPopular(value)
|
||
// },
|
||
// { deep: true }
|
||
// )
|
||
// mySelectMostPopular(tabName.value)
|
||
// })
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.ability-ranking {
|
||
width: 100%;
|
||
padding: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-bottom: 0;
|
||
.main {
|
||
width: 100%;
|
||
margin-top: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
.top {
|
||
font-size: 30px;
|
||
color: #000;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: -10px;
|
||
.line {
|
||
width: 34px;
|
||
height: 3px;
|
||
background-color: #0058e1;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
.tabClass {
|
||
height: 150px;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
.tabClass-son {
|
||
width: 260px;
|
||
padding-top: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 18px;
|
||
div {
|
||
cursor: pointer;
|
||
}
|
||
.tabClass-photo {
|
||
width: 106px;
|
||
height: 106px;
|
||
}
|
||
.bianlan {
|
||
color: #0058e1;
|
||
}
|
||
}
|
||
}
|
||
.content-bg {
|
||
width: 100%;
|
||
background: #f1f4fb;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 36px;
|
||
padding-bottom: 80px;
|
||
.content {
|
||
width: 1300px;
|
||
.content-son:nth-child(1) {
|
||
background: url('~@/assets/abilityStatistics/ability-enhancement-one.png');
|
||
background-position: center;
|
||
}
|
||
.content-son:nth-child(2) {
|
||
background: url('~@/assets/abilityStatistics/ability-enhancement-two.png');
|
||
background-position: center;
|
||
}
|
||
.content-son:nth-child(3) {
|
||
background: url('~@/assets/abilityStatistics/ability-enhancement-three.png');
|
||
background-position: center;
|
||
}
|
||
.content-son {
|
||
display: inline-block;
|
||
width: 245px;
|
||
height: 150px;
|
||
align-items: center;
|
||
text-align: center;
|
||
background: url('~@/assets/abilityStatistics/ability-enhancement-four.png');
|
||
background-position: center;
|
||
margin-bottom: 17px;
|
||
margin-right: 5px;
|
||
border-radius: 2px;
|
||
border: 1px solid #f1f4fb;
|
||
box-shadow: 0px 8px 20px rgba(0, 88, 225, 0);
|
||
cursor: pointer;
|
||
.content-son-css {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 5px;
|
||
padding: 2px;
|
||
.content-index {
|
||
// padding-left: 15px;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 20px;
|
||
color: #734204;
|
||
}
|
||
.content-neirong {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
width: 215px;
|
||
text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
margin-bottom: 20px;
|
||
word-break: break-all;
|
||
}
|
||
.content-fangwenliang {
|
||
width: 215px;
|
||
text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
color: #999999;
|
||
margin-bottom: 20px;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
.content-son:hover {
|
||
border-radius: 2px;
|
||
border: 1px solid #0058e1;
|
||
box-shadow: 0px 8px 20px rgba(0, 88, 225, 0.3);
|
||
}
|
||
}
|
||
.cha-kan-geng-duo-father {
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 24px;
|
||
width: 100px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
margin-left: center;
|
||
}
|
||
.cha-kan-geng-duo-father:hover {
|
||
border-radius: 2px;
|
||
background-color: rgba(1, 102, 255, 0.3);
|
||
}
|
||
.cha-kan-geng-duo {
|
||
display: inline-block;
|
||
height: 10px;
|
||
width: 10px;
|
||
background: url('~@/assets/newHome/gd2.png');
|
||
margin-left: 3px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|