You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
407 lines
10 KiB
407 lines
10 KiB
<template> |
|
<div class="wrap"> |
|
<template v-if="modules.length"> |
|
<el-carousel class="carousel fadeInUp" :interval="6000" height="330px" |
|
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" |
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
<template v-for="(item, i) in modules[0].list"> |
|
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
|
<div v-if="!item.mediaType || isImg(item.mediaType)" class="pic" |
|
:style="{ backgroundImage: 'url(' + item.pic + ')' }"></div> |
|
<video v-else class="pic" width="100%" height="100%" autoplay muted loop> |
|
<source :src="item.pic" type="video/mp4"> |
|
您的浏览器不支持 video 标签。 |
|
</video> |
|
<div class="text-wrap"> |
|
<div v-if="item.weixinPic1 || item.weixinPic2" class="qrcodes fadeInUp"> |
|
<div v-if="item.weixinPic1" class="qrcode"> |
|
<img width="103" :src="item.weixinPic1" alt=""> |
|
<p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p> |
|
</div> |
|
<div v-if="item.weixinPic2" class="qrcode m-l-30"> |
|
<img width="103" :src="item.weixinPic2" alt=""> |
|
<p v-if="item.weixinText2" class="text">{{ item.weixinText2 }}</p> |
|
</div> |
|
</div> |
|
<div class="text" v-html="item.des"></div> |
|
</div> |
|
</el-carousel-item> |
|
</template> |
|
</el-carousel> |
|
|
|
<div class="block-bg"> |
|
<div class="block"> |
|
<div class="inner column-wrap"> |
|
<div class="item m-r-20"> |
|
<div class="title wow fadeInUp"> |
|
<h5> |
|
{{ modules[1].form.title }} |
|
<span class="sub">{{ modules[1].form.subTitle }}</span> |
|
</h5> |
|
<span class="more" @click="toAll(modules[2].form)">MORE</span> |
|
</div> |
|
<ul class="columns"> |
|
<li v-for="(item, i) in articles" :key="i"> |
|
<p class="column-name" @click="toArtice(item, modules[2].form)">{{ item.title }}</p> |
|
<span class="meta">{{ item.releaseTime }}</span> |
|
</li> |
|
</ul> |
|
</div> |
|
<div class="item"> |
|
<div class="title wow fadeInUp"> |
|
<h5> |
|
{{ modules[3].form.title }} |
|
<span class="sub">{{ modules[3].form.subTitle }}</span> |
|
</h5> |
|
<span class="more" @click="toAll(modules[4].form)">MORE</span> |
|
</div> |
|
<ul class="columns"> |
|
<li v-for="(item, i) in articles1" :key="i"> |
|
<p class="column-name" @click="toArtice(item, modules[4].form)">{{ item.title }}</p> |
|
<span class="meta">{{ item.releaseTime }}</span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="block m-t-10 m-b-10"> |
|
<div class="inner"> |
|
<ul class="entry"> |
|
<template v-for="(item, i) in modules[5].list"> |
|
<li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }" |
|
@click="openLink(item, i)"> |
|
<img class="icon" :src="item.pic" alt=""> |
|
<p class="text">{{ item.title }}</p> |
|
</li> |
|
</template> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="block"> |
|
<div class="inner links-inner"> |
|
<h6 class="link-title">友情链接</h6> |
|
<ul class="links"> |
|
<template v-for="(item, i) in modules[6].list"> |
|
<li v-if="item.isEnable" :key="i"> |
|
<el-link class="link" type="primary" @click="openLink(item, i)">{{ item.title }}</el-link> |
|
</li> |
|
</template> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import mixins from '@/mixins/page' |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
import WOW from 'wow.js' |
|
import $ from 'jquery' |
|
export default { |
|
mixins: [mixins], |
|
data () { |
|
return { |
|
isImg: Util.isImg, |
|
articles: [], |
|
articles1: [], |
|
} |
|
}, |
|
mounted () { }, |
|
methods: { |
|
// 获取文章详情 |
|
getInfo () { |
|
// 预览/详情 |
|
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { |
|
if (data.length) { |
|
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing |
|
const json = JSON.parse(this.preview ? |
|
data : |
|
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) |
|
|
|
this.modules = json |
|
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules) |
|
|
|
const promises = [] |
|
// 获取文章列表 |
|
if (json[2].form.column.length) { |
|
const { column, articleNum } = json[2].form |
|
promises.push(new Promise((resolve) => { |
|
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { |
|
this.articles = data.slice(0, articleNum || 5) |
|
resolve() |
|
}).catch(err => { }) |
|
})) |
|
} |
|
|
|
if (json[4].form.column.length) { |
|
const { column, articleNum } = json[4].form |
|
promises.push(new Promise((resolve) => { |
|
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { |
|
this.articles1 = data.slice(0, articleNum || 5) |
|
resolve() |
|
}).catch(err => { }) |
|
})) |
|
} |
|
|
|
// 恢复上次从本页面跳转出去时的位置 |
|
Promise.all(promises).then(_ => { |
|
this.$nextTick(() => { |
|
const { scrollTop } = this.$store.state.content |
|
if (scrollTop) { |
|
this.hide = true |
|
$(window).scrollTop(scrollTop) |
|
this.$store.commit('content/setScrollTop', 0) |
|
} |
|
}) |
|
}) |
|
// this.carouselInterval() |
|
} |
|
}).catch(err => { }) |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url(../../plugins/wow/animate.css); |
|
@import '../../styles/page/page.scss'; |
|
|
|
.carousel { |
|
.pic { |
|
height: 100%; |
|
background-position: center center; |
|
background-size: cover; |
|
background-repeat: no-repeat; |
|
} |
|
|
|
/deep/.el-carousel__container { |
|
height: 100%; |
|
} |
|
|
|
.text-wrap { |
|
position: absolute; |
|
top: 55%; |
|
left: 12%; |
|
display: flex; |
|
align-items: center; |
|
color: #fff; |
|
transform: translateY(-50%); |
|
} |
|
|
|
.qrcodes { |
|
display: flex; |
|
margin-right: 50px; |
|
} |
|
|
|
.qrcode { |
|
text-align: center; |
|
|
|
.text { |
|
margin-top: 10px; |
|
font-size: 12px; |
|
color: #fff; |
|
white-space: nowrap; |
|
} |
|
} |
|
} |
|
|
|
|
|
.block { |
|
padding: 10px 0; |
|
|
|
.title { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-end; |
|
padding-bottom: 0.5rem; |
|
margin-bottom: 0.9rem; |
|
border-bottom: 1px solid #ddd; |
|
align-items: center; |
|
|
|
h5 { |
|
padding-left: 6px; |
|
font-size: 1.2rem; |
|
font-weight: 500; |
|
color: #333; |
|
line-height: 1; |
|
border-left: 3px solid #2b96ef; |
|
} |
|
|
|
.sub { |
|
font-size: 0.88rem; |
|
font-family: PingFangSC-Medium, PingFang SC; |
|
font-weight: 500; |
|
color: #afb7bf; |
|
} |
|
|
|
.more { |
|
font-size: 0.6rem; |
|
color: #666; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
|
|
.block-bg { |
|
min-height: calc(100vh - 420px); |
|
background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat; |
|
} |
|
|
|
.column-wrap { |
|
display: flex; |
|
|
|
.item { |
|
width: 590px; |
|
padding: 14px; |
|
background-color: #fff; |
|
box-shadow: 0 0 7px rgba(239, 239, 239, .8); |
|
} |
|
|
|
li { |
|
display: flex; |
|
justify-content: space-between; |
|
padding: 5px 15px; |
|
margin-bottom: 10px; |
|
border-bottom: 1px dashed #cbcbcb; |
|
} |
|
|
|
.column-name { |
|
max-width: calc(100% - 90px); |
|
font-size: .9rem; |
|
color: #333; |
|
cursor: pointer; |
|
@include ellipsis; |
|
|
|
&:hover { |
|
color: $main-color; |
|
} |
|
} |
|
|
|
.meta { |
|
font-size: .8rem; |
|
white-space: nowrap; |
|
} |
|
} |
|
|
|
.links-inner { |
|
display: flex; |
|
align-items: center; |
|
padding: 10px; |
|
background-color: #fbfbfb; |
|
border-radius: 4px; |
|
|
|
.link-title { |
|
position: relative; |
|
padding: 10px 12px; |
|
font-size: 1rem; |
|
line-height: 1; |
|
white-space: nowrap; |
|
color: #fff; |
|
background-color: $main-color; |
|
|
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 100%; |
|
border: 18px solid transparent; |
|
border-left-color: $main-color; |
|
} |
|
} |
|
|
|
.links { |
|
display: inline-flex; |
|
flex: 1; |
|
justify-content: space-around; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
margin-left: 20px; |
|
font-size: .9rem; |
|
|
|
// &>li { |
|
// width: 20%; |
|
// margin-bottom: 5px; |
|
// } |
|
|
|
.link { |
|
display: block; |
|
max-width: 200px; |
|
@include ellipsis; |
|
} |
|
} |
|
} |
|
|
|
.inner { |
|
width: 1200px; |
|
} |
|
|
|
.entry { |
|
position: relative; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
li { |
|
display: inline-flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
text-align: center; |
|
} |
|
|
|
img { |
|
max-width: 60px; |
|
object-fit: cover; |
|
} |
|
|
|
.text { |
|
margin-top: 10px; |
|
font-size: 0.9rem; |
|
color: #48525e; |
|
} |
|
} |
|
|
|
|
|
@media (max-width: 1200px) { |
|
.carousel .texts { |
|
left: 5%; |
|
right: 5%; |
|
} |
|
|
|
.inner { |
|
width: 95%; |
|
} |
|
|
|
.column-wrap { |
|
flex-direction: column; |
|
|
|
.item { |
|
width: 100%; |
|
margin: 0 0 20px 0; |
|
} |
|
} |
|
|
|
.entry { |
|
// flex-direction: column; |
|
flex-wrap: wrap; |
|
|
|
li { |
|
width: 48% !important; |
|
margin-bottom: 30px; |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 1200px) { |
|
.carousel { |
|
.text-wrap { |
|
left: 0; |
|
padding: 0 20px; |
|
} |
|
} |
|
} |
|
</style> |