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.
97 lines
2.0 KiB
97 lines
2.0 KiB
<template> |
|
<div class="wrap"> |
|
<div class="single-banner single-banner-overview"> |
|
<img class="banner-img" |
|
:src="modules[0].form.pic" |
|
alt=""> |
|
<div class="texts"> |
|
<h6 class="banner-title">{{ modules[0].form.title }}</h6> |
|
</div> |
|
</div> |
|
|
|
<ul class="tabs wow fadeInLeft"> |
|
<template v-for="(item, i) in tabs"> |
|
<li :class="{active: item.id == active}" |
|
:key="i" |
|
@click="tabChange(item)">{{ item.columnName }}</li> |
|
</template> |
|
</ul> |
|
|
|
<div class="tab-content"> |
|
<video v-if="modules[1].form.video" |
|
class="video" |
|
ref="video" |
|
autoplay |
|
controls |
|
loop> |
|
<source :src="modules[1].form.video" |
|
type="video/mp4"> |
|
您的浏览器不支持 video 标签。 |
|
</video> |
|
<div v-html="modules[1].form.des"></div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import mixins from '@/mixins/page' |
|
import overview from '@/mixins/overview' |
|
import WOW from 'wow.js' |
|
export default { |
|
mixins: [mixins, overview], |
|
data () { |
|
return { |
|
|
|
} |
|
}, |
|
mounted () { |
|
new WOW().init() |
|
}, |
|
methods: { |
|
|
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url(../../plugins/wow/animate.css); |
|
@import '../../styles/page/page.scss'; |
|
.wrap { |
|
background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat, |
|
url(../../assets/images/survey2.png) (bottom right) / auto no-repeat; |
|
} |
|
|
|
.single-banner { |
|
.texts { |
|
top: auto !important; |
|
bottom: 2rem; |
|
} |
|
} |
|
.tab-content { |
|
width: 50rem; |
|
padding: 3.85rem 0; |
|
margin: 0 auto; |
|
span { |
|
font-size: 1.08rem; |
|
} |
|
} |
|
.video { |
|
width: 100%; |
|
margin-bottom: 2.75rem; |
|
} |
|
.text { |
|
font-size: 0.9rem; |
|
color: #020202; |
|
line-height: 1.6rem; |
|
} |
|
|
|
@media (max-width: 1200px) { |
|
.tab-content { |
|
width: 95%; |
|
margin: 0 auto; |
|
.video { |
|
max-height: 18rem; |
|
} |
|
} |
|
} |
|
</style> |