|
@@ -2,14 +2,10 @@
|
|
|
<div class="home">
|
|
|
<div class="main">
|
|
|
<div class="myTitle">{{ myTitle }}</div>
|
|
|
+ <div class="line"><img src="@/assets/images/pc/line.png" alt="" /></div>
|
|
|
+
|
|
|
<div class="mainCon" v-show="!oneTxt">
|
|
|
- <audio
|
|
|
- id="myAudio"
|
|
|
- v-if="audio"
|
|
|
- v-show="isOneAduio"
|
|
|
- :src="urlToFitFu(audio)"
|
|
|
- controls
|
|
|
- ></audio>
|
|
|
+ <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
|
|
|
<!-- 如果只有一个模块 -->
|
|
|
<!-- <div class="oneTabNum" v-if="
|
|
|
flooTab.length === 1 &&
|
|
@@ -24,54 +20,27 @@
|
|
|
|
|
|
<div class="contenBoxMain swiper-container">
|
|
|
<div class="swiper-wrapper">
|
|
|
- <div
|
|
|
- class="contenBox swiper-slide"
|
|
|
- v-for="(item, index) in data[myType]"
|
|
|
- :key="myType === 'video' ? item.url : item"
|
|
|
- >
|
|
|
+ <div class="contenBox swiper-slide" v-for="(item, index) in data[myType]" :key="myType === 'video' ? item.url : item">
|
|
|
<!-- 模型页面 -->
|
|
|
<div class="modelBox" v-if="myType === 'model'">
|
|
|
- <iframe
|
|
|
- :src="urlToFitFu(item)"
|
|
|
- frameborder="0"
|
|
|
- v-if="index === myInd"
|
|
|
- ></iframe>
|
|
|
+ <iframe :src="urlToFitFu(item)" frameborder="0" v-if="index === myInd"></iframe>
|
|
|
</div>
|
|
|
<!-- 视频页面 -->
|
|
|
<div class="videoBox" v-else-if="myType === 'video'">
|
|
|
- <video
|
|
|
- controls
|
|
|
- controlslist="nodownload"
|
|
|
- :src="urlToFitFu(item.url)"
|
|
|
- v-if="index === myInd"
|
|
|
- ></video>
|
|
|
+ <video controls controlslist="nodownload" :src="urlToFitFu(item.url)" v-if="index === myInd"></video>
|
|
|
</div>
|
|
|
<!-- 图片页面 -->
|
|
|
<div class="imgBox" v-else-if="myType === 'img'">
|
|
|
<div class="smImgBox">
|
|
|
- <img
|
|
|
- v-lazy="urlToFitFu(item)"
|
|
|
- alt=""
|
|
|
- @click="lookImg(urlToFitFu(item))"
|
|
|
- />
|
|
|
+ <img v-lazy="urlToFitFu(item)" alt="" @click="lookImg(urlToFitFu(item))" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 左右箭头 -->
|
|
|
<template v-if="!isMobile">
|
|
|
- <div
|
|
|
- @click="cutMyInd(-1, myInd === 0)"
|
|
|
- class="leftJJ awccJJ"
|
|
|
- :class="{ noClick: myInd === 0 }"
|
|
|
- v-if="data[myType] && data[myType].length > 1"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- @click="cutMyInd(1, myInd === data[myType].length - 1)"
|
|
|
- class="rightJJ awccJJ"
|
|
|
- :class="{ noClick: myInd === data[myType].length - 1 }"
|
|
|
- v-if="data[myType] && data[myType].length > 1"
|
|
|
- ></div>
|
|
|
+ <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }" v-if="data[myType] && data[myType].length > 1"></div>
|
|
|
+ <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ" :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1"></div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -83,16 +52,8 @@
|
|
|
<div class="flooTxtBox">
|
|
|
<!-- <div class="myTitle">{{ myTitle }}</div> -->
|
|
|
<!-- 视频的介绍 -->
|
|
|
- <div
|
|
|
- class="myTxt"
|
|
|
- v-if="myType === 'video' && videoTxt[myInd]"
|
|
|
- v-html="videoTxt[myInd]"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="myTxt"
|
|
|
- v-if="myType === 'img' && imgTxt[myInd]"
|
|
|
- v-html="imgTxt[myInd]"
|
|
|
- ></div>
|
|
|
+ <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]" v-html="videoTxt[myInd]"></div>
|
|
|
+ <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]" v-html="imgTxt[myInd]"></div>
|
|
|
<div class="myTxt" v-html="myTxt"></div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -104,45 +65,16 @@
|
|
|
|
|
|
<!-- 底部的tab -->
|
|
|
<div class="flooTabBox" v-if="flooTab.length > 1">
|
|
|
- <div
|
|
|
- @click="myType = item.type"
|
|
|
- class="tabRow"
|
|
|
- :class="{ tabRowAc: myType === item.type }"
|
|
|
- v-for="item in flooTab"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="
|
|
|
- require(`@/assets/images/pc/icon${item.id}${
|
|
|
- myType === item.type ? 'Ac' : ''
|
|
|
- }.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <div @click="myType = item.type" class="tabRow" :class="{ tabRowAc: myType === item.type }" v-for="item in flooTab" :key="item.id">
|
|
|
+ <img :src="require(`@/assets/images/pc/icon${item.id}${myType === item.type ? 'Ac' : ''}.png`)" alt="" />
|
|
|
<div>
|
|
|
{{ item.name }}
|
|
|
- <span
|
|
|
- v-if="
|
|
|
- data[item.type] &&
|
|
|
- data[item.type].length &&
|
|
|
- data[item.type].length > 1
|
|
|
- "
|
|
|
- >{{ item.type === myType ? myInd + 1 + "/" : null
|
|
|
- }}{{ data[item.type].length }}</span
|
|
|
- >
|
|
|
+ <span v-if="data[item.type] && data[item.type].length && data[item.type].length > 1">{{ item.type === myType ? myInd + 1 + "/" : null }}{{ data[item.type].length }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 音频图标 -->
|
|
|
- <div
|
|
|
- class="tabRow"
|
|
|
- v-if="audio && !isOneAduio"
|
|
|
- @click="audioSta = !audioSta"
|
|
|
- :title="audioSta ? '关闭音频' : '打开音频'"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <div class="tabRow" v-if="audio && !isOneAduio" @click="audioSta = !audioSta" :title="audioSta ? '关闭音频' : '打开音频'">
|
|
|
+ <img :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)" alt="" />
|
|
|
<div>音频</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -264,12 +196,7 @@ export default {
|
|
|
if (resData) {
|
|
|
this.audio = resData.backgroundMusic;
|
|
|
// 只有单独的音频上传
|
|
|
- if (
|
|
|
- resData.backgroundMusic &&
|
|
|
- !resData.model &&
|
|
|
- !resData.video &&
|
|
|
- !resData.images
|
|
|
- ) {
|
|
|
+ if (resData.backgroundMusic && !resData.model && !resData.video && !resData.images) {
|
|
|
this.isOneAduio = true;
|
|
|
}
|
|
|
// 底部的tab
|
|
@@ -334,7 +261,7 @@ export default {
|
|
|
background-color: rgba(transparent, 0.8);
|
|
|
background-size: 100% 100%;
|
|
|
border-radius: 10px;
|
|
|
- color: #f0ece0;
|
|
|
+ color: #6d4c29;
|
|
|
.swiper-pagination {
|
|
|
margin: 10px 0 0;
|
|
|
position: relative;
|
|
@@ -382,9 +309,22 @@ export default {
|
|
|
.myTitle {
|
|
|
font-size: 22px;
|
|
|
font-weight: 700;
|
|
|
- margin-bottom: 20px;
|
|
|
+ padding: 10px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ .line {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ & > img {
|
|
|
+ height: 20px;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
.mainCon {
|
|
|
position: relative;
|
|
|
border-radius: 6px;
|
|
@@ -478,7 +418,7 @@ export default {
|
|
|
|
|
|
.myTxt {
|
|
|
font-size: 16px;
|
|
|
- color: #f0ece0;
|
|
|
+ color: #6d4c29;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
&::-webkit-scrollbar {
|
|
@@ -544,7 +484,7 @@ export default {
|
|
|
@media screen and (max-width: 1000px) {
|
|
|
.home {
|
|
|
background: url("../assets/images/pc/hot_bg_M.png") no-repeat center center;
|
|
|
- background-size: cover !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
.swiper-pagination {
|
|
|
margin: 10px 0 0;
|
|
|
gap: 4px;
|
|
@@ -568,7 +508,7 @@ export default {
|
|
|
}
|
|
|
.mainCon {
|
|
|
border-radius: 0;
|
|
|
- height: calc(100% - 195px);
|
|
|
+ height: calc(100% - 255px);
|
|
|
.contenBox {
|
|
|
.videoBox {
|
|
|
padding: 0 30px;
|