|
@@ -1,181 +1,190 @@
|
|
|
<template>
|
|
|
<div class="hotspot-detail">
|
|
|
- <button
|
|
|
- v-show="descForShow"
|
|
|
- class="desc"
|
|
|
- @click="isShowDesc = true"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="@/assets/images/desc.png"
|
|
|
- alt="详情"
|
|
|
- draggable="false"
|
|
|
+ <div class="wrapper">
|
|
|
+ <!-- <button
|
|
|
+ v-show="descForShow"
|
|
|
+ class="desc"
|
|
|
+ @click="isShowDesc = true"
|
|
|
>
|
|
|
- </button>
|
|
|
+ <img
|
|
|
+ src="@/assets/images/desc.png"
|
|
|
+ alt="详情"
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button> -->
|
|
|
|
|
|
- <h1 v-html="titleForShow" />
|
|
|
+ <h1
|
|
|
+ :title="titleForShow"
|
|
|
+ v-html="titleForShow"
|
|
|
+ />
|
|
|
|
|
|
- <button
|
|
|
- class="close"
|
|
|
- @click="$emit('close')"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="@/assets/images/close.png"
|
|
|
- alt="关闭"
|
|
|
- draggable="false"
|
|
|
+ <button
|
|
|
+ class="close"
|
|
|
+ @click="$emit('close')"
|
|
|
>
|
|
|
- </button>
|
|
|
+ <img
|
|
|
+ src="@/assets/images/close.png"
|
|
|
+ alt="关闭"
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
|
|
|
- <div
|
|
|
- v-if="typesForShow[currentTabIdx].name === '视频'"
|
|
|
- class="swiper-wrapper-mine video-wrap"
|
|
|
- >
|
|
|
<div
|
|
|
- class="swiper-root swiper-root"
|
|
|
+ v-if="typesForShow[currentTabIdx].name === '视频'"
|
|
|
+ class="swiper-wrapper-mine video-wrap"
|
|
|
>
|
|
|
<div
|
|
|
- class="swiper-wrapper"
|
|
|
+ class="swiper-root swiper-root"
|
|
|
>
|
|
|
<div
|
|
|
- v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
- :key="index"
|
|
|
- class="swiper-slide"
|
|
|
+ class="swiper-wrapper"
|
|
|
>
|
|
|
- <video
|
|
|
- ref="video"
|
|
|
- :src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
|
|
|
- controls
|
|
|
- controlslist="nodownload"
|
|
|
- disablePictureInPicture
|
|
|
- />
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
+ :key="index"
|
|
|
+ class="swiper-slide"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ ref="video"
|
|
|
+ :src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
|
|
|
+ controls
|
|
|
+ controlslist="nodownload"
|
|
|
+ disablePictureInPicture
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="swiper-pagination">
|
|
|
+ <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
</div>
|
|
|
- <div class="swiper-pagination">
|
|
|
- <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
- </div>
|
|
|
- <div class="swiper-button-prev" />
|
|
|
- <div class="swiper-button-next" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div
|
|
|
- v-if="typesForShow[currentTabIdx].name === '模型'"
|
|
|
- class="swiper-wrapper-mine model-wrap"
|
|
|
- >
|
|
|
<div
|
|
|
- class="swiper-root"
|
|
|
+ v-if="typesForShow[currentTabIdx].name === '模型'"
|
|
|
+ class="swiper-wrapper-mine model-wrap"
|
|
|
>
|
|
|
<div
|
|
|
- class="swiper-wrapper"
|
|
|
+ class="swiper-root"
|
|
|
>
|
|
|
- <iframe
|
|
|
- v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
- :key="index"
|
|
|
- :src="item.url"
|
|
|
- frameborder="0"
|
|
|
- class="swiper-slide"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="swiper-pagination">
|
|
|
- <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
+ <div
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
+ :key="index"
|
|
|
+ :src="item.url"
|
|
|
+ frameborder="0"
|
|
|
+ class="swiper-slide"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="swiper-pagination">
|
|
|
+ <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
</div>
|
|
|
- <div class="swiper-button-prev" />
|
|
|
- <div class="swiper-button-next" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div
|
|
|
- v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '音频'"
|
|
|
- class="swiper-wrapper-mine audio-wrap"
|
|
|
- >
|
|
|
<div
|
|
|
- class="swiper-root"
|
|
|
+ v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '音频'"
|
|
|
+ class="swiper-wrapper-mine audio-wrap"
|
|
|
>
|
|
|
<div
|
|
|
- class="swiper-wrapper"
|
|
|
+ class="swiper-root"
|
|
|
>
|
|
|
- <Audio
|
|
|
- v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
- ref="audio-comp"
|
|
|
- :key="index"
|
|
|
- class="audio-custom swiper-slide"
|
|
|
- :audio-src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="swiper-pagination">
|
|
|
- <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
+ <div
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <Audio
|
|
|
+ v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
+ ref="audio-comp"
|
|
|
+ :key="index"
|
|
|
+ class="audio-custom swiper-slide"
|
|
|
+ :audio-src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="swiper-pagination">
|
|
|
+ <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
</div>
|
|
|
- <div class="swiper-button-prev" />
|
|
|
- <div class="swiper-button-next" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div
|
|
|
- v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '图片'"
|
|
|
- class="swiper-wrapper-mine image-wrap"
|
|
|
- >
|
|
|
<div
|
|
|
- class="swiper-root"
|
|
|
+ v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '图片'"
|
|
|
+ class="swiper-wrapper-mine image-wrap"
|
|
|
>
|
|
|
<div
|
|
|
- v-viewer="{
|
|
|
- button: true,
|
|
|
- navbar: false,
|
|
|
- title: false,
|
|
|
- toolbar: false,
|
|
|
- tooltip: false,
|
|
|
- movable: true,
|
|
|
- zoomable: true,
|
|
|
- rotatable: true,
|
|
|
- scalable: true,
|
|
|
- transition: false,
|
|
|
- fullscreen: false,
|
|
|
- keyboard: true,
|
|
|
- loop: false,
|
|
|
+ class="swiper-root"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-viewer="{
|
|
|
+ button: true,
|
|
|
+ navbar: false,
|
|
|
+ title: false,
|
|
|
+ toolbar: false,
|
|
|
+ tooltip: false,
|
|
|
+ movable: true,
|
|
|
+ zoomable: true,
|
|
|
+ rotatable: true,
|
|
|
+ scalable: true,
|
|
|
+ transition: false,
|
|
|
+ fullscreen: false,
|
|
|
+ keyboard: true,
|
|
|
+ loop: false,
|
|
|
+ }"
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
+ :key="index"
|
|
|
+ v-lazy="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
|
|
|
+ class="swiper-slide"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- <div class="swiper-pagination">
|
|
|
+ <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p class="desc">
|
|
|
+ {{ descForShow }}
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- <div class="type-tabbar">
|
|
|
+ <button
|
|
|
+ v-for="(typeItem, index) in typesForShow"
|
|
|
+ :key="typeItem.name"
|
|
|
+ class="tab"
|
|
|
+ :class="{
|
|
|
+ active: currentTabIdx === index
|
|
|
}"
|
|
|
- class="swiper-wrapper"
|
|
|
+ @click="currentTabIdx = index"
|
|
|
>
|
|
|
<img
|
|
|
- v-for="(item, index) in typesForShow[currentTabIdx].list"
|
|
|
- :key="index"
|
|
|
- v-lazy="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
|
|
|
- class="swiper-slide"
|
|
|
+ :src="currentTabIdx !== index ? typeItem.icon : typeItem.iconActive"
|
|
|
alt=""
|
|
|
draggable="false"
|
|
|
>
|
|
|
- </div>
|
|
|
- <div class="swiper-pagination">
|
|
|
- <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
|
|
|
- </div>
|
|
|
- <div class="swiper-button-prev" />
|
|
|
- <div class="swiper-button-next" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>{{ typeItem.name + ' ' + typeItem.list.length }}</div>
|
|
|
+ </button>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <div class="type-tabbar">
|
|
|
- <button
|
|
|
- v-for="(typeItem, index) in typesForShow"
|
|
|
- :key="typeItem.name"
|
|
|
- class="tab"
|
|
|
- :class="{
|
|
|
- active: currentTabIdx === index
|
|
|
- }"
|
|
|
- @click="currentTabIdx = index"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="currentTabIdx !== index ? typeItem.icon : typeItem.iconActive"
|
|
|
- alt=""
|
|
|
- draggable="false"
|
|
|
- >
|
|
|
- <div>{{ typeItem.name + ' ' + typeItem.list.length }}</div>
|
|
|
- </button>
|
|
|
+ <!-- <MyDesc
|
|
|
+ v-show="isShowDesc"
|
|
|
+ :title="titleForShow"
|
|
|
+ :desc="descForShow"
|
|
|
+ @close="isShowDesc = false"
|
|
|
+ /> -->
|
|
|
</div>
|
|
|
-
|
|
|
- <MyDesc
|
|
|
- v-show="isShowDesc"
|
|
|
- :title="titleForShow"
|
|
|
- :desc="descForShow"
|
|
|
- @close="isShowDesc = false"
|
|
|
- />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -183,12 +192,12 @@
|
|
|
import Swiper from 'swiper/swiper-bundle.esm.js'
|
|
|
import 'swiper/swiper-bundle.css'
|
|
|
import Audio from "@/components/Audio.vue"
|
|
|
-import MyDesc from "@/components/HotspotDetailDesc.vue"
|
|
|
+// import MyDesc from "@/components/HotspotDetailDesc.vue"
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
Audio,
|
|
|
- MyDesc,
|
|
|
+ // MyDesc,
|
|
|
},
|
|
|
props: {
|
|
|
hotspotList: {
|
|
@@ -388,187 +397,196 @@ export default {
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background: rgba(255,251,245,0.9);
|
|
|
+ background: rgba(20, 20, 20, 0.70);
|
|
|
backdrop-filter: blur(4px);
|
|
|
- z-index: 2;
|
|
|
- > button.desc {
|
|
|
+ z-index: 11;
|
|
|
+ > .wrapper {
|
|
|
position: absolute;
|
|
|
- top: 3.2rem;
|
|
|
- left: 1.25rem;
|
|
|
- width: 5rem;
|
|
|
- height: 5rem;
|
|
|
- > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- > h1 {
|
|
|
- position: absolute;
|
|
|
- top: 5rem;
|
|
|
- left: 10.46rem;
|
|
|
- right: 10.46rem;
|
|
|
- text-align: center;
|
|
|
- font-size: 2rem;
|
|
|
- font-weight: bold;
|
|
|
- color: #930909;
|
|
|
- line-height: 2.34rem;
|
|
|
- }
|
|
|
- > button.close {
|
|
|
- position: absolute;
|
|
|
- top: 3.2rem;
|
|
|
- right: 1.25rem;
|
|
|
- width: 5rem;
|
|
|
- height: 5rem;
|
|
|
- > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 1329px;
|
|
|
+ max-height: 848px;
|
|
|
+ background: #E5DFCD;
|
|
|
+ border-top: solid 8px #A10E0C;
|
|
|
+ border-bottom: solid 8px #A10E0C;
|
|
|
+ padding: 28px 100px;
|
|
|
+ > button.desc {
|
|
|
+ position: absolute;
|
|
|
+ top: 3.2rem;
|
|
|
+ left: 1.25rem;
|
|
|
+ width: 5rem;
|
|
|
+ height: 5rem;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-wrapper-mine {
|
|
|
- top: 11rem;
|
|
|
- width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
|
|
|
- margin: 0 auto;
|
|
|
- height: 60%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- .swiper-root {
|
|
|
+ > h1 {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32px;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #A10E0C;
|
|
|
overflow: hidden;
|
|
|
- height: 100%;
|
|
|
- .swiper-wrapper {
|
|
|
+ white-space: pre;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ }
|
|
|
+ > button.close {
|
|
|
+ position: absolute;
|
|
|
+ top: 29px;
|
|
|
+ right: 37px;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- // .swiper-pagination {
|
|
|
- // top: 100%;
|
|
|
- // bottom: initial;
|
|
|
- // height: 0.42rem;
|
|
|
- // /deep/.swiper-pagination-bullet {
|
|
|
- // width: 5.34rem;
|
|
|
- // height: 0.42rem;
|
|
|
- // background-color: #999999;
|
|
|
- // margin-right: 0.79rem;
|
|
|
- // // background-color: #930909;
|
|
|
- // border-radius: initial;
|
|
|
- // }
|
|
|
- // /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
|
|
- // background-color: #930909;
|
|
|
- // }
|
|
|
- // }
|
|
|
- .swiper-pagination {
|
|
|
- position: absolute;
|
|
|
- top: calc(100% + 1em);
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- font-size: 1.33rem;
|
|
|
- font-family: Inter-Regular, Inter;
|
|
|
- color: #666;
|
|
|
- .cur {
|
|
|
- color: #930909;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-wrapper-mine {
|
|
|
+ height: calc(100% - 32px - 28px - 22px - 72px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ .swiper-root {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ .swiper-wrapper {
|
|
|
}
|
|
|
- }
|
|
|
- .swiper-button-prev {
|
|
|
- left: calc(-1.67rem - 1.83rem);
|
|
|
- width: 1.83rem;
|
|
|
- height: 3.58rem;
|
|
|
- background-image: url(@/assets/images/arrow-left.png);
|
|
|
- background-size: contain;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
+ .swiper-pagination {
|
|
|
+ position: absolute;
|
|
|
+ top: calc(100% + 1em);
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 1.33rem;
|
|
|
+ font-family: Inter-Regular, Inter;
|
|
|
+ color: #666;
|
|
|
+ .cur {
|
|
|
+ color: #930909;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .swiper-button-next {
|
|
|
- right: calc(-1.67rem - 1.83rem);
|
|
|
- width: 1.83rem;
|
|
|
- height: 3.58rem;
|
|
|
- background-image: url(@/assets/images/arrow-right.png);
|
|
|
- background-size: contain;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
+ .swiper-button-prev {
|
|
|
+ left: calc(-1.67rem - 1.83rem);
|
|
|
+ width: 1.83rem;
|
|
|
+ height: 3.58rem;
|
|
|
+ background-image: url(@/assets/images/arrow-left.png);
|
|
|
+ background-size: contain;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-button-next {
|
|
|
+ right: calc(-1.67rem - 1.83rem);
|
|
|
+ width: 1.83rem;
|
|
|
+ height: 3.58rem;
|
|
|
+ background-image: url(@/assets/images/arrow-right.png);
|
|
|
+ background-size: contain;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .swiper-wrapper-mine.video-wrap {
|
|
|
- height: calc(31.5rem * 0.85);
|
|
|
- width: calc(43.5rem * 0.85);
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -70%);
|
|
|
- .swiper-root {
|
|
|
- .swiper-wrapper {
|
|
|
- .swiper-slide {
|
|
|
- background-image: url(@/assets/images/swkk/hotspot-video-bg.png);
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 5.67rem 2.21rem 1.88rem 1.8rem;
|
|
|
- > video {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .swiper-wrapper-mine.video-wrap {
|
|
|
+ height: calc(31.5rem * 0.85);
|
|
|
+ width: calc(43.5rem * 0.85);
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -70%);
|
|
|
+ .swiper-root {
|
|
|
+ .swiper-wrapper {
|
|
|
+ .swiper-slide {
|
|
|
+ background-image: url(@/assets/images/swkk/hotspot-video-bg.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding: 5.67rem 2.21rem 1.88rem 1.8rem;
|
|
|
+ > video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .swiper-wrapper-mine.model-wrap {
|
|
|
- .swiper-root {
|
|
|
- .swiper-wrapper {
|
|
|
+ .swiper-wrapper-mine.model-wrap {
|
|
|
+ .swiper-root {
|
|
|
+ .swiper-wrapper {
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .swiper-wrapper-mine.audio-wrap {
|
|
|
- width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
|
|
|
- height: 30rem;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -70%);
|
|
|
- .swiper-root {
|
|
|
- width: 100%;
|
|
|
- .swiper-wrapper {
|
|
|
+ .swiper-wrapper-mine.audio-wrap {
|
|
|
+ width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
|
|
|
+ height: 30rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -70%);
|
|
|
+ .swiper-root {
|
|
|
+ width: 100%;
|
|
|
+ .swiper-wrapper {
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .swiper-wrapper-mine.image-wrap {
|
|
|
- .swiper-root {
|
|
|
- .swiper-wrapper {
|
|
|
- > img {
|
|
|
- object-fit: contain;
|
|
|
+ .swiper-wrapper-mine.image-wrap {
|
|
|
+ .swiper-root {
|
|
|
+ .swiper-wrapper {
|
|
|
+ > img {
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- > .type-tabbar {
|
|
|
- position: absolute;
|
|
|
- bottom: 11.9%;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- > button {
|
|
|
- margin-right: 2.08rem;
|
|
|
- &:last-child {
|
|
|
- margin-right: initial;
|
|
|
- }
|
|
|
- > img {
|
|
|
- width: 5rem;
|
|
|
- height: 5rem;
|
|
|
- margin-bottom: 0.42rem;
|
|
|
- }
|
|
|
- > div {
|
|
|
- font-size: 1.25rem;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- &.active {
|
|
|
+ > p.desc {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #494140;
|
|
|
+ line-height: 19px;
|
|
|
+ height: 72px;
|
|
|
+ overflow: auto;
|
|
|
+ padding-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .type-tabbar {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 11.9%;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ > button {
|
|
|
+ margin-right: 2.08rem;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: initial;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ width: 5rem;
|
|
|
+ height: 5rem;
|
|
|
+ margin-bottom: 0.42rem;
|
|
|
+ }
|
|
|
> div {
|
|
|
- color: #930909;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ > div {
|
|
|
+ color: #930909;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ ::-webkit-scrollbar { width: 2px; height: 0; } /*宽度是对垂直滚动条而言,高度是对水平滚动条而言*/
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: #958D76;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|