页面布局调整

src/App.vue

@@ -40,6 +40,7 @@ body {
   width: 100%;
   height: 100%;
   min-width: 1100px;
+  background-color: #f5f5f6 !important;
   .heads {
     width: 100%;
   }

src/assets/index.scss

@@ -1,7 +1,7 @@
 html, body, #app{
   margin: 0;
   padding: 0;
-  background: #fff;
+  background: #f5f5f6;
 }
 *,
 *::before,
@@ -64,7 +64,9 @@ html, body, #app{
 .large-icon {
   font-size: 2em;
 }
-
+.el-divider__text {
+  background: none !important;
+}
 /* 菜单样式 */
 .el-menu--popup {
   background-color: #025fac !important;
@@ -86,13 +88,25 @@ html, body, #app{
 
 
 /*结束*/
-@media (max-width: 1650px) {
+@media (max-width: 1700px) {
   .foots {
     .main {
+      width: 45% !important;
+    }
+  }
+  .home {
+    .listBox {
       width: 70% !important;
     }
   }
 }
+@media (max-width: 1500px) {
+  .foots {
+    .main {
+      width: 55% !important;
+    }
+  }
+}
 @media screen {
   @media (max-width: 1366px) {
     h4 {
@@ -103,11 +117,6 @@ html, body, #app{
       .top {
         height: 300px;
       }
-      .nav {
-        .el-menu {
-          // width: 90%;
-        }
-      }
     }
     .home {
       .listBox {
@@ -119,7 +128,7 @@ html, body, #app{
     }
     .foots {
       .main {
-        width: 80% !important;
+        width: 60% !important;
       }
     }
     // 列表
@@ -174,7 +183,7 @@ html, body, #app{
     }
     .foots {
       .main {
-        width: 85% !important;
+        width: 75% !important;
       }
     }
     // 列表

src/components/banner/banner.vue

@@ -57,9 +57,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 .bannerBox {
-  width: 30%;
+  width: 33%;
   // display: flex;
-  height: 300px;
+  height: 340px;
   overflow: hidden;
   .imgbox {
     width: 100%;

src/components/foots/index.vue

@@ -8,7 +8,7 @@
           <span class="item">{{ infos.title && infos.title.name }}{{ infos.title && infos.title.value }}</span>
         </p>
         <p class="itemBox itemBox2">
-          <span class="item">{{ infos.phone && infos.phone.name }}{{ infos.phone && infos.phone.value }}</span>
+          <span class="item item1">{{ 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>
@@ -52,9 +52,10 @@ export default {
 .foots {
   width: 100%;
   height: 150px;
-  background-color: #f5f5fb;
+  background-color: #0063b4;
+  color: #fff;
   .main {
-    width: 55%;
+    width: 45%;
     display: flex;
     margin: 0 auto;
     padding-top: 2%;
@@ -71,9 +72,15 @@ export default {
         display: flex;
         .item {
           display: block;
-          width: 33%;
+          width: 50%;
           text-align: left;
         }
+        .item1 {
+          width: 30%;
+        }
+        .item2 {
+          width: 20%;
+        }
         .item3 {
           width: 50%;
         }

src/components/leftmenu/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="nav">
+  <div class="nav" :style="{ paddingBottom: !menuTree.children ? '0' : '10%', border: 'none' }">
     <div class="titlename">{{ menuTree && menuTree.name }}</div>
-    <el-menu unique-opened menu-trigger="hover" text-color="#000" active-text-color="#fff" :default-active="activeIndex" mode="vertical">
+    <el-menu v-if="menuTree.children" 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 :activeIndex="activeIndex" :items="item" @itemClick="handleSelect"></nav-item>
       </div>
     </el-menu>
+    <el-image class="titleImg" :src="imgUrl" v-else></el-image>
   </div>
 </template>
 
@@ -24,7 +25,8 @@ export default {
   },
   data() {
     return {
-      activeIndex: '00'
+      activeIndex: '00',
+      imgUrl: require('../../assets/fg.jpg')
     };
   },
   async mounted() {},

src/components/list/index.vue

@@ -133,9 +133,12 @@ export default {
   border-bottom: 1px dashed #666;
 }
 .lists {
-  width: 30%;
-  height: 360px;
+  width: 33%;
+  height: 340px;
+  background-color: #fff;
   .el-tabs{
+    width: 90%;
+    margin: 0 auto;
     ::v-deep .is-top {
       color: #000;
     }
@@ -143,12 +146,13 @@ export default {
       color: #007ce2;
     }
     ::v-deep .el-tabs__content {
-      height: 280px;
+      height: 240px;
     }
   }
   .title {
     display: flex;
-    margin: 5px 0;
+    width: 95%;
+    margin: 10px auto;
     .titleImg {
       width: 5%;
       height: 5%;
@@ -179,8 +183,8 @@ export default {
   }
   .isimg {
     display: flex;
-    width: 100%;
-    margin-top: 13px;
+    // width: 90%;
+    // margin: 0 auto;
     cursor: pointer;
     .isimg-img {
       display: block;
@@ -217,7 +221,8 @@ export default {
   }
   .isList {
     display: flex;
-    margin: 5px 0;
+    margin: 0;
+    // width: 90%;
     .isList-img {
       width: 10px;
       height: 10px;

src/components/list/threeList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lists" :style="{ backgroundColor: isImg ? '#f4f4f4' : '', border: isImg ? '1px solid #dfdfdf' : 'none' }">
+  <div class="lists" :style="{ backgroundColor: isImg ? '#fff' : '#fff', border: isImg ? '1px solid #dfdfdf' : 'none' }">
     <el-image class="titleImg topimg" :src="imgUrl" v-if="isImg"></el-image>
     <div class="title" v-else>
       <el-image class="titleImg" :src="imgUrl"></el-image>
@@ -81,9 +81,9 @@ export default {
 
 <style lang="scss" scoped>
 .lists {
-  // margin-left: 5%;
-  height: 360px;
-  width: 30%;
+  background-color: #fff;
+  height: 340px;
+  width: 33%;
   .titleImg {
     display: block;
     width: 100%;
@@ -91,7 +91,9 @@ export default {
   }
   .title {
     display: flex;
-    // margin: 15px 0;
+    width: 95%;
+    margin: 0 auto;
+    margin-top: 10px;
     .titleImg {
       display: block;
       width: 8%;
@@ -124,8 +126,10 @@ export default {
     }
   }
   .more2 {
-    width: 18%;
+    width: 50%;
     margin-bottom: 2%;
+    margin-left: 5%;
+    text-align: left;
   }
   .isList {
     width: 90%;

src/components/pagination.vue

@@ -43,5 +43,16 @@ export default {
 <style lang="scss" scoped>
 .pagination-box {
   margin-top: 10px;
+  .el-pagination {
+    ::v-deep .btn-prev {
+      background: none !important;
+    }
+    ::v-deep .btn-next {
+      background: none !important;
+    }
+    ::v-deep .el-pager li {
+      background: none !important;
+    }
+  }
 }
 </style>

src/views/Home.vue

@@ -171,26 +171,26 @@ export default {
   }
   .listBox {
     width: 60%;
-    margin: 3% auto;
+    margin: 0.5% auto;
     display: flex;
     .listItem {
-      margin: 0 5%;
+      margin: 0 0.5%;
     }
   }
   .links {
     width: 60%;
   }
   .sknj {
-    width: 65%;
+    width: 66%;
     display: block;
-    margin-right: 5%;
+    margin-right: 1%;
   }
   .szskl {
-    width: 30%;
+    width: 33%;
     display: block;
   }
   .xzbox {
-    width: 30%;
+    width: 33%;
     position: relative;
     .three {
       width: 100%;

src/views/details.vue

@@ -6,7 +6,7 @@
       <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.date | dates }}<span class="visit">访问量: {{ contentsItem.visit }}</span></span>
+      <span class="date">发表时间: {{ contentsItem.date | dates }}<span class="visit" v-if="contentsItem.source">来源: {{ contentsItem.source }}</span><span class="visit">访问量: {{ contentsItem.visit }}</span></span>
       <div class="content" v-html="contentsItem.content"></div>
       <div v-if="contentsItem && contentsItem.annex">
         <a v-for="(item, index) in contentsItem.annex" :key="index" :href="item.url" :download="item.url" target="view_window">下载附件：{{ item.name }}<br/></a>

src/views/list.vue

@@ -12,7 +12,7 @@
             <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="describe" v-if="item.describe">{{ item.describe }}</span>
               <span class="date">{{ item.date | dates }}</span>
             </div>
           </el-card>