Files
jiace-web/src/views/home/home.vue

694 lines
19 KiB
Vue
Raw Normal View History

2021-08-02 17:40:23 +08:00
<template>
<div>
2021-08-04 08:39:11 +08:00
<div class="p0-100">
2021-09-14 09:18:47 +08:00
<div style="width:100%;display: flex;justify-content: center;">
2021-08-04 08:39:11 +08:00
<div class="banner">
<!-- 轮播图 -->
<el-carousel height="345px" trigger="click">
<el-carousel-item v-for="item in bannerList" :key="item.id">
<img :src="item.pic" alt="" @click="handlePage(item.url)" />
2021-08-04 08:39:11 +08:00
</el-carousel-item>
</el-carousel>
<!-- 政策解读 -->
<div class="unscramble">
<div class="title">
<div class="title_top_l">
<img src="@/assets/image/icon4.png" alt="" />
<img src="@/assets/image/icon5.png" alt="" />
2021-08-04 08:39:11 +08:00
</div>
<router-link
target="_blank"
:to="{
path: '/portrait',
query: { key: 'policyRead', val: '归口' }
}"
>
<div class="title_top_r pointer">
更多<i class="el-icon-arrow-right"></i>
</div>
</router-link>
2021-08-04 08:39:11 +08:00
</div>
<div class="tab_list">
<el-tabs
v-model="queryParams2.attributeId"
@tab-click="handleClick2"
>
<el-tab-pane label="科技" name="KJJ"></el-tab-pane>
<el-tab-pane label="经信" name="JXJ"></el-tab-pane>
2021-08-04 08:39:11 +08:00
<el-tab-pane label="发改" name="FGW"></el-tab-pane>
<el-tab-pane label="其他" name="OTHER"></el-tab-pane>
<div
class="tab_item"
style="position: relative;padding-right:50px"
2021-08-04 08:39:11 +08:00
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> -->
<span class="text_hidden_one text_18_333 pointer">
<router-link
target="_blank"
:to="{
path: '/result',
query: { key: 'policyRead', id: item.id }
}"
>
{{ item.title }}
</router-link>
</span>
2021-08-04 08:39:11 +08:00
<i v-if="index < 3">
<img src="@/assets/image/new.png" alt="" />
</i>
<span style="position: absolute;right: 0;top: 0;">{{
parseTime(item.listDate, '{m}-{d}')
}}</span>
2021-08-04 08:39:11 +08:00
</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>
2021-08-17 08:41:33 +08:00
<div style="min-height: 290px">
2021-08-06 16:05:39 +08:00
<div class="banner_r_list" v-for="item in list" :key="item.id">
<!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
<div class="text_18_333 pointer">
<router-link
target="_blank"
:to="{
path: '/result',
query: { key: 'policy', id: item.id }
}"
>
{{ item.title }}
</router-link>
</div>
2021-08-06 16:05:39 +08:00
<span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
2021-08-04 08:39:11 +08:00
</div>
</div>
</el-tabs>
<!-- 资讯快报 -->
<div class="bulletin">
<div class="title">
<div>
<img src="@/assets/image/icon4r.png" alt="" />
<img src="@/assets/image/icon6.png" alt="" />
2021-08-04 08:39:11 +08:00
</div>
<router-link
target="_blank"
:to="{
path: '/portrait',
query: { key: 'information', val: '' }
}"
>
<div class="title_top_r pointer">
更多<i class="el-icon-arrow-right"></i>
</div>
</router-link>
</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> -->
<div class="text_18_333 pointer">
<router-link
target="_blank"
:to="{
path: '/result',
query: { key: 'information', id: item.id }
}"
>
{{ item.title }}
</router-link>
</div>
<span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
2021-08-04 08:39:11 +08:00
</div>
</div>
</div>
</div>
</div>
<!-- 城市列表 -->
<div class="city_list">
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: 'AH', val: '安徽' } }"
2021-08-13 11:51:16 +08:00
>
<img src="@/assets/image/city/01.png" alt="" />
<span>安徽</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '合肥' } }"
>
<img src="@/assets/image/city/02.png" alt="" />
<span>合肥</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '芜湖' } }"
>
<img src="@/assets/image/city/03.png" alt="" />
<span>芜湖</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '蚌埠' } }"
>
<img src="@/assets/image/city/04.png" alt="" />
<span>蚌埠</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '淮南' } }"
>
<img src="@/assets/image/city/05.png" alt="" />
<span>淮南</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '马鞍山' } }"
>
<img src="@/assets/image/city/06.png" alt="" />
<span>马鞍山</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '淮北' } }"
>
<img src="@/assets/image/city/07.png" alt="" />
<span>淮北</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '铜陵' } }"
>
<img src="@/assets/image/city/08.png" alt="" />
<span>铜陵</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '安庆' } }"
>
<img src="@/assets/image/city/09.png" alt="" />
<span>安庆</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '滁州' } }"
>
<img src="@/assets/image/city/10.png" alt="" />
<span>滁州</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '阜阳' } }"
>
<img src="@/assets/image/city/11.png" alt="" />
<span>阜阳</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '宿州' } }"
>
<img src="@/assets/image/city/12.png" alt="" />
<span>宿州</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '六安' } }"
>
<img src="@/assets/image/city/13.png" alt="" />
<span>六安</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '亳州' } }"
>
<img src="@/assets/image/city/14.png" alt="" />
<span>亳州</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '池州' } }"
>
<img src="@/assets/image/city/15.png" alt="" />
<span>池州</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '宣城' } }"
>
<img src="@/assets/image/city/16.png" alt="" />
<span>宣城</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '2', val: '黄山' } }"
>
<img src="@/assets/image/city/17.png" alt="" />
<span>黄山</span>
</router-link>
</div>
<div>
2021-08-13 11:51:16 +08:00
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '3', val: '合肥区县' } }"
2021-08-13 11:51:16 +08:00
>
<img src="@/assets/image/city/18.png" alt="" />
<span>合肥区县</span>
2021-08-13 11:51:16 +08:00
</router-link>
</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>
2021-08-17 08:41:33 +08:00
<div style="margin-top: 53px">
<h3>嘉策互联网科技创新服务平台</h3>
<p>
合肥嘉策信息技术服务有限公司于2018年05月2日成立法定代表人时加红公司经营范围包括信息系统集成咨询...
</p>
</div>
2021-08-13 11:51:16 +08:00
<router-link to="">
<el-button type="warning">更多</el-button>
</router-link>
</div>
</div>
</div>
</div>
<div class="p0-100">
<div class="cooperation">
2021-09-14 09:49:53 +08:00
嘉策合作案例
<!-- <img src="@/assets/image/icon8.png" alt="" /> -->
</div>
<div class="city_list">
<div>
<img src="@/assets/cooperation/1.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/2.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/3.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/4.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/5.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/6.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/7.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/8.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/9.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/10.png" alt="" />
</div>
<div>
2021-08-17 08:41:33 +08:00
<img src="@/assets/cooperation/11.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/12.png" alt="" />
2021-08-04 08:39:11 +08:00
</div>
</div>
</div>
2021-08-02 17:40:23 +08:00
</div>
</template>
2021-08-04 08:39:11 +08:00
<script>
import {
getRotationList,
getPolicy,
getPolicyRead,
getInformation
} from '@/api/home/home';
2021-08-04 08:39:11 +08:00
export default {
data() {
return {
bannerList: [],
2021-08-04 08:39:11 +08:00
queryParams: {
labelId: '1415156808053559296'
2021-08-04 08:39:11 +08:00
},
queryParams2: {
attributeId: 'KJJ'
2021-08-04 08:39:11 +08:00
},
queryParams3: {
pageNum: 1,
pageSize: 7
},
// date: this.parseTime(new Date(), '{y}-{m}-{d}'),
2021-08-04 08:39:11 +08:00
list: [],
list2: [],
list3: []
2021-08-04 08:39:11 +08:00
};
},
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;
});
},
handlePage(url) {
window.open(url, '_blank');
}
2021-08-04 08:39:11 +08:00
},
created() {
getRotationList({ pageNum: 1, pageSize: 50 }).then(({ data }) => {
this.bannerList = data.list;
});
2021-08-04 08:39:11 +08:00
this.handleClick();
this.handleClick2();
getInformation(this.queryParams3).then(({ data }) => {
this.list3 = data.list;
});
}
2021-08-04 08:39:11 +08:00
};
</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 {
2021-09-14 14:19:45 +08:00
// width: 614px;
width: 50%;
2021-08-04 08:39:11 +08:00
margin-right: 20px;
.el-carousel {
.el-carousel__item {
img {
width: 100%;
height: 100%;
}
}
}
2021-08-04 08:39:11 +08:00
/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;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
2021-08-04 08:39:11 +08:00
height: 40px;
line-height: 40px;
text-align: right;
background-color: #3394ff;
2021-08-04 08:39:11 +08:00
border-radius: 6px 6px 0px 0px;
img {
vertical-align: middle;
margin-right: 10px;
}
.title_top_r {
font-size: 16px;
color: #fff;
2021-08-04 08:39:11 +08:00
}
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 10px 0 20px;
2021-08-04 08:39:11 +08:00
}
}
}
}
}
.banner_r {
2021-09-14 14:19:45 +08:00
// width: 566px;
width: 48%;
2021-08-04 08:39:11 +08:00
// /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;
2021-08-04 08:39:11 +08:00
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 20px;
height: 40px;
background-color: #3394ff;
border-radius: 6px 6px 0px 0px;
img {
vertical-align: middle;
margin-right: 10px;
}
.title_top_r {
font-size: 16px;
color: #fff;
}
}
.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 {
2021-08-17 08:41:33 +08:00
// cursor: pointer;
// padding: 16px;
border-radius: 6px;
overflow: hidden;
width: 16%;
height: 80px;
// margin: 0 0.5% 10px;
margin-bottom: 10px;
position: relative;
2021-09-14 10:58:34 +08:00
img {
width: 100%;
height: 100%;
}
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 {
2021-09-14 14:19:45 +08:00
// padding-top: 37px;
// padding-bottom: 26px;
padding: 30px;
.about_tit {
margin-top: 0;
img {
vertical-align: middle;
margin-right: 3px;
}
}
.about_box {
display: flex;
2021-09-14 14:19:45 +08:00
.about_l {
overflow: hidden;
}
.about_r {
2021-09-14 14:19:45 +08:00
flex: 1;
h3 {
color: #333;
font-size: 20px;
}
p {
color: #666;
font-size: 18px;
line-height: 30px;
}
}
}
}
}
.p0-100 {
.cooperation {
2021-09-14 14:19:45 +08:00
padding-top: 40px;
// padding-bottom: 19px;
text-align: center;
2021-09-14 09:49:53 +08:00
font-size: 26px;
font-weight: 700;
color: #3394ff;
}
2021-08-04 08:39:11 +08:00
}
</style>