You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.7 KiB
109 lines
2.7 KiB
<template>
|
|
<div class="news_container">
|
|
<HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
|
|
<div class="card_wrap">
|
|
<div class="card" v-for="(item, index) in newsList" :key="item.id">
|
|
<div :class="activeTab == item.id ? 'header active' : 'header'">
|
|
<div class="wrap" @click="changeActiveWrap(item.id)">
|
|
<img class="icon" :src="item.icon" />
|
|
<p class="font">{{ item.title }}</p>
|
|
</div>
|
|
</div>
|
|
<img class="img" :src="getList()[index].pic" />
|
|
<div class="bottom">
|
|
<p class="title">{{ getList()[index].productTitle }}</p>
|
|
<p class="desc">{{ getList()[index].desc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import HeadLine from 'cpns/HeadLine'
|
|
import { newsList } from '@/mock'
|
|
import { ref } from 'vue'
|
|
const activeTab = ref(1)
|
|
const changeActiveWrap = id => {
|
|
activeTab.value = id
|
|
}
|
|
|
|
const getList = () => {
|
|
const arr = newsList.filter(item => item.id == activeTab.value)
|
|
return arr[0].list
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.news_container {
|
|
background: #fff;
|
|
.card_wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
padding: 0 7px;
|
|
box-sizing: border-box;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
.card {
|
|
flex: 1;
|
|
background: #ededed;
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 7px 0;
|
|
box-sizing: border-box;
|
|
.icon {
|
|
min-width: 13px;
|
|
min-height: 13px;
|
|
}
|
|
.font {
|
|
font-size: 16px;
|
|
transform: scale(0.5);
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
width: 200%;
|
|
}
|
|
}
|
|
}
|
|
.active {
|
|
background: #f94622;
|
|
color: #ffffff;
|
|
}
|
|
.img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.bottom {
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
.title {
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #262626;
|
|
transform: scale(0.5);
|
|
transform-origin: 0 center;
|
|
max-width: 100px;
|
|
white-space: nowrap;
|
|
}
|
|
.desc {
|
|
font-size: 12px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 300;
|
|
color: #afafaf;
|
|
transform: scale(0.5);
|
|
transform-origin: 0 center;
|
|
white-space: nowrap;
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|