304 lines
8.5 KiB
Vue
304 lines
8.5 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
|
|||
|
|
:class="taboldName == item ? 'bianlan' : ''"
|
|||
|
|
@click="tabswitch(item, index)"
|
|||
|
|
>
|
|||
|
|
{{ item }}
|
|||
|
|
</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.id)"
|
|||
|
|
>
|
|||
|
|
<div class="content-son-css">
|
|||
|
|
<div class="content-index">{{ index + 1 }}</div>
|
|||
|
|
<div class="content-neirong">{{ item.name }}</div>
|
|||
|
|
<div class="content-fangwenliang">访问量：{{ item.visits }}</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, watch } from 'vue'
|
|||
|
|
import { onMounted } from 'vue'
|
|||
|
|
import { pageWithAttrs } from '@/api/abilityStatistics'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
const router = useRouter()
|
|||
|
|
//查看详情方法
|
|||
|
|
function viewDetails(id) {
|
|||
|
|
console.log('id=========>', id)
|
|||
|
|
router.push({
|
|||
|
|
path: '/details',
|
|||
|
|
query: {
|
|||
|
|
id: id,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
//跳转查看更多页面
|
|||
|
|
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('好评榜')
|
|||
|
|
let tabName = ref('score')
|
|||
|
|
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 '好评榜':
|
|||
|
|
tabName.value = 'score'
|
|||
|
|
break
|
|||
|
|
case '热门榜':
|
|||
|
|
tabName.value = 'total'
|
|||
|
|
break
|
|||
|
|
case '明星榜':
|
|||
|
|
tabName.value = 'visits'
|
|||
|
|
break
|
|||
|
|
case '潜力榜':
|
|||
|
|
tabName.value = 'collectCount'
|
|||
|
|
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: 10px;
|
|||
|
|
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: 26px;
|
|||
|
|
.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;
|
|||
|
|
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 {
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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>
|