|
|
|
|
@ -6,17 +6,24 @@ |
|
|
|
|
: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 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> |
|
|
|
|
<source :src="item.pic" type="video/mp4"> |
|
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
|
</video> |
|
|
|
|
<div class="text-wrap"> |
|
|
|
|
<div v-if="!GTA && !i" class="qrcode-wrap"> |
|
|
|
|
<img class="qrcode" src="https://occupationlab.com/images/mini-program.jpg" alt=""> |
|
|
|
|
<p class="text">扫小程序下单</p> |
|
|
|
|
<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 class="texts"> |
|
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
|
<p class="sub">{{ item.des }}</p> |
|
|
|
|
<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> |
|
|
|
|
@ -186,10 +193,12 @@ |
|
|
|
|
import mixins from '@/mixins/page' |
|
|
|
|
import { Loading } from "element-ui"; |
|
|
|
|
import ScrollReveal from 'scrollreveal' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
export default { |
|
|
|
|
mixins: [mixins], |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
isImg: Util.isImg, |
|
|
|
|
timer: null, |
|
|
|
|
curTab: '', |
|
|
|
|
tabs: [ |
|
|
|
|
@ -520,12 +529,9 @@ export default { |
|
|
|
|
.carousel { |
|
|
|
|
.pic { |
|
|
|
|
height: 100%; |
|
|
|
|
background-position: center center; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-size: cover; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-carousel__container { |
|
|
|
|
@ -542,36 +548,24 @@ export default { |
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 25px; |
|
|
|
|
font-size: 2.2rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.sub { |
|
|
|
|
font-size: 1.5rem; |
|
|
|
|
.qrcodes { |
|
|
|
|
display: flex; |
|
|
|
|
margin-right: 50px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.qrcode-wrap { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding: 5px; |
|
|
|
|
margin-right: 50px; |
|
|
|
|
.qrcode { |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
margin-top: 5px; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #979797; |
|
|
|
|
} |
|
|
|
|
color: #fff; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.qrcode { |
|
|
|
|
width: 120px; |
|
|
|
|
height: 120px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.intro { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
