upp

hot/src/views/Home.vue

@@ -76,12 +76,10 @@
               <video controls :src="item.url" v-if="index === myInd"></video>
             </div>
             <!-- 图片页面 -->
-            <div
-              class="imgBox"
-              v-else-if="myType === 'img'"
-              @click="lookImg(item)"
-            >
-              <img v-lazy="item" alt="" />
+            <div class="imgBox" v-else-if="myType === 'img'">
+              <div class="smImgBox" @click="lookImg(item)">
+                <img v-lazy="item" alt="" />
+              </div>
             </div>
           </div>
           <!-- 左右箭头 -->
@@ -90,31 +88,29 @@
             class="leftJJ awccJJ"
             :class="{ noClick: myInd === 0 }"
             v-if="data[myType] && data[myType].length > 1"
-          >
-            <img src="../assets/images/pc/left.png" alt="" />
-          </div>
+          ></div>
           <div
             @click="myInd++"
             class="rightJJ awccJJ"
             :class="{ noClick: myInd === data[myType].length - 1 }"
             v-if="data[myType] && data[myType].length > 1"
-          >
-            <img src="../assets/images/pc/right.png" alt="" />
-          </div>
+          ></div>
         </div>
       </div>
 
       <!-- 下面的文字介绍 -->
       <div class="flooTxt">
-        <div class="myTitle">{{ myTitle }}</div>
-        <!-- 视频的介绍 -->
-        <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
-          {{ videoTxt[myInd] }}
-        </div>
-        <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
-          {{ imgTxt[myInd] }}
+        <div class="flooTxtBox">
+          <div class="myTitle">{{ myTitle }}</div>
+          <!-- 视频的介绍 -->
+          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
+            {{ videoTxt[myInd] }}
+          </div>
+          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
+            {{ imgTxt[myInd] }}
+          </div>
+          <div class="myTxt" v-html="myTxt"></div>
         </div>
-        <div class="myTxt" v-html="myTxt"></div>
       </div>
     </div>
     <!-- 查看图片 -->
