hi-ucs/front/src/views/newHome/components/RecommendationAbility.vue

318 lines
9.1 KiB
Vue

<template>
<div class="recommendation-ability">
<div class="recommendation-ability-son">
<div class="title">
<div>推荐能力</div>
<div class="title-son"></div>
</div>
<div class="content" v-if="dataList && dataList.length > 0">
<div v-for="item in dataList" :key="item" class="content-son">
<div class="content-top">
<div class="content-top-tupian">
<div
class="content-top-tupian-son"
:style="
'background:url(' +
item.tupian +
') no-repeat' +
';background-size:contain'
"
></div>
</div>
<div>
<div class="content-top-title">{{ item.name }}</div>
<div class="content-top-pingfen">
<a-rate v-model:value="item.score" disabled />
</div>
</div>
</div>
<div class="content-center">
{{ item.description }}
</div>
<div class="num">{{ item.createDate }}发布</div>
<div class="content-bootom" @click="selectOne(item.id)">查看详情</div>
<div class="sanjiao"></div>
</div>
<div class="bottom" @click="jumpPage()">
查看更多
<span class="gengduo"></span>
</div>
</div>
<a-empty v-else></a-empty>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { selectRecommend } from '@/api/home.js'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
let dataList = ref([])
const getList = () => {
selectRecommend().then((res) => {
dataList.value = res.data.data.records
dataList.value.map((item, index) => {
// debugger
switch (item.type) {
case '组件服务':
dataList.value[
index
].tupian = require('../../../assets/newHome/zujianfuwu.png')
break
case '应用资源':
dataList.value[
index
].tupian = require('../../../assets/newHome/yingyongziyuan.png')
break
case '基础设施':
dataList.value[
index
].tupian = require('../../../assets/newHome/jichusheshi.png')
break
case '数据资源':
dataList.value[
index
].tupian = require('../../../assets/newHome/shujuziyuan.png')
break
}
})
})
}
getList()
function jumpPage() {
// 点击内存入store
store.commit('home/selectCardsData', {
selectCardsnum: '组件服务',
})
console.log(
'选中===================>',
store.getters['home/selectCardsnum']
)
// router.push({ path: '/DetailsPageconetent' })
router.push({
path: '/DetailsPageconetent',
query: {
select: '组件服务',
},
})
}
const selectOne = (id) => {
console.log('点击===============》', id)
router.push({
path: '/details',
query: {
id: id,
},
})
}
</script>
<style lang="less" scoped>
.recommendation-ability {
width: 100%;
display: flex;
justify-content: center;
background: url('~@/assets/newHome/recommendation-ability-bg.png') no-repeat;
background-size: cover;
.recommendation-ability-son {
width: 13rem;
left: 50%;
margin: 0.78rem 0 0.78rem 0rem;
display: flex;
flex-direction: column;
align-items: center;
.title {
color: #ffffff;
font-size: 0.3rem;
font-family: 'convergence-typeface';
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 0.32rem;
.title-son {
width: 0.34rem;
height: 0.03rem;
background: #ffffff;
border-radius: 0.01rem;
margin-top: 0.18rem;
}
}
.content {
width: 100%;
background: linear-gradient(#ffffff, #edf1ff);
box-shadow: 0rem -0.04rem 0.1rem rgba(0, 0, 0, 0.1);
padding: 0rem 0.2rem 0.55rem 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
color: #ffffff;
position: relative;
.content-son {
width: 4.06rem;
height: 2.21rem;
border-radius: 0.02rem;
padding: 0.24rem 0.24rem 0.16rem 0.24rem;
position: relative;
margin-left: 0.2rem;
margin-top: 0.2rem;
.content-top {
display: flex;
margin-bottom: 0.2rem;
.content-top-tupian {
width: 0.56rem;
height: 0.56rem;
border-radius: 0.56rem;
margin-right: 0.12rem;
.content-top-tupian-son {
height: 0.56rem;
width: 0.56rem;
}
}
.content-top-title {
font-family: 'convergence-typeface';
color: #ffffff;
font-weight: bold;
font-size: 0.18rem;
height: 0.28rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.content-top-pingfen {
background: unset;
:deep(.ant-rate) {
li {
background: unset !important;
margin-right: 0.06rem;
}
}
}
}
.content-center {
height: 0.38rem;
width: 3.47rem;
font-family: text-typeface;
font-size: 0.14rem;
line-height: 0.2rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 0.12rem;
cursor: pointer;
}
.num {
font-size: 0.14rem;
}
.sanjiao {
height: 0;
width: 0;
margin-left: -0.24rem;
margin-top: -1.58rem;
}
.content-bootom {
position: absolute;
height: 0.24rem;
line-height: 0.24rem;
width: 0.8rem;
color: #ffffff;
bottom: 0.16rem;
left: 50%;
font-size: 0.12rem;
margin-left: -0.4rem;
bottom: 0.1rem;
background: unset;
border: 1px solid #ffffff;
text-align: center;
cursor: pointer;
}
.content-bootom:hover {
background: rgba(0, 88, 225, 0.3);
}
}
.content-son:hover {
border-radius: 0.02rem;
border: 1px solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
.content-son:nth-child(1),
:nth-child(5),
:nth-child(9) {
background: #27a989;
.content-top-tupian {
background: #0b9976;
}
.sanjiao {
border-top: 0.9rem solid #27a989;
border-right: 1.49rem solid #27a989;
border-left: 1.49rem solid #35b193;
border-bottom: 0.9rem solid #35b193;
}
}
.content-son:nth-child(2),
:nth-child(6),
:nth-child(8) {
background: #557ec7;
.content-top-tupian {
background: #3e6ab7;
}
.sanjiao {
border-top: 0.9rem solid #557ec7;
border-right: 1.49rem solid #557ec7;
border-left: 1.49rem solid #5b83cb;
border-bottom: 0.9rem solid #5b83cb;
}
}
.sanjiao {
border-top: 0.9rem solid #557ec7;
border-right: 1.49rem solid #557ec7;
border-left: 1.49rem solid #5b83cb;
border-bottom: 0.9rem solid #5b83cb;
}
}
.content-son:nth-child(3),
:nth-child(4),
:nth-child(7) {
background: #01a4e1;
.content-top-tupian {
background: #0193ca;
}
.sanjiao {
border-top: 0.9rem solid #01a4e1;
border-right: 1.49rem solid #01a4e1;
border-left: 1.49rem solid #10adef;
border-bottom: 0.9rem solid #10adef;
}
}
.bottom {
position: absolute;
left: 50%;
bottom: 0.2rem;
height: 0.24rem;
font-size: 0.16rem;
width: 1rem;
margin-left: -0.5rem;
cursor: pointer;
text-align: center;
color: #000000;
.gengduo {
display: inline-block;
margin-left: 0.04rem;
width: 0.1rem;
height: 0.1rem;
background: url('~@/assets/newHome/gd2.png') no-repeat;
background-size: contain;
background-position: center;
}
}
.bottom:hover {
border-radius: 0.02rem;
background-color: rgba(1, 102, 255, 0.1);
}
}
}
</style>