咨询中心详情页切图完成

src/router/index.js

@@ -489,6 +489,14 @@ const routes = [
         ]
       },
       {
+        path: "/News/msg",
+        name: "msg",
+        meta: {
+          name: "资讯中心详情",
+        },
+        component: () => import("@/views/News/msg.vue"),
+      },
+      {
         path: "/News/Health",
         name: "Health",
         meta: {

src/views/News/Center.vue

 <template>
-  <div class="center">
+  <div class="Center">
     <div class="picNews-top">
       <cate :father="zxhdCate"></cate>
       <div class="container">
@@ -61,7 +61,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.center {
+.Center {
   @media screen and (min-width: 992px) {
     .picNews-ul {
       justify-content: space-between;
@@ -75,7 +75,7 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.center {
+.Center {
   ul {
     padding: 0;
     margin: 0;

src/views/News/PicNews.vue

@@ -4,7 +4,7 @@
       <cate :father="tpzxCate"></cate>
       <div class="container">
         <ul class="picNews-ul">
-          <li v-for="(tmp, i) in 4" :key="i">
+          <li v-for="(tmp, i) in 4" :key="i" @click="jump">
             <div class="picNews-li-tp">
               <img src="../../assets/image/news/tpzx-tp1.jpg" alt="" />
             </div>
@@ -33,6 +33,8 @@
   </div>
 </template>
 <script>
+import { mapMutations } from "vuex";
+
 import cate from "../comps/cate.vue";
 import pages from "../comps/pages.vue";
 export default {
@@ -48,7 +50,23 @@ export default {
       },
     };
   },
-  methods: {},
+  methods: {
+    ...mapMutations({
+      setMatche: "setMatche",
+    }),
+    jump() {
+      const matche = [
+        {
+          name: "图片资讯",
+          path: "/News/PicNews",
+        },
+      ];
+      this.setMatche(matche);
+      this.$router.push({
+        path: "/News/msg",
+      });
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -72,31 +90,30 @@ export default {
     margin: 0;
   }
   .picNews-ul {
-      display: flex;
-      flex-wrap: wrap;
-      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%;
-        }
-        .picNews-li-bt {
-          width: 90%;
-          margin: 0 auto;
-          text-align: center;
-          color: #414345;
-          font-size: 14px;
-          padding: 14px 0;
-        }
+    display: flex;
+    flex-wrap: wrap;
+    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%;
+      }
+      .picNews-li-bt {
+        width: 90%;
+        margin: 0 auto;
+        text-align: center;
+        color: #414345;
+        font-size: 14px;
+        padding: 14px 0;
       }
     }
+  }
   .picNews-top {
     @include module-box;
-    
   }
   .picNews-bottom {
     @include module-box;

src/views/News/comps/list2.vue

+<template>
+  <div class="list">
+    <div v-for="(tmp, i) in list" :key="i" class="list-li">
+      <div>
+        <span></span>
+        <span>{{tmp.name}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['list'],
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  margin: 0;
+  padding: 0;
+  .list-li {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    margin: 0;
+    >div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      @include ellipsis;
+      font-size: 13px;
+      span {
+        display: inline-block;
+        &:nth-child(1) {
+          width: 4px;
+          height: 4px;
+          background: #f26335;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          @include ellipsis;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/vuex/mutation-types.js

+export const SET_MATCHE = 'setMatche';

src/vuex/store.js

@@ -6,7 +6,24 @@ import system from "./system/index.js"
 
 Vue.use(Vuex)
 
+
+import {
+    SET_MATCHE,
+} from './mutation-types';
+
+const state = {
+    matche: localStorage.getItem('matche') ? JSON.parse(localStorage.getItem('matche')) : [],
+};
+const mutations = {
+    [SET_MATCHE](state, data) {
+        localStorage.setItem('matche', JSON.stringify(data));
+        state.matche = data;
+    },
+};
+
 export default new Vuex.Store({
+    state,
+    mutations,
     modules: {
         user,
         system