|
@@ -63,13 +63,16 @@
|
|
|
keyboard: true,
|
|
|
loop: false,
|
|
|
}"
|
|
|
- class="swiper-wrapper"
|
|
|
+ class="swiper-wrapper img-list-wrapper"
|
|
|
>
|
|
|
<img
|
|
|
v-for="(item, index) in hotspotData.images"
|
|
|
:key="index"
|
|
|
v-lazy="item"
|
|
|
class="swiper-slide"
|
|
|
+ :class="{
|
|
|
+ single: hotspotData.images.length === 1
|
|
|
+ }"
|
|
|
alt=""
|
|
|
draggable="false"
|
|
|
>
|
|
@@ -87,12 +90,15 @@
|
|
|
class="swiper-root"
|
|
|
>
|
|
|
<div
|
|
|
- class="swiper-wrapper"
|
|
|
+ class="swiper-wrapper video-list-wrapper"
|
|
|
>
|
|
|
<div
|
|
|
v-for="(item, index) in hotspotData.video"
|
|
|
:key="index"
|
|
|
class="swiper-slide"
|
|
|
+ :class="{
|
|
|
+ single: hotspotData.images.length === 1
|
|
|
+ }"
|
|
|
@click="viewVideo(item)"
|
|
|
>
|
|
|
<video
|
|
@@ -359,7 +365,7 @@ export default {
|
|
|
overflow: hidden;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
- .swiper-wrapper {
|
|
|
+ .swiper-wrapper.img-list-wrapper {
|
|
|
> .swiper-slide {
|
|
|
object-fit: contain;
|
|
|
border-radius: 4px;
|
|
@@ -367,6 +373,19 @@ export default {
|
|
|
width: 30.2vw;
|
|
|
height: 19.6vw;
|
|
|
position: relative;
|
|
|
+ }
|
|
|
+ > .swiper-slide.single {
|
|
|
+ width: 100%;
|
|
|
+ height: initial;
|
|
|
+ margin-right: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-wrapper.video-list-wrapper {
|
|
|
+ > .swiper-slide {
|
|
|
+ margin-right: 1.8vw;
|
|
|
+ width: 30.2vw;
|
|
|
+ height: 19.6vw;
|
|
|
+ position: relative;
|
|
|
> video {
|
|
|
object-fit: contain;
|
|
|
border-radius: 4px;
|
|
@@ -382,6 +401,11 @@ export default {
|
|
|
height: 6.2vw;
|
|
|
}
|
|
|
}
|
|
|
+ > .swiper-slide.single {
|
|
|
+ width: 100%;
|
|
|
+ height: initial;
|
|
|
+ margin-right: initial;
|
|
|
+ }
|
|
|
}
|
|
|
.swiper-pagination {
|
|
|
}
|