Files
jiace-web/src/views/home/home.vue
2021-09-14 14:19:45 +08:00

694 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<div class="p0-100">
<div style="width:100%;display: flex;justify-content: center;">
<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)" />
</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="" />
</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>
</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>
<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"
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>
<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>
</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> -->
<div class="text_18_333 pointer">
<router-link
target="_blank"
:to="{
path: '/result',
query: { key: 'policy', id: item.id }
}"
>
{{ item.title }}
</router-link>
</div>
<span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
</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="" />
</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>
</div>
</div>
</div>
</div>
</div>
<!-- 城市列表 -->
<div class="city_list">
<div>
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: 'AH', val: '安徽' } }"
>
<img src="@/assets/image/city/01.png" alt="" />
<span>安徽</span>
</router-link>
</div>
<div>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<router-link
target="_blank"
:to="{ path: '/notice', query: { key: '3', val: '合肥区县' } }"
>
<img src="@/assets/image/city/18.png" alt="" />
<span>合肥区县</span>
</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>
<div style="margin-top: 53px">
<h3>嘉策互联网科技创新服务平台</h3>
<p>
合肥嘉策信息技术服务有限公司于2018年05月2日成立法定代表人时加红公司经营范围包括信息系统集成咨询...
</p>
</div>
<router-link to="">
<el-button type="warning">更多</el-button>
</router-link>
</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/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>
<img src="@/assets/cooperation/11.png" alt="" />
</div>
<div>
<img src="@/assets/cooperation/12.png" alt="" />
</div>
</div>
</div>
</div>
</template>
<script>
import {
getRotationList,
getPolicy,
getPolicyRead,
getInformation
} from '@/api/home/home';
export default {
data() {
return {
bannerList: [],
queryParams: {
labelId: '1415156808053559296'
},
queryParams2: {
attributeId: 'KJJ'
},
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;
});
},
handlePage(url) {
window.open(url, '_blank');
}
},
created() {
getRotationList({ pageNum: 1, pageSize: 50 }).then(({ data }) => {
this.bannerList = data.list;
});
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;
width: 50%;
margin-right: 20px;
.el-carousel {
.el-carousel__item {
img {
width: 100%;
height: 100%;
}
}
}
/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;
height: 40px;
line-height: 40px;
text-align: right;
background-color: #3394ff;
border-radius: 6px 6px 0px 0px;
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 10px 0 20px;
}
}
}
}
}
.banner_r {
// width: 566px;
width: 48%;
// /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 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 {
// cursor: pointer;
// padding: 16px;
border-radius: 6px;
overflow: hidden;
width: 16%;
height: 80px;
// margin: 0 0.5% 10px;
margin-bottom: 10px;
position: relative;
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 {
// padding-top: 37px;
// padding-bottom: 26px;
padding: 30px;
.about_tit {
margin-top: 0;
img {
vertical-align: middle;
margin-right: 3px;
}
}
.about_box {
display: flex;
.about_l {
overflow: hidden;
}
.about_r {
flex: 1;
h3 {
color: #333;
font-size: 20px;
}
p {
color: #666;
font-size: 18px;
line-height: 30px;
}
}
}
}
}
.p0-100 {
.cooperation {
padding-top: 40px;
// padding-bottom: 19px;
text-align: center;
font-size: 26px;
font-weight: 700;
color: #3394ff;
}
}
</style>