882 lines
24 KiB
Vue
882 lines
24 KiB
Vue
<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">
|
|
<!-- @tab-click="handleClick2" -->
|
|
<el-tabs v-model="queryParams2.attributeId">
|
|
<el-tab-pane label="科技" name="KJJ">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams2.attributeId = 'KJJ'), handleClick2()
|
|
"
|
|
>科技</span
|
|
>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="经信" name="JXJ">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams2.attributeId = 'JXJ'), handleClick2()
|
|
"
|
|
>经信</span
|
|
>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="发改" name="FGW">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams2.attributeId = 'FGW'), handleClick2()
|
|
"
|
|
>发改</span
|
|
>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="其他" name="OTHER">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams2.attributeId = 'OTHER'), handleClick2()
|
|
"
|
|
>其他</span
|
|
>
|
|
</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' : ''"></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">
|
|
<!-- 政策列表 -->
|
|
<div class="title">
|
|
<div class="title_top_l">
|
|
<img src="@/assets/image/icon4l.png" alt="" />
|
|
<img src="@/assets/image/notice.png" alt="" />
|
|
</div>
|
|
<router-link
|
|
target="_blank"
|
|
:to="{
|
|
path: '/portrait',
|
|
query: { key: 'policyNotice', val: '公示公告' }
|
|
}"
|
|
>
|
|
<div class="title_top_r pointer">
|
|
更多<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
<div class="tab_list">
|
|
<!-- @tab-click="handleClick" -->
|
|
<el-tabs v-model="queryParams.labelId">
|
|
<el-tab-pane name="1415156808053559296">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams.labelId = '1415156808053559296'), handleClick()
|
|
"
|
|
>政策转发</span
|
|
>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="1415156963146338304">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams.labelId = '1415156963146338304'), handleClick()
|
|
"
|
|
>申报通知</span
|
|
>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="政府公示" name="1415157002090450944">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams.labelId = '1415157002090450944'), handleClick()
|
|
"
|
|
>公示转发</span
|
|
>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="公告" name="1415157026115424256">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams.labelId = '1415157026115424256'), handleClick()
|
|
"
|
|
>公告转发</span
|
|
>
|
|
</el-tab-pane>
|
|
<!-- <el-tab-pane label="其他" name="1415157049267982336">
|
|
<span
|
|
slot="label"
|
|
@mouseover="
|
|
(queryParams.labelId = '1415157049267982336'), handleClick()
|
|
"
|
|
>其他</span
|
|
>
|
|
</el-tab-pane> -->
|
|
<div style="min-height: 281px">
|
|
<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>
|
|
<!-- 资讯快报 -->
|
|
<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" style="padding-top:8px">
|
|
<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 style="padding:15px">
|
|
<p class="">
|
|
<img
|
|
src="@/assets/image/icon_l.png"
|
|
alt=""
|
|
style="vertical-align:
|
|
middle;margin-right: 3px;"
|
|
/>
|
|
<img src="@/assets/image/icon_r.png" alt="" />
|
|
</p>
|
|
<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>
|
|
<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="aboutInfo.pic" alt="" />
|
|
</div>
|
|
<div class="about_r">
|
|
<div>
|
|
<h3>{{ aboutInfo.title }}</h3>
|
|
<p>{{ aboutInfo.textWord }}</p>
|
|
</div>
|
|
<!-- <div style="margin-top: 53px">
|
|
<h3>嘉策互联网科技创新服务平台</h3>
|
|
<p>
|
|
合肥嘉策信息技术服务有限公司于成立。法定代表人时加红，公司经营范围包括：信息系统集成咨询...
|
|
</p>
|
|
</div> -->
|
|
<router-link
|
|
target="_blank"
|
|
:to="{
|
|
path: '/about'
|
|
}"
|
|
>
|
|
<el-button type="warning">更多</el-button>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p0-100" style="padding-bottom:40px">
|
|
<div class="cooperation">
|
|
<img src="@/assets/image/icon8.png" alt="" />
|
|
</div>
|
|
<div @mouseover="classOption.step = 0" @mouseleave="classOption.step = 1">
|
|
<vue-seamless-scroll
|
|
:data="listData"
|
|
:class-option="classOption"
|
|
class="warp"
|
|
>
|
|
<ul class="ul-item">
|
|
<li class="li-item" v-for="(item, index) in listData" :key="index">
|
|
<img :src="item.img" alt="" />
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
<vue-seamless-scroll
|
|
:data="listData2"
|
|
:class-option="classOption"
|
|
class="warp"
|
|
>
|
|
<ul class="ul-item">
|
|
<li class="li-item" v-for="(item, index) in listData2" :key="index">
|
|
<img :src="item.img" alt="" />
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getRotationList,
|
|
getPolicy,
|
|
getPolicyRead,
|
|
getInformation,
|
|
getAboutUs,
|
|
getPartner
|
|
} from '@/api/home/home';
|
|
import vueSeamlessScroll from 'vue-seamless-scroll';
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll
|
|
},
|
|
data() {
|
|
return {
|
|
listData: [],
|
|
listData2: [],
|
|
classOption: {
|
|
step: 1,
|
|
limitMoveNum: 8,
|
|
direction: 2
|
|
},
|
|
bannerList: [],
|
|
queryParams: {
|
|
labelId: '1415156808053559296',
|
|
pageSize: 7
|
|
},
|
|
queryParams2: {
|
|
attributeId: 'KJJ',
|
|
pageSize: 7
|
|
},
|
|
queryParams3: {
|
|
pageNum: 1,
|
|
pageSize: 8
|
|
},
|
|
// date: this.parseTime(new Date(), '{y}-{m}-{d}'),
|
|
list: [],
|
|
list2: [],
|
|
list3: [],
|
|
aboutInfo: {}
|
|
};
|
|
},
|
|
computed: {
|
|
defaultOption() {
|
|
return {
|
|
step: 2, // 数值越大速度滚动越快
|
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
|
};
|
|
}
|
|
},
|
|
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;
|
|
});
|
|
getAboutUs().then(res => {
|
|
this.aboutInfo = res.data;
|
|
});
|
|
getPartner().then(({ data }) => {
|
|
data = data.filter(item => {
|
|
return item.status == 1;
|
|
});
|
|
if (data.length < 16)
|
|
return this.msgError('请至后台添加并且显示至少16个合作伙伴');
|
|
if (data.length % 2 != 0) {
|
|
data.pop();
|
|
}
|
|
const middleIndex = Math.ceil(data.length / 2);
|
|
this.listData = data.slice().splice(0, middleIndex);
|
|
this.listData2 = data.slice().splice(-middleIndex);
|
|
console.log(this.listData);
|
|
console.log(this.listData2);
|
|
console.log(data);
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.warp {
|
|
width: 144px * 8;
|
|
height: 70px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
&.ul-item {
|
|
display: flex;
|
|
.li-item {
|
|
width: 144px;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// /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 25px;
|
|
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: 37px;
|
|
line-height: 37px;
|
|
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 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.banner_r {
|
|
// width: 566px;
|
|
width: 48%;
|
|
.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;
|
|
}
|
|
// /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: 37px;
|
|
line-height: 37px;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
.city_list.partner {
|
|
div {
|
|
width: 12%;
|
|
height: 70px;
|
|
}
|
|
}
|
|
.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;
|
|
max-height: 345px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.about_r {
|
|
flex: 1;
|
|
h3 {
|
|
color: #333;
|
|
font-size: 20px;
|
|
}
|
|
p {
|
|
text-indent: 2em;
|
|
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>
|