|
|
@@ -1,129 +1,77 @@
|
|
|
<template>
|
|
|
<!-- @click="autoplay" @touchstart="autoplay" -->
|
|
|
<div class="home">
|
|
|
- <audio
|
|
|
- v-if="audio"
|
|
|
- class="audio"
|
|
|
- id="audio1"
|
|
|
- :src="audio"
|
|
|
- preload
|
|
|
- ref="musicBg"
|
|
|
- @ended="overAudio"
|
|
|
- ></audio>
|
|
|
- <div
|
|
|
- class="content"
|
|
|
- v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
|
|
|
- :class="{ isMobileCon: isMobile }"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-if="!isMobile && lengthShow"
|
|
|
- @click="slideto('slidePrev')"
|
|
|
- class="swiper-button-prev"
|
|
|
- ></div>
|
|
|
- <div class="mb-intro" v-show="active === 'title' && isMobile">
|
|
|
+ <audio v-if="audio" class="audio" id="audio1" :src="audio" preload ref="musicBg" @ended="overAudio"></audio>
|
|
|
+ <div class="content" v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
|
|
|
+ :class="{ isMobileCon: isMobile }">
|
|
|
+ <div v-if="!isMobile && lengthShow" @click="slideto('slidePrev')" class="swiper-button-prev"></div>
|
|
|
+ <!-- <div class="mb-intro" v-show="active === 'title' && isMobile">
|
|
|
<p v-html="data.title"></p>
|
|
|
<p v-html="data.content"></p>
|
|
|
- <p
|
|
|
- v-html="data.imagesDesc[myInd]"
|
|
|
- v-if="
|
|
|
- data.imagesDesc && data.imagesDesc[myInd] && active === 'images'
|
|
|
- "
|
|
|
- ></p>
|
|
|
- <p
|
|
|
- v-html="data.videosDesc[myInd]"
|
|
|
- v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
- ></p>
|
|
|
- </div>
|
|
|
+ <p v-html="data.imagesDesc[myInd]" v-if="
|
|
|
+ data.imagesDesc && data.imagesDesc[myInd] && active === 'images'
|
|
|
+ "></p>
|
|
|
+ <p v-html="data.videosDesc[myInd]" v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"></p>
|
|
|
+ </div> -->
|
|
|
<!-- 查看图片 -->
|
|
|
<viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
<img :src="lookPics[0]" alt="" />
|
|
|
</viewer>
|
|
|
+ <div class="swiper-container" id="sw-card" v-show="active !== 'title'">
|
|
|
+ <ul class="swiper-wrapper warpper">
|
|
|
+ <li class="swiper-slide" v-for="(item, i) in data[active]" :key="i">
|
|
|
+ <div class="slide">
|
|
|
+ <div class="swiper-zoom-container" v-if="active === 'images'">
|
|
|
+ <img style="cursor: pointer" v-lazy="fixUrl(item)" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-else-if="active === 'video'">
|
|
|
+ <p class="videop" v-html="data.videosDesc[myInd]" v-if="data.videosDesc && data.videosDesc[myInd]"></p>
|
|
|
+ <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" :src="fixUrl(item.url)"
|
|
|
+ controls></video>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <iframe @click="colseParent(item)" v-else-if="active === 'model' || active === 'iframe'" :src="fixUrl(item)"
|
|
|
+ frameborder="0"></iframe>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <template v-if="(active === 'video' || active === 'images') && isMobile">
|
|
|
+ <template v-if="lengthShow">
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ <img :src="require(`@/assets/images/tipsimg${active === 'images' ? '2' : ''}.png`)" class="tipsimg" alt="" />
|
|
|
+ <div class="lengBulluet">{{ myInd + 1 }} / {{ data[active].length }}，共 {{ data[active].length }} 个</div>
|
|
|
+ </template>
|
|
|
|
|
|
- <swiper
|
|
|
- v-show="active !== 'title'"
|
|
|
- class="warpper"
|
|
|
- ref="mySwiper"
|
|
|
- :options="swiperOptions"
|
|
|
- >
|
|
|
- <swiper-slide v-for="(item, i) in data[active]" :key="i">
|
|
|
- <div class="slide">
|
|
|
- <img
|
|
|
- style="cursor: pointer"
|
|
|
- v-if="active === 'images'"
|
|
|
- v-lazy="fixUrl(item)"
|
|
|
- @click="lookImg(fixUrl(item))"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <video
|
|
|
- v-else-if="active === 'video'"
|
|
|
- :src="fixUrl(item.url)"
|
|
|
- controls
|
|
|
- autoplay
|
|
|
- muted
|
|
|
- ></video>
|
|
|
- <iframe
|
|
|
- @click="colseParent(item)"
|
|
|
- v-else-if="active === 'model' || active === 'iframe'"
|
|
|
- :src="fixUrl(item)"
|
|
|
- frameborder="0"
|
|
|
- ></iframe>
|
|
|
- </div>
|
|
|
- </swiper-slide>
|
|
|
- <div
|
|
|
- class="swiper-pagination"
|
|
|
- slot="pagination"
|
|
|
- v-show="lengthShow"
|
|
|
- ></div>
|
|
|
- </swiper>
|
|
|
- <div
|
|
|
- v-if="!isMobile && lengthShow"
|
|
|
- @click="slideto('slideNext')"
|
|
|
- class="swiper-button-next"
|
|
|
- ></div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div v-if="!isMobile && lengthShow" @click="slideto('slideNext')" class="swiper-button-next"></div>
|
|
|
</div>
|
|
|
- <ul
|
|
|
- class="iconarr"
|
|
|
- v-if="fixIcon.length > 0"
|
|
|
- :class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
|
|
|
- >
|
|
|
- <li
|
|
|
- :class="{
|
|
|
- active: item.id === active || item.audioAc,
|
|
|
- onlyTxt: audio && fixIcon.length === 2 && i !== 0,
|
|
|
- }"
|
|
|
- @click="changeActive(item.id, item.audioAc)"
|
|
|
- v-for="(item, i) in fixIcon"
|
|
|
- :key="i"
|
|
|
- >
|
|
|
+ <ul class="iconarr" v-if="fixIcon.length > 0" :class="{ oneChuMusic: fixIcon.length === 1 && !audio }">
|
|
|
+ <li :class="{
|
|
|
+ active: item.id === active || item.audioAc,
|
|
|
+ onlyTxt: audio && fixIcon.length === 2 && i !== 0,
|
|
|
+ }" @click="changeActive(item.id, item.audioAc)" v-for="(item, i) in fixIcon" :key="i">
|
|
|
<img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
|
|
|
<span>{{ item.name }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div
|
|
|
- class="intro"
|
|
|
- :class="{
|
|
|
- ismtop:
|
|
|
- (!audio && fixIcon.length === 0) || (audio && fixIcon.length === 1),
|
|
|
- }"
|
|
|
- v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
|
|
|
- >
|
|
|
+ <!-- <div class="intro" :class="{
|
|
|
+ ismtop:
|
|
|
+ (!audio && fixIcon.length === 0) || (audio && fixIcon.length === 1),
|
|
|
+ }" v-if="!isMobile || (isMobile && fixIcon.length <= 0)">
|
|
|
<h3 v-html="data.title"></h3>
|
|
|
<p v-html="data.content"></p>
|
|
|
- <p
|
|
|
- v-html="data.imagesDesc[myInd]"
|
|
|
- v-if="data.imagesDesc && data.imagesDesc[myInd] && active === 'images'"
|
|
|
- ></p>
|
|
|
- <p
|
|
|
- v-html="data.videosDesc[myInd]"
|
|
|
- v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
- ></p>
|
|
|
- </div>
|
|
|
+ <p v-html="data.imagesDesc[myInd]" v-if="data.imagesDesc && data.imagesDesc[myInd] && active === 'images'"></p>
|
|
|
+ <p v-html="data.videosDesc[myInd]" v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"></p>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
-import "swiper/css/swiper.css";
|
|
|
+// import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
+// import "swiper/css/swiper.css";
|
|
|
import browser from "@/utils/browser";
|
|
|
|
|
|
let iconArr = [
|
|
|
@@ -135,17 +83,17 @@ let iconArr = [
|
|
|
audioAc: false,
|
|
|
},
|
|
|
{ name: "图片", id: "images", img: "img-icon", display: false },
|
|
|
- { name: "视频", id: "video", img: "video-icon", display: false },
|
|
|
{ name: "网页", id: "iframe", img: "iframe-icon", display: false },
|
|
|
{ name: "模型", id: "model", img: "model-icon", display: false },
|
|
|
+ { name: "视频", id: "video", img: "video-icon", display: false },
|
|
|
];
|
|
|
|
|
|
browser.mobile &&
|
|
|
iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false });
|
|
|
|
|
|
-
|
|
|
-let tt = window.location.href.split('/hot_online1')[0]
|
|
|
-// let tt = `https://yera-tech.com/scene_roam/Anhui_celebrity_museum/hot_online1/index.html#/?m=CmsahV012637&time=1668060371669&id=H011`.split('/hot_online1')[0]
|
|
|
+
|
|
|
+let tt = window.location.href.split('/hot_online1')[0]
|
|
|
+// let tt = `http://192.168.2.22:8080/hot_online1/index.html#/?m=o60psb089989&time=1698204971609&id=mq0RFF6Qz0012`.split('/hot_online1')[0]
|
|
|
|
|
|
export default {
|
|
|
name: "Home",
|
|
|
@@ -162,36 +110,45 @@ export default {
|
|
|
id: this.$route.query.id,
|
|
|
isMobile: browser.mobile,
|
|
|
isAndriod: browser.android,
|
|
|
+ swiper: '',
|
|
|
swiperOptions: browser.mobile
|
|
|
? {
|
|
|
- pagination: {
|
|
|
- el: ".swiper-pagination",
|
|
|
- clickable: true,
|
|
|
- },
|
|
|
- on: {
|
|
|
- slideChangeTransitionEnd: () => {
|
|
|
- let swiper = this.$refs.mySwiper.$swiper;
|
|
|
- let activeIndex = swiper.activeIndex;
|
|
|
- this.myInd = activeIndex;
|
|
|
- },
|
|
|
+ zoom: true, //开启缩放功能
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionEnd: () => {
|
|
|
+ let swiper = this.swiper;
|
|
|
+ let activeIndex = swiper.activeIndex;
|
|
|
+ this.myInd = activeIndex;
|
|
|
+ const videos = document.querySelectorAll("video");
|
|
|
+ // 遍历视频元素并将其静音
|
|
|
+ videos.forEach(video => {
|
|
|
+ video.pause()
|
|
|
+ });
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+ }
|
|
|
: {
|
|
|
- slidesPerView: 3,
|
|
|
- spaceBetween: 0,
|
|
|
- centeredSlides: true,
|
|
|
- pagination: {
|
|
|
- el: ".swiper-pagination",
|
|
|
- clickable: true,
|
|
|
- },
|
|
|
- on: {
|
|
|
- slideChangeTransitionEnd: () => {
|
|
|
- let swiper = this.$refs.mySwiper.$swiper;
|
|
|
- let activeIndex = swiper.activeIndex;
|
|
|
- this.myInd = activeIndex;
|
|
|
- },
|
|
|
+ slidesPerView: 'auto',
|
|
|
+ spaceBetween: 0,
|
|
|
+ centeredSlides: true,
|
|
|
+ zoom: true, //开启缩放功能
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ type: "bullets",
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChangeTransitionEnd: () => {
|
|
|
+ let swiper = this.swiper;
|
|
|
+ let activeIndex = swiper.activeIndex;
|
|
|
+ this.myInd = activeIndex;
|
|
|
},
|
|
|
},
|
|
|
+ },
|
|
|
data: {},
|
|
|
iconArr,
|
|
|
active: "",
|
|
|
@@ -199,8 +156,8 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
active(newVal) {
|
|
|
- let AcDataLength = this.data[newVal].length-1
|
|
|
- if(this.myInd>AcDataLength) this.myInd = AcDataLength
|
|
|
+ let AcDataLength = this.data[newVal].length - 1
|
|
|
+ if (this.myInd > AcDataLength) this.myInd = AcDataLength
|
|
|
|
|
|
// 判断是否只有一张图片或者视频，ifrm lengthShow
|
|
|
let tempType = this.data[newVal];
|
|
|
@@ -225,18 +182,16 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
- swiper() {
|
|
|
- return this.$refs.mySwiper.$swiper;
|
|
|
- },
|
|
|
+
|
|
|
fixIcon() {
|
|
|
let arr = this.iconArr.filter((item) => !!item.display);
|
|
|
return arr;
|
|
|
},
|
|
|
},
|
|
|
- components: {
|
|
|
- Swiper,
|
|
|
- SwiperSlide,
|
|
|
- },
|
|
|
+ // components: {
|
|
|
+ // Swiper,
|
|
|
+ // SwiperSlide,
|
|
|
+ // },
|
|
|
methods: {
|
|
|
// 点击查看大图
|
|
|
lookImg(url) {
|
|
|
@@ -268,9 +223,8 @@ export default {
|
|
|
this.active = id;
|
|
|
},
|
|
|
async getData() {
|
|
|
- let url = `${tt}/data/${
|
|
|
- this.id
|
|
|
- }/hot/js/data.json?time=${Math.random()}`;
|
|
|
+ let url = `${tt}/data/${this.id
|
|
|
+ }/hot/js/data.json?time=${Math.random()}`;
|
|
|
let result = (await this.$http.get(url)).data;
|
|
|
this.data = result[this.m];
|
|
|
if (!this.data) {
|
|
|
@@ -288,6 +242,10 @@ export default {
|
|
|
// 如果有音频
|
|
|
if (item.id === "audio" && this.audio) item.display = true;
|
|
|
});
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.swiper = new window.Swiper('#sw-card', this.swiperOptions);
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
colseParent(item) {
|
|
|
@@ -303,11 +261,16 @@ export default {
|
|
|
fixUrl(item) {
|
|
|
let qq = ''
|
|
|
if (item) {
|
|
|
- qq = item.replace(`https://super.4dage.com`,`${tt}`)
|
|
|
+ qq = item.replace(`https://super.4dage.com`, `${tt}`)
|
|
|
+ }
|
|
|
+ if (this.active == 'images' && !this.isMobile) {
|
|
|
+ console.log('result:', qq);
|
|
|
+ qq = qq.replace('.png', '_pc.png').replace('.jpg', '_pc.png')
|
|
|
}
|
|
|
return qq;
|
|
|
},
|
|
|
slideto(action) {
|
|
|
+ console.log('result:', this.swiper);
|
|
|
this.swiper[action]();
|
|
|
},
|
|
|
},
|
|
|
@@ -328,6 +291,7 @@ export default {
|
|
|
.viewerCla img {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
.audio {
|
|
|
position: fixed;
|
|
|
top: -100px;
|
|
|
@@ -338,33 +302,50 @@ export default {
|
|
|
.mb-intro {
|
|
|
color: #fff;
|
|
|
padding: 10px;
|
|
|
- > p {
|
|
|
+
|
|
|
+ >p {
|
|
|
line-height: 1.5;
|
|
|
letter-spacing: 1px;
|
|
|
+ text-indent: 32px;
|
|
|
+
|
|
|
&:first-of-type {
|
|
|
font-weight: bold;
|
|
|
font-size: 20px;
|
|
|
padding-right: 40px;
|
|
|
+ text-indent: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.home {
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ // background-color: rgba(0, 0, 0, 1);
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
+
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
- height: 80%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
.warpper {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+
|
|
|
.slide {
|
|
|
font-size: 0;
|
|
|
+ width: 80vw;
|
|
|
+
|
|
|
img,
|
|
|
video,
|
|
|
iframe {
|
|
|
- max-height: 70vh;
|
|
|
+ max-height: 85vh;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .videop {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
iframe {
|
|
|
@@ -374,8 +355,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.isMobileCon {
|
|
|
- height: calc(100vh - 90px);
|
|
|
+ height: 100vh;
|
|
|
}
|
|
|
|
|
|
.iconarr {
|
|
|
@@ -386,6 +368,7 @@ export default {
|
|
|
list-style: none;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
+
|
|
|
li {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -400,39 +383,47 @@ export default {
|
|
|
border-radius: 10px;
|
|
|
border: solid 1px #fff;
|
|
|
margin-right: 10px;
|
|
|
+
|
|
|
span {
|
|
|
margin-left: 4px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.active {
|
|
|
background: #b30a16;
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.oneChuMusic {
|
|
|
opacity: 0;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
+
|
|
|
.onlyTxt {
|
|
|
display: none !important;
|
|
|
}
|
|
|
+
|
|
|
.intro {
|
|
|
max-height: 19vh;
|
|
|
overflow: auto;
|
|
|
width: 70%;
|
|
|
color: #fff;
|
|
|
margin: 0 auto;
|
|
|
- > h3 {
|
|
|
+
|
|
|
+ >h3 {
|
|
|
font-size: 20px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
- > p {
|
|
|
+
|
|
|
+ >p {
|
|
|
line-height: 1.5;
|
|
|
margin-top: 10px;
|
|
|
font-size: 16px;
|
|
|
text-indent: 32px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.ismtop {
|
|
|
max-height: 65%;
|
|
|
height: 65%;
|
|
|
@@ -447,18 +438,22 @@ export default {
|
|
|
.home {
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
+
|
|
|
.content {
|
|
|
.warpper {
|
|
|
.slide {
|
|
|
+
|
|
|
img,
|
|
|
video,
|
|
|
iframe {
|
|
|
max-height: 500px;
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
max-height: 80vh;
|
|
|
width: 90%;
|
|
|
}
|
|
|
+
|
|
|
iframe {
|
|
|
height: 500px;
|
|
|
}
|
|
|
@@ -471,10 +466,12 @@ export default {
|
|
|
@media screen and (max-width: 1000px) {
|
|
|
.home {
|
|
|
background: rgba(0, 0, 0, 0.8);
|
|
|
+
|
|
|
.content {
|
|
|
.warpper {
|
|
|
.slide {
|
|
|
width: 100%;
|
|
|
+
|
|
|
img,
|
|
|
video,
|
|
|
iframe {
|
|
|
@@ -482,11 +479,13 @@ export default {
|
|
|
width: 100%;
|
|
|
border-radius: 0;
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
- max-height: 80vh;
|
|
|
+ max-height: 100vh;
|
|
|
width: auto;
|
|
|
- max-width: 90%;
|
|
|
+ max-width: 100%;
|
|
|
}
|
|
|
+
|
|
|
iframe {
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 90px);
|
|
|
@@ -494,6 +493,25 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .tipsimg {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%);
|
|
|
+ bottom: 4%;
|
|
|
+ width: 56%;
|
|
|
+ z-index: 1999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lengBulluet {
|
|
|
+ position: absolute;
|
|
|
+ right: 5%;
|
|
|
+ bottom: 10.2%;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 12px;
|
|
|
+ z-index: 1999;
|
|
|
+ }
|
|
|
+
|
|
|
.iconarr {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
@@ -503,6 +521,7 @@ export default {
|
|
|
bottom: 0px;
|
|
|
right: 0px;
|
|
|
z-index: 1999;
|
|
|
+
|
|
|
li {
|
|
|
width: 70px;
|
|
|
margin-bottom: 10px;
|
|
|
@@ -517,12 +536,14 @@ export default {
|
|
|
.warpper {
|
|
|
.slide {
|
|
|
width: 100%;
|
|
|
+
|
|
|
img,
|
|
|
video,
|
|
|
iframe {
|
|
|
max-width: 70%;
|
|
|
max-height: 80vh;
|
|
|
}
|
|
|
+
|
|
|
iframe {
|
|
|
width: 100%;
|
|
|
max-width: unset;
|
|
|
@@ -539,11 +560,13 @@ export default {
|
|
|
.swiper-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.swiper-pagination-bullet {
|
|
|
background: #fff;
|
|
|
}
|
|
|
+
|
|
|
.swiper-slide {
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
@@ -556,9 +579,13 @@ export default {
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
|
|
|
+.swiper-backface-hidden .swiper-slide {
|
|
|
+ transform: scale(0.8);
|
|
|
+}
|
|
|
+
|
|
|
.swiper-slide-active,
|
|
|
.swiper-slide-duplicate-active {
|
|
|
- transform: scale(1);
|
|
|
+ transform: scale(1) !important;
|
|
|
opacity: 1;
|
|
|
z-index: 999;
|
|
|
}
|
|
|
@@ -568,13 +595,40 @@ export default {
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
padding: 10px 20px;
|
|
|
color: #fff !important;
|
|
|
- border-radius: 50%;
|
|
|
+ border-radius: 10px;
|
|
|
}
|
|
|
+
|
|
|
.swiper-button-prev {
|
|
|
- left: 16px;
|
|
|
+ left: 86px;
|
|
|
}
|
|
|
+
|
|
|
.swiper-button-next {
|
|
|
- right: 16px;
|
|
|
+ right: 86px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.swiper-pagination {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10% !important;
|
|
|
+ z-index: 99;
|
|
|
+ left: 50% !important;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-pagination-bullet {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 100%;
|
|
|
+ background: #ccc;
|
|
|
+ opacity: 0.4;
|
|
|
+ margin: 0 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-pagination-bullet-active {
|
|
|
+ opacity: 1;
|
|
|
+ background: #d20000;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 500px) {
|
TrembleC
