政策解读模块

src/App.vue

@@ -14,4 +14,18 @@ export default {
   width: 1400px;
   margin: 0 auto;
 }
+.p0-100 {
+  padding: 0 100px;
+}
+.text_hidden_one {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  // overflow: hidden;
+  // display: -webkit-box;
+  // -webkit-line-clamp: 1;
+  // -webkit-box-orient: vertical;
+  // word-break: break-all;
+}
 </style>

src/api/home/home.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request';
+
+// 首页获取政策列表
+export function getPolicy(params) {
+  return request({
+    url: '/mPolicy/getPolicy',
+    method: 'post',
+    params
+  });
+}
+// 首页获取政策解读列表
+export function getPolicyRead(params) {
+  return request({
+    url: '/mPolicy/getPolicyRead',
+    params
+  });
+}

src/permission.js

@@ -39,7 +39,6 @@ router.beforeEach((to, from, next) => {
       }
     }
   } else {
-    console.log('无');
     next();
     // if (whiteList.indexOf(to.path) !== -1) {
     //   next();

src/store/modules/user.js

@@ -73,7 +73,6 @@ const user = {
             const avatar = !res.data.icon
               ? require('@/assets/image/profile.jpg')
               : process.env.VUE_APP_BASE_API + user.icon;
-            console.log(avatar);
             if (res.roles && res.roles.length > 0) {
               // 验证返回的roles是否是一个非空数组
               commit('SET_ROLES', res.roles);

src/utils/date.js

@@ -1,7 +1,10 @@
 // date.js
 export function formatDate(date, fmt) {
   if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+    );
   }
   let o = {
     'M+': date.getMonth() + 1,
@@ -13,7 +16,10 @@ export function formatDate(date, fmt) {
   for (let k in o) {
     if (new RegExp(`(${k})`).test(fmt)) {
       let str = o[k] + '';
-      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? str : padLeftZero(str)
+      );
     }
   }
   return fmt;
@@ -25,13 +31,13 @@ function padLeftZero(str) {
 
 export function str2Date(dateStr, separator) {
   if (!separator) {
-    separator = "-";
+    separator = '-';
   }
   let dateArr = dateStr.split(separator);
   let year = parseInt(dateArr[0]);
   let month;
   //处理月份为04这样的情况
-  if (dateArr[1].indexOf("0") == 0) {
+  if (dateArr[1].indexOf('0') == 0) {
     month = parseInt(dateArr[1].substring(1));
   } else {
     month = parseInt(dateArr[1]);
@@ -40,3 +46,26 @@ export function str2Date(dateStr, separator) {
   let date = new Date(year, month - 1, day);
   return date;
 }
+
+export function formatTime(value, type) {
+  let date = new Date(value);
+  let year = date.getFullYear();
+  let month = date.getMonth() + 1;
+  month = month > 9 ? month : '0' + month;
+  let day = date.getDate();
+  day = day > 9 ? day : '0' + day;
+  let hh = date.getHours();
+  hh = hh > 9 ? hh : '0' + hh;
+  let mm = date.getMinutes();
+  mm = mm > 9 ? mm : '0' + mm;
+  let ss = date.getSeconds();
+  ss = ss > 9 ? ss : '0' + ss;
+  let time = '';
+  if (type === 1) {
+    //不带时分秒
+    time = year + '-' + month + '-' + day;
+  } else {
+    time = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss;
+  }
+  return time;
+}

src/views/home/home.vue

@@ -1,5 +1,287 @@
 <template>
   <div>
-    home
+    <div class="p0-100">
+      <div style="display:flex">
+        <div class="banner">
+          <!-- 轮播图 -->
+          <el-carousel height="345px" trigger="click">
+            <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+              <img :src="item" alt="" />
+            </el-carousel-item>
+          </el-carousel>
+          <!-- 政策解读 -->
+          <div class="unscramble">
+            <div class="title">
+              <div class="title_top">
+                <div class="title_top_l">
+                  <img src="@/assets/image/icon4.png" alt="" />
+                  <img src="@/assets/image/icon5.png" alt="" />
+                </div>
+                <div class="title_top_r">
+                  更多<i class="el-icon-arrow-right"></i>
+                </div>
+              </div>
+              <span>{{ date }}</span>
+            </div>
+            <div class="tab_list">
+              <el-tabs
+                v-model="queryParams2.attributeId"
+                @tab-click="handleClick2"
+              >
+                <el-tab-pane label="经信" name="JXJ"></el-tab-pane>
+                <el-tab-pane label="科技" name="KJJ"></el-tab-pane>
+                <el-tab-pane label="发改" name="FGW"></el-tab-pane>
+                <el-tab-pane label="其他" name="OTHER"></el-tab-pane>
+                <div
+                  class="tab_item"
+                  v-for="(item, index) in list2"
+                  :key="item.id"
+                >
+                  <span :class="index < 3 ? 'color' : ''">{{ index + 1 }}</span>
+                  <span class="text_hidden_one">{{ item.title }}</span>
+                  <i v-if="index < 3">
+                    <img src="@/assets/image/new.png" alt="" />
+                  </i>
+                </div>
+              </el-tabs>
+            </div>
+          </div>
+        </div>
+        <div class="banner_r">
+          <!-- 政策列表 -->
+          <el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
+            <el-tab-pane label="政策法规" name="1415156808053559296">
+              <div class="banner_r_list" v-for="item in 5" :key="item">
+                <div>
+                  政策法规合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
+                </div>
+                <span>07-09</span>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="申报通知" name="1415156963146338304">
+              <div class="banner_r_list" v-for="item in 5" :key="item">
+                <div>
+                  申报通知合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
+                </div>
+                <span>07-09</span>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="政府公示" name="1415157002090450944">
+              <div class="banner_r_list" v-for="item in 5" :key="item">
+                <div>
+                  政府公示合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
+                </div>
+                <span>07-09</span>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="公告" name="1415157026115424256">
+              <div class="banner_r_list" v-for="item in 5" :key="item">
+                <div>
+                  公告公示合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
+                </div>
+                <span>07-09</span>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="其他" name="1415157049267982336">
+              <div class="banner_r_list" v-for="item in 5" :key="item">
+                <div>
+                  其他公示合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
+                </div>
+                <span>07-09</span>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+          <!-- 资讯快报 -->
+          <div>999</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import logoImg1 from '@/assets/image/banner1.png';
+import logoImg2 from '@/assets/image/banner2.png';
+import logoImg3 from '@/assets/image/banner3.png';
+import { getPolicy, getPolicyRead } from '@/api/home/home';
+import { formatTime } from '@/utils/date';
+export default {
+  data() {
+    return {
+      bannerList: [logoImg1, logoImg2, logoImg3],
+      queryParams: {
+        labelId: '1415156808053559296'
+      },
+      queryParams2: {
+        attributeId: 'JXJ'
+      },
+      date: formatTime(Date.now(), 1),
+      list: [],
+      list2: []
+    };
+  },
+  methods: {
+    // 政策列表
+    handleClick(tab, event) {
+      getPolicy(this.queryParams).then(({ data }) => {
+        this.list = data.list;
+      });
+    },
+    // 政策解读
+    handleClick2(tab, event) {
+      getPolicyRead(this.queryParams2).then(({ data }) => {
+        this.list2 = data.list;
+      });
+    }
+  },
+  created() {
+    this.handleClick();
+    this.handleClick2();
+  }
+};
+</script>
+<style lang="scss" scoped>
+// /deep/.el-carousel__button {
+//   width: 8px;
+//   height: 8px;
+//   border-radius: 50%;
+// }
+// /deep/.is-active {
+//   .el-carousel__button {
+//     width: 20px;
+//     background-color: #ffa32c;
+//     border-radius: 4px;
+//   }
+// }
+/deep/.el-tabs__item {
+  padding: 0 30px;
+  font-size: 20px;
+}
+/deep/.el-tabs__item.is-active {
+  font-weight: bold;
+  color: #3394ff;
+}
+/deep/.el-tabs__active-bar {
+  height: 4px;
+  border-radius: 2px;
+  background-color: #3394ff;
+}
+/deep/.el-tabs__nav-wrap::after {
+  height: 0;
+}
+.banner {
+  width: 614px;
+  margin-right: 20px;
+  /deep/.el-carousel__button {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+  /deep/.is-active {
+    .el-carousel__button {
+      width: 20px;
+      background-color: #ffa32c;
+      border-radius: 4px;
+    }
+  }
+
+  .unscramble {
+    margin-top: 30px;
+    .title {
+      position: relative;
+      padding-right: 21px;
+      height: 40px;
+      line-height: 40px;
+      text-align: right;
+      background-color: #f3f3f3;
+      border-radius: 6px 6px 0px 0px;
+      .title_top {
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        bottom: 0;
+        padding: 0 20px;
+        width: 400px;
+        height: 50px;
+        background: #3394ff;
+        border-radius: 6px 6px 0px 0px;
+        .title_top_l {
+          img {
+            vertical-align: middle;
+            margin-right: 10px;
+          }
+        }
+        .title_top_r {
+          font-size: 16px;
+          color: #fff;
+        }
+      }
+      span {
+        font-size: 16px;
+        color: #666;
+      }
+    }
+    .tab_list {
+      padding: 0 18px;
+      .tab_item {
+        height: 68px;
+        line-height: 68px;
+        display: flex;
+        // justify-content: center;
+        align-items: center;
+        span:nth-child(1) {
+          width: 17px;
+          font-size: 30px;
+          font-family: DIN;
+          font-weight: bold;
+          font-style: italic;
+          color: #999999;
+          line-height: 9px;
+        }
+        span.color {
+          color: #ffa32c;
+        }
+        span:nth-child(2) {
+          padding: 0 20px 0 20px;
+        }
+      }
+    }
+  }
+}
+.banner_r {
+  width: 566px;
+  // /deep/.el-tabs__item {
+  //   padding: 0 30px;
+  //   font-size: 20px;
+  // }
+  // /deep/.el-tabs__item.is-active {
+  //   font-weight: bold;
+  //   color: #3394ff;
+  // }
+  // /deep/.el-tabs__active-bar {
+  //   height: 4px;
+  //   border-radius: 2px;
+  //   background-color: #3394ff;
+  // }
+  // /deep/ .el-tabs__nav-wrap::after {
+  //   height: 0;
+  // }
+
+  .banner_r_list {
+    position: relative;
+    height: 58px;
+    line-height: 58px;
+    div {
+      padding-right: 50px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    span {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -35,8 +35,8 @@
     <!-- 整体宽度 -->
     <div class="content">
       <!-- 头部 -->
-      <div class="header">
+      <div class="header p0-100">
-        <div class="login_btn" v-if="2 == 3">
+        <div class="login_btn" v-if="!avatar">
           <el-button type="text" @click="handlePage">登录</el-button>
           <i class="mark">|</i>
           <el-button type="text" @click="handlePage">注册</el-button>
@@ -55,7 +55,7 @@
     </div>
     <!-- ul li 列表 -->
     <div class="uls">
-      <div class="lis content">
+      <div class="lis content p0-100">
         <ul>
           <li
             :class="path == item.path ? 'is-active' : ''"
@@ -72,7 +72,7 @@
       </div>
     </div>
     <!-- 路由站位 -->
-    <div class="content">
+    <div class="content" style="padding:10px 0">
       <router-view></router-view>
     </div>
     <div class="my_footer">
@@ -221,7 +221,6 @@ export default {
 
   .header {
     height: 206px;
-    padding: 0 100px;
     background-image: url(../assets/image/01.png);
     .login_btn {
       height: 60px;
@@ -284,7 +283,7 @@ export default {
         padding-left: 0;
         li {
           float: left;
-          padding: 0 50px;
+          padding: 0 41px;
           cursor: pointer;
           color: #fff;
           font-size: 24px;
@@ -381,53 +380,6 @@ export default {
       }
     }
   }
-  .el-tabs--border-card {
-    border: 0;
-  }
-  /deep/.el-tabs--border-card > .el-tabs__header {
-    background-color: #ffa32c;
-    border-bottom: 0;
-  }
-  /deep/.el-tabs__item {
-    color: #fff;
-    font-size: 22px;
-  }
-  /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
-    position: relative;
-    color: #fff;
-    background-color: #3394ff;
-    border-right-color: #3394ff;
-    border-left-color: #3394ff;
-  }
-  /deep/.el-tabs--border-card
-    > .el-tabs__header
-    .el-tabs__item.is-active::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid #fff;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    position: absolute;
-    bottom: -1px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  /deep/.el-tabs--border-card
-    > .el-tabs__header
-    .el-tabs__item:not(.is-disabled):hover {
-    color: #fff;
-    background-color: #3394ff;
-  }
-  /deep/.el-tabs__item {
-    padding-left: 30px !important;
-    padding-right: 30px;
-  }
-  /deep/.el-tabs__nav-scroll {
-    padding: 0 100px;
-  }
 }
 @media (max-width: 1024px) {
   .chart-wrapper {