|
|
|
|
@ -25,7 +25,7 @@ |
|
|
|
|
<div class="right"> |
|
|
|
|
<h6>{{ curArticle.title }}</h6> |
|
|
|
|
<div class="des" v-html="curArticle.mainBody"></div> |
|
|
|
|
<p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p> |
|
|
|
|
<p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p> |
|
|
|
|
<ul class="inds"> |
|
|
|
|
<li v-for="i in articles.length > 3 ? 4 : articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li> |
|
|
|
|
</ul> |
|
|
|
|
@ -59,27 +59,27 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="shop-shows" v-if="articles1.length"> |
|
|
|
|
<div class="left wow fadeInLeft" data-wow-delay="0.5s"> |
|
|
|
|
<el-carousel height="405px"> |
|
|
|
|
<el-carousel height="413px"> |
|
|
|
|
<template v-for="(item, i) in articles1"> |
|
|
|
|
<el-carousel-item v-if="i < 4" :key="i"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="item" @click="toArtice(item, modules[4].form)"> |
|
|
|
|
<img class="pic" :src="item.titleImg" alt=""> |
|
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
|
</div> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</template> |
|
|
|
|
</el-carousel> |
|
|
|
|
<div v-if="articles1.length > 4" class="cards" style="margin-top: 18px;"> |
|
|
|
|
<h6>{{ articles1[4].title }}</h6> |
|
|
|
|
<div v-if="articles1.length > 4" class="cards" style="margin-top: 18px;" @click="toArtice(articles1[4], modules[4].form)"> |
|
|
|
|
<h6 class="a-line">{{ articles1[4].title }}</h6> |
|
|
|
|
<div class="sum">{{ articles1[4].mainBody }}</div> |
|
|
|
|
<p class="date">{{ articles1[4].releaseTime }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="card-wrap"> |
|
|
|
|
<div v-if="articles1.length > 5" class="cards" style="margin-right: 18px"> |
|
|
|
|
<div v-if="articles1.length > 5" class="cards" style="margin-right: 18px" @click="toArtice(articles1[5], modules[4].form)"> |
|
|
|
|
<h6>{{ articles1[5].title }}</h6> |
|
|
|
|
<p class="date">{{ articles1[5].releaseTime }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="articles1.length > 6" class="cards"> |
|
|
|
|
<div v-if="articles1.length > 6" class="cards" @click="toArtice(articles1[6], modules[4].form)"> |
|
|
|
|
<h6>{{ articles1[6].title }}</h6> |
|
|
|
|
<p class="date">{{ articles1[6].releaseTime }}</p> |
|
|
|
|
</div> |
|
|
|
|
@ -88,8 +88,11 @@ |
|
|
|
|
<div v-if="articles1.length > 7" class="right wow fadeInRight" data-wow-delay="0.5s"> |
|
|
|
|
<ul class="card-list"> |
|
|
|
|
<template v-for="(item, i) in articles1"> |
|
|
|
|
<li v-if="i > 6 && i < 10" :key="i"> |
|
|
|
|
<img class="pic" :src="item.titleImg" alt=""> |
|
|
|
|
<li v-if="i > 6 && i < 10" :key="i" @click="toArtice(item, modules[4].form)"> |
|
|
|
|
<div class="releaseTime"> |
|
|
|
|
<p class="d">{{ item.date }}</p> |
|
|
|
|
<p class="m">{{ item.month }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
|
<div class="des" v-html="item.mainBody"></div> |
|
|
|
|
@ -97,7 +100,7 @@ |
|
|
|
|
</li> |
|
|
|
|
</template> |
|
|
|
|
</ul> |
|
|
|
|
<div v-if="articles1.length > 10" class="slide"> |
|
|
|
|
<div v-if="articles1.length > 10" class="slide" @click="toArtice(articles1[10], modules[4].form)"> |
|
|
|
|
<img class="pic" :src="articles1[10].titleImg" alt=""> |
|
|
|
|
<p class="text">{{ articles1[10].title }}</p> |
|
|
|
|
</div> |
|
|
|
|
@ -135,6 +138,10 @@ |
|
|
|
|
<img class="icon" src="@/assets/images/time.png" alt=""> |
|
|
|
|
会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }} |
|
|
|
|
</p> |
|
|
|
|
<p v-if="item.onlineLocation" class="text"> |
|
|
|
|
<img class="icon" src="@/assets/images/online.png" alt=""> |
|
|
|
|
{{ item.onlineLocation }} |
|
|
|
|
</p> |
|
|
|
|
<p v-if="item.offlineLocation" class="text"> |
|
|
|
|
<img class="icon" src="@/assets/images/location.png" alt=""> |
|
|
|
|
{{ item.offlineLocation }} |
|
|
|
|
@ -159,25 +166,25 @@ |
|
|
|
|
<div v-if="articles3.length" class="media-wrap"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<div class="slides"> |
|
|
|
|
<div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px"> |
|
|
|
|
<div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px" @click="toArtice(articles3[0], modules[9].form)"> |
|
|
|
|
<img width="100%" height="100%" :src="articles3[0].titleImg" alt=""> |
|
|
|
|
<div class="text">{{ articles3[0].title }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="articles3.length > 1" class="item wow fadeInLeft" data-wow-delay="0.5s"> |
|
|
|
|
<div v-if="articles3.length > 1" class="item wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles3[1], modules[9].form)"> |
|
|
|
|
<img width="100%" height="100%" :src="articles3[1].titleImg" alt=""> |
|
|
|
|
<div class="text">{{ articles3[1].title }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<template v-for="(item, i) in articles3"> |
|
|
|
|
<li v-if="i > 1 && i < 5" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"> |
|
|
|
|
<li v-if="i > 1 && i < 5" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[9].form)"> |
|
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
|
<div class="des">{{ item.mainBody }}</div> |
|
|
|
|
</li> |
|
|
|
|
</template> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s"> |
|
|
|
|
<div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s" @click="toArtice(articles3[5], modules[9].form)"> |
|
|
|
|
<div class="img-wrap"> |
|
|
|
|
<img :src="articles3[5].titleImg" alt=""> |
|
|
|
|
</div> |
|
|
|
|
@ -197,7 +204,6 @@ |
|
|
|
|
{{ modules[9].form.title }} |
|
|
|
|
<span class="sub">{{ modules[9].form.subTitle }}</span> |
|
|
|
|
</h5> |
|
|
|
|
<span class="more" @click="toAll(modules[10].form)">MORE</span> |
|
|
|
|
</div> |
|
|
|
|
<ul class="news"> |
|
|
|
|
<li v-for="(item, i) in modules[10].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> |
|
|
|
|
@ -221,7 +227,7 @@ |
|
|
|
|
<span class="more" @click="toAll(modules[12].form)">MORE</span> |
|
|
|
|
</div> |
|
|
|
|
<template v-if="articles4.length"> |
|
|
|
|
<div class="slide"> |
|
|
|
|
<div class="slide" @click="toArtice(articles4[0], modules[12].form)"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6>{{ articles4[0].title }}</h6> |
|
|
|
|
<div class="des">{{ articles4[0].mainBody }}</div> |
|
|
|
|
@ -233,7 +239,7 @@ |
|
|
|
|
</div> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<template v-for="(item, i) in articles3"> |
|
|
|
|
<li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"> |
|
|
|
|
<li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[12].form)"> |
|
|
|
|
<div class="des">{{ item.title }}</div> |
|
|
|
|
<p class="date">{{ item.releaseTime }}</p> |
|
|
|
|
</li> |
|
|
|
|
@ -245,7 +251,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="tools"> |
|
|
|
|
<div class="logo"> |
|
|
|
|
<img src="@/assets/images/logo.png" alt=""> |
|
|
|
|
<img src="@/assets/images/logo2.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<ul class="nav"> |
|
|
|
|
<li v-for="(item, i) in navs" :key="i" class="column" @click="toAnchor(item)">{{ item.name }}</li> |
|
|
|
|
@ -299,7 +305,16 @@ export default { |
|
|
|
|
if (json[4].form.column.length) { |
|
|
|
|
const { column, articleNum } = json[4].form |
|
|
|
|
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { |
|
|
|
|
this.articles1 = Util.removeTag(data.slice(0, articleNum || 11)) |
|
|
|
|
const articles = Util.removeTag(data.slice(0, articleNum || 11)) |
|
|
|
|
articles.forEach(e => { |
|
|
|
|
// 把发布日期分割成年月和日，页面上要展示 |
|
|
|
|
if (e.releaseTime) { |
|
|
|
|
const date = e.releaseTime.split('-') |
|
|
|
|
e.date = date[2] |
|
|
|
|
e.month = date[0] + '/' + date[1] |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.articles1 = articles |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
} |
|
|
|
|
if (json[6].form.column.length) { |
|
|
|
|
@ -342,7 +357,7 @@ export default { |
|
|
|
|
clearInterval(this.timer) |
|
|
|
|
this.timer = setInterval(() => { |
|
|
|
|
this.curInd++ |
|
|
|
|
if (this.curInd > 2) this.curInd = 0 |
|
|
|
|
if (this.curInd > 3) this.curInd = 0 |
|
|
|
|
this.curArticle = this.articles[this.curInd] || {} |
|
|
|
|
}, 5000) |
|
|
|
|
}, |
|
|
|
|
@ -518,6 +533,7 @@ export default { |
|
|
|
|
.item { |
|
|
|
|
position: relative; |
|
|
|
|
height: 100%; |
|
|
|
|
cursor: pointer; |
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
@ -532,6 +548,7 @@ export default { |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #fff; |
|
|
|
|
line-height: 59px; |
|
|
|
|
@include ellipsis; |
|
|
|
|
background-color: rgba(0, 0, 0, 0.57); |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
@ -545,12 +562,17 @@ export default { |
|
|
|
|
margin-top: 18px; |
|
|
|
|
.cards { |
|
|
|
|
flex: 1; |
|
|
|
|
height: 134px; |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.cards { |
|
|
|
|
padding: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
transition: .5s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
transform: translateX(10px); |
|
|
|
|
} |
|
|
|
|
@ -558,7 +580,9 @@ export default { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #48525E; |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
.a-line { |
|
|
|
|
@include ellipsis; |
|
|
|
|
} |
|
|
|
|
.sum { |
|
|
|
|
font-size: 14px; |
|
|
|
|
@ -593,18 +617,34 @@ export default { |
|
|
|
|
margin-bottom: 18px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
transition: .3s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
transform: scale(1.05); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
width: 124px; |
|
|
|
|
height: 92px; |
|
|
|
|
margin-right: 28px; |
|
|
|
|
.releaseTime { |
|
|
|
|
width: 88px; |
|
|
|
|
height: 88px; |
|
|
|
|
padding: 10px 0 16px; |
|
|
|
|
margin-right: 24px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.d { |
|
|
|
|
font-size: 36px; |
|
|
|
|
font-family: DINCondensed-Bold, DINCondensed; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #333333; |
|
|
|
|
line-height: 43px; |
|
|
|
|
} |
|
|
|
|
.m { |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #666666; |
|
|
|
|
line-height: 20px; |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
width: 504px; |
|
|
|
|
margin-right: 60px; |
|
|
|
|
width: calc(100% - 110px); |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
@ -625,6 +665,7 @@ export default { |
|
|
|
|
position: relative; |
|
|
|
|
height: 284px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
cursor: pointer; |
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
@ -657,8 +698,8 @@ export default { |
|
|
|
|
} |
|
|
|
|
.left { |
|
|
|
|
position: relative; |
|
|
|
|
width: 688px; |
|
|
|
|
height: 690px; |
|
|
|
|
min-width: 698px; |
|
|
|
|
height: 688px; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
overflow: hidden; |
|
|
|
|
@ -749,6 +790,7 @@ export default { |
|
|
|
|
width: 366px; |
|
|
|
|
height: 197px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
cursor: pointer; |
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
@ -780,6 +822,7 @@ export default { |
|
|
|
|
height: 78px; |
|
|
|
|
margin-bottom: 41px; |
|
|
|
|
transition: .5s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
} |
|
|
|
|
@ -789,7 +832,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 17px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #272727; |
|
|
|
|
@ -808,6 +851,7 @@ export default { |
|
|
|
|
width: 44%; |
|
|
|
|
box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08); |
|
|
|
|
transition: .5s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
.img-wrap { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 422px; |
|
|
|
|
@ -901,6 +945,7 @@ export default { |
|
|
|
|
.slide { |
|
|
|
|
display: flex; |
|
|
|
|
margin-bottom: 14px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
width: 51%; |
|
|
|
|
@ -947,6 +992,7 @@ export default { |
|
|
|
|
margin-right: 14px; |
|
|
|
|
background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat; |
|
|
|
|
transition: .5s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:nth-child(2) { |
|
|
|
|
background-image: url(../../assets/images/sfel/8.png); |
|
|
|
|
} |
|
|
|
|
@ -1008,5 +1054,11 @@ export default { |
|
|
|
|
.lg { |
|
|
|
|
width: 98%; |
|
|
|
|
} |
|
|
|
|
.conference .card-list { |
|
|
|
|
width: 734px; |
|
|
|
|
.texts { |
|
|
|
|
width: 460px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
