|
|
@@ -18,7 +18,9 @@
|
|
|
draggable="false"
|
|
|
>
|
|
|
</button>
|
|
|
+
|
|
|
<h1>风云四号模型</h1>
|
|
|
+
|
|
|
<div class="tab-bar">
|
|
|
<button
|
|
|
class="model"
|
|
|
@@ -50,13 +52,50 @@
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- v-show="activeTabIndx === 0"
|
|
|
- class="model-wrapper"
|
|
|
+ class="main-wrapper"
|
|
|
>
|
|
|
- <iframe
|
|
|
- src="https://4dscene.4dage.com/culturalrelics/YHTLSJNG/Model2.html?m=yht08"
|
|
|
- frameborder="0"
|
|
|
- />
|
|
|
+ <div
|
|
|
+ class="swiper-root"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="activeTabIndx === 0"
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ v-for="(item, index) in modelUlrList"
|
|
|
+ :key="index"
|
|
|
+ :src="item"
|
|
|
+ frameborder="0"
|
|
|
+ class="swiper-slide"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="activeTabIndx === 1"
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ v-for="(item, index) in videoUrlList"
|
|
|
+ :key="index"
|
|
|
+ :src="item"
|
|
|
+ class="swiper-slide"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="activeTabIndx === 2"
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ v-for="(item, index) in imageUlrList"
|
|
|
+ :key="index"
|
|
|
+ :src="item"
|
|
|
+ frameborder="0"
|
|
|
+ class="swiper-slide"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="swiper-pagination">
|
|
|
+ <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ list.length }}</span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
<p class="main">
|
|
|
厂家：航天八院 尺寸：3.22m×2.87m×4.12m
|
|
|
</p>
|
|
|
@@ -65,6 +104,8 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
|
|
|
<menu>
|
|
|
<button @click="isShowShare = true">
|
|
|
@@ -75,6 +116,32 @@
|
|
|
draggable="false"
|
|
|
>
|
|
|
</button>
|
|
|
+ <button
|
|
|
+ v-if="hasMusic"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/icon_music_on.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ <button v-if="canCaptureScreen">
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/icon_record.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ <button @click="fullScreenStatus = !fullScreenStatus">
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ :src="require(`@/assets/images/icon_full_screen_${fullScreenStatus ? 'on' : 'off'}.png`)"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
</menu>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -84,8 +151,13 @@ import {
|
|
|
reactive,
|
|
|
ref,
|
|
|
toRefs,
|
|
|
+ onMounted,
|
|
|
+ watch,
|
|
|
+ nextTick,
|
|
|
} from 'vue'
|
|
|
import TreasureShare from "@/components/TreasureShare.vue"
|
|
|
+import Swiper from 'swiper/bundle'
|
|
|
+import 'swiper/css/bundle'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -96,10 +168,82 @@ export default {
|
|
|
|
|
|
const isShowShare = ref(false)
|
|
|
|
|
|
+ const hasMusic = ref(true)
|
|
|
+
|
|
|
+ const canCaptureScreen = ref(true)
|
|
|
+
|
|
|
+ const fullScreenStatus = ref(false)
|
|
|
+ watch(fullScreenStatus, (newVal) => {
|
|
|
+ if (newVal) {
|
|
|
+ const el = document.querySelector('.treasure-detail')
|
|
|
+ if (el) {
|
|
|
+ utils.requestFullScreen(el)
|
|
|
+ } else {
|
|
|
+ console.error('没有找到组件根元素！')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ utils.exitFullScreen()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ /**
|
|
|
+ * swiper 相关
|
|
|
+ */
|
|
|
+ const modelUlrList = reactive([
|
|
|
+ 'https://4dscene.4dage.com/culturalrelics/YHTLSJNG/Model2.html?m=yht08',
|
|
|
+ 'https://4dscene.4dage.com/culturalrelics/YHTLSJNG/Model2.html?m=yht08',
|
|
|
+ ])
|
|
|
+ const videoUrlList = reactive([
|
|
|
+ require(`@/assets/mock/demo.mp4`),
|
|
|
+ require(`@/assets/mock/demo.mp4`),
|
|
|
+ ])
|
|
|
+ const imageUlrList = reactive([
|
|
|
+ ])
|
|
|
+ let swiper = null
|
|
|
+ function initSwiper() {
|
|
|
+ swiper = new Swiper('.swiper-root', {
|
|
|
+ // pagination: {
|
|
|
+ // el: '.swiper-pagination',
|
|
|
+ // },
|
|
|
+
|
|
|
+ // Navigation arrows
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
+ prevEl: '.swiper-button-prev',
|
|
|
+ },
|
|
|
+
|
|
|
+ on: {
|
|
|
+ afterInit: function (e) {
|
|
|
+ // ...
|
|
|
+ },
|
|
|
+ slideChange: function(e) {
|
|
|
+ // ...
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ onMounted(initSwiper)
|
|
|
+ watch(activeTabIndx, (newV) => {
|
|
|
+ swiper.destroy()
|
|
|
+ nextTick(() => {
|
|
|
+ initSwiper()
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
return {
|
|
|
activeTabIndx,
|
|
|
|
|
|
isShowShare,
|
|
|
+
|
|
|
+ hasMusic,
|
|
|
+
|
|
|
+ canCaptureScreen,
|
|
|
+
|
|
|
+ fullScreenStatus,
|
|
|
+
|
|
|
+ modelUlrList,
|
|
|
+ videoUrlList,
|
|
|
+ imageUlrList,
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -161,18 +305,42 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.model-wrapper {
|
|
|
+ >.main-wrapper {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
height: calc(100% - 144px - 128px - 40px);
|
|
|
- width: 100%;
|
|
|
- >iframe {
|
|
|
+ width: 80%;
|
|
|
+ max-width: 1164px;
|
|
|
+ .swiper-root {
|
|
|
height: calc(100% - 160px);
|
|
|
width: 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .swiper-wrapper {
|
|
|
+ height: 100%;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ .swiper-slide {
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .swiper-pagination {
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 10px;
|
|
|
+ // left: 50%;
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ // font-size: 1.33rem;
|
|
|
+ // font-family: Inter-Regular, Inter;
|
|
|
+ // color: #666;
|
|
|
+ // .cur {
|
|
|
+ // color: #930909;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
>p.main {
|
|
|
+ margin-top: 20px;
|
|
|
font-size: 20px;
|
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
@@ -205,11 +373,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .swiper-button-prev {
|
|
|
+ left: 44px;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ background-image: url(@/assets/images/arrow-left-2.png);
|
|
|
+ background-size: contain;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-button-next {
|
|
|
+ right: 44px;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ background-image: url(@/assets/images/arrow-right-2.png);
|
|
|
+ background-size: contain;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
>menu {
|
|
|
position: absolute;
|
|
|
right: 44px;
|
|
|
- bottom: 170px;
|
|
|
+ bottom: 130px;
|
|
|
> button {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 15px;
|
|
|
width: 44px;
|
|
|
height: 44px;
|
|
|
> img {
|
任一存
