|
|
|
@ -13,11 +13,11 @@ |
|
|
|
<div class="modules"> |
|
|
|
<div class="modules"> |
|
|
|
<div class="relative"> |
|
|
|
<div class="relative"> |
|
|
|
<el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length" class="carousel" |
|
|
|
<el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length" class="carousel" |
|
|
|
:interval="6000" height="480px" |
|
|
|
:interval="6000" height="230px" |
|
|
|
:arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" |
|
|
|
:arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" |
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
<template v-for="(item, i) in modules[0].list"> |
|
|
|
<template v-for="(item, i) in modules[0].list"> |
|
|
|
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
|
|
|
<el-carousel-item v-if="item.isEnable" :key="i"> |
|
|
|
<div v-if="isImg(item.mediaType)" class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div> |
|
|
|
<div v-if="isImg(item.mediaType)" class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div> |
|
|
|
<video v-else class="pic" width="100%" height="100%" autoplay muted loop> |
|
|
|
<video v-else class="pic" width="100%" height="100%" autoplay muted loop> |
|
|
|
<source :src="item.pic" type="video/mp4"> |
|
|
|
<source :src="item.pic" type="video/mp4"> |
|
|
|
@ -25,7 +25,7 @@ |
|
|
|
</video> |
|
|
|
</video> |
|
|
|
<div class="text-wrap"> |
|
|
|
<div class="text-wrap"> |
|
|
|
<div class="text" v-html="item.des"></div> |
|
|
|
<div class="text" v-html="item.des"></div> |
|
|
|
<div v-if="!GTA" class="qrcodes"> |
|
|
|
<div class="qrcodes"> |
|
|
|
<div v-if="item.weixinPic1" class="qrcode"> |
|
|
|
<div v-if="item.weixinPic1" class="qrcode"> |
|
|
|
<img width="103" :src="item.weixinPic1" alt=""> |
|
|
|
<img width="103" :src="item.weixinPic1" alt=""> |
|
|
|
<p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p> |
|
|
|
<p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p> |
|
|
|
@ -52,17 +52,14 @@ |
|
|
|
{{ modules[1].form.title }} |
|
|
|
{{ modules[1].form.title }} |
|
|
|
<span class="sub">{{ modules[1].form.subTitle }}</span> |
|
|
|
<span class="sub">{{ modules[1].form.subTitle }}</span> |
|
|
|
</h5> |
|
|
|
</h5> |
|
|
|
<span class="more" @click="toAll(modules[2].form)">MORE</span> |
|
|
|
<div class="cover" @click="toSet(1)">点击更换标题与描述</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="columns"> |
|
|
|
<ul class="columns"> |
|
|
|
<li v-for="(item, i) in articles" :key="i"> |
|
|
|
<li v-for="(item, i) in articles" :key="i"> |
|
|
|
<p class="column-name">{{ item.title }}</p> |
|
|
|
<p class="column-name">{{ item.title }}</p> |
|
|
|
<span class="meta">{{ item.releaseTime }}</span> |
|
|
|
<span class="meta">{{ item.releaseTime }}</span> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li v-for="(item, i) in articles" :key="i"> |
|
|
|
<div class="cover" style="min-height: 60px;" @click="toSet(2)">关联栏目</div> |
|
|
|
<p class="column-name">{{ item.title }}</p> |
|
|
|
|
|
|
|
<span class="meta">{{ item.releaseTime }}</span> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<div class="item"> |
|
|
|
@ -71,41 +68,29 @@ |
|
|
|
{{ modules[3].form.title }} |
|
|
|
{{ modules[3].form.title }} |
|
|
|
<span class="sub">{{ modules[3].form.subTitle }}</span> |
|
|
|
<span class="sub">{{ modules[3].form.subTitle }}</span> |
|
|
|
</h5> |
|
|
|
</h5> |
|
|
|
<span class="more" @click="toAll(modules[4].form)">MORE</span> |
|
|
|
<div class="cover" @click="toSet(3)">点击更换标题与描述</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="columns"> |
|
|
|
<ul class="columns"> |
|
|
|
<li v-for="(item, i) in articles1" :key="i"> |
|
|
|
<li v-for="(item, i) in articles1" :key="i"> |
|
|
|
<p class="column-name">{{ item.title }}</p> |
|
|
|
<p class="column-name">{{ item.title }}</p> |
|
|
|
<span class="meta">{{ item.releaseTime }}</span> |
|
|
|
<span class="meta">{{ item.releaseTime }}</span> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
|
|
|
|
<div class="cover" style="min-height: 60px;" @click="toSet(4)">关联栏目</div> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="block m-t-10 m-b-10"> |
|
|
|
<div class="block m-t-60 m-b-10"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<ul class="entry"> |
|
|
|
<ul class="entry c-wrap"> |
|
|
|
<li> |
|
|
|
<template v-for="(item, i) in modules[5].list"> |
|
|
|
<img class="icon" :src="modules[5].form.pic" alt=""> |
|
|
|
<li v-if="item.isEnable" :key="i"> |
|
|
|
<p class="text">{{ modules[5].form.title }}</p> |
|
|
|
<img class="icon" :src="item.pic" alt=""> |
|
|
|
</li> |
|
|
|
<p class="text">{{ item.title }}</p> |
|
|
|
<li> |
|
|
|
</li> |
|
|
|
<img class="icon" :src="modules[6].form.pic" alt=""> |
|
|
|
</template> |
|
|
|
<p class="text">{{ modules[6].form.title }}</p> |
|
|
|
<div class="cover" @click="toSet(5)">点击更换图标、标题与链接</div> |
|
|
|
</li> |
|
|
|
|
|
|
|
<li> |
|
|
|
|
|
|
|
<img class="icon" :src="modules[7].form.pic" alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[7].form.title }}</p> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
<li> |
|
|
|
|
|
|
|
<img class="icon" :src="modules[8].form.pic" alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[8].form.title }}</p> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
<li> |
|
|
|
|
|
|
|
<img class="icon" :src="modules[9].form.pic" alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[9].form.title }}</p> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -113,10 +98,13 @@ |
|
|
|
<div class="block"> |
|
|
|
<div class="block"> |
|
|
|
<div class="inner links-inner"> |
|
|
|
<div class="inner links-inner"> |
|
|
|
<h6 class="link-title">友情链接</h6> |
|
|
|
<h6 class="link-title">友情链接</h6> |
|
|
|
<ul class="links"> |
|
|
|
<ul class="links c-wrap" style="min-height: 60px;"> |
|
|
|
<li v-for="(item, i) in modules[10].list" :key="i"> |
|
|
|
<template v-for="(item, i) in modules[6].list"> |
|
|
|
<el-link class="link" type="primary">{{ item.title }}</el-link> |
|
|
|
<li v-if="item.isEnable" :key="i"> |
|
|
|
</li> |
|
|
|
<el-link class="link" type="primary">{{ item.title }}</el-link> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<div class="cover" @click="toSet(6)">点击更换友情链接</div> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -136,7 +124,8 @@ export default { |
|
|
|
mixins: [mixins], |
|
|
|
mixins: [mixins], |
|
|
|
data () { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
modules: Modules.matchIndex, |
|
|
|
isImg: Util.isImg, |
|
|
|
|
|
|
|
modules: Modules.singlePage, |
|
|
|
articles: [], |
|
|
|
articles: [], |
|
|
|
articles1: [], |
|
|
|
articles1: [], |
|
|
|
} |
|
|
|
} |
|
|
|
@ -146,7 +135,6 @@ export default { |
|
|
|
// 获取文章列表 |
|
|
|
// 获取文章列表 |
|
|
|
async getArticles () { |
|
|
|
async getArticles () { |
|
|
|
const json = this.modules |
|
|
|
const json = this.modules |
|
|
|
|
|
|
|
|
|
|
|
if (json[2].form.column.length) { |
|
|
|
if (json[2].form.column.length) { |
|
|
|
const { column, articleNum } = json[2].form |
|
|
|
const { column, articleNum } = json[2].form |
|
|
|
const { data } = await this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`) |
|
|
|
const { data } = await this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`) |
|
|
|
@ -159,9 +147,6 @@ export default { |
|
|
|
this.articles1 = data.slice(0, articleNum || 8) |
|
|
|
this.articles1 = data.slice(0, articleNum || 8) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
moduleSubmit () { |
|
|
|
|
|
|
|
this.getArticles() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
@ -173,7 +158,7 @@ export default { |
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
background-position: center center; |
|
|
|
background-position: center center; |
|
|
|
background-size: 100% auto; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-repeat: no-repeat; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -203,7 +188,6 @@ export default { |
|
|
|
margin-top: 10px; |
|
|
|
margin-top: 10px; |
|
|
|
font-size: 12px; |
|
|
|
font-size: 12px; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -213,6 +197,7 @@ export default { |
|
|
|
padding: 10px 0; |
|
|
|
padding: 10px 0; |
|
|
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
.title { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: flex-end; |
|
|
|
align-items: flex-end; |
|
|
|
@ -260,6 +245,10 @@ export default { |
|
|
|
box-shadow: 0 0 7px rgba(239, 239, 239, .8); |
|
|
|
box-shadow: 0 0 7px rgba(239, 239, 239, .8); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.columns { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
