20220728修改

src/assets/index.scss

@@ -64,6 +64,28 @@ html, body, #app{
 .large-icon {
   font-size: 2em;
 }
+
+/* 菜单样式 */
+.el-menu--popup {
+  background-color: #025fac !important;
+  .el-submenu__title {
+    background-color: #025fac !important;
+    text-align: center;
+  }
+  .el-submenu__title:hover {
+    background-color: #025fac !important;
+  }
+  .el-menu-item {
+    background-color: #025fac !important;
+    text-align: center;
+  }
+  .el-menu-item:hover {
+    background-color: #008cff !important;
+  }
+}
+
+
+/*结束*/
 @media (max-width: 1650px) {
   .foots {
     .main {

src/components/heads/nav/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="nav">
+    <!-- hover -->
     <el-menu unique-opened menu-trigger="hover" background-color="#007ce2" text-color="#fff" active-text-color="#ffd200" :default-active="activeIndex" mode="horizontal">
       <div class="menuitem" v-for="(item, index) in menus" :key="index">
         <nav-item :items="item" @itemClick="handleSelect"></nav-item>
+        <div class="xian" v-if="index + 1 !== menus.length"></div>
       </div>
     </el-menu>
   </div>
@@ -102,7 +104,14 @@ export default {
     display: flex;
     border: none;
     .menuitem {
-      // width: 100%;
+      position: relative;
+      .xian {
+        border-right: 1px solid #fff;
+        position: absolute;
+        height: 30%;
+        right: 0;
+        top: 35%;
+      }
       .menubox {
         .el-submenu .title {
           text-align: center;

src/components/leftmenu/index.vue

@@ -73,7 +73,7 @@ export default {
 <style lang="scss" scoped>
 .nav {
   width: 100%;
-  background: #dadada;
+  background: #f5f9ff;
   border: 1px solid #999;
   padding-bottom: 10%;
   border-radius: 12px;

src/views/Home.vue

@@ -165,6 +165,7 @@ export default {
 <style lang="scss" scoped>
 .home {
   width: 100%;
+  // background: #f5f9ff;
   .top {
     width: 100%;
   }

src/views/details.vue

@@ -1,15 +1,17 @@
 <template>
-  <div ref="detailsHome" class="detailsHome" v-if="contentsItem">
+  <div class="details">
     <breadcrumb ref="breadcrumb"></breadcrumb>
-    <img class="thumbnail" v-if="isshow" :src="contentsItem.thumbnail">
-    <h1 class="title">{{ contentsItem.title }}</h1>
-    <h3 class="title" v-if="contentsItem && contentsItem.curtTitle">{{ contentsItem.curtTitle }}</h3>
-    <!-- <span class="describe">{{ contentsItem.describe }}</span> -->
-    <span class="date">发表时间: {{ contentsItem.updateAt | dates }}<span class="visit">访问量: {{ contentsItem.visit }}</span></span>
-    <div class="content" v-html="contentsItem.content"></div>
-    <a v-if="contentsItem && contentsItem.annex" :href="contentsItem.annex" :download="contentsItem.annex" target="view_window">下载附件</a>
+    <div ref="detailsHome" class="detailsHome" v-if="contentsItem">
+      <img class="thumbnail" v-if="isshow" :src="contentsItem.thumbnail">
+      <h3 class="title">{{ contentsItem.title }}</h3>
+      <h4 class="title" v-if="contentsItem && contentsItem.curtTitle">{{ contentsItem.curtTitle }}</h4>
+      <!-- <span class="describe">{{ contentsItem.describe }}</span> -->
+      <span class="date">发表时间: {{ contentsItem.updateAt | dates }}<span class="visit">访问量: {{ contentsItem.visit }}</span></span>
+      <div class="content" v-html="contentsItem.content"></div>
+      <a v-if="contentsItem && contentsItem.annex" :href="contentsItem.annex" :download="contentsItem.annex" target="view_window">下载附件</a>
+    </div>
+    <el-divider class="divider" v-else>暂无数据</el-divider>
   </div>
-  <el-divider class="divider" v-else>暂无数据</el-divider>
 </template>
 
 <script>
@@ -54,9 +56,16 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.detailsHome {
+.details {
   width: 60%;
   margin: 0 auto;
+}
+.detailsHome {
+  width: 100%;
+  background-color: #f5f9ff;
+  padding: 0 5%;
+  padding-top: 3%;
+  margin-top: 2%;
   .thumbnail {
     width: 20%;
     display: block;
@@ -74,6 +83,11 @@ export default {
       margin-left: 30px;
     }
   }
+  .date {
+    border-bottom: 1px solid #004ef5;
+    margin-bottom: 5%;
+    padding-bottom: 10px;
+  }
   .content {
     text-align: left;
     white-space: pre-wrap;

src/views/leader.vue

@@ -1,31 +1,51 @@
 <template>
-  <div class="detailsHome" v-if="menus.length > 0">
-    <div class="leader" v-for="(i, index) in menus" :key="index">
-      <h2 class="title">{{ i.name }}</h2>
-      <div class="item" v-if="i.datas">
-        <div v-for="item in i.datas" :key="item._id" @click="btn(item)">{{ item.describe }}: {{ item.title }}</div>
+  <div class="leaderbox">
+    <breadcrumb ref="breadcrumb"></breadcrumb>
+    <div class="detailsHome">
+      <div class="listBoxLeft">
+        <letnav ref="letnav" :menuTree="menu"></letnav>
       </div>
+      <div class="listBoxRight" v-if="menus.length > 0">
+        <div class="leader" v-for="(i, index) in menus" :key="index">
+          <h2 class="title">{{ i.name }}</h2>
+          <div class="item" v-if="i.datas">
+            <div v-for="item in i.datas" :key="item._id" @click="btn(item)">{{ item.describe }}: {{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+      <el-divider class="divider" v-else>暂无数据</el-divider>
     </div>
   </div>
-  <el-divider class="divider" v-else>暂无数据</el-divider>
 </template>
 
 <script>
+import letnav from '../components/leftmenu/index.vue';
+import breadcrumb from '../components/breadcrumb/index.vue';
 import { mapState, mapActions } from 'vuex';
 export default {
   name: 'leaderHome',
-  components: {},
+  components: {
+    letnav,
+    breadcrumb
+  },
   computed: {
-    ...mapState(['menusall'])
+    ...mapState(['menusall', 'menusalls'])
   },
   data() {
     return {
       leader: [],
       member: [],
-      menus: []
+      menus: [],
+      menu: {}
     };
   },
   async mounted() {
+    await this.menusQueryAll();
+    // 获取一例菜单
+    this.menu = this.$setChildrenSession({ menus: this.menusalls, iscode: '01' });
+    // 控制左侧菜单当前选项
+    this.$refs.letnav.setIndex();
+
     this.leader = await this.leaderList({ bind: '0121' });
     this.member = await this.leaderList({ bind: '0122' });
     const res = await this.menusQueryNoShow();
@@ -39,7 +59,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['leaderList', 'menusQueryNoShow']),
+    ...mapActions(['leaderList', 'menusQueryNoShow', 'menusQueryAll']),
     btn(e) {
       console.log(e);
       this.$router.push(`/details/${e._id}`);
@@ -48,9 +68,22 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.detailsHome {
+.leaderbox {
   width: 60%;
-  margin: 5% auto;
+  margin: 0 auto;
+}
+.detailsHome {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  .listBoxLeft {
+    width: 20%;
+    margin-top: 3%;
+    margin-right: 5%;
+  }
+  .listBoxRight {
+    width: 75%;
+  }
   .title {
    text-align: center;
   }
@@ -71,6 +104,9 @@ export default {
       // }
     }
   }
+  .leader {
+    width: 100%;
+  }
   .describe, .date {
     display: block;
     color: #999;

src/views/list.vue

@@ -143,8 +143,10 @@ export default {
         width: 100%;
         margin: 0 auto;
         margin-bottom: 3%;
+        background: #f5f9ff;
         ::v-deep .el-card__body {
           display: flex;
+          // padding: 10px 20px !important;
           .listimg {
             display: block;
             width: 15%;
@@ -161,7 +163,7 @@ export default {
               text-overflow: ellipsis;
               white-space: nowrap;
               font-size: 16px;
-              line-height: 35px;
+              line-height: 30px;
               font-weight: 600;
             }
             .describe {
@@ -172,12 +174,13 @@ export default {
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               color: #999;
-              font-size: 12px;
+              font-size: 14px;
             }
             .date {
               width: 100%;
               color: #999;
-              line-height: 3em;
+              line-height: 2em;
+              font-size: 14px;
             }
           }
         }

src/views/pages.vue

@@ -6,8 +6,8 @@
         <letnav ref="letnav" :menuTree="menu"></letnav>
       </div>
       <div class="listBoxRight">
-        <h1 class="title">{{ pagesItem.title }}</h1>
-        <span class="describe">{{ pagesItem.describe }}</span>
+        <h3 class="title">{{ pagesItem.title }}</h3>
+        <!-- <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>