376 lines
11 KiB
Vue
376 lines
11 KiB
Vue
<template>
|
|
<div class="popular-ability">
|
|
<div class="main">
|
|
<div class="top">
|
|
热门能力
|
|
<span class="line"></span>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="left">
|
|
<div
|
|
class="select"
|
|
v-for="sel in selList"
|
|
:key="sel"
|
|
@click="selectChange(sel)"
|
|
:class="sel == select ? 'checked' : ''"
|
|
>
|
|
<span
|
|
class="img"
|
|
:class="sel == '浏览量' ? 'fwl' : sel == '申请量' ? 'sgl' : 'scl'"
|
|
></span>
|
|
<span class="text">{{ sel }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div
|
|
class="item"
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
@click="selectOne(item.id)"
|
|
>
|
|
<div class="item-left">
|
|
<div class="img" :class="item.imgType"></div>
|
|
</div>
|
|
<div class="item-right">
|
|
<!-- <div class="fw" v-if="select == '浏览量'">
|
|
{{ select }}:{{ item.visits }}
|
|
</div> -->
|
|
<div class="fw" v-if="select == '申请量'">
|
|
{{ select }}:{{ item.applyCount }}
|
|
</div>
|
|
<div class="fw" v-if="select == '收藏量'">
|
|
{{ select }}:{{ item.collectCount }}
|
|
</div>
|
|
<a-tooltip>
|
|
<template #title>{{ item.name }}</template>
|
|
<div class="name">{{ item.name }}</div>
|
|
</a-tooltip>
|
|
<div class="dec">
|
|
<span>{{ item.deptName }}</span>
|
|
</div>
|
|
<a-tooltip>
|
|
<template #title>{{ item.description || '暂无描述' }}</template>
|
|
<div class="text">{{ item.description || '暂无描述' }}</div>
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-btn" @click="jumpPage()">
|
|
查看更多
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { pageWithAttrs } from '@/api/home.js'
|
|
import { useRouter } from 'vue-router'
|
|
import { useStore } from 'vuex'
|
|
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const select = ref('申请量')
|
|
const selList = ref(['申请量', '收藏量'])
|
|
const list = ref([])
|
|
|
|
const paramsGetResources = {
|
|
districtId: '',
|
|
pageNum: 1,
|
|
pageSize: 6,
|
|
type: '应用资源',
|
|
name: '',
|
|
infoList: [],
|
|
orderField: 'applyCount', // total 综合 visits 浏览量 applyCount 申请量 score 评分 collectCount 收藏量
|
|
orderType: 'DESC', // ASC 升序 DESC 降序
|
|
}
|
|
const selectChange = (sel) => {
|
|
select.value = sel
|
|
switch (select.value) {
|
|
case '浏览量':
|
|
paramsGetResources.orderField = 'visits'
|
|
break
|
|
case '申请量':
|
|
paramsGetResources.orderField = 'applyCount'
|
|
break
|
|
case '收藏量':
|
|
paramsGetResources.orderField = 'collectCount'
|
|
break
|
|
default:
|
|
paramsGetResources.orderField = 'total'
|
|
break
|
|
}
|
|
getList()
|
|
}
|
|
const getList = () => {
|
|
pageWithAttrs(paramsGetResources).then((res) => {
|
|
console.log('查询列表============>', res.data.data.records)
|
|
res.data.data.records.forEach((val) => {
|
|
switch (val.type) {
|
|
case '组件服务':
|
|
val.imgType = 'zj'
|
|
break
|
|
case '应用资源':
|
|
val.imgType = 'yy'
|
|
break
|
|
case '基础设施':
|
|
val.imgType = 'jc'
|
|
break
|
|
case '数据资源':
|
|
val.imgType = 'sj'
|
|
break
|
|
case '知识库':
|
|
val.imgType = 'zs'
|
|
break
|
|
default:
|
|
val.imgType = 'zj'
|
|
break
|
|
}
|
|
})
|
|
list.value = res.data.data.records
|
|
})
|
|
}
|
|
getList()
|
|
|
|
function jumpPage() {
|
|
// 点击内存入store
|
|
store.commit('home/selectCardsData', {
|
|
selectCardsnum: '组件服务',
|
|
})
|
|
console.log(
|
|
'选中===================>',
|
|
store.getters['home/selectCardsnum']
|
|
)
|
|
router.push({
|
|
path: '/DetailsPageconetent',
|
|
query: {
|
|
// select: '组件服务',
|
|
select: DETAIL_PAGE_CONTENT_DEFAULT_TAB,
|
|
orderField: paramsGetResources.orderField, //根据什么排序
|
|
},
|
|
})
|
|
}
|
|
const selectOne = (id) => {
|
|
console.log('点击===============》', id)
|
|
// router.push({
|
|
// path: '/details',
|
|
// query: {
|
|
// id: id,
|
|
// },
|
|
// })
|
|
const detailPage = router.resolve({
|
|
path: '/details', // 跳转的页面路由
|
|
query: {
|
|
id: id,
|
|
hiddenBackFlag: true,
|
|
},
|
|
})
|
|
window.open(detailPage.href, '_blank')
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.popular-ability {
|
|
height: 6.8rem;
|
|
background: url('~@/assets/newHome/popular-bg.png') no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.main {
|
|
width: 13rem;
|
|
margin-top: 0.78rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
.top {
|
|
font-size: 0.3rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.line {
|
|
width: 0.34rem;
|
|
height: 0.03rem;
|
|
background-color: #fff;
|
|
margin-top: 0.08rem;
|
|
}
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.52rem;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
.select {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.05rem;
|
|
height: 2.1rem;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
margin-bottom: 0.01rem;
|
|
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
|
|
.img {
|
|
width: 0.36rem;
|
|
height: 0.36rem;
|
|
background-size: 100%;
|
|
}
|
|
.fwl {
|
|
background: url('~@/assets/newHome/fwl-no.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.sgl {
|
|
background: url('~@/assets/newHome/sgl-no.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.scl {
|
|
background: url('~@/assets/newHome/scl-no.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.text {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 0.14rem;
|
|
}
|
|
}
|
|
.select:hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
}
|
|
.checked {
|
|
background: rgba(255, 255, 255, 0.18) !important;
|
|
border-right: 0.02rem solid #fff;
|
|
}
|
|
}
|
|
.right {
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-left: 0.2rem;
|
|
.item {
|
|
width: 3.78rem;
|
|
height: 2rem;
|
|
display: flex;
|
|
.item-left {
|
|
width: 0.83rem;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #eef1f8;
|
|
.img {
|
|
width: 0.56rem;
|
|
height: 0.56rem;
|
|
background-size: 100%;
|
|
}
|
|
.zj {
|
|
background: url('~@/assets/newHome/popular-zj.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.yy {
|
|
background: url('~@/assets/newHome/popular-yy.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.jc {
|
|
background: url('~@/assets/newHome/popular-jc.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.sj {
|
|
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.zs {
|
|
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.item-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
.fw {
|
|
width: 100%;
|
|
padding-right: 0.1rem;
|
|
padding-top: 0.03rem;
|
|
text-align: right;
|
|
color: 666;
|
|
font-size: 0.14rem;
|
|
color: #666;
|
|
}
|
|
.name {
|
|
font-size: 0.18rem;
|
|
color: #212121;
|
|
text-align: center;
|
|
margin-top: 0.05rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-all;
|
|
}
|
|
.dec {
|
|
margin: 8px 8px;
|
|
text-align: center;
|
|
padding-right: 10px;
|
|
color: #0058e1;
|
|
span {
|
|
background: rgba(0, 88, 225, 0.1);
|
|
padding: 5px 5px;
|
|
}
|
|
}
|
|
.text {
|
|
width: 100%;
|
|
padding: 0rem 0.03rem;
|
|
font-size: 0.14rem;
|
|
color: #212121;
|
|
line-height: 0.24rem;
|
|
height: 1rem;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.item:nth-of-type(4),
|
|
.item:nth-of-type(5),
|
|
.item:nth-of-type(6) {
|
|
margin-top: 0.2rem;
|
|
}
|
|
.item:hover {
|
|
border-radius: 0.02rem;
|
|
border: 0.01rem solid #0058e1;
|
|
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
|
|
}
|
|
}
|
|
}
|
|
.bottom-btn {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
margin-top: 0.24rem;
|
|
color: #fff;
|
|
width: 1rem;
|
|
height: 0.24rem;
|
|
line-height: 0.24rem;
|
|
margin-left: 6rem;
|
|
span {
|
|
display: inline-block;
|
|
width: 0.1rem;
|
|
height: 0.1rem;
|
|
background: url('~@/assets/newHome/gd.png') no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.bottom-btn:hover {
|
|
background: rgba(0, 88, 225, 0.1);
|
|
}
|
|
}
|
|
}
|
|
</style>
|