hot修改

hot/src/views/Home.vue

@@ -9,21 +9,6 @@
           :src="urlToFitFu(audio)"
           controls
         ></audio>
-        <!-- 音频图标 -->
-        <div
-          class="audioIcon"
-          v-if="audio && !isOneAduio"
-          @click="audioSta = !audioSta"
-          :title="audioSta ? '关闭音频' : '打开音频'"
-        >
-          <img
-            :src="
-              require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
-            "
-            alt=""
-          />
-        </div>
-
         <!-- 如果只有一个模块 -->
         <div
           class="oneTabNum"
@@ -37,36 +22,6 @@
           {{ myInd + 1 }} / {{ data[myType].length }}
         </div>
 
-        <!-- 底部的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=""
-            />
-            {{ 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
-            >
-          </div>
-        </div>
-
         <!-- 主要内容 -->
 
         <div class="contenBoxMain">
@@ -134,10 +89,54 @@
     <viewer class="viewerCla" ref="viewer" :images="lookPics">
       <img :src="lookPics[0]" alt="" />
     </viewer>
+
+    <!-- 底部的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>
+          {{ 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
+          >
+        </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>音频</div>
+      </div>
+    </div>
   </div>
 </template>
 
-
 <script>
 export default {
   name: "Home",
@@ -205,13 +204,13 @@ 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", "");
       // } else if (url.includes("http://super.4dage.com")) {
       //   return url.replace("http://super.4dage.com", "");
-      // } else return resUrl;  
+      // } else return resUrl;
     },
 
     // 点击左右箭头
@@ -228,9 +227,10 @@ export default {
     async getData() {
       // https://www.4dmodel.com/
 
-      let url = `https://super.4dage.com/data/${   // 线上数据
+      let url = `https://super.4dage.com/data/${
+        // 线上数据
 
-      // let url = `/data/${
+        // let url = `/data/${
         //本地化部署
         this.id
       }/hot/js/data.js?time=${Math.random()}`;
@@ -296,7 +296,8 @@ export default {
   }
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 252, 247, 0.6);
+  background-color: rgba(255, 252, 247, 0.8);
+  // background-color: orange;
   backdrop-filter: blur(10px);
   position: relative;
   #myAudio {
@@ -319,13 +320,6 @@ export default {
       overflow: hidden;
       width: 100%;
       height: calc(100% - 200px);
-      .audioIcon {
-        z-index: 10;
-        cursor: pointer;
-        position: absolute;
-        right: 20px;
-        bottom: 30px;
-      }
       .oneTabNum {
         z-index: 10;
         position: absolute;
@@ -334,33 +328,7 @@ export default {
         transform: translateX(-50%);
         font-size: 14px;
       }
-      .flooTabBox {
-        z-index: 10;
-        position: absolute;
-        bottom: 30px;
-        left: 50%;
-        transform: translateX(-50%);
-        display: flex;
-        .tabRow {
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          margin: 0 12px;
-          font-size: 12px;
-          background-color: #dedede;
-          padding: 0px 14px;
-          height: 36px;
-          border-radius: 18px;
-          & > img {
-            margin-right: 6px;
-          }
-        }
-        .tabRowAc {
-          background-color: #b90c0c;
-          pointer-events: none;
-          color: #d6b970;
-        }
-      }
+
       .contenBoxMain {
         position: relative;
         width: 100%;
@@ -389,14 +357,14 @@ export default {
           }
         }
         .videoBox {
-          padding: 100px 100px 120px;
+          padding: 0px 50px;
           video {
             width: 100%;
             height: 100%;
           }
         }
         .imgBox {
-          padding: 100px 100px 120px;
+          padding: 0px 50px;
           .smImgBox {
             width: 100%;
             height: 100%;
@@ -447,10 +415,11 @@ export default {
         height: 100%;
         overflow-y: auto;
         .myTitle {
-          color: #b90c0c;
+          // color: #FCDA99;
           font-size: 22px;
           font-weight: 700;
           margin-bottom: 10px;
+          text-align: center;
         }
         .myTxt {
           font-size: 16px;
@@ -466,7 +435,7 @@ export default {
           /*滚动条里面小方块*/
           border-radius: 10px;
           -webkit-box-shadow: inset 0 0 5px transparent;
-          background: #b90c0c;
+          background: #fcda99;
         }
         &::-webkit-scrollbar-track {
           /*滚动条里面轨道*/
@@ -480,6 +449,40 @@ export default {
       height: 600px;
     }
   }
+
+  // 底部
+  .flooTabBox {
+    z-index: 10;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    .tabRow {
+      width: 60px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 12px;
+      // background-color: #dedede;
+      color: #fff;
+      border-radius: 18px;
+      & > img {
+        width: 40px;
+        display: inline-block;
+        margin-bottom: 3px;
+      }
+      & > div {
+        min-width: 40px;
+        text-align: center;
+      }
+    }
+    .tabRowAc {
+      // background-color: #c8aa7d;
+      pointer-events: none;
+      // color: #c7aa7c;
+    }
+  }
 }
 // 移动端
 @media screen and (max-width: 1000px) {
@@ -489,57 +492,31 @@ export default {
       max-width: 500px;
     }
     .main {
-      width: 90%;
-      height: 94%;
+      width: 100%;
+      height: 100%;
       padding: 0;
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
 
       .mainCon {
-        border-radius: 8px 8px 0 0;
-        .audioIcon {
-          cursor: default;
-          right: auto;
-          bottom: auto;
-          top: 6px;
-          left: 6px;
-          & > img {
-            width: 30px;
-          }
-        }
-        .flooTabBox {
-          width: 100%;
-          bottom: 20px;
-          justify-content: center;
-          .tabRow {
-            cursor: default;
-            margin: 0 6px;
-            padding: 0 10px;
-            height: 32px;
-            & > img {
-              width: 16px;
-            }
-          }
-        }
-
+        border-radius: 0;
+        height: calc(100% - 260px);
         .contenBox {
           .videoBox {
-            padding: 0px 0;
+            padding: 0 30px;
             position: relative;
             video {
-              width: 96%;
+              width: calc(100% - 60px);
               max-height: 100%;
               height: auto;
               position: absolute;
               top: 50%;
-              left: 2%;
-              transform: translateY(-50%);
+              left: 50%;
+              transform: translate(-50%, -50%);
             }
           }
           .imgBox {
-            padding: 60px 50px 80px;
+            // padding: 60px 50px 80px;
+            padding: 0 30px;
             .smImgBox {
               cursor: default;
             }
@@ -578,7 +555,21 @@ export default {
         height: 100%;
       }
     }
+    .flooTabBox {
+      width: 100%;
+      bottom: 20px;
+      right: 0;
+      justify-content: center;
+      .tabRow {
+        cursor: default;
+        margin: 0 6px;
+        padding: 0 10px;
+        height: 32px;
+        & > img {
+          width: 30px;
+        }
+      }
+    }
   }
 }
 </style>
-