首页布局，使用若依时间格式化

src/App.vue

@@ -21,11 +21,15 @@ export default {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-
+}
-  // overflow: hidden;
+.text_18_333 {
-  // display: -webkit-box;
+  font-size: 18px;
-  // -webkit-line-clamp: 1;
+  color: #333;
-  // -webkit-box-orient: vertical;
+}
-  // word-break: break-all;
+.pointer {
+  cursor: pointer;
+  &:hover {
+    color: #ffa32c;
+  }
 }
 </style>

src/api/home/home.js

@@ -15,3 +15,10 @@ export function getPolicyRead(params) {
     params
   });
 }
+// 首页获取资讯快报列表
+export function getInformation(params) {
+  return request({
+    url: '/mPolicy/getInformation',
+    params
+  });
+}

src/utils/date.js

@@ -46,26 +46,3 @@ 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

@@ -17,7 +17,7 @@
                   <img src="@/assets/image/icon4.png" alt="" />
                   <img src="@/assets/image/icon5.png" alt="" />
                 </div>
-                <div class="title_top_r">
+                <div class="title_top_r pointer">
                   更多<i class="el-icon-arrow-right"></i>
                 </div>
               </div>
@@ -38,7 +38,9 @@
                   :key="item.id"
                 >
                   <span :class="index < 3 ? 'color' : ''">{{ index + 1 }}</span>
-                  <span class="text_hidden_one">{{ item.title }}</span>
+                  <span class="text_hidden_one text_18_333 pointer">{{
+                    item.title
+                  }}</span>
                   <i v-if="index < 3">
                     <img src="@/assets/image/new.png" alt="" />
                   </i>
@@ -50,49 +52,190 @@
         <div class="banner_r">
           <!-- 政策列表 -->
           <el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
-            <el-tab-pane label="政策法规" name="1415156808053559296">
+            <el-tab-pane
-              <div class="banner_r_list" v-for="item in 5" :key="item">
+              label="政策法规"
-                <div>
+              name="1415156808053559296"
-                  政策法规合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
+            ></el-tab-pane>
-                </div>
+            <el-tab-pane
-                <span>07-09</span>
+              label="申报通知"
+              name="1415156963146338304"
+            ></el-tab-pane>
+            <el-tab-pane
+              label="政府公示"
+              name="1415157002090450944"
+            ></el-tab-pane>
+            <el-tab-pane label="公告" name="1415157026115424256"></el-tab-pane>
+            <el-tab-pane label="其他" name="1415157049267982336"></el-tab-pane>
+            <div class="banner_r_list" v-for="item in 5" :key="item">
+              <div class="text_18_333 pointer">
+                政策法规合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
               </div>
-            </el-tab-pane>
+              <span>07-09</span>
-            <el-tab-pane label="申报通知" name="1415156963146338304">
+            </div>
-              <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 class="bulletin">
+            <div class="title">
+              <div>
+                <img src="@/assets/image/icon6.png" alt="" />
+              </div>
+              <div class="title_top_r pointer">
+                更多<i class="el-icon-arrow-right"></i>
+              </div>
+            </div>
+            <div class="tab_list">
+              <div class="banner_r_list" v-for="item in list3" :key="item.id">
+                <div class="text_18_333 pointer">{{ item.title }}</div>
+                <span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 城市列表 -->
+      <div class="city_list">
+        <div>
+          <img src="@/assets/image/city/01.png" alt="" />
+          <span>安徽</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/02.png" alt="" />
+          <span>合肥</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/03.png" alt="" />
+          <span>芜湖</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/04.png" alt="" />
+          <span>蚌埠</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/05.png" alt="" />
+          <span>淮南</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/06.png" alt="" />
+          <span>马鞍山</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/07.png" alt="" />
+          <span>淮北</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/08.png" alt="" />
+          <span>铜陵</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/09.png" alt="" />
+          <span>安庆</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/10.png" alt="" />
+          <span>滁州</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/11.png" alt="" />
+          <span>阜阳</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/12.png" alt="" />
+          <span>宿州</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/13.png" alt="" />
+          <span>六安</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/14.png" alt="" />
+          <span>亳州</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/15.png" alt="" />
+          <span>池州</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/16.png" alt="" />
+          <span>宣城</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/17.png" alt="" />
+          <span>黄山</span>
+        </div>
+        <div>
+          <img src="@/assets/image/city/18.png" alt="" />
+          <span>合肥高新区</span>
+        </div>
+      </div>
+    </div>
+    <div class="about">
+      <div class="p0-100">
+        <p class="about_tit">
+          <img src="@/assets/image/icon7.png" alt="" />
+          <img src="@/assets/image/about.png" alt="" />
+        </p>
+        <div class="about_box">
+          <div class="banner about_l">
+            <img src="@/assets/image/03.png" alt="" />
+          </div>
+          <div class="about_r">
+            <div>
+              <h3>以科技创新赋能政策服务</h3>
+              <p>
+                合肥嘉策信息技术服务有限公司于2018年05月2日成立。法定代表人时加红，公司经营范围包括：信息系统集成咨询...
+              </p>
+            </div>
+            <div style="margin-top:53px">
+              <h3>嘉策互联网科技创新服务平台</h3>
+              <p>
+                合肥嘉策信息技术服务有限公司于2018年05月2日成立。法定代表人时加红，公司经营范围包括：信息系统集成咨询...
+              </p>
+            </div>
+            <el-button type="warning">更多</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="p0-100">
+      <div class="cooperation">
+        <img src="@/assets/image/icon8.png" alt="" />
+      </div>
+      <div class="city_list">
+        <div>
+          <img src="@/assets/image/city/01.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/02.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/03.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/04.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/05.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/06.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/07.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/08.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/09.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/10.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/11.png" alt="" />
+        </div>
+        <div>
+          <img src="@/assets/image/city/12.png" alt="" />
         </div>
       </div>
     </div>
@@ -102,8 +245,7 @@
 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 { getPolicy, getPolicyRead, getInformation } from '@/api/home/home';
-import { formatTime } from '@/utils/date';
 export default {
   data() {
     return {
@@ -114,9 +256,14 @@ export default {
       queryParams2: {
         attributeId: 'JXJ'
       },
-      date: formatTime(Date.now(), 1),
+      queryParams3: {
+        pageNum: 1,
+        pageSize: 7
+      },
+      date: this.parseTime(new Date(), '{y}-{m}-{d}'),
       list: [],
-      list2: []
+      list2: [],
+      list3: []
     };
   },
   methods: {
@@ -136,6 +283,9 @@ export default {
   created() {
     this.handleClick();
     this.handleClick2();
+    getInformation(this.queryParams3).then(({ data }) => {
+      this.list3 = data.list;
+    });
   }
 };
 </script>
@@ -268,6 +418,7 @@ export default {
   // }
 
   .banner_r_list {
+    padding: 0 18px;
     position: relative;
     height: 58px;
     line-height: 58px;
@@ -283,5 +434,93 @@ export default {
       top: 0;
     }
   }
+  .bulletin {
+    margin-top: 30px;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 21px;
+      height: 40px;
+      background-color: #f3f3f3;
+      border-radius: 6px 6px 0px 0px;
+      .title_top_r {
+        font-size: 16px;
+        color: #666;
+      }
+    }
+    .tab_list {
+      padding: 0 18px;
+      .tab_item {
+        height: 56px;
+      }
+    }
+  }
+}
+.city_list {
+  margin-top: 10px;
+  padding: 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  div {
+    cursor: pointer;
+    // padding: 16px;
+    border-radius: 6px;
+    overflow: hidden;
+    width: 16%;
+    height: 80px;
+    // margin: 0 0.5% 10px;
+    margin-bottom: 10px;
+    position: relative;
+    span {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      line-height: 80px;
+      color: #fff;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}
+.about {
+  background-color: #f8f8f8;
+  .p0-100 {
+    padding-top: 37px;
+    padding-bottom: 26px;
+    .about_tit {
+      margin-top: 0;
+      img {
+        vertical-align: middle;
+        margin-right: 3px;
+      }
+    }
+    .about_box {
+      display: flex;
+      .about_r {
+        h3 {
+          color: #333;
+          font-size: 20px;
+        }
+        p {
+          color: #666;
+          font-size: 18px;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+}
+.p0-100 {
+  .cooperation {
+    padding-top: 47px;
+    padding-bottom: 19px;
+    text-align: center;
+  }
 }
 </style>