'featv2'

src/assets/base.css

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

src/views/Home.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="home">
-    <div :class="['main', { 'specialHome': myTitle === '椰壳镶银里雕人物诗句套杯' }]">
-      <div class="myTitle is-mobile">{{ myTitle }}</div>
+    <div :class="['main']">
+      <div class="myTitle" style="display: none">{{ 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 &&
@@ -19,20 +25,36 @@
 
         <div class="contenBoxMain">
           <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>
@@ -43,16 +65,23 @@
       </div>
 
       <div class="main-info">
-        <div class="myTitle is-pc">{{ myTitle }}</div>
+        <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-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>
@@ -65,24 +94,45 @@
 
     <!-- 底部的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>
@@ -90,8 +140,8 @@
 </template>
 
 <script>
-import Swiper from "swiper"
-import "swiper/css/swiper.min.css"
+import Swiper from "swiper";
+import "swiper/css/swiper.min.css";
 
 export default {
   name: "Home",
@@ -136,22 +186,22 @@ export default {
 
       // 只有标题和文字（没有视频，没有模型，没有图片）
       oneTxt: false,
-    }
+    };
   },
   watch: {
     myType() {
-      this.myInd = 0
+      this.myInd = 0;
     },
     // 音频的开启和关闭
     audioSta(val) {
-      const dom = document.querySelector("#myAudio")
+      const dom = document.querySelector("#myAudio");
       if (val) {
-        dom.play()
+        dom.play();
         dom.onended = () => {
           // console.log("----音频播放完毕");
-          this.audioSta = false
-        }
-      } else dom.pause()
+          this.audioSta = false;
+        };
+      } else dom.pause();
     },
   },
   computed: {},
@@ -159,7 +209,7 @@ export default {
   methods: {
     // 本地化 url 适配
     urlToFitFu(url) {
-      return url
+      return url;
       // const resUrl = url;
       // if (url.includes("https://super.4dage.com")) {
       //   return url.replace("https://super.4dage.com", "");
@@ -170,15 +220,15 @@ export default {
 
     // 点击左右箭头
     cutMyInd(num, flag) {
-      if (flag) return
-      this.myInd += num
+      if (flag) return;
+      this.myInd += num;
     },
     // 点击查看大图
     lookImg(url) {
-      let dom = this.$refs.viewer.$viewer
-      this.lookPics = [url]
-      dom.options.toolbar = false
-      dom.show()
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
+      dom.options.toolbar = false;
+      dom.show();
     },
     async getData() {
       // https://www.4dmodel.com/
@@ -189,12 +239,12 @@ export default {
         // let url = `/data/${
         //本地化部署
         this.id
-        }/hot/js/data.js?time=${Math.random()}`
-      let result = (await this.$http.get(url)).data
-      const resData = result[this.m]
+      }/hot/js/data.js?time=${Math.random()}`;
+      let result = (await this.$http.get(url)).data;
+      const resData = result[this.m];
       // console.log("----", resData);
       if (resData) {
-        this.audio = resData.backgroundMusic
+        this.audio = resData.backgroundMusic;
         // 只有单独的音频上传
         if (
           resData.backgroundMusic &&
@@ -202,71 +252,74 @@ export default {
           !resData.video &&
           !resData.images
         ) {
-          this.isOneAduio = true
+          this.isOneAduio = true;
         }
         // 底部的tab
-        const arr = []
-        const obj = {}
+        const arr = [];
+        const obj = {};
         if (resData.model) {
-          obj.model = resData.model
-          arr.push({ id: 1, type: "model", name: "模型" })
+          obj.model = resData.model;
+          arr.push({ id: 1, type: "model", name: "模型" });
         }
         if (resData.video) {
-          obj.video = resData.video
-          arr.push({ id: 2, type: "video", name: "视频" })
+          obj.video = resData.video;
+          arr.push({ id: 2, type: "video", name: "视频" });
         }
         if (resData.images) {
-          obj.img = resData.images
-          arr.push({ id: 3, type: "img", name: "图片" })
+          obj.img = resData.images;
+          arr.push({ id: 3, type: "img", name: "图片" });
         }
-        this.flooTab = arr
-        this.data = obj
+        this.flooTab = arr;
+        this.data = obj;
 
         // 当前type的值 应该为
-        if (resData.model) this.myType = "model"
-        else if (resData.video) this.myType = "video"
-        else if (resData.images) this.myType = "img"
+        if (resData.model) this.myType = "model";
+        else if (resData.video) this.myType = "video";
+        else if (resData.images) this.myType = "img";
 
-        this.myTitle = resData.title || ""
-        this.myTxt = resData.content || ""
-        this.videoTxt = resData.videosDesc || []
-        this.imgTxt = resData.imagesDesc || []
+        this.myTitle = resData.title || "";
+        this.myTxt = resData.content || "";
+        this.videoTxt = resData.videosDesc || [];
+        this.imgTxt = resData.imagesDesc || [];
 
         // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
         if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
-          this.oneTxt = true
+          this.oneTxt = true;
         }
 
         this.$nextTick(() => {
-          const _this = this
-          this.swiper = new Swiper('.contenBoxMain', {
+          const _this = this;
+          this.swiper = new Swiper(".contenBoxMain", {
             on: {
               slideChange() {
-                _this.myInd = this.activeIndex
-              }
+                _this.myInd = this.activeIndex;
+              },
             },
             pagination: {
-              el: '.swiper-pagination',
-            }
-          })
-        })
+              el: ".swiper-pagination",
+            },
+          });
+        });
       }
     },
   },
   mounted() {
-    this.getData()
+    this.getData();
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
 .home {
-  font-family: 'fzFont';
-  background: url("../assets/images/pc/hot_bg.png") no-repeat center center;
+  font-family: "fzFont", sans-serif;
+  background: url("../assets/images/pc/hot_bg.png") no-repeat;
   background-color: rgba(transparent, 0.8);
   background-size: 100% 100%;
   border-radius: 10px;
-  color: #F7E7DC;
+  color: #f7e7dc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   .swiper-pagination {
     display: flex;
     align-items: center;
@@ -283,7 +336,7 @@ export default {
     width: 26px;
     height: 4px;
     border-radius: 2px;
-    background: #FFFFFF;
+    background: #ffffff;
     opacity: 1;
   }
   .viewerCla img {
@@ -302,24 +355,34 @@ export default {
     height: 60px;
   }
   .main {
-    width: 100%;
+    width: 80%;
     margin: 0 auto;
-    height: 100%;
+    height: 90%;
     padding: 30px 50px 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     &-info {
       flex: 1;
+      margin-bottom: 22%;
     }
     .myTitle {
       font-size: 24px;
-      margin-bottom: 25px;
-      text-align: center;
+      color: rgba(168, 46, 43, 1);
+      font-family: "fzFont", sans-serif;
+    }
 
-      &.is-mobile {
-        display: none;
-      }
+    .is-pc {
+      display: block;
+    }
+    .is-mobile {
+      display: none;
+    }
+    .split {
+      width: 200px;
+      height: 12px;
+      object-fit: cover;
+      margin: 25px 0;
     }
     .mainCon {
       position: relative;
@@ -327,7 +390,7 @@ export default {
       overflow: hidden;
       width: 47%;
       max-width: 420px;
-      height: 320px;
+      height: 400px;
       margin: 0 26px 0 0;
       .oneTabNum {
         z-index: 10;
@@ -376,7 +439,7 @@ export default {
               height: 100%;
               object-fit: contain;
             }
-            img[lazy='loading'] {
+            img[lazy="loading"] {
               object-fit: cover;
             }
           }
@@ -421,8 +484,8 @@ export default {
         //   display: none;
         // }
         .myTxt {
-          font-size: 18px;
-          color: #F7E7DC;
+          font-size: 13px;
+          color: rgba(0, 0, 0, 1);
           line-height: 26px;
         }
         &::-webkit-scrollbar {
@@ -445,28 +508,12 @@ export default {
         }
       }
     }
+
     .flooTxtOne {
       height: 600px;
     }
   }
 
-  .specialHome {
-    flex-direction: column;
-    .myTitle {
-      &.is-mobile {
-        display: block;
-      }
-    }
-    .mainCon {
-      margin: 0;
-    }
-    .main-info {
-      .myTitle {
-        display: none;
-      }
-    }
-  }
-
   // 底部
   .flooTabBox {
     z-index: 10;
@@ -504,6 +551,8 @@ export default {
 // 移动端
 @media screen and (max-width: 800px) {
   .home {
+    background: url("../assets/images/hot_bgM.png") no-repeat;
+    background-size: 100% 100%;
     #myAudio {
       width: 90vw;
       max-width: 500px;
@@ -521,21 +570,24 @@ export default {
         max-height: 98px;
       }
       .myTitle {
-        font-size: 16px;
-        margin-bottom: 20px;
+        font-size: 24px;
+        text-indent: 20px;
+      }
 
-        &.is-pc {
-          display: none;
-        }
-        &.is-mobile {
-          display: block;
-        }
+      .is-pc {
+        display: none;
+      }
+      .is-mobile {
+        display: block;
+      }
+      .split{
+        margin: 10px 0;
       }
       .mainCon {
         border-radius: 0;
         margin: 0;
         width: 100%;
-        height: calc(100% - 195px);
+        height: calc(100% - 235px);
         .contenBox {
           .videoBox {
             padding: 0 30px;