commit

Hot/src/App.vue

@@ -1,16 +1,16 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="less">
-html,body{
+html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-*{
+* {
   margin: 0;
   padding: 0;
 }
@@ -18,5 +18,4 @@ html,body{
   width: 100%;
   height: 100%;
 }
-
 </style>

Hot/src/assets/base.css

@@ -36,5 +36,5 @@ body {
 @font-face {
   font-family: 'fzFont';
   /* 自定义字体名称 */
-  src: url('./font/ssxz.ttf') format('truetype');
+  src: url('./font/fzFont.TTF') format('truetype');
 }

Hot/src/views/Home.vue

@@ -1,19 +1,9 @@
 <template>
   <div class="home">
-    <div class="logo">
-      <img src="../assets/images/pc/logo.png" alt="" draggable="false" />
-    </div>
-    <div :class="['main']">
-      <div class="myTitle" style="display: none">{{ myTitle }}</div>
-
+    <div class="main">
+      <!-- <div class="myTitle">{{ myTitle }}</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 &&
@@ -26,71 +16,43 @@
 
         <!-- 主要内容 -->
 
-        <div class="contenBoxMain">
+        <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)"
-                  :poster="item.img ? urlToFitFu(item.img) : ''"
-                  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>
-
-          <div
-            class="swiper-pagination"
-            v-show="data[myType]?.length > 1"
-          ></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>
+          </template>
         </div>
       </div>
 
-      <div class="main-info">
-        <div class="myTitle">{{ myTitle }}</div>
-        <!-- 下面的文字介绍 -->
-        <!-- <img class="split" :src="require(`@/assets/images/split.png`)" alt="" /> -->
-        <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
-          <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-html="myTxt"></div>
-          </div>
+      <div class="swiper-pagination"></div>
+
+      <!-- 下面的文字介绍 -->
+      <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
+        <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-html="myTxt"></div>
         </div>
       </div>
     </div>
@@ -101,45 +63,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>
@@ -152,8 +85,10 @@ import "swiper/css/swiper.min.css";
 
 export default {
   name: "Home",
+  components: {},
   data() {
     return {
+      isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
       m: this.$route.query.m,
       id: this.$route.query.id,
       // 音频地址
@@ -212,7 +147,6 @@ export default {
     },
   },
   computed: {},
-  components: {},
   methods: {
     // 本地化 url 适配
     urlToFitFu(url) {
@@ -226,14 +160,21 @@ export default {
     },
 
     // 点击左右箭头
-    cutMyInd(num, flag) {
-      if (flag) return;
-      this.myInd += num;
+    cutMyInd(num) {
+      console.log(num, this.swiper);
+      if (!this.swiper) return;
+      if (num > 0) {
+        this.swiper.slideNext();
+      } else {
+        this.swiper.slidePrev();
+      }
     },
     // 点击查看大图
     lookImg(url) {
+      // console.log(url)
       let dom = this.$refs.viewer.$viewer;
       this.lookPics = [url];
+      // console.log(Object.keys(dom))
       dom.options.toolbar = false;
       dom.show();
     },
@@ -253,12 +194,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
@@ -319,49 +255,35 @@ export default {
 
 <style lang="less" scoped>
 .home {
-  font-family: "fzFont", sans-serif;
-  background: url("../assets/images/pc/hot_bg.png") no-repeat;
+  background: url("../assets/images/pc/hot_bg.png") no-repeat center center;
   background-color: rgba(transparent, 0.8);
   background-size: 100% 100%;
   border-radius: 10px;
-  color: #f7e7dc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .logo {
-    position: fixed;
-    width: 450px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-510px, -255px);
-    & > img {
-      object-fit: contain;
-      width: 100%;
-    }
-  }
+  color: #638687;
   .swiper-pagination {
+    margin: 10px 0 0;
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    position: fixed;
-    bottom: 75px;
-    left: -226px;
-    height: 4px;
-  }
-  :deep(.swiper-pagination-bullet-active) {
-    background: #70573d !important;
-  }
-  :deep(.swiper-pagination-bullet) {
-    width: 26px;
-    height: 4px;
-    border-radius: 2px;
-    background: #ffffff;
-    opacity: 1;
+    gap: 6px;
+    width: 100%;
+
+    :deep(.swiper-pagination-bullet) {
+      width: 24px;
+      height: 4px;
+      border-radius: 2px;
+      background: white;
+      opacity: 1;
+
+      &.swiper-pagination-bullet-active {
+        background: #603c23;
+      }
+    }
   }
   .viewerCla img {
     display: none;
   }
-  width: 100%;
   height: 100%;
   position: relative;
   #myAudio {
@@ -374,45 +296,26 @@ export default {
     height: 60px;
   }
   .main {
-    width: 80%;
+    width: 100%;
     margin: 0 auto;
-    height: 90%;
-    padding: 30px 50px 20px;
+    height: 100%;
+    padding: 30px 0 20px 0;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    &-info {
-      flex: 1;
-      height: 310px;
-    }
     .myTitle {
-      font-size: 28px;
-      padding-bottom: 20px;
-      text-align: center;
-      color: #e6aa4a;
-      font-family: "fzFont", sans-serif;
-    }
-
-    .is-pc {
-      display: block;
-    }
-    .is-mobile {
-      display: none;
-    }
-    .split {
-      width: 200px;
-      height: 12px;
-      object-fit: cover;
-      margin: 25px 0;
+      font-size: 22px;
+      font-weight: 700;
+      margin-bottom: 20px;
+      text-align: left;
     }
     .mainCon {
       position: relative;
       border-radius: 6px;
       overflow: hidden;
-      width: 47%;
-      max-width: 420px;
-      height: 400px;
-      margin: 0 26px 0 0;
+      width: 100%;
+      height: calc(100% - 200px);
       .oneTabNum {
         z-index: 10;
         position: absolute;
@@ -428,9 +331,6 @@ export default {
         height: 100%;
       }
       .contenBox {
-        width: 100%;
-        height: 100%;
-
         .modelBox,
         .videoBox,
         .imgBox {
@@ -451,6 +351,7 @@ export default {
           }
         }
         .imgBox {
+          padding: 0px 50px;
           .smImgBox {
             width: 100%;
             height: 100%;
@@ -460,34 +361,29 @@ export default {
               height: 100%;
               object-fit: contain;
             }
-            img[lazy="loading"] {
-              object-fit: cover;
-            }
           }
         }
       }
-      .contenBoxAc {
-        opacity: 1;
-        pointer-events: auto;
-      }
       .awccJJ {
         cursor: pointer;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        left: 10px;
-        width: 37px;
-        height: 37px;
+        left: 30px;
+        width: 40px;
+        height: 40px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
+        z-index: 1;
         &:focus {
           outline: none;
         }
       }
       .rightJJ {
         left: auto;
-        right: 10px;
-        background-image: url("../assets/images/pc/right.png");
+        right: 30px;
+        background: url("../assets/images/pc/right.png") no-repeat;
+        background-size: cover;
       }
       .noClick {
         cursor: default;
@@ -495,20 +391,20 @@ export default {
       }
     }
     .flooTxt {
+      margin: 0 auto;
+      margin-top: 10px;
+      width: 80%;
+      max-height: 120px;
       .flooTxtBox {
         width: 100%;
         height: 100%;
-        max-height: 300px;
+        padding: 0 30px;
         overflow-y: auto;
-        //隐藏滚动条
-        // &::-webkit-scrollbar {
-        //   display: none;
-        // }
+
         .myTxt {
-          text-indent: 2em;
-          font-size: 18px;
-          color: #e6aa4a;
-          line-height: 26px;
+          font-size: 16px;
+          color: #000;
+          line-height: 24px;
         }
         &::-webkit-scrollbar {
           /*滚动条整体样式*/
@@ -520,7 +416,7 @@ export default {
           /*滚动条里面小方块*/
           border-radius: 10px;
           -webkit-box-shadow: inset 0 0 5px transparent;
-          background: #fabb78;
+          background: rgb(121, 113, 103);
         }
         &::-webkit-scrollbar-track {
           /*滚动条里面轨道*/
@@ -530,7 +426,6 @@ export default {
         }
       }
     }
-
     .flooTxtOne {
       height: 600px;
     }
@@ -571,16 +466,18 @@ export default {
   }
 }
 // 移动端
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
   .home {
-    background: url("../assets/images/hot_bgM.png") no-repeat;
-    background-size: 100% 100%;
-    .logo {
-      position: fixed;
-      top:20px;
-      right: 50%;
-      width: 300px;
-      transform: translate(-50%, 0);
+    background: url("../assets/images/pc/hot_bg_M.png") no-repeat center center;
+    background-size: cover !important;
+    .swiper-pagination {
+      margin: 10px 0 0;
+      gap: 4px;
+
+      :deep(.swiper-pagination-bullet) {
+        width: 15px;
+        height: 3px;
+      }
     }
     #myAudio {
       width: 90vw;
@@ -588,37 +485,15 @@ export default {
     }
     .main {
       width: 100%;
-      height: 100%;
+      height: 92%;
       padding: 0;
       position: absolute;
-      flex-direction: column;
-      &-info {
-        margin-top: -5px;
-        width: 100%;
-        padding: 10px 15px 0px 15px;
-        max-height: calc(100% - 460px);
-        margin-bottom: 100px;
-      }
       .myTitle {
-        font-size: 24px;
-        text-indent: 20px;
-      }
-
-      .is-pc {
-        display: none;
-      }
-      .is-mobile {
-        display: block;
-      }
-      .split {
-        margin: 10px 0;
+        font-size: 20px;
       }
       .mainCon {
         border-radius: 0;
-        margin: 0;
-        width: 100%;
-        padding-top: 50px;
-        height: 310px;
+        height: calc(100% - 195px);
         .contenBox {
           .videoBox {
             padding: 0 30px;
@@ -644,7 +519,7 @@ export default {
         .awccJJ {
           left: 0;
           width: 28px;
-          height: 28px;
+          height: 57px;
           cursor: default;
           background-image: url("../assets/images/pc/icon-left.png");
         }
@@ -655,14 +530,16 @@ export default {
         }
       }
       .flooTxt {
+        margin-top: -5px;
         width: 100%;
-        height: 100%;
-        overflow-y: auto;
+        padding: 10px 15px 0px 15px;
+        max-height: 130px;
+
         .flooTxtBox {
+          padding: 0;
           .myTxt {
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 300;
+            font-size: 14px;
+            line-height: 22px;
           }
         }
       }