资讯中心框架搭建并创建咨询中心下图片资讯

src/router/index.js

@@ -422,12 +422,30 @@ const routes = [
         component: () => import("@/views/Business/Training.vue"),
       },
       {
+        path: "/News/index",
+        name: "newsIndex",
+        meta: {
+          name: "资讯中心",
+        },
+        component: () => import("@/views/News/index.vue"),
+      },
+      {
         path: "/News",
         name: "News",
         meta: {
           name: "资讯中心",
         },
-        component: () => import("@/views/News/index.vue"),
+        component: () => import("@/views/News/main.vue"),
+        children: [
+          {
+            path: "/News/PicNews",
+            name: "PicNews",
+            meta: {
+              name: "图片资讯",
+            },
+            component: () => import("@/views/News/PicNews.vue"),
+          },
+        ]
       },
       {
         path: "/Knowledge",

src/views/News/PicNews.vue

+<template>
+  <div class="picNews">
+    <div class="picNews-top">
+      <cate :father="tpzxCate"></cate>
+      <ul class="picNews-ul">
+        <li v-for="(tmp, i) in 4" :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>
+    </div>
+    <div class="picNews-bottom">
+      <div class="container">
+        <pages />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+import pages from "../comps/pages.vue";
+export default {
+  components: {
+    cate,
+    pages,
+  },
+  data() {
+    return {
+      tpzxCate: {
+        name: "图片资讯 ",
+        ico: "",
+      },
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="scss">
+.picNews {
+  @media screen and (min-width: 992px) {
+    .picNews-ul {
+      justify-content: space-between;
+    }
+  }
+  @media screen and (max-width: 992px) {
+    .picNews-ul {
+      justify-content: space-around;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.picNews {
+  .picNews-top {
+    @include module-box;
+    .picNews-ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      li {
+        width: 216px;
+        background: #ffffff;
+        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+        border-radius: 4px;
+        img {
+          width: 100%;
+        }
+        .picNews-li-bt {
+          width: 90%;
+          margin: 0 auto;
+          text-align: center;
+          color: #414345;
+          font-size: 14px;
+          padding: 14px 0;
+        }
+      }
+    }
+  }
+  .picNews-bottom {
+    @include module-box;
+    margin-top: 30px;
+  }
+}
+</style>
\ No newline at end of file

src/views/News/main.vue

+<template>
+  <div class="business container">
+    <breadcrumb />
+    <div class="row">
+      <div class="col-lg-3">
+        <left2 :list="routes" ref="left" />
+      </div>
+      <div class="col-lg-9">
+        <router-view class="marginTopLg20"></router-view>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import left2 from "../comps/left2.vue";
+import breadcrumb from "../comps/breadcrumb.vue";
+
+export default {
+  components: {
+    left2,
+    breadcrumb,
+  },
+  data() {
+    return {
+      routeList: [
+        {
+          name: "资讯中心",
+          path: "",
+          active: "",
+          children: [
+            {
+              name: "图片资讯",
+              path: "/News/PicNews",
+              active: "PicNews",
+            },
+            {
+              name: "综合报道",
+              path: "",
+              active: "",
+            },
+            {
+              name: "中心活动",
+              path: "",
+              active: "",
+            },
+            {
+              name: "地方动态",
+              path: "",
+              active: "",
+            },
+            {
+              name: "国际追踪",
+              path: "",
+              active: "",
+            },
+
+            {
+              name: "标准科研动态",
+              path: "",
+              active: "",
+            },
+            {
+              name: "行业应用",
+              path: "",
+              active: "",
+            },
+            {
+              name: "深度专题",
+              path: "",
+              active: "",
+            },
+            {
+              name: "精彩视频",
+              path: "",
+              active: "",
+            },
+            {
+              name: "公告通知",
+              path: "",
+              active: "",
+            },
+          ],
+        },
+        {
+          name: "应用领域",
+          path: "",
+          active: "",
+          children: [
+            {
+              name: "零售",
+              path: "",
+              active: "",
+            },
+            {
+              name: "物流",
+              path: "",
+              active: "",
+            },
+            {
+              name: "医疗卫生",
+              path: "",
+              active: "",
+            },
+            {
+              name: "食品安全追溯",
+              path: "",
+              active: "",
+            },
+            {
+              name: "电子商务",
+              path: "",
+              active: "",
+            },
+            {
+              name: "移动商务",
+              path: "",
+              active: "",
+            },
+            {
+              name: "物联网",
+              path: "",
+              active: "",
+            },
+            {
+              name: "其他",
+              path: "",
+              active: "",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    routes() {
+      let newRouteList = [];
+      let originPath;
+      if (this.$route.meta.fatherPath) {
+        originPath = this.$route.meta.fatherPath;
+      } else {
+        originPath = this.$route.path;
+      }
+      const currentRoute = this.deepFindCurrentRoute(
+        this.routeList,
+        originPath
+      );
+      console.log(currentRoute, "currentRoute");
+      if (currentRoute.children && currentRoute.children.length > 0) {
+        newRouteList = currentRoute.children;
+      } else if (currentRoute.noneChild) {
+        const oldRouteList = JSON.parse(localStorage.getItem("newRouteList"));
+        newRouteList = oldRouteList;
+      } else {
+        newRouteList = this.routeList;
+      }
+      localStorage.setItem("newRouteList", JSON.stringify(newRouteList));
+      // newRouteList = this.deepFindRouteList(this.routeList, currentPath);
+      console.log(newRouteList, "newRouteListnewRouteList2");
+      return newRouteList;
+    },
+  },
+  created() {
+    console.log(this.$route, "this.$route");
+  },
+  methods: {
+    deepFindCurrentRoute(menuList, activePath) {
+      let current = [];
+      const deep = (arr, activePath) => {
+        for (let i = 0; i < arr.length; i += 1) {
+          if (
+            arr[i].path !== activePath &&
+            arr[i].children &&
+            arr[i].children.length > 0
+          ) {
+            deep(arr[i].children, activePath);
+          } else if (arr[i].path === activePath) {
+            current = arr[i];
+            break;
+          }
+          if (current.length > 0) {
+            break;
+          }
+        }
+      };
+      deep(menuList, activePath);
+      return current;
+    },
+    deepFindRouteList(menuList, activePath) {
+      let current = [];
+      const deep = (arr, activePath) => {
+        for (let i = 0; i < arr.length; i += 1) {
+          if (
+            arr[i].link !== activePath &&
+            arr[i].children &&
+            arr[i].children.length > 0
+          ) {
+            deep(arr[i].children, activePath);
+          } else if (arr[i].path === activePath) {
+            current = arr;
+            break;
+          }
+          if (current.length > 0) {
+            break;
+          }
+        }
+      };
+      deep(menuList, activePath);
+      return current;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.business {
+  padding-bottom: 20px;
+}
+</style>