增加面包屑点击导航功能

src/components/breadcrumb/breadcrumb-item.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="breadcrumbbox" v-if="childrens && childrens !== null">
-    <el-breadcrumb-item>{{ childrens.name }}</el-breadcrumb-item>
-    <breadcrumb-item v-if="childrens.children" :childrens="childrens.children"></breadcrumb-item>
+    <el-breadcrumb-item><span class="item" @click="$emit('itemClick', childrens)">{{ childrens.name }}</span></el-breadcrumb-item>
+    <breadcrumb-item v-if="childrens.children" :childrens="childrens.children" @itemClick="$emit('itemClick', $event)"></breadcrumb-item>
   </span>
 </template>
 
@@ -21,4 +21,8 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.item {
+  cursor: pointer;
+}
+</style>

src/components/breadcrumb/index.vue

@@ -2,32 +2,90 @@
   <div class="headsBreadcrumb">
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <breadcrumbItem v-if="childrens !== null" :childrens="childrens"></breadcrumbItem>
+      <breadcrumbItem @itemClick="itemClick" v-if="childrens !== null" :childrens="childrens"></breadcrumbItem>
     </el-breadcrumb>
   </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
 import breadcrumbItem from './breadcrumb-item';
 export default {
   components: {
     breadcrumbItem
   },
-  computed: {},
+  computed: {
+    ...mapState(['menusalls'])
+  },
   data() {
     return {
-      childrens: null
+      childrens: null,
+      activeIndex: ''
     };
   },
-  mounted() {
+  async mounted() {
     this.getSession();
+    await this.menusQueryAlls();
   },
   methods: {
+    ...mapActions(['menusQueryAlls']),
     getSession() {
       this.childrens = JSON.parse(sessionStorage.getItem('childrens'));
     },
     reset() {
       this.getSession();
+    },
+    async itemClick(env) {
+      // 获取最后一级菜单
+      const last = await this.setactiveIndex(env);
+      // 赋值当前选选个
+      this.activeIndex = last?.code;
+      // 缓存写入当前一例菜单
+      this.$setParentsetSession({ menus: this.menusalls, iscode: last });
+      // 写入当前菜单编码
+      sessionStorage.setItem('code', this.activeIndex);
+      // 获取当前一例的顶级菜单编码
+      const parentCode = env.code.substring(0, 2);
+      // 如果编码 = 00 进入主页
+      if (env.code == '00') {
+        this.$router.push('/');
+        return;
+      }
+      // 如果编码 = 012（领导）进入领导页
+      if (env.code == '012') {
+        this.$router.push('/leader');
+        return;
+      }
+      // 如果编码 = 013（章程）进入章程页
+      if (env.code == '013') {
+        this.$router.push(`/constitution/${this.activeIndex}?parentCode=${parentCode}`);
+        return;
+      }
+      // 如果编码 = 014（机构）进入机构页
+      if (env.code == '014') {
+        this.$router.push(`/org/${this.activeIndex}?parentCode=${parentCode}`);
+        return;
+      }
+      // 类型为0（链接）跳转链接
+      if (env.type == '0') window.open(env.url);
+      // 类型为1（栏目）进入列表页
+      if (env.type == '1') this.$router.push(`/list/${this.activeIndex}?parentCode=${parentCode}`);
+      // 类型为2（单页）进入单页页面
+      if (env.type == '2') this.$router.push(`/pages/${env.code}?parentCode=${parentCode}`);
+    },
+    // 递归最后的菜单编码
+    async setactiveIndex (j) {
+      let item = {};
+      const children = k => {
+        const list = this.menusalls.filter(e => e.parentCode == k.code);
+        if (list.length > 0) {
+          children(list[0]);
+          return;
+        }
+        item = k;
+      };
+      children(j);
+      return item;
     }
   }
 };

src/components/heads/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="heads">
     <!-- <el-image class="top" :src="url"></el-image> -->
-    <el-carousel class="top" indicator-position="none" arrow="never">
+    <el-carousel class="top" indicator-position="none" arrow="never" :interval="interval">
       <el-carousel-item class="imge" v-for="item in imgNewsList" :key="item._id">
          <el-image class="imge" :src="item.img" :fit="'fit'"></el-image>
       </el-carousel-item>
@@ -18,15 +18,17 @@ export default {
     navs
   },
   computed: {
-    ...mapState(['imgNewsList'])
+    ...mapState(['imgNewsList', 'websiteInfo'])
   },
   data() {
     return {
-      url: require('../../assets/top.jpg')
+      url: require('../../assets/top.jpg'),
+      interval: 3000
     };
   },
   async mounted() {
     await this.imgNewsQuery();
+    this.interval = Number(this.websiteInfo.find(e => e.code == 'banner').value);
   },
   methods: {
     ...mapActions(['imgNewsQuery'])

src/components/list/index.vue

@@ -141,6 +141,7 @@ export default {
     margin: 0 auto;
     ::v-deep .is-top {
       color: #000;
+      font-size: 16px;
     }
     ::v-deep .is-active {
       color: #007ce2;
@@ -162,7 +163,7 @@ export default {
       width: 60%;
       margin: 0 15px;
       color: #007ce2;
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 600;
     }
     .more {
@@ -202,7 +203,7 @@ export default {
         text-overflow: ellipsis;
         white-space: nowrap;
         line-height: 35px;
-        font-size: 14px;
+        font-size: 16px;
       }
       .isimg-title:hover{
         color: #007ce2;
@@ -239,7 +240,7 @@ export default {
       margin-left: 3%;
       cursor: pointer;
       line-height: 35px;
-      font-size: 14px;
+      font-size: 16px;
     }
     .isList-title:hover{
       color: #007ce2;

src/components/list/threeList.vue

@@ -87,7 +87,7 @@ export default {
   .titleImg {
     display: block;
     width: 100%;
-    height: 70px;
+    height: 80px;
   }
   .title {
     display: flex;
@@ -106,7 +106,7 @@ export default {
       margin: 0 15px;
       color: #007ce2;
       width: 78%;
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 600;
     }
   }
@@ -152,7 +152,7 @@ export default {
       margin-left: 3%;
       cursor: pointer;
       line-height: 35px;
-      font-size: 14px;
+      font-size: 16px;
     }
     .isList-title:hover{
       color: #007ce2;
@@ -163,7 +163,7 @@ export default {
       line-height: 35px;
       text-align: right;
       width: 25%;
-      font-size: 14px;
+      font-size: 16px;
     }
   }
 }

src/views/Home.vue

@@ -168,7 +168,7 @@ export default {
     width: 100%;
   }
   .listBox {
-    width: 60%;
+    width: 68%;
     margin: 0.5% auto;
     display: flex;
     .listItem {
@@ -176,7 +176,7 @@ export default {
     }
   }
   .links {
-    width: 60%;
+    width: 68%;
   }
   .sknj {
     width: 66%;
@@ -198,7 +198,7 @@ export default {
       width: 100%;
       position: absolute;
       bottom: 0;
-      height: 70px;
+      height: 80px;
     }
   }
 }

src/views/list.vue

@@ -141,7 +141,7 @@ export default {
             width: 10px;
             height: 10px;
             vertical-align: middle;
-            margin-top: 1.5%;
+            margin-top: 2.5%;
             margin-left: 5px;
           }
           .title {
@@ -151,10 +151,10 @@ export default {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            font-size: 16px;
-            line-height: 40px;
-            // font-weight: 600;
-            // font-family: '宋体';
+            font-size: 20px;
+            line-height: 55px;
+            font-weight: 500;
+            font-family: '宋体';
           }
           .date {
             width: 10%;
@@ -162,7 +162,7 @@ export default {
             line-height: 2em;
             font-size: 14px;
             text-align: right;
-            line-height: 40px;
+            line-height: 55px;
           }
         }
     }