|
@ -2,17 +2,17 @@ |
|
|
<div class="news_container"> |
|
|
<div class="news_container"> |
|
|
<HeadLine title="新闻/NEWS" line1="获取行业最新咨询" /> |
|
|
<HeadLine title="新闻/NEWS" line1="获取行业最新咨询" /> |
|
|
<div class="card_wrap"> |
|
|
<div class="card_wrap"> |
|
|
<div class="card"> |
|
|
|
|
|
<div class="header"> |
|
|
|
|
|
|
|
|
<div class="card" v-for="(item, index) in newsList" :key="item.id"> |
|
|
|
|
|
<div :class="activeTab == item.id ? 'header active' : 'header'"> |
|
|
<div class="wrap"> |
|
|
<div class="wrap"> |
|
|
<div class="icon"></div> |
|
|
|
|
|
<p class="font">公司动态</p> |
|
|
|
|
|
|
|
|
<img class="icon" :src="item.icon" /> |
|
|
|
|
|
<p class="font">{{ item.title }}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="img"></div> |
|
|
|
|
|
|
|
|
<img class="img" :src="item.list[index].pic" /> |
|
|
<div class="bottom"> |
|
|
<div class="bottom"> |
|
|
<p class="title">智能多通道水下图像检测系统</p> |
|
|
|
|
|
<p class="desc">图像识别是人工智能的一个重......</p> |
|
|
|
|
|
|
|
|
<p class="title">{{ item.list[index].productTitle }}</p> |
|
|
|
|
|
<p class="desc">{{ item.list[index].desc }}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@ -21,6 +21,9 @@ |
|
|
|
|
|
|
|
|
<script setup> |
|
|
<script setup> |
|
|
import HeadLine from 'cpns/HeadLine' |
|
|
import HeadLine from 'cpns/HeadLine' |
|
|
|
|
|
import { newsList } from '@/mock' |
|
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
|
const activeTab = ref(1) |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
@ -31,6 +34,8 @@ import HeadLine from 'cpns/HeadLine' |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
padding: 0 7px; |
|
|
padding: 0 7px; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
overflow: hidden; |
|
|
.card { |
|
|
.card { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
background: #ededed; |
|
|
background: #ededed; |
|
@ -38,6 +43,7 @@ import HeadLine from 'cpns/HeadLine' |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
.wrap { |
|
|
.wrap { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
@ -46,7 +52,6 @@ import HeadLine from 'cpns/HeadLine' |
|
|
.icon { |
|
|
.icon { |
|
|
min-width: 13px; |
|
|
min-width: 13px; |
|
|
min-height: 13px; |
|
|
min-height: 13px; |
|
|
background: #000; |
|
|
|
|
|
} |
|
|
} |
|
|
.font { |
|
|
.font { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
@ -54,15 +59,17 @@ import HeadLine from 'cpns/HeadLine' |
|
|
font-family: Alibaba PuHuiTi; |
|
|
font-family: Alibaba PuHuiTi; |
|
|
font-weight: 400; |
|
|
font-weight: 400; |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
color: #000; |
|
|
|
|
|
width: 200%; |
|
|
width: 200%; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.active { |
|
|
|
|
|
background: #f94622; |
|
|
|
|
|
color: #ffffff; |
|
|
|
|
|
} |
|
|
.img { |
|
|
.img { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 101px; |
|
|
|
|
|
background: #000; |
|
|
|
|
|
|
|
|
height: auto; |
|
|
} |
|
|
} |
|
|
.bottom { |
|
|
.bottom { |
|
|
padding: 8px; |
|
|
padding: 8px; |
|
|