parent
4d7fcd0f47
commit
495bec4c8d
5 changed files with 2629 additions and 1859 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,476 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<template v-if="modules.length"> |
||||
<el-carousel class="carousel fadeInUp" :interval="6000" height="230px" |
||||
: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 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 || 8) |
||||
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 || 8) |
||||
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: 100% auto; |
||||
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 - 320px); |
||||
background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat; |
||||
} |
||||
|
||||
.column-wrap { |
||||
display: flex; |
||||
|
||||
.item { |
||||
width: calc(100% - 20px); |
||||
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 { |
||||
font-size: .9rem; |
||||
color: #333; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
color: $main-color; |
||||
} |
||||
} |
||||
|
||||
.meta { |
||||
font-size: .8rem; |
||||
} |
||||
} |
||||
|
||||
.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; |
||||
|
||||
.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: 40px; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 10px; |
||||
font-size: 0.9rem; |
||||
color: #48525e; |
||||
} |
||||
} |
||||
|
||||
.tools { |
||||
z-index: 10; |
||||
position: fixed; |
||||
top: 30vh; |
||||
right: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-end; |
||||
|
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0 22px; |
||||
margin-bottom: 1px; |
||||
font-size: 20px; |
||||
color: #0084ff; |
||||
line-height: 56px; |
||||
background-color: rgba(19, 18, 19, 0.94); |
||||
cursor: pointer; |
||||
transition: 0.3s; |
||||
|
||||
&:before { |
||||
content: ''; |
||||
width: 28px; |
||||
height: 28px; |
||||
margin-right: 7px; |
||||
background: url(https://huorantech.com/images/iasf/icon1.png) no-repeat; |
||||
} |
||||
|
||||
&:nth-child(2):before { |
||||
background-image: url(https://huorantech.com/images/iasf/icon2.png); |
||||
} |
||||
|
||||
&:nth-child(2):hover:before { |
||||
background-image: url(https://huorantech.com/images/iasf/icon2-1.png); |
||||
} |
||||
|
||||
&:nth-child(3):before { |
||||
background-image: url(https://huorantech.com/images/iasf/icon3.png); |
||||
} |
||||
|
||||
&:nth-child(3):hover:before { |
||||
background-image: url(https://huorantech.com/images/iasf/icon3-1.png); |
||||
} |
||||
|
||||
&:nth-child(4):before { |
||||
background-image: url(https://huorantech.com/images/iasf/icon4.png); |
||||
} |
||||
|
||||
&:nth-child(4):hover:before { |
||||
background-image: url(https://huorantech.com/images/iasf/icon4-1.png); |
||||
} |
||||
|
||||
&:hover { |
||||
justify-content: flex-start; |
||||
// width: 192px; |
||||
padding-right: 4rem; |
||||
color: #fff; |
||||
background-color: rgba(1, 129, 247, 0.94); |
||||
|
||||
&:before { |
||||
background-image: url(https://huorantech.com/images/iasf/icon1-1.png); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.icon { |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
|
||||
|
||||
@media (max-width: 1200px) { |
||||
.carousel .texts { |
||||
left: 5%; |
||||
right: 5%; |
||||
} |
||||
|
||||
.card { |
||||
flex-direction: column; |
||||
|
||||
li { |
||||
margin-top: 1.25rem; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.news { |
||||
flex-direction: column; |
||||
|
||||
li { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.news-banner { |
||||
flex-direction: column; |
||||
|
||||
.pic-wrap, |
||||
.right { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.entry { |
||||
// flex-direction: column; |
||||
flex-wrap: wrap; |
||||
|
||||
li { |
||||
width: 48% !important; |
||||
margin-bottom: 30px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,14 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
const name = 'singlePage' |
||||
export default { |
||||
path: `/${name}`, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name, |
||||
path: `/${name}`, |
||||
component: () => import(`@/pages/${name}`), |
||||
meta: { title: '' } |
||||
} |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue