news card

src/components/News.vue

@@ -2,17 +2,17 @@
   <div class="news_container">
     <HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
     <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="icon"></div>
-            <p class="font">公司动态</p>
+            <img class="icon" :src="item.icon" />
+            <p class="font">{{ item.title }}</p>
           </div>
         </div>
-        <div class="img"></div>
+        <img class="img" :src="item.list[index].pic" />
         <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>
@@ -21,6 +21,9 @@
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import { newsList } from '@/mock'
+import { ref } from 'vue'
+const activeTab = ref(1)
 </script>
 
 <style lang="scss" scoped>
@@ -31,6 +34,8 @@ import HeadLine from 'cpns/HeadLine'
     grid-template-columns: repeat(3, 1fr);
     padding: 0 7px;
     box-sizing: border-box;
+    border-radius: 3px;
+    overflow: hidden;
     .card {
       flex: 1;
       background: #ededed;
@@ -38,6 +43,7 @@ import HeadLine from 'cpns/HeadLine'
         display: flex;
         align-items: center;
         justify-content: center;
+
         .wrap {
           display: flex;
           align-items: center;
@@ -46,7 +52,6 @@ import HeadLine from 'cpns/HeadLine'
           .icon {
             min-width: 13px;
             min-height: 13px;
-            background: #000;
           }
           .font {
             font-size: 16px;
@@ -54,15 +59,17 @@ import HeadLine from 'cpns/HeadLine'
             font-family: Alibaba PuHuiTi;
             font-weight: 400;
             white-space: nowrap;
-            color: #000;
             width: 200%;
           }
         }
       }
+      .active {
+        background: #f94622;
+        color: #ffffff;
+      }
       .img {
         width: 100%;
-        height: 101px;
-        background: #000;
+        height: auto;
       }
       .bottom {
         padding: 8px;

src/components/Track.vue

@@ -36,8 +36,8 @@ import { trackList } from '@/mock'
     flex-direction: column;
     align-items: center;
     .icon {
-      width: 20px;
-      height: auto;
+      width: auto;
+      height: 20px;
       margin-bottom: 11px;
     }
     .title {

src/mock/index.js

@@ -336,3 +336,87 @@ export const OneList = [
     en: 'INDUSTRIAL DESIGN',
   },
 ]
+
+import I1 from '@/static/img/news/icon1.png'
+import I2 from '@/static/img/news/icon2.png'
+import I3 from '@/static/img/news/icon3.png'
+import N1 from '@/static/img/news/news1.png'
+import N2 from '@/static/img/news/news2.png'
+import N3 from '@/static/img/news/news3.png'
+export const newsList = [
+  {
+    id: 1,
+    icon: I1,
+    title: '公司动态',
+    list: [
+      {
+        id: 1,
+        pic: N1,
+        productTitle: '智能多通道水下图像检测系统',
+        desc: '图像识别是人工智能的一个重......',
+      },
+      {
+        id: 2,
+        pic: N2,
+        productTitle: '暖手宝',
+        desc: '寒冷的冬天，有一个暖手宝的......',
+      },
+      {
+        id: 3,
+        pic: N3,
+        productTitle: '超声肿瘤治疗系统',
+        desc: '超声聚焦治疗是一种无创的局......',
+      },
+    ],
+  },
+  {
+    id: 2,
+    icon: I2,
+    title: '行业资讯',
+    list: [
+      {
+        id: 1,
+        pic: N1,
+        productTitle: '智能多通道水下图像检测系统',
+        desc: '图像识别是人工智能的一个重......',
+      },
+      {
+        id: 2,
+        pic: N2,
+        productTitle: '暖手宝',
+        desc: '寒冷的冬天，有一个暖手宝的......',
+      },
+      {
+        id: 3,
+        pic: N3,
+        productTitle: '超声肿瘤治疗系统',
+        desc: '超声聚焦治疗是一种无创的局......',
+      },
+    ],
+  },
+  {
+    id: 3,
+    icon: I3,
+    title: '视频焦点',
+    list: [
+      {
+        id: 1,
+        pic: N1,
+        productTitle: '智能多通道水下图像检测系统',
+        desc: '图像识别是人工智能的一个重......',
+      },
+      {
+        id: 2,
+        pic: N2,
+        productTitle: '暖手宝',
+        desc: '寒冷的冬天，有一个暖手宝的......',
+      },
+      {
+        id: 3,
+        pic: N3,
+        productTitle: '超声肿瘤治疗系统',
+        desc: '超声聚焦治疗是一种无创的局......',
+      },
+    ],
+  },
+]