20220707修改

lib/setChildrenSession.js

@@ -2,7 +2,7 @@ const setChildrenSession = {
   install (Vue) {
     Vue.prototype.$setChildrenSession = function(options) {
       const children = items => {
-        const childrenList = options.menus.filter(j => items.code == j.parentCode).map(e => children(e));
+        const childrenList = options.menus.filter(j => items.code == j.parentCode && j.isshow).map(e => children(e));
         if (childrenList.length > 0) {
           return { ...items, children: childrenList };
         }

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "element-ui": "^2.15.9",
+        "lodash": "^4.17.21",
         "moment": "^2.29.3",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
@@ -3467,6 +3468,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz",
@@ -7088,6 +7099,13 @@
         "webpack": "^4.0.0"
       }
     },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmmirror.com/filesize/download/filesize-3.6.1.tgz?cache=0&sync_timestamp=1635763993879&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffilesize%2Fdownload%2Ffilesize-3.6.1.tgz",
@@ -9279,9 +9297,8 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz",
-      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
-      "dev": true
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -9778,6 +9795,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nan": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmmirror.com/nan/-/nan-2.16.0.tgz",
+      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npm.taobao.org/nanomatch/download/nanomatch-1.2.13.tgz",
@@ -18074,6 +18098,16 @@
       "integrity": "sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0=",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz",
@@ -21105,6 +21139,13 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmmirror.com/filesize/download/filesize-3.6.1.tgz?cache=0&sync_timestamp=1635763993879&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffilesize%2Fdownload%2Ffilesize-3.6.1.tgz",
@@ -22887,9 +22928,8 @@
     },
     "lodash": {
       "version": "4.17.21",
-      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz",
-      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
-      "dev": true
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -23312,6 +23352,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmmirror.com/nan/-/nan-2.16.0.tgz",
+      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npm.taobao.org/nanomatch/download/nanomatch-1.2.13.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.9",
+    "lodash": "^4.17.21",
     "moment": "^2.29.3",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="app" id="app">
-    <heads></heads>
+    <heads class="heads"></heads>
     <router-view :key="$route.fullPath" />
     <foot></foot>
     <upwindow></upwindow>
@@ -28,7 +28,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 body {
   width: 100vw;
   height: 100vh;
@@ -40,5 +40,13 @@ body {
   width: 100%;
   height: 100%;
   min-width: 1100px;
+  .heads {
+    width: 100%;
+    .nav {
+      .el-menu {
+        width: 60%;
+      }
+    }
+  }
 }
 </style>

src/components/foots/index.vue

@@ -6,16 +6,12 @@
         <p class="itemBox itemBox1">
           <span class="item">{{ infos.record && infos.record.name }}{{ infos.record && infos.record.value }}</span>
           <span class="item">{{ infos.title && infos.title.name }}{{ infos.title && infos.title.value }}</span>
-          <span class="item item2">{{ infos.postalCode && infos.postalCode.name }}{{ infos.postalCode && infos.postalCode.value }}</span>
         </p>
         <p class="itemBox itemBox2">
           <span class="item">{{ infos.phone && infos.phone.name }}{{ infos.phone && infos.phone.value }}</span>
+          <span class="item item2">{{ infos.postalCode && infos.postalCode.name }}{{ infos.postalCode && infos.postalCode.value }}</span>
           <span class="item item3">{{ infos.address && infos.address.name }}{{ infos.address && infos.address.value }}</span>
         </p>
-        <!-- <p class="itemBox itemBox3">
-          <span class="item">{{ infos.fax && infos.fax.name }}{{ infos.fax && infos.fax.value }}</span>
-          <span class="item">{{ infos.email && infos.email.name }}{{ infos.email && infos.email.value }}</span>
-        </p> -->
       </div>
     </div>
   </div>

src/components/heads/nav/index.vue

@@ -68,7 +68,7 @@ export default {
       // 类型为1（栏目）进入列表页
       if (env.type == '1') this.$router.push(`/list/${this.activeIndex}?parentCode=${parentCode}`);
       // 类型为2（单页）进入单页页面
-      if (env.type == '2') this.$router.push(`/pages/${env.code}`);
+      if (env.type == '2') this.$router.push(`/pages/${env.code}?parentCode=${parentCode}`);
     },
     // 递归最后的菜单编码
     async setactiveIndex (e) {
@@ -110,6 +110,7 @@ export default {
           font-weight: 700;
           display: block;
           width: 100%;
+          font-family: '宋体';
         }
       }
     }

src/components/heads/nav/nav-item.vue

@@ -35,9 +35,11 @@ export default {
   width: 100%;
   font-size: 16px;
   font-weight: 700;
+  font-family: '宋体';
 }
 .el-menu-item {
   font-size: 16px;
   font-weight: 700;
+  font-family: '宋体';
 }
 </style>

src/components/leftmenu/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="nav">
     <div class="titlename">{{ menuTree && menuTree.name }}</div>
-    <el-menu unique-opened menu-trigger="hover" background-color="#b9c1d7" text-color="#000" active-text-color="#ffd200" :default-active="activeIndex" mode="vertical">
+    <el-menu unique-opened menu-trigger="hover" text-color="#000" active-text-color="#fff" :default-active="activeIndex" mode="vertical">
       <div class="menuitem" v-for="(item, index) in menuTree.children" :key="index">
-        <nav-item :items="item" @itemClick="handleSelect"></nav-item>
+        <nav-item :activeIndex="activeIndex" :items="item" @itemClick="handleSelect"></nav-item>
       </div>
     </el-menu>
   </div>
@@ -37,21 +37,31 @@ export default {
       }
       // 获取当前一例的顶级菜单编码
       const parentCode = item.code.substring(0, 2);
+      // 缓存写入当前一例菜单
+      this.$setParentsetSession({ menus: this.menusall, iscode: item });
+      // 缓存写入当前菜单编码
+      sessionStorage.setItem('code', item.code);
+      // 如果编码 = 012（领导）进入领导页
+      if (item.code == '012') {
+        this.$router.push('/leader');
+        return;
+      }
       // 如果编码 = 013（章程）进入章程页
       if (item.code == '013') {
         this.$router.push(`/constitution/${item.code}?parentCode=${parentCode}`);
         return;
       }
+      // 如果编码 = 014（机构）进入机构页
+      if (item.code == '014') {
+        this.$router.push(`/org/${item.code}?parentCode=${parentCode}`);
+        return;
+      }
       // 类型为0（链接）跳转链接
       if (item.type == '0') window.open(item.url);
       // 类型为1（栏目）进入列表页
       if (item.type == '1') this.$router.push(`/list/${item.code}?parentCode=${parentCode}`);
       // 类型为2（单页）进入单页页面
-      if (item.type == '2') this.$router.push(`/pages/${item.code}`);
-      // 缓存写入当前一例菜单
-      this.$setParentsetSession({ menus: this.menusall, iscode: item });
-      // 缓存写入当前菜单编码
-      sessionStorage.setItem('code', item.code);
+      if (item.type == '2') this.$router.push(`/pages/${item.code}?parentCode=${parentCode}`);
     },
     setIndex() {
       this.activeIndex = sessionStorage.getItem('code');
@@ -63,11 +73,13 @@ export default {
 <style lang="scss" scoped>
 .nav {
   width: 100%;
-  background: #fff;
-  padding-top: 5px;
-  margin-top: -5px;
+  background: #dadada;
+  border: 1px solid #999;
+  padding-bottom: 10%;
+  border-radius: 12px;
+  overflow: hidden;
   .titlename {
-    font-size: 36px;
+    font-size: 20px;
     font-weight: 700;
     text-align: center;
     // background: #007ce2;
@@ -76,30 +88,28 @@ export default {
     color: #fff;
     width: 100%;
     margin: 0 auto;
-    line-height: 3em;
+    line-height: 4em;
+    font-family: '宋体';
   }
   .el-menu {
-    width: 100%;
+    width: 90%;
     margin: 0 auto;
-    // display: flex;
+    margin-top: 3%;
+    background-color: transparent;
     border: none;
     .menuitem {
-      // width: 100%;
+      border-radius: 12px;
+      margin-top: 10px;
+      background-color: #fff;
       .menubox {
         .el-submenu .title {
           text-align: center;
           font-size: 16px;
-          font-weight: 700;
           display: block;
           width: 100%;
         }
       }
     }
-    .el-menu-item {
-      font-size: 16px;
-      font-weight: 700;
-      text-align: center;
-    }
   }
 }
 </style>

src/components/leftmenu/nav-item.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="menubox">
-    <el-menu-item v-if="!items.children" :index="`${items.code}`" @click="btn(items)">{{ items && items.name }}</el-menu-item>
+    <el-menu-item v-if="!items.children" :class="{ bgclass: activeIndex == items.code }" :index="`${items.code}`" @click="btn(items)">{{ items && items.name }}</el-menu-item>
     <el-submenu v-else :index="items.code">
       <template slot="title">
         <span class="title">{{ items && items.name }}</span>
       </template>
-      <nav-item v-for="(i, idx) in items.children" :key="idx" :items="i" @itemClick="btn"></nav-item>
+      <nav-item v-for="(i, idx) in items.children" :activeIndex="activeIndex" :key="idx" :items="i" @itemClick="btn"></nav-item>
     </el-submenu>
   </div>
 </template>
@@ -14,12 +14,15 @@
 export default {
   name: 'nav-item',
   props: {
-    items: { type: Object, default: () => {} }
+    items: { type: Object, default: () => {} },
+    activeIndex: { type: String, default: '' }
   },
   components: {},
   computed: {},
   data() {
-    return {};
+    return {
+      item: null
+    };
   },
   async mounted() {},
   methods: {
@@ -31,13 +34,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-submenu {
+  ::v-deep .el-submenu__title {
+    height: 40px;
+    line-height: 40px;
+  }
+  ::v-deep .el-menu{
+    border-radius: 12px !important;
+  }
+  ::v-deep .el-menu-item {
+    width: 80% !important;
+    margin: 0 auto;
+  }
+}
 .title {
   width: 100%;
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 14px;
+  font-weight: 500;
 }
 .el-menu-item {
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 15px;
+  font-weight: 500;
+  font-family: '宋体';
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  min-width: 0;
+}
+.menubox {
+  ::v-deep .bgclass {
+    background-color: #018dff !important;
+    border-radius: 12px;
+    width: 100%;
+  }
 }
 </style>

src/components/list/index.vue

@@ -73,17 +73,18 @@ export default {
     };
   },
   mounted() {
-    this.activeName = this.tabsList[0]?.code;
-    this.handleClick(this.tabsList[0]);
+    this.setactive(0);
   },
   methods: {
+    setactive(e) {
+      this.activeName = this.tabsList[e]?.code;
+      this.handleClick(this.tabsList[e]);
+    },
     handleClick(e) {
-      console.log(e);
       // console.log(this.parentCode);
       // 菜单编码
       this.code = e.name || e.code;
       const item = this.tabsList.find(i => i.code == this.code);
-      console.log(item, 'item');
       const data = { name: this.code };
       if (item.parentCode) data.parentCode = true;
       this.$emit('tabClick', data);
@@ -109,6 +110,11 @@ export default {
     dates(e) {
       return moment(e).format('MM-DD');
     }
+  },
+  watch: {
+    data(e) {
+      if (e.length <= 0 && this.activeName == this.tabsList[0]?.code) this.setactive(1);
+    }
   }
 };
 </script>

src/views/Home.vue

@@ -22,7 +22,7 @@
       <el-image :src="sknj" class="sknj"></el-image>
       <el-image :src="szsklUrl" class="szskl" @click="imgClick('08', '08')"></el-image>
     </div>
-    <links></links>
+    <links class="links"></links>
   </div>
 </template>
 
@@ -62,7 +62,10 @@ export default {
       prizeList: [
         { title: '科普讲座', code: '041', parentCode: true },
         { title: '科普活动', code: '042', parentCode: true },
-        { title: '科普周', code: '043', parentCode: true }
+        { title: '科普周', code: '043', parentCode: true },
+        { title: '科普基地', code: '044', parentCode: true },
+        { title: '科普原地', code: '045', parentCode: true },
+        { title: '交流培训', code: '046', parentCode: true }
       ],
       // 社科奖项
       universal: [],
@@ -166,13 +169,16 @@ export default {
     width: 100%;
   }
   .listBox {
-    width: 70%;
+    width: 60%;
     margin: 3% auto;
     display: flex;
     .listItem {
       margin: 0 5%;
     }
   }
+  .links {
+    width: 60%;
+  }
   .sknj {
     width: 65%;
     display: block;

src/views/details.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .detailsHome {
-  width: 70%;
+  width: 60%;
   margin: 0 auto;
   .thumbnail {
     width: 20%;

src/views/list.vue

@@ -5,24 +5,35 @@
       <div class="listBoxLeft">
         <letnav ref="letnav" :menuTree="menu"></letnav>
       </div>
-      <div class="listBoxRight"  v-if="listTotal > 0">
-        <el-card class="listBox" v-for="(item, index) in contentList" :key="index">
-          <el-image v-if="item && item.thumbnail" :src="item.thumbnail" class="listimg" @click="newClick(item)"></el-image>
-          <el-image v-else :src="thumbnail" class="listimg" @click="newClick(item)"></el-image>
-          <div class="text">
-            <div class="title" @click="newClick(item)">{{ item.title }}</div>
-            <span class="describe">{{ item.describe }}</span>
-            <span class="date">{{ item.date | dates }}</span>
+      <div class="box" v-if="!isnew">
+        <div class="listBoxRight"  v-if="listTotal > 0">
+          <el-card class="listBox" v-for="(item, index) in contentList" :key="index">
+            <el-image v-if="item && item.thumbnail" :src="item.thumbnail" class="listimg" @click="newClick(item)"></el-image>
+            <el-image v-else :src="thumbnail" class="listimg" @click="newClick(item)"></el-image>
+            <div class="text">
+              <div class="title" @click="newClick(item)">{{ item.title }}</div>
+              <span class="describe">{{ item.describe }}</span>
+              <span class="date">{{ item.date | dates }}</span>
+            </div>
+          </el-card>
+          <pagination ref="pagination" class="pagination" :total="listTotal" @query="filterQuery"></pagination>
+        </div>
+        <el-divider class="divider" v-else>暂无数据</el-divider>
+      </div>
+      <div class="isnewbox" v-if="isnew">
+        <div class="titlebox" v-for="(item, index) in isnewcontentList" :key="index">
+          <div class="left" v-for="i in item" :key="i._id">
+            <img src="../assets/jt.png" class="jt">
+            <span class="text" @click="newClick(i)">{{ i.title }}</span>
           </div>
-        </el-card>
-        <pagination ref="pagination" class="pagination" :total="listTotal" @query="filterQuery"></pagination>
+        </div>
       </div>
-      <el-divider class="divider" v-else>暂无数据</el-divider>
     </div>
   </div>
 </template>
 
 <script>
+import _ from 'lodash';
 import moment from 'moment';
 import letnav from '../components/leftmenu/index.vue';
 import pagination from '../components/pagination';
@@ -36,7 +47,10 @@ export default {
     breadcrumb
   },
   computed: {
-    ...mapState(['contentList', 'listTotal', 'menusall'])
+    ...mapState(['contentList', 'listTotal', 'menusall']),
+    isnewcontentList() {
+      return _.chunk(this.contentList, 2);
+    }
   },
   data() {
     return {
@@ -44,7 +58,8 @@ export default {
       pageSize: 10,
       parentCode: null,
       menu: {},
-      thumbnail: require('../assets/newimg.jpg')
+      thumbnail: require('../assets/newimg.jpg'),
+      isnew: false
     };
   },
   async mounted() {
@@ -52,15 +67,19 @@ export default {
     await this.menusQueryAll();
     // 当前菜单参数
     this.code = this.$route.params.code;
+    // 顶级菜单参数
+    this.parentCode = this.$route.query.parentCode;
     const topahes = await this.topage();
     if (topahes) {
-      // 顶级菜单参数
-      this.parentCode = this.$route.query.parentCode;
       // 获取一例菜单
       this.menu = this.$setChildrenSession({ menus: this.menusall, iscode: this.parentCode });
-      console.log(this.menu);
       // 控制左侧菜单当前选项
       this.$refs.letnav.setIndex();
+      if (this.code == '033' || this.code == '0441' || this.code == '0442' || this.code == '0443') {
+        this.isnew = true;
+        await this.filterQuery({ filter: {}, paging: { page: 0, size: 100 } });
+        return;
+      }
       await this.filterQuery();
     }
   },
@@ -84,7 +103,7 @@ export default {
     topage() {
       const item = this.menusall.find(e => e.code == this.code);
       if (item?.type == '2') {
-        this.$router.push(`/pages/${item.code}`);
+        this.$router.push(`/pages/${item.code}?parentCode=${this.parentCode}`);
         return false;
       }
       return true;
@@ -103,7 +122,7 @@ export default {
   margin: 5% auto;
 }
 .list {
-  width: 70%;
+  width: 60%;
   margin: 0 auto;
   margin-bottom: 5%;
   .listHome {
@@ -114,9 +133,12 @@ export default {
       margin-top: 3%;
       margin-right: 5%;
     }
-    .listBoxRight {
+    .box, .isnewbox {
       width: 75%;
       margin-top: 3%;
+    }
+    .listBoxRight {
+      width: 100%;
       .listBox {
         width: 100%;
         margin: 0 auto;
@@ -167,3 +189,22 @@ export default {
   }
 }
 </style>
+<style lang="scss" scoped>
+.titlebox {
+  display: flex;
+  width: 100%;
+  border-bottom: 1px dashed #999;
+  flex-wrap: wrap;
+  .left {
+    width: 50%;
+    line-height: 38px;
+    .text {
+      margin-left: 5px;
+    }
+  }
+  .left span:hover {
+    color: #018dff ;
+    cursor: pointer;
+  }
+}
+</style>

src/views/pages.vue

@@ -1,33 +1,49 @@
 <template>
   <div class="detailsHome" v-if="pagesItem">
-    <h1 class="title">{{ pagesItem.title }}</h1>
-    <span class="describe">{{ pagesItem.describe }}</span>
-    <span class="date">发表时间: {{ pagesItem.updateAt | dates }}<span class="visit">访问量: {{ pagesItem.visit }}</span></span>
-    <div class="content" v-html="pagesItem.content"></div>
+    <div class="listBoxLeft">
+      <letnav ref="letnav" :menuTree="menu"></letnav>
+    </div>
+    <div class="listBoxRight">
+      <h1 class="title">{{ pagesItem.title }}</h1>
+      <span class="describe">{{ pagesItem.describe }}</span>
+      <span class="date">发表时间: {{ pagesItem.updateAt | dates }}<span class="visit">访问量: {{ pagesItem.visit }}</span></span>
+      <div class="content" v-html="pagesItem.content"></div>
+    </div>
   </div>
   <el-divider class="divider" v-else>暂无数据</el-divider>
 </template>
 
 <script>
 import moment from 'moment';
+import letnav from '../components/leftmenu/index.vue';
 import { mapState, mapActions } from 'vuex';
 export default {
   name: 'pagesHome',
-  components: {},
+  components: {
+    letnav
+  },
   computed: {
-    ...mapState(['pagesItem'])
+    ...mapState(['pagesItem', 'menusall'])
   },
   data() {
     return {
-      id: ''
+      id: '',
+      menu: {}
     };
   },
   async mounted() {
+    await this.menusQueryAll();
     this.code = this.$route.params.code;
     await this.pagesFetch({ bind: this.code });
+    // 顶级菜单参数
+    this.parentCode = this.$route.query.parentCode;
+    // 获取一例菜单
+    this.menu = this.$setChildrenSession({ menus: this.menusall, iscode: this.parentCode });
+    // 控制左侧菜单当前选项
+    this.$refs.letnav.setIndex();
   },
   methods: {
-    ...mapActions(['pagesFetch'])
+    ...mapActions(['pagesFetch', 'menusQueryAll'])
   },
   filters: {
     dates(e) {
@@ -40,30 +56,41 @@ export default {
 .detailsHome {
   width: 70%;
   margin: 0 auto;
-  .thumbnail {
-    width: 100%;
-  }
-  .title, .describe, .content, .date {
-    width: 100%;
-    text-align: center;
+  display: flex;
+  margin-bottom: 5%;
+  .listBoxLeft {
+    width: 20%;
+    margin-top: 3%;
+    margin-right: 5%;
   }
-  .describe, .date {
-    display: block;
-    color: #999;
-    line-height: 2em;
-    .visit {
-      margin-left: 30px;
+  .listBoxRight {
+    width: 75%;
+    margin-top: 3%;
+    .thumbnail {
+      width: 100%;
     }
-  }
-  .content {
-    text-align: left;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    iframe {
-      width: 70%;
-      height: 500px;
+    .title, .describe, .content, .date {
+      width: 100%;
+      text-align: center;
+    }
+    .describe, .date {
       display: block;
-      margin: 0 auto;
+      color: #999;
+      line-height: 2em;
+      .visit {
+        margin-left: 30px;
+      }
+    }
+    .content {
+      text-align: left;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      iframe {
+        width: 70%;
+        height: 500px;
+        display: block;
+        margin: 0 auto;
+      }
     }
   }
 }