527 lines
14 KiB
Vue
527 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<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 pointer">
|
||
更多<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 text_18_333 pointer">{{
|
||
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"
|
||
></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 style="min-height:290px">
|
||
<div class="banner_r_list" v-for="item in list" :key="item.id">
|
||
<div class="text_18_333 pointer">{{ item.title }}</div>
|
||
<span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
|
||
</div>
|
||
</div>
|
||
</el-tabs>
|
||
<!-- 资讯快报 -->
|
||
<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>
|
||
</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, getInformation } from '@/api/home/home';
|
||
export default {
|
||
data() {
|
||
return {
|
||
bannerList: [logoImg1, logoImg2, logoImg3],
|
||
queryParams: {
|
||
labelId: '1415156808053559296'
|
||
},
|
||
queryParams2: {
|
||
attributeId: 'JXJ'
|
||
},
|
||
queryParams3: {
|
||
pageNum: 1,
|
||
pageSize: 7
|
||
},
|
||
date: this.parseTime(new Date(), '{y}-{m}-{d}'),
|
||
list: [],
|
||
list2: [],
|
||
list3: []
|
||
};
|
||
},
|
||
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();
|
||
getInformation(this.queryParams3).then(({ data }) => {
|
||
this.list3 = data.list;
|
||
});
|
||
}
|
||
};
|
||
</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 {
|
||
padding: 0 18px;
|
||
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;
|
||
}
|
||
}
|
||
.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>
|