资讯中心着陆页切图95%

src/views/News/index.vue

@@ -119,21 +119,21 @@
     <div class="news-four">
       <div class="container">
         <ul class="four-ul">
-          <li v-for="(tmp, i) in 8" :key="i" class="row">
+          <li v-for="(tmpA, i) in four" :key="i" class="row">
             <div class="col-lg-4 four-li-left">
-              <img src="../../assets/image/news/icon_lingshou.png" alt="" />
+              <img :src="tmpA.ico" alt="" />
             </div>
             <div class="col-lg-8 four-li-right">
               <div class="li-right-top">
-                <div>零售</div>
+                <div>{{ tmpA.name }}</div>
                 <div>
+                  <img src="../../assets/image/news/ico-download.png" alt="" />
                   <span>资料下载</span>
                 </div>
               </div>
               <ul class="li-right-ul">
-                <li v-for="(tmp, i) in 3" :key="i">
-                  <span></span
-                  ><span>手机扫描商品条码：即时价格比较是零售业未来</span>
+                <li v-for="(tmpB, ii) in tmpA.list" :key="ii">
+                  <span></span><span>{{ tmpB.name }}</span>
                 </li>
               </ul>
             </div>
@@ -146,7 +146,130 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      four: [
+        {
+          ico: require("../../assets/image/news/icon_lingshou.png"),
+          name: "零售",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+        {
+          ico: require("../../assets/image/news/icon_wuliu.png"),
+          name: "物流",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+        {
+          ico: require("../../assets/image/news/icon_yiliao.png"),
+          name: "医疗",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+        {
+          ico: require("../../assets/image/news/icon_shipinanquan.png"),
+          name: "食品安全",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+        {
+          ico: require("../../assets/image/news/icon_dianzishangwu.png"),
+          name: "电子商务",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+        {
+          ico: require("../../assets/image/news/icon_yidongshangwudeng.png"),
+          name: "移动商务",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+        {
+          ico: require("../../assets/image/news/icon_yidongshangwudeng.png"),
+          name: "物联网",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+        {
+          ico: require("../../assets/image/news/icon_yidongshangwudeng.png"),
+          name: "其他",
+          list: [
+            {
+              name: "手机扫描商品条码：即时价格比较是零售业未来",
+            },
+            {
+              name: "山东德州市场约两成零售商品的条码为假冒伪造",
+            },
+            {
+              name: "如何在非零售商品上使用商品条码——非零售商品的",
+            },
+          ],
+        },
+      ],
+    };
   },
 };
 </script>
@@ -156,8 +279,8 @@ export default {
     .tpzx-ul {
       justify-content: space-between;
     }
-    .four-ul{
-      li{
+    .four-ul {
+      li {
         width: 45%;
       }
     }
@@ -191,7 +314,6 @@ export default {
             margin-right: 7px;
           }
           &:nth-child(2) {
-            
             @include ellipsis;
             font-size: 14px;
             color: #414345;
@@ -214,6 +336,7 @@ export default {
       &:nth-child(2) {
         color: #f26335;
         font-size: 14px;
+        cursor: pointer;
       }
     }
     &.borderBottom {
@@ -301,7 +424,7 @@ export default {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-      >li {
+      > li {
         display: flex;
         background: #ffffff;
         box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
@@ -329,10 +452,14 @@ export default {
               &:nth-child(2) {
                 font-size: 12px;
                 cursor: pointer;
+                display: flex;
+                align-items: center;
+                img {
+                  margin-right: 10px;
+                }
               }
             }
           }
-          
         }
       }
     }