Jelajahi Sumber

Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang

任一存 1 tahun lalu
induk
melakukan
fbae32602c
4 mengubah file dengan 50 tambahan dan 8 penghapusan
  1. 26 6
      src/App.vue
  2. 10 0
      src/views/HomeView.vue
  3. 3 2
      src/views/HotspotDetail1.vue
  4. 11 0
      src/views/HotspotDetail3.vue

+ 26 - 6
src/App.vue

@@ -11,6 +11,11 @@
     style="opacity: 0;"
   />
 
+  <!-- 平板横屏提示 -->
+  <div class="landscape-prompt-box">
+    请旋转至竖屏显示使用
+  </div>
+
   <!-- <audio
     id="bg-music2"
     src="./configMultiMedia/music/music2.mp3"
@@ -102,6 +107,26 @@ body {
   -webkit-touch-callout: none;
 }
 
+.landscape-prompt-box{
+  display: none;
+  @media screen and (min-width: 768px) and (orientation: landscape) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 0, 0, 0.336);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: KaiTi;
+    z-index: 2024;
+    color: white;
+  }
+}
+
+
 // 360浏览器不支持not()
 input,
 textarea {
@@ -111,15 +136,10 @@ textarea {
 #app {
   height: 100%;
   position: relative;
-  max-width: 500px;
+  max-width: 100%;
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
-  // background: green;
-  // @media screen and (max-width: 400px) {
-  //   max-width: 390px;
-  //   max-height: 844px;
-  // }
 }
 
 // 字体

+ 10 - 0
src/views/HomeView.vue

@@ -859,6 +859,10 @@ div {
       -80 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
     );
 
+    @media screen and (min-width: 768px) {
+      width: 75%;
+    }
+
     > .painting-stem {
       width: calc(
         364 / v-bind("windowSizeWhenDesignForRef") *
@@ -1198,6 +1202,12 @@ div {
     transform: translate(-50%, 0);
     z-index: 5;
     opacity: 1;
+    @media screen and (min-width: 768px) {
+      bottom: calc(
+      100 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    }
   }
 
   > .painting-box {

+ 3 - 2
src/views/HotspotDetail1.vue

@@ -124,7 +124,6 @@ const backBtnFu = () => {
     // 点击查看回复
     isLookImg.value = true
 
-
     pageShow.value = false
     pageLev.value = 1
   } else emit("close")
@@ -149,7 +148,6 @@ const isShowOperationTip = ref(false)
 const ImgClick = (item) => {
   if (!isShowOperationTip.value) {
     isShowOperationTip.value = true
-
   }
 
   pageShow.value = true
@@ -241,6 +239,9 @@ const imgBottomLoc = (nowId, itemId) => {
     pointer-events: none;
     transition: opacity 1s;
     opacity: 1;
+    @media screen and (min-width: 768px) {
+      font-size: 30px;
+    }
     & > img {
       width: 40px;
     }

+ 11 - 0
src/views/HotspotDetail3.vue

@@ -207,6 +207,11 @@ const handleScroll = () => {
       70 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
+    // 适配平板
+    @media screen and (min-width: 768px) {
+      width: 65%;
+      max-width: auto;
+    }
   }
 
   .content2 {
@@ -230,6 +235,12 @@ const handleScroll = () => {
     position: absolute;
     width: 100%;
     transition: opacity 1s ease;
+    // 适配平板
+    @media screen and (min-width: 768px) {
+      width: 80%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   .operation-tip {