首页布局,使用若依时间格式化
16
src/App.vue
@ -21,11 +21,15 @@ export default {
|
||||
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;
|
||||
}
|
||||
.text_18_333 {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #ffa32c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -15,3 +15,10 @@ export function getPolicyRead(params) {
|
||||
params
|
||||
});
|
||||
}
|
||||
// 首页获取资讯快报列表
|
||||
export function getInformation(params) {
|
||||
return request({
|
||||
url: '/mPolicy/getInformation',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
BIN
src/assets/image/03.png
Normal file
After Width: | Height: | Size: 284 KiB |
BIN
src/assets/image/about.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/image/city/01.png
Normal file
After Width: | Height: | Size: 42 KiB |
BIN
src/assets/image/city/02.png
Normal file
After Width: | Height: | Size: 34 KiB |
BIN
src/assets/image/city/03.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/image/city/04.png
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/image/city/05.png
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/image/city/06.png
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/image/city/07.png
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/image/city/08.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/image/city/09.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/image/city/10.png
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/image/city/11.png
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/image/city/12.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/image/city/13.png
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/image/city/14.png
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/image/city/15.png
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/image/city/16.png
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/image/city/17.png
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/image/city/18.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/image/icon6.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/image/icon7.png
Normal file
After Width: | Height: | Size: 768 B |
BIN
src/assets/image/icon8.png
Normal file
After Width: | Height: | Size: 4.0 KiB |
@ -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;
|
||||
}
|
||||
|
@ -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">
|
||||
<div class="banner_r_list" v-for="item in 5" :key="item">
|
||||
<div>
|
||||
政策法规合肥市推动经济高速发展的情况,合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
|
||||
</div>
|
||||
<span>07-09</span>
|
||||
<el-tab-pane
|
||||
label="政策法规"
|
||||
name="1415156808053559296"
|
||||
></el-tab-pane>
|
||||
<el-tab-pane
|
||||
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>
|
||||
<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>
|
||||
<span>07-09</span>
|
||||
</div>
|
||||
</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 { formatTime } from '@/utils/date';
|
||||
import { getPolicy, getPolicyRead, getInformation } from '@/api/home/home';
|
||||
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>
|
||||
|