|
|
|
|
@ -10,7 +10,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="block banner-block"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="title wow fadeInUp"> |
|
|
|
|
<h5> |
|
|
|
|
{{ modules[1].form.title }} |
|
|
|
|
<span class="sub">{{ modules[1].form.subTitle }}</span> |
|
|
|
|
@ -19,13 +19,15 @@ |
|
|
|
|
</div> |
|
|
|
|
<template v-if="articles.length"> |
|
|
|
|
<div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)"> |
|
|
|
|
<img width="50%" height="410" :src="curArticle.titleImg" alt=""> |
|
|
|
|
<div style="width: 50%;height: 410px;overflow: hidden;"> |
|
|
|
|
<img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<h6>{{ curArticle.title }}</h6> |
|
|
|
|
<div class="des" v-html="curArticle.mainBody"></div> |
|
|
|
|
<p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p> |
|
|
|
|
<ul class="inds"> |
|
|
|
|
<li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li> |
|
|
|
|
<li v-for="i in articles.length > 2 ? 3 : articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -37,7 +39,7 @@ |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p> |
|
|
|
|
<div class="des">{{ item.title }}</div> |
|
|
|
|
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].list[curColumn])"> |
|
|
|
|
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)"> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</template> |
|
|
|
|
@ -48,7 +50,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="block notice"> |
|
|
|
|
<div class="inner lg"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="title wow fadeInUp"> |
|
|
|
|
<h5> |
|
|
|
|
{{ modules[3].form.title }} |
|
|
|
|
<span class="sub">{{ modules[3].form.subTitle }}</span> |
|
|
|
|
@ -61,7 +63,7 @@ |
|
|
|
|
<template v-for="(item, i) in articles1"> |
|
|
|
|
<el-carousel-item v-if="i < 4" :key="i"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<img :src="item.titleImg" alt=""> |
|
|
|
|
<img class="pic" :src="item.titleImg" alt=""> |
|
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
|
</div> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
@ -96,7 +98,7 @@ |
|
|
|
|
</template> |
|
|
|
|
</ul> |
|
|
|
|
<div v-if="articles1.length > 10" class="slide"> |
|
|
|
|
<img :src="articles1[10].titleImg" alt=""> |
|
|
|
|
<img class="pic" :src="articles1[10].titleImg" alt=""> |
|
|
|
|
<p class="text">{{ articles1[10].title }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -106,7 +108,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="block conference"> |
|
|
|
|
<div class="inner lg"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="title wow fadeInUp"> |
|
|
|
|
<h5> |
|
|
|
|
{{ modules[5].form.title }} |
|
|
|
|
<span class="sub">{{ modules[5].form.subTitle }}</span> |
|
|
|
|
@ -115,7 +117,7 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="shows" v-if="articles2.length"> |
|
|
|
|
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)"> |
|
|
|
|
<img width="100%" height="100%" :src="articles2[0].titleImg" alt=""> |
|
|
|
|
<img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt=""> |
|
|
|
|
<div class="text">{{ articles2[0].title }}</div> |
|
|
|
|
</div> |
|
|
|
|
<ul class="card-list wow fadeInRight" data-wow-delay="0.5s"> |
|
|
|
|
@ -147,7 +149,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="block media"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="title wow fadeInUp"> |
|
|
|
|
<h5> |
|
|
|
|
{{ modules[7].form.title }} |
|
|
|
|
<span class="sub">{{ modules[7].form.subTitle }}</span> |
|
|
|
|
@ -175,8 +177,10 @@ |
|
|
|
|
</template> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="articles3.length > 5" class="right"> |
|
|
|
|
<div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s"> |
|
|
|
|
<div class="img-wrap"> |
|
|
|
|
<img :src="articles3[5].titleImg" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6>{{ articles3[5].title }}</h6> |
|
|
|
|
<div class="des">{{ articles3[5].mainBody }}</div> |
|
|
|
|
@ -188,7 +192,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="block news"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="title wow fadeInUp"> |
|
|
|
|
<h5> |
|
|
|
|
{{ modules[9].form.title }} |
|
|
|
|
<span class="sub">{{ modules[9].form.subTitle }}</span> |
|
|
|
|
@ -209,7 +213,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="block program"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<div class="title wow fadeInUp"> |
|
|
|
|
<h5> |
|
|
|
|
{{ modules[11].form.subTitle }} |
|
|
|
|
<span class="sub">{{ modules[11].form.subTitle }}</span> |
|
|
|
|
@ -223,8 +227,10 @@ |
|
|
|
|
<div class="des">{{ articles4[0].title }}</div> |
|
|
|
|
<div class="meta">发表日期：{{ articles4[0].createTime }}  浏览量：{{ articles4[0].totalBrowsing }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="img-wrap"> |
|
|
|
|
<img class="pic" :src="articles4[0].titleImg" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</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'"> |
|
|
|
|
@ -258,7 +264,6 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
columns: [], |
|
|
|
|
curColumn: 0, |
|
|
|
|
articles: [], |
|
|
|
|
articles1: [], |
|
|
|
|
articles2: [], |
|
|
|
|
@ -337,49 +342,6 @@ export default { |
|
|
|
|
this.curArticle = this.articles[this.curInd] || {} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// tab回调 |
|
|
|
|
tabChange(i) { |
|
|
|
|
const { column } = this.modules[1].list[i] |
|
|
|
|
if (column && column.length) { |
|
|
|
|
const id = column[column.length - 1] |
|
|
|
|
// 查询栏目详情 |
|
|
|
|
this.$post(`${this.api.findColumn}?id=${id}`).then(({ data }) => { |
|
|
|
|
const { typeId } = data |
|
|
|
|
// 跳转链接 |
|
|
|
|
if (typeId === 2) { |
|
|
|
|
let href = data.linkAddress |
|
|
|
|
const cType = data.connectionType |
|
|
|
|
if (cType !== 2) { // 非站外链接 |
|
|
|
|
const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页 |
|
|
|
|
// 站点id：站内链接取当前站点，其他站点链接取siteSelection |
|
|
|
|
const site = cType === 1 ? |
|
|
|
|
(this.$route.query.siteId || this.site) : |
|
|
|
|
data.siteSelection |
|
|
|
|
if (ids[1]) { // 文章 |
|
|
|
|
href = '/article?id=' + ids[1] |
|
|
|
|
} else { // 栏目 |
|
|
|
|
const columnIds = ids[0].split(',') |
|
|
|
|
href = '/column?id=' + columnIds[columnIds.length - 1] |
|
|
|
|
} |
|
|
|
|
href = this.$router.resolve(href + '&siteId=' + site).href |
|
|
|
|
} |
|
|
|
|
// 是否新窗口打开 |
|
|
|
|
if (data.isOpen) { |
|
|
|
|
window.open(href) |
|
|
|
|
} else { |
|
|
|
|
location.href = href |
|
|
|
|
} |
|
|
|
|
} else if (typeId === 3) { |
|
|
|
|
// 长页栏目直接获取path |
|
|
|
|
this.$router.push(`/${data.path}?id=${id}`).catch(err => {}) |
|
|
|
|
} else { |
|
|
|
|
this.curColumn = i |
|
|
|
|
} |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
} else { |
|
|
|
|
this.curColumn = i |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -432,8 +394,10 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
cursor: pointer; |
|
|
|
|
.pic { |
|
|
|
|
width: 700px; |
|
|
|
|
height: 380px; |
|
|
|
|
transition: .5s; |
|
|
|
|
&:hover { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right { |
|
|
|
|
position: relative; |
|
|
|
|
@ -535,9 +499,10 @@ export default { |
|
|
|
|
.item { |
|
|
|
|
position: relative; |
|
|
|
|
height: 100%; |
|
|
|
|
img { |
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
position: absolute; |
|
|
|
|
@ -550,22 +515,36 @@ export default { |
|
|
|
|
line-height: 59px; |
|
|
|
|
background-color: rgba(0, 0, 0, 0.57); |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
.pic { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.card-wrap { |
|
|
|
|
display: flex; |
|
|
|
|
margin-top: 18px; |
|
|
|
|
.cards { |
|
|
|
|
flex: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.cards { |
|
|
|
|
padding: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
transition: .5s; |
|
|
|
|
&:hover { |
|
|
|
|
transform: translateX(10px); |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #48525E; |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
.sum { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #6D7C8E; |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
.date { |
|
|
|
|
margin-top: 24px; |
|
|
|
|
@ -625,9 +604,11 @@ export default { |
|
|
|
|
.slide { |
|
|
|
|
position: relative; |
|
|
|
|
height: 284px; |
|
|
|
|
img { |
|
|
|
|
overflow: hidden; |
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
position: absolute; |
|
|
|
|
@ -642,6 +623,11 @@ export default { |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
background-color: rgba(0, 0, 0, 0.57); |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
.pic { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.conference { |
|
|
|
|
@ -655,6 +641,7 @@ export default { |
|
|
|
|
height: 688px; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
overflow: hidden; |
|
|
|
|
.text { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
@ -668,6 +655,14 @@ export default { |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
background-color: rgba(0, 0, 0, 0.57); |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
.pic { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.card-list { |
|
|
|
|
width: 784px; |
|
|
|
|
@ -695,10 +690,12 @@ export default { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #333; |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
.sum { |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #666; |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
display: flex; |
|
|
|
|
@ -727,9 +724,11 @@ export default { |
|
|
|
|
position: relative; |
|
|
|
|
width: 366px; |
|
|
|
|
height: 197px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
position: absolute; |
|
|
|
|
@ -743,6 +742,11 @@ export default { |
|
|
|
|
@include ellipsis; |
|
|
|
|
background-color: rgba(0, 0, 0, 0.49); |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
img { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.list { |
|
|
|
|
padding: 34px 36px; |
|
|
|
|
@ -750,9 +754,13 @@ export default { |
|
|
|
|
box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08); |
|
|
|
|
li { |
|
|
|
|
margin-bottom: 41px; |
|
|
|
|
transition: .5s; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
transform: scale(1.05); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 17px; |
|
|
|
|
@ -772,13 +780,19 @@ export default { |
|
|
|
|
.right { |
|
|
|
|
width: 44%; |
|
|
|
|
box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08); |
|
|
|
|
img { |
|
|
|
|
transition: .5s; |
|
|
|
|
.img-wrap { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 422px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
padding: 40px 28px; |
|
|
|
|
background: #fff; |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
font-size: 24px; |
|
|
|
|
@ -793,6 +807,15 @@ export default { |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #666; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
background: #005388; |
|
|
|
|
h6, .des { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.news { |
|
|
|
|
@ -871,9 +894,20 @@ export default { |
|
|
|
|
color: #666; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
.img-wrap { |
|
|
|
|
width: 49%; |
|
|
|
|
height: 430px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
transition: .5s; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
.pic { |
|
|
|
|
transform: scale(1.3); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.list { |
|
|
|
|
display: flex; |
|
|
|
|
@ -882,6 +916,7 @@ export default { |
|
|
|
|
padding: 36px 22px; |
|
|
|
|
margin-right: 14px; |
|
|
|
|
background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat; |
|
|
|
|
transition: .5s; |
|
|
|
|
&:nth-child(2) { |
|
|
|
|
background-image: url(../../assets/images/sfel/8.png); |
|
|
|
|
} |
|
|
|
|
@ -889,6 +924,9 @@ export default { |
|
|
|
|
margin-right: 0; |
|
|
|
|
background-image: url(../../assets/images/sfel/9.png); |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
transform: translateY(20px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.des { |
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
