资讯中心下图片资讯切图完成

src/components/layout/header/mock.js

@@ -487,7 +487,7 @@ export const nav = [
         id: "5",
         name: "资讯中心",
         index: 5,
-        link: "/News/index",
+        link: "",
         children: [
             {
                 id: uuid("gs_nav"),
@@ -498,7 +498,7 @@ export const nav = [
                     {
                         id: uuid("gs_nav"),
                         name: "图片资讯",
-                        index: 2,
+                        index: 5,
                         link: "/News/PicNews",
                         breadcrumb: [
                             { name: "资讯中心", path: "/News/index" },

src/views/News/PicNews.vue

@@ -2,6 +2,7 @@
   <div class="picNews">
     <div class="picNews-top">
       <cate :father="tpzxCate"></cate>
+      <div class="container">
         <ul class="picNews-ul">
           <li v-for="(tmp, i) in 4" :key="i">
             <div class="picNews-li-tp">
@@ -13,8 +14,19 @@
           </li>
         </ul>
       </div>
+    </div>
     <div class="picNews-bottom">
       <div class="container">
+        <ul class="picNews-ul">
+          <li v-for="(tmp, i) in 12" :key="i">
+            <div class="picNews-li-tp">
+              <img src="../../assets/image/news/tpzx-tp1.jpg" alt="" />
+            </div>
+            <div class="picNews-li-bt">
+              中国物品编码中心应邀出席食品安全智慧监管研讨会
+            </div>
+          </li>
+        </ul>
         <pages />
       </div>
     </div>
@@ -55,17 +67,20 @@ export default {
 </style>
 <style lang="scss" scoped>
 .picNews {
-  .picNews-top {
-    @include module-box;
+  ul {
+    padding: 0;
+    margin: 0;
+  }
   .picNews-ul {
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
+      margin-top: 30px;
       li {
         width: 216px;
         background: #ffffff;
         box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
         border-radius: 4px;
+        margin-bottom: 30px;
         img {
           width: 100%;
         }
@@ -79,6 +94,9 @@ export default {
         }
       }
     }
+  .picNews-top {
+    @include module-box;
+    
   }
   .picNews-bottom {
     @include module-box;