|
|
@@ -1,108 +1,135 @@
|
|
|
<template>
|
|
|
- <div v-if="!isMobile" class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/video_bg.jpg')})`}">
|
|
|
- <div class="title">{{hotspot.title}}</div>
|
|
|
+ <div
|
|
|
+ v-if="!isMobile"
|
|
|
+ class="images"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${require('@/assets/images/project/video_bg.jpg')})`,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="title">{{ hotspot.title }}</div>
|
|
|
<div class="img-con">
|
|
|
- <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
|
|
|
+ <span @click="active -= 1" :class="{ noshow: active <= 0 }">上一张</span>
|
|
|
<video controls autoplay>
|
|
|
- <source :src="hotspot.video[active].url" type="video/mp4">
|
|
|
- </video>
|
|
|
- <span @click="active+=1" :class="{noshow:active>=hotspot.video.length - 1}">下一张</span>
|
|
|
+ <source :src="hotspot.video[active].url" type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ <span
|
|
|
+ @click="active += 1"
|
|
|
+ :class="{ noshow: active >= hotspot.video.length - 1 }"
|
|
|
+ >下一张</span
|
|
|
+ >
|
|
|
<ul class="pagna">
|
|
|
- <li v-for="(item,i) in hotspot.video" :class="{active:i==active}" :key="i"></li>
|
|
|
+ <li
|
|
|
+ v-for="(item, i) in hotspot.video"
|
|
|
+ :class="{ active: i == active }"
|
|
|
+ :key="i"
|
|
|
+ ></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <div class="desc" v-html="hotspot.content">
|
|
|
- </div>
|
|
|
+ <div class="desc" v-html="hotspot.content"></div>
|
|
|
</div>
|
|
|
- <div v-else class="mbimages" :style="{backgroundImage:`url(${require('@/assets/images/project/mb_hostpot.jpg')})`}">
|
|
|
- <div class="title">{{hotspot.title}}</div>
|
|
|
- <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
|
|
|
- <swiper-slide class="swiper-slide" v-for="(item,index) in hotspot.video" :key="index">
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ class="mbimages"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${require('@/assets/images/project/mb_hostpot.jpg')})`,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="title">{{ hotspot.title }}</div>
|
|
|
+ <div class="swcon" v-swiper:mySwipervd="swiperOption">
|
|
|
+ <ul class="swiper-wrapper swiper-wrapper-n">
|
|
|
+ <div
|
|
|
+ class="swiper-slide"
|
|
|
+ v-for="(item, index) in hotspot.video"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<div class="sl-item">
|
|
|
<video controls autoplay>
|
|
|
- <source :src="item.url" type="video/mp4">
|
|
|
- </video>
|
|
|
+ <source :src="item.url" type="video/mp4" />
|
|
|
+ </video>
|
|
|
</div>
|
|
|
- </swiper-slide>
|
|
|
- </swiper>
|
|
|
- <ul class="pagna">
|
|
|
- <li v-for="(item,i) in hotspot.video" :class="{active: i == mbactive}" :key="i"></li>
|
|
|
+ </div>
|
|
|
</ul>
|
|
|
- <div v-if="hotspot.content" class="desc">
|
|
|
- <p>简介：</p>
|
|
|
- <div v-html="hotspot.content"></div>
|
|
|
- </div>
|
|
|
+ <div class="swiper-pagination pagination" slot="pagination"></div>
|
|
|
</div>
|
|
|
-</template>
|
|
|
|
|
|
+ <div v-if="hotspot.content" class="desc">
|
|
|
+ <p>简介：</p>
|
|
|
+ <div v-html="hotspot.content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
|
|
|
<script>
|
|
|
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
-import 'swiper/swiper-bundle.css'
|
|
|
+import { directive } from "vue-awesome-swiper";
|
|
|
+// import style (<= Swiper 5.x)
|
|
|
+import "swiper/css/swiper.css";
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- Swiper,
|
|
|
- SwiperSlide,
|
|
|
+ directives: {
|
|
|
+ swiper: directive,
|
|
|
},
|
|
|
- props:['hotspot'],
|
|
|
- data(){
|
|
|
+ props: ["hotspot"],
|
|
|
+ data() {
|
|
|
return {
|
|
|
- active:0,
|
|
|
- mbactive:0
|
|
|
- }
|
|
|
+ active: 0,
|
|
|
+ mbactive: 0,
|
|
|
+ };
|
|
|
},
|
|
|
- computed:{
|
|
|
+ computed: {
|
|
|
swiperOption() {
|
|
|
- let that = this
|
|
|
+ let that = this;
|
|
|
return {
|
|
|
- slidesPerView: 'auto',
|
|
|
+ slidesPerView: "auto",
|
|
|
autoplay: false,
|
|
|
centeredSlides: true,
|
|
|
watchSlidesProgress: true,
|
|
|
loop: false,
|
|
|
- on:{
|
|
|
- slideChangeTransitionEnd:function () {
|
|
|
- that.mbactive = this.realIndex
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionEnd: function() {
|
|
|
+ that.mbactive = this.realIndex;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.noshow{
|
|
|
- opacity: 0!important;;
|
|
|
- pointer-events: none!important;;
|
|
|
+.noshow {
|
|
|
+ opacity: 0 !important;
|
|
|
+ pointer-events: none !important;
|
|
|
}
|
|
|
|
|
|
-.images{
|
|
|
+.images {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
text-align: center;
|
|
|
- .title{
|
|
|
+ .title {
|
|
|
padding: 0 80px;
|
|
|
display: inline-block;
|
|
|
- color: #DBA761;
|
|
|
+ color: #dba761;
|
|
|
font-weight: bold;
|
|
|
font-size: 36px;
|
|
|
height: 70px;
|
|
|
line-height: 70px;
|
|
|
- background: #BC1515;
|
|
|
+ background: #bc1515;
|
|
|
border-radius: 60px;
|
|
|
margin: 45px auto;
|
|
|
}
|
|
|
- .img-con{
|
|
|
+ .img-con {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
padding-bottom: 40px;
|
|
|
- >span{
|
|
|
+ > span {
|
|
|
+ @juli: 60px;
|
|
|
display: inline-block;
|
|
|
padding: 0 30px;
|
|
|
box-sizing: content-box;
|
|
|
@@ -110,41 +137,50 @@ export default {
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
background: rgba(188, 21, 21, 0.9);
|
|
|
- border: 2px solid #DBA761;
|
|
|
+ border: 2px solid #dba761;
|
|
|
border-radius: 37px;
|
|
|
cursor: pointer;
|
|
|
- &:hover,&.active{
|
|
|
- color: #DBA761;
|
|
|
+ position: absolute;
|
|
|
+ left: @juli;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ color: #dba761;
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ left: unset;
|
|
|
+ right: @juli;
|
|
|
}
|
|
|
}
|
|
|
- >video{
|
|
|
+ > video {
|
|
|
max-width: 1000px;
|
|
|
// border: 10px solid #BC1515;
|
|
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
max-height: 600px;
|
|
|
object-fit: fill;
|
|
|
}
|
|
|
- .pagna{
|
|
|
+ .pagna {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
text-align: center;
|
|
|
z-index: 999;
|
|
|
- >li{
|
|
|
+ > li {
|
|
|
width: 60px;
|
|
|
height: 6px;
|
|
|
- background: #BC1515;
|
|
|
+ background: #bc1515;
|
|
|
display: inline-block;
|
|
|
margin: 0 4px;
|
|
|
- &.active{
|
|
|
- background: #DBA761;
|
|
|
+ &.active {
|
|
|
+ background: #dba761;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .desc{
|
|
|
+ .desc {
|
|
|
max-width: 1000px;
|
|
|
margin: 20px auto 0;
|
|
|
- color: #DBA761;
|
|
|
+ color: #dba761;
|
|
|
text-align: left;
|
|
|
line-height: 2;
|
|
|
max-height: 200px;
|
|
|
@@ -152,79 +188,88 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-@position:62px;
|
|
|
-.mbimages{
|
|
|
+@position: 62px;
|
|
|
+.mbimages {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% calc(100% + @position);
|
|
|
background-position: 0 -@position;
|
|
|
text-align: center;
|
|
|
- .title{
|
|
|
+ .title {
|
|
|
width: 90%;
|
|
|
padding: 10px;
|
|
|
display: inline-block;
|
|
|
- color: #DBA761;
|
|
|
+ color: #dba761;
|
|
|
font-weight: bold;
|
|
|
font-size: 18px;
|
|
|
- background: #BC1515;
|
|
|
+ background: #bc1515;
|
|
|
border-radius: 60px;
|
|
|
margin: 20px auto;
|
|
|
}
|
|
|
- .swiper-wrapper {
|
|
|
- height: 250px;
|
|
|
- padding: 0;
|
|
|
- .swiper-slide {
|
|
|
- width: 85%;
|
|
|
- transform-style: preserve-3d;
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- margin: 0 10px;
|
|
|
- .sl-item{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 50%;
|
|
|
+
|
|
|
+ .swcon {
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ .swiper-wrapper {
|
|
|
+ height: 250px;
|
|
|
+ padding: 0;
|
|
|
+ .swiper-slide {
|
|
|
+ width: 85%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ position: relative;
|
|
|
height: 100%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- border: 4px solid #BC1515;
|
|
|
- box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
- background-color: #757477;
|
|
|
- >video{
|
|
|
- object-fit: fill;
|
|
|
- height: 100%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ margin: 0 10px;
|
|
|
+ .sl-item {
|
|
|
position: absolute;
|
|
|
+ top: 0;
|
|
|
left: 50%;
|
|
|
+ height: 100%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 4px solid #bc1515;
|
|
|
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
+ background-color: #757477;
|
|
|
+ > video {
|
|
|
+ object-fit: fill;
|
|
|
+ height: 100%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .pagna{
|
|
|
- text-align: center;
|
|
|
- z-index: 999;
|
|
|
- >li{
|
|
|
- width: 40px;
|
|
|
- height: 4px;
|
|
|
- background: #BC1515;
|
|
|
- display: inline-block;
|
|
|
- margin: 0 4px;
|
|
|
- &.active{
|
|
|
- background: #DBA761;
|
|
|
+ .pagination {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ & /deep/ .swiper-pagination-bullet,
|
|
|
+ & /deep/ .swiper-pagination-bullet-active {
|
|
|
+ width: 40px !important;
|
|
|
+ height: 4px !important;
|
|
|
+ background: #bc1515 !important;
|
|
|
+ display: inline-block !important;
|
|
|
+ margin: 0 4px !important;
|
|
|
+ border-radius: 0;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ & /deep/ .swiper-pagination-bullet-active {
|
|
|
+ background: #dba761 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .desc{
|
|
|
- color: #DBA761;
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ color: #dba761;
|
|
|
text-align: left;
|
|
|
width: 85%;
|
|
|
margin: 20px auto 0;
|
|
|
- p{
|
|
|
+ p {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- div{
|
|
|
+ div {
|
|
|
font-size: 14px;
|
|
|
margin-top: 10px;
|
|
|
line-height: 1.5;
|
|
|
@@ -233,4 +278,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
tremble
