upup

src/App.vue

@@ -8,11 +8,12 @@
   <audio
     id="bg-music"
     src="./configMultiMedia/music/music2.mp3"
-    style="opacity: 0;"
+    style="opacity: 0"
   />
 
   <!-- 平板横屏提示 -->
   <div
+    v-show="windowWidth >= 600"
     id="prompt-box"
     class="landscape-prompt-box"
   >
@@ -35,10 +36,9 @@
 import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
-import {
-// checkLoginStatusAndProcess,
+import // checkLoginStatusAndProcess,
 // getUserFromStorageIfNeed
-} from '@/api.js'
+"@/api.js"
 
 const route = useRoute()
 const router = useRouter()
@@ -59,41 +59,63 @@ const store = useStore()
 
 const time = ref(null)
 
-function updateOrientationClass() {
-  if (window.matchMedia('(orientation: landscape)').matches) {
-    document.getElementById('prompt-box').classList.add('landscape')
-    document.getElementById('prompt-box').classList.remove('portrait')
-  } else {
-    document.getElementById('prompt-box').classList.add('portrait')
-    document.getElementById('prompt-box').classList.remove('landscape')
-  }
-}
+const windowWidth = ref(window.innerWidth)
 
 function isNotMobile() {
   const userAgent = navigator.userAgent || navigator.vendor || window.opera
   const mobileKeywords = [
-    'Android', 'webOS', 'iPhone', 'iPad', 'iPod', 'BlackBerry', 'Windows Phone',
-    'Opera Mini', 'IEMobile', 'Mobile', 'Android'
+    "Android",
+    "webOS",
+    "iPhone",
+    "iPad",
+    "iPod",
+    "BlackBerry",
+    "Windows Phone",
+    "Opera Mini",
+    "IEMobile",
+    "Mobile",
+    "Android",
   ]
 
   // Check if any of the mobile keywords are present in the user agent string.
-  return !mobileKeywords.some(keyword => userAgent.toLowerCase().includes(keyword.toLowerCase()))
+  return !mobileKeywords.some((keyword) =>
+    userAgent.toLowerCase().includes(keyword.toLowerCase())
+  )
 }
 
 onMounted(() => {
-  const appDom = document.getElementById('#app')
+  const appDom = document.getElementById("#app")
   if (isNotMobile) {
     // appDom.style.maxWidth = '390px'
     // appDom.style.maxHeight = '844px'
     // appDom.clientHeight = '844px'
     // appDom.clientWidth = '390px'
   }
+  console.log("当前window.innerWidth1", window.innerWidth)
 
-  if ( window.innerWidth >= 600) {
+  if (window.innerWidth >= 600) {
+    console.log("当前window.innerWidth2", window.innerWidth)
     // 初始化
-    updateOrientationClass()
+    if (window.matchMedia("(orientation: landscape)").matches) {
+      document.getElementById("prompt-box").classList.add("landscape")
+      document.getElementById("prompt-box").classList.remove("portrait")
+    } else {
+      document.getElementById("prompt-box").classList.add("portrait")
+      document.getElementById("prompt-box").classList.remove("landscape")
+    }
     // 监听窗口尺寸变化
-    window.addEventListener('resize', updateOrientationClass)
+    window.addEventListener("resize", () => {
+      // alert(store.state.isInputing)
+      if (!store.state.isInputing) {
+        if (window.matchMedia("(orientation: landscape)").matches) {
+          document.getElementById("prompt-box").classList.add("landscape")
+          document.getElementById("prompt-box").classList.remove("portrait")
+        } else {
+          document.getElementById("prompt-box").classList.add("portrait")
+          document.getElementById("prompt-box").classList.remove("landscape")
+        }
+      }
+    })
   }
 
   window.addEventListener(
@@ -115,9 +137,7 @@ onMounted(() => {
     },
     true
   )
-
 })
-
 </script>
 
 <style lang="less">
@@ -134,8 +154,10 @@ body {
 }
 
 .landscape {
-  /* 横屏样式 */
-  position: fixed;
+  display: none;
+  @media screen and (min-width: 1000px) and (min-height: 600px) {
+    /* 横屏样式 */
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -148,51 +170,33 @@ body {
     font-family: KaiTi;
     z-index: 2024;
     color: white;
-    img{
-    width: 13%;
-    margin-bottom: 15px;
-  }
-  div{
-    color: white;
-    font-family: KaiTi;
-    font-size: 24px;
-    margin-top: 10px;
+    img {
+      display: block;
+      width: 13%;
+      margin-bottom: 15px;
+    }
+    div {
+      display: block;
+      color: white;
+      font-family: KaiTi;
+      font-size: 24px;
+      margin-top: 10px;
+    }
   }
 }
 
 .portrait {
   display: none;
+  // img{
+  //   display: none;
+  // }
+  // div{
+  //   display: none;
+  // }
 }
 
-// .landscape-prompt-box{
-//   display: none;
-//   @media screen and (min-width: 600px) and (orientation: landscape) {
-//     position: fixed;
-//     top: 0;
-//     left: 0;
-//     width: 100%;
-//     height: 100%;
-//     background: url(@/assets/images/pad-l-bg.png);
-//     display: flex;
-//     flex-direction: column;
-//     align-items: center;
-//     justify-content: center;
-//     font-family: KaiTi;
-//     z-index: 2024;
-//     color: white;
-//   }
-//   img{
-//     width: 13%;
-//     margin-bottom: 15px;
-//   }
-//   div{
-//     color: white;
-//     font-family: KaiTi;
-//     font-size: 24px;
-//     margin-top: 10px;
-//   }
-// }
-
+.landscape-prompt-box {
+}
 
 // 360浏览器不支持not()
 input,
@@ -217,13 +221,13 @@ textarea {
 
 // 字体
 @font-face {
-  font-family: 'KingHwa_OldSong';
-  src: url('@/assets/style/KingHwa_OldSong.TTF');
+  font-family: "KingHwa_OldSong";
+  src: url("@/assets/style/KingHwa_OldSong.TTF");
 }
 
 @font-face {
-  font-family: 'KaiTi';
-  src: url('@/assets/style/SIMKAI.woff2');
+  font-family: "KaiTi";
+  src: url("@/assets/style/SIMKAI.woff2");
 }
 
 // 滚动条，只设置某一项可能导致不生效。
@@ -285,7 +289,6 @@ textarea {
   }
 }
 
-
 // 不断渐变显隐，显示时间较长 animation
 .animation-show-long-hide {
   animation: show-long-hide 2.5s infinite;
@@ -328,8 +331,12 @@ textarea {
   z-index: 2016;
   display: flex;
   align-items: center;
-  font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-  line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  font-size: calc(
+    24 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
+  );
+  line-height: calc(
+    30 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
+  );
   font-family: KaiTi;
   color: white;
   transition: all 0.5s;
@@ -337,7 +344,7 @@ textarea {
     font-size: 26px;
     // line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
-  >img{
+  > img {
     width: 30px;
     height: 30px;
     margin-left: 10px;
@@ -347,7 +354,7 @@ textarea {
     }
   }
 }
-.viewer-button-home{
+.viewer-button-home {
   background: url(@/assets/images/icon_cancel.png);
   background-size: 100% 100%;
   background-color: rgba(0, 0, 0, 0) !important;
@@ -356,9 +363,9 @@ textarea {
   top: 10px !important;
   width: 40px !important;
   border: none !important;
-  -webkit-tap-highlight-color:none !important;
+  -webkit-tap-highlight-color: none !important;
 }
-.viewer-button-home::before{
+.viewer-button-home::before {
   display: none !important;
 }
-</style>
+</style>

src/main.js

@@ -28,6 +28,7 @@ import ProgressBar from '@/components/ProgressBar.vue'
 
 import Vue3TouchEvents from "vue3-touch-events"
 
+
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
 
@@ -70,7 +71,8 @@ const userAgent = navigator.userAgent
 if (
   uaInfo.device.type === 'mobile' ||
   (uaInfo.browser.name === 'Edge' && uaInfo.os.name === 'Linux' && window.innerWidth < 1024 ) || // 尽量判断出移动端edge
-  /Mobi|Android|iPhone|SymbianOS|Windows Phone|iPad|iPod|MIUI|Mi Pad|Redmi Pad|Macintosh/i.test(navigator.userAgent)
+  /Mobi|Android|iPhone|SymbianOS|Windows Phone|iPad|iPod|MIUI|Mi Pad|Redmi Pad|HUAWEIMRX-AL09|Macintosh/i.test(navigator.userAgent)
+  || (window.innerWidth >= 600 && window.innerWidth < 1000)
 ) {
   // app.provide('$isMobile', true)
   // window.location.assign(process.env.VUE_APP_MOBILE_URL)

src/store/index.js

@@ -10,6 +10,7 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
+    isInputing: false,
     // loginStatus: loginStatusEnum.notLogin,
     // token: '',
     // userInfo: {

src/views/GameView.vue

@@ -7,6 +7,8 @@ const input1 = ref("")
 const input2 = ref("")
 const input1Ref = ref(null)
 const input2Ref = ref(null)
+import { useStore } from "vuex"
+const store = useStore()
 
 const router = useRouter()
 
@@ -49,12 +51,14 @@ const saveTitle = () => {
       input1.value + "\n" + '线上创作'
     )
     isShowToastFromGame.value = false
+    store.state.isInputing = false
   }
 }
 
 onMounted(() => {
   window.isShowToastFromGame = () => {
     isShowToastFromGame.value = true
+    store.state.isInputing = true
     input1.value = ""
     input2.value = ""
   }
@@ -97,7 +101,10 @@ onMounted(() => {
       </div>
       <div
         class="cencel-btn"
-        @click="isShowToastFromGame = false"
+        @click="() =>{
+          isShowToastFromGame = false
+          store.state.isInputing = false
+        }"
       >
         取消
       </div>

src/views/HotspotDetail3.vue

@@ -173,7 +173,7 @@ const goState2 = () => {
       const allWidth = document
         .getElementById("content2Img")
         .getBoundingClientRect().width
-      content2Dom.value.scrollLeft = allWidth * x - 140
+      content2Dom.value.scrollLeft = window.innerWidth >= 600 ? allWidth * x - 140 : allWidth * x - 80
       isShowOperationTip.value = true
     }
   }, 5)
@@ -215,7 +215,7 @@ const handleScroll = () => {
   .shadow-box {
     position: absolute;
     bottom: calc(
-      40 / v-bind("windowSizeWhenDesignForRef") *
+      55 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
     left: 50%;
@@ -223,20 +223,22 @@ const handleScroll = () => {
   }
 
   .content1 {
-    width: 90%;
+    width: 85%;
     max-height: 80vh;
     position: absolute;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, 46%);
     transition: opacity 1s ease;
-    bottom: calc(
-      70 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
+    bottom: 50%;
+    // bottom: calc(
+    //   120 / v-bind("windowSizeWhenDesignForRef") *
+    //     v-bind("windowSizeInCssForRef")
+    // );
     // 适配平板
     @media screen and (min-width: 600px) {
       width: 65%;
       max-width: auto;
+      transform: translate(-50%, 0%);
       bottom: calc(
         105 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")

src/views/MoreContent.vue

@@ -782,7 +782,7 @@ body {
         font-size: 18px;
         @media screen and (min-width: 600px) {
           font-size: 24px;
-          margin-top: 32%;
+          margin-top: 25%;
         }
       }
 

src/views/PaintingDetailList.vue

@@ -74,7 +74,10 @@ const $env = inject("$env")
 
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
-const paintingList = configExcel["画作"]
+const paintingList = configExcel['画作'].filter((item) => {
+  // return item['标题'] !== '竹禽图卷' && item['标题'] !== '桃竹双凫图'
+  return item['序号'] !== '21' && item['序号'] !== '22'
+})
 
 /**
  * swiper

src/views/PaintingList.vue

@@ -226,7 +226,8 @@ const isReady = ref(false)
 
 
 const newConfigExcel = configExcel['画作'].filter((item) => {
-  return item['标题'] !== '竹禽图卷' && item['标题'] !== '桃竹双凫图'
+  // return item['标题'] !== '竹禽图卷' && item['标题'] !== '桃竹双凫图'
+  return item['序号'] !== '21' && item['序号'] !== '22'
 })
 
 const menuInfo = {}

src/views/ShuangGouSheSeDetail.vue

@@ -117,16 +117,20 @@ const curPercentage = computed(() => {
   >
     <div class="title">
       <div
+        class="title-detail"
         :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.15)' : '' }"
         @click="curIndex = 0"
       >
-        双钩
+        <div>双</div>
+        <div>构</div>
       </div>
       <div
+        class="title-detail"
         :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.15)' : '' }"
         @click="curIndex = 1"
       >
-        设色
+        <div>设</div>
+        <div>色</div>
       </div>
       <img
         src="@/assets/images/icon_video_active.png"
@@ -196,7 +200,7 @@ const curPercentage = computed(() => {
     </div> -->
     <div
       class="text"
-      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '20vh' : 'auto' }"
+      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '10vh' : 'auto' }"
     >
       {{ text2[curIndex] }}
     </div>
@@ -313,6 +317,10 @@ const curPercentage = computed(() => {
     display: flex;
     justify-content: center;
     align-items: center;
+    .title-detail {
+      display: flex;
+      // flex-direction: column;
+    }
     .icon-video {
       width: calc(
         36 / v-bind("windowSizeWhenDesignForRef") *
@@ -411,7 +419,7 @@ const curPercentage = computed(() => {
     display: flex;
     position: absolute;
     right: 32%;
-    top: 40vh;
+    top: 45vh;
     // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
     color: #707f48;
     font-size: calc(