@@ -200,7 +196,7 @@ export default {
       }/hot/js/data.js?time=${Math.random()}`;
       let result = (await this.$http.get(url)).data;
       const resData = result[this.m];
-      console.log("----", resData);
+      // console.log("----", resData);
       if (resData) {
         this.audio = resData.backgroundMusic;
         // 只有单独的音频上传
@@ -255,7 +251,7 @@ export default {
   }
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 252, 247, 0.8);
+  background-color: rgba(255, 252, 247, 0.6);
   backdrop-filter: blur(10px);
   position: relative;
   #myAudio {
@@ -272,19 +268,21 @@ export default {
     height: 100%;
     padding-top: 40px;
     .mainCon {
-      padding: 40px 60px;
       position: relative;
       border-radius: 6px;
+      overflow: hidden;
       width: 100%;
       height: calc(100% - 200px);
       background: linear-gradient(#929292, #c5c5c5);
       .audioIcon {
+        z-index: 10;
         cursor: pointer;
         position: absolute;
         right: 20px;
         bottom: 30px;
       }
       .flooTabBox {
+        z-index: 10;
         position: absolute;
         bottom: 30px;
         left: 50%;
@@ -313,7 +311,7 @@ export default {
       .contenBoxMain {
         position: relative;
         width: 100%;
-        height: calc(100% - 60px);
+        height: 100%;
       }
       .contenBox {
         width: 100%;
@@ -338,18 +336,24 @@ export default {
           }
         }
         .videoBox {
+          padding: 100px 100px 120px;
           video {
             width: 100%;
             height: 100%;
           }
         }
         .imgBox {
-          cursor: pointer;
-          & > img {
-            pointer-events: none;
+          padding: 100px 100px 120px;
+          .smImgBox {
             width: 100%;
             height: 100%;
-            object-fit: cover;
+            cursor: pointer;
+            & > img {
+              pointer-events: none;
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
           }
         }
       }
@@ -362,11 +366,19 @@ export default {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        left: -50px;
+        left: 10px;
+        width: 37px;
+        height: 37px;
+        background-image: url("../assets/images/pc/left.png");
+        background-size: 100% 100%;
+        &:focus {
+          outline: none;
+        }
       }
       .rightJJ {
         left: auto;
-        right: -50px;
+        right: 10px;
+        background-image: url("../assets/images/pc/right.png");
       }
       .noClick {
         opacity: 0.4;
@@ -377,34 +389,133 @@ export default {
       margin-top: 20px;
       width: 100%;
       height: 160px;
-      overflow-y: auto;
-      .myTitle {
-        color: #b90c0c;
-        font-size: 22px;
-        font-weight: 700;
-        margin-bottom: 10px;
-      }
-      .myTxt {
-        font-size: 16px;
-        color: #333333;
-        line-height: 24px;
-      }
-      &::-webkit-scrollbar {
-        /*滚动条整体样式*/
-        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
-        height: 1px;
+      .flooTxtBox {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        .myTitle {
+          color: #b90c0c;
+          font-size: 22px;
+          font-weight: 700;
+          margin-bottom: 10px;
+        }
+        .myTxt {
+          font-size: 16px;
+          color: #333333;
+          line-height: 24px;
+        }
+        &::-webkit-scrollbar {
+          /*滚动条整体样式*/
+          width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+          height: 1px;
+        }
+        &::-webkit-scrollbar-thumb {
+          /*滚动条里面小方块*/
+          border-radius: 10px;
+          -webkit-box-shadow: inset 0 0 5px transparent;
+          background: #b90c0c;
+        }
+        &::-webkit-scrollbar-track {
+          /*滚动条里面轨道*/
+          -webkit-box-shadow: inset 0 0 5px transparent;
+          border-radius: 10px;
+          background: transparent;
+        }
       }
-      &::-webkit-scrollbar-thumb {
-        /*滚动条里面小方块*/
-        border-radius: 10px;
-        -webkit-box-shadow: inset 0 0 5px transparent;
-        background: #b90c0c;
+    }
+  }
+}
+// 移动端
+@media screen and (max-width: 1000px) {
+  .home {
+    #myAudio {
+      width: 100vw;
+      max-width: 500px;
+    }
+    .main {
+      width: 90%;
+      height: 94%;
+      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;
+            }
+          }
+        }
+
+        .contenBox {
+          .videoBox {
+            padding: 0px 0;
+            position: relative;
+            video {
+              width: 96%;
+              height: auto;
+              position: absolute;
+              top: 50%;
+              left: 2%;
+              transform: translateY(-50%);
+            }
+          }
+          .imgBox {
+            padding: 60px 50px 80px;
+            .smImgBox {
+              cursor: default;
+            }
+          }
+        }
+        .awccJJ {
+          left: 0;
+          width: 28px;
+          height: 57px;
+          cursor: default;
+          background-image: url("../assets/images/pc/icon-left.png");
+        }
+        .rightJJ {
+          left: auto;
+          right: 0;
+          background-image: url("../assets/images/pc/icon-right.png");
+        }
       }
-      &::-webkit-scrollbar-track {
-        /*滚动条里面轨道*/
-        -webkit-box-shadow: inset 0 0 5px transparent;
-        border-radius: 10px;
-        background: transparent;
+      .flooTxt {
+        margin-top: 0;
+        padding: 20px 15px 15px;
+        height: 200px;
+        background-color: #fff;
+        border-radius: 0 0 8px 8px;
+        .flooTxtBox {
+          .myTitle {
+            font-size: 18px;
+          }
+          .myTxt {
+            font-size: 14px;
+            line-height: 22px;
+          }
+        }
       }
     }
   }

scene/public/static/css/oldVer/main0.css

@@ -53,8 +53,8 @@ iframe{
 }
 #closepop {
 	background: url('../../images/icon-close.png') no-repeat;
-	width: 60px;
-	height: 60px;
+	width: 51px;
+	height: 51px;
 	cursor: pointer;
 	position: absolute;
 	right: 30px;

scene/src/assets/style/myBase.css

@@ -60,4 +60,8 @@
   #scrollFrame .thumbImg .overlay {
     font-size: 12px;
   }
+  #closepop {
+    top: 4px;
+    right: 4px;
+  }
 }

scene/src/assets/style/myBase.less

@@ -89,4 +89,8 @@
       }
     }
   }
+  #closepop{
+    top: 4px;
+    right: 4px;
+  }
 }