upup

src/App.vue

@@ -12,7 +12,10 @@
   />
 
   <!-- 平板横屏提示 -->
-  <div class="landscape-prompt-box">
+  <div
+    id="prompt-box"
+    class="landscape-prompt-box"
+  >
     <img
       src="@/assets/images/pad-l-icon.png"
       alt=""
@@ -56,6 +59,16 @@ 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')
+  }
+}
+
 function isNotMobile() {
   const userAgent = navigator.userAgent || navigator.vendor || window.opera
   const mobileKeywords = [
@@ -76,6 +89,13 @@ onMounted(() => {
     // appDom.clientWidth = '390px'
   }
 
+  if ( window.innerWidth >= 600) {
+    // 初始化
+    updateOrientationClass()
+    // 监听窗口尺寸变化
+    window.addEventListener('resize', updateOrientationClass)
+  }
+
   window.addEventListener(
     "resize",
     () => {
@@ -95,6 +115,7 @@ onMounted(() => {
     },
     true
   )
+
 })
 
 </script>
@@ -112,10 +133,9 @@ body {
   -webkit-touch-callout: none;
 }
 
-.landscape-prompt-box{
-  display: none;
-  @media screen and (min-width: 600px) and (orientation: landscape) {
-    position: fixed;
+.landscape {
+  /* 横屏样式 */
+  position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -128,8 +148,7 @@ body {
     font-family: KaiTi;
     z-index: 2024;
     color: white;
-  }
-  img{
+    img{
     width: 13%;
     margin-bottom: 15px;
   }
@@ -141,6 +160,39 @@ body {
   }
 }
 
+.portrait {
+  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;
+//   }
+// }
+
 
 // 360浏览器不支持not()
 input,

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject, nextTick } from "vue"
+import { ref, computed, inject, nextTick, onMounted } from "vue"
 import { useRouter } from "vue-router"
 import { useStore } from "vuex"
 
@@ -129,6 +129,28 @@ function onClickGoNextPage() {
   }, 2000)
 }
 
+// 将视频资源转换成blob
+const videoData = ref()
+const initVideoSrc = () => {
+  let xhr = new XMLHttpRequest()
+  /*通过get请求获取项目中的mp4文件流，因为axios修改responseType稍微有点麻烦，所以干脆写原生xhr请求了 */
+  xhr.open('GET', require(`@/assets/videos/fade-from-home-to-more-content${windowWidth >= 600 ? '-768' : ''}.mp4`), true)
+  //设置请求结果类型为blob
+  xhr.responseType = 'blob'
+  //回调
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      //创建blob对象，并把值赋给video的src
+      videoData.value = URL.createObjectURL(this.response)
+    }
+  }
+  xhr.send()
+}
+
+onMounted(() => {
+  initVideoSrc()
+})
+
 const backFu = () => {
   if (
     curPageIndex.value === 4 ||
@@ -164,14 +186,15 @@ const backFu = () => {
     <!-- 了解更多视频 -->
     <Transition name="fade-in">
       <video
-        v-if="isShowVideoFadeToNextPage"
+        v-show="isShowVideoFadeToNextPage"
         ref="videoFadeToNextPageEl"
         class="fade-to-next-page"
-        :src="require(`@/assets/videos/fade-from-home-to-more-content${windowWidth >= 768 ? '-768' :''}.mp4`)"
+        :src="videoData"
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
         muted
+        :controls="false"
         @ended="
           router.replace({
             name: 'MoreContentChange',
@@ -201,6 +224,10 @@ const backFu = () => {
         v-if="!store.state.haveShownStartup"
         class="startup"
       />
+      <!-- <Startup
+        v-if="true"
+        class="startup"
+      /> -->
     </Transition>
     <!-- 首页标题 -->
     <div
@@ -261,7 +288,7 @@ const backFu = () => {
         alt=""
         :style="{
           opacity: curPageIndex == 4 ? 1 : 0,
-          zIndex: 2,
+          zIndex: 3,
         }"
         draggable="false"
       >
@@ -271,7 +298,7 @@ const backFu = () => {
         src="@/assets/images/img_stone_all-min.png"
         :style="{
           opacity: curPageIndex == 5 ? 1 : 0,
-          zIndex: 2,
+          zIndex: 3,
         }"
         alt=""
         draggable="false"
@@ -571,8 +598,10 @@ img,
 div {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
-  // transition: opacity 1.5s, top 1.5s, transform 1.5s;
   transition: opacity 1.5s, top 1.5s, width 1.5s, height 1.5s;
+  @media screen and (min-width: 600px) {
+    transition: auto;
+  }
 }
 
 ::-webkit-scrollbar {
@@ -596,6 +625,9 @@ div {
     height: 100%;
     object-fit: cover;
     z-index: 20;
+    &&::-webkit-media-controls{
+      display: none !important;
+    }
   }
 
   > .bg-mask {
@@ -684,8 +716,6 @@ div {
     );
     z-index: 7;
     pointer-events: none;
-    will-change: transform;
-    backface-visibility: hidden;
     z-index: 10;
 
     & > div {
@@ -823,9 +853,16 @@ div {
         v-bind("windowSizeInCssForRef")
     );
     // background: green;
+    will-change: translate;
     transform: translate(-50%, 0);
     z-index: 1;
 
+    @media screen and (min-width: 600px) {
+      transition: top 1.5s, width 1.5s, height 1.5s;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+    }
+
     > .painting-border {
       width: 100%;
       height: 100%;
@@ -844,6 +881,11 @@ div {
       position: absolute;
       left: 50%;
       transform: translate(-50%, 26%);
+      @media screen and (min-width: 600px) {
+        transition: left 1.5s, width 1.5s, height 1.5s;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
     }
   }
 

src/views/HotspotDetail1.vue

@@ -284,7 +284,8 @@ const imgBottomLoc = (nowId, itemId) => {
     z-index: 1;
     bottom: 8%;
     @media screen and (min-width: 600px) {
-      bottom: -40%;
+      bottom: 0;
+      top:33.5vh;
     }
   }
   .HD1_3_2 {
@@ -292,7 +293,8 @@ const imgBottomLoc = (nowId, itemId) => {
     z-index: 2;
     bottom: 0;
     @media screen and (min-width: 600px) {
-      bottom: -55%;
+      bottom: 0;
+      top:48.5vh;
     }
   }
   .HD1_3_3 {
@@ -300,7 +302,9 @@ const imgBottomLoc = (nowId, itemId) => {
     z-index: 3;
     bottom: -8%;
     @media screen and (min-width: 600px) {
-      bottom: -70%;
+      // bottom: -70%;
+      bottom: 0;
+      top:61.5vh;
     }
   }
   .HD1_3Ac {
@@ -347,7 +351,8 @@ const imgBottomLoc = (nowId, itemId) => {
     bottom: -50px;
     transition: right 1s, opacity 0.8s;
     @media screen and (min-width: 600px) {
-      bottom: -35%;
+      // bottom: -35%;
+      top: 50vh;
     }
   }
 

src/views/MoreContent.vue

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

src/views/ShuangGouSheSeDetail.vue

@@ -116,14 +116,18 @@ const curPercentage = computed(() => {
     class="home"
   >
     <div class="title">
-      <span
+      <div
         :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.15)' : '' }"
         @click="curIndex = 0"
-      >双钩</span>
-      <span
+      >
+        双钩
+      </div>
+      <div
         :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.15)' : '' }"
         @click="curIndex = 1"
-      >设色</span>
+      >
+        设色
+      </div>
       <img
         src="@/assets/images/icon_video_active.png"
         class="icon-video"
@@ -299,7 +303,7 @@ const curPercentage = computed(() => {
       48 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    writing-mode: vertical-rl;
+    writing-mode: vertical-rl !important;
     font-family: "KingHwa_OldSong";
     position: absolute;
     right: 13%;

src/views/StartupView.vue

@@ -53,7 +53,7 @@
         v-show="isShowVideo"
         ref="videoEl"
         class="transition-video"
-        :src="require(`@/assets/videos/startup${windowWidth >= 600 ? '-768':''}.mp4`)"
+        :src="videoData"
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
@@ -116,6 +116,28 @@ function onClickStart() {
 function onVideoEnd() {
   store.dispatch('recordShownStartup')
 }
+
+// 将视频资源转换成blob
+const videoData = ref()
+const initVideoSrc = () => {
+  let xhr = new XMLHttpRequest()
+  /*通过get请求获取项目中的mp4文件流，因为axios修改responseType稍微有点麻烦，所以干脆写原生xhr请求了 */
+  xhr.open('GET', require(`@/assets/videos/startup${windowWidth >= 600 ? '-768' : ''}.mp4`), true)
+  //设置请求结果类型为blob
+  xhr.responseType = 'blob'
+  //回调
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      //创建blob对象，并把值赋给video的src
+      videoData.value = URL.createObjectURL(this.response)
+    }
+  }
+  xhr.send()
+}
+
+onMounted(() => {
+  initVideoSrc()
+})
 </script>
 
 <style lang="less" scoped>
@@ -170,11 +192,15 @@ function onVideoEnd() {
   }
 
   >video.transition-video{
+    width: 100%;
+    height: 100%;
     position: absolute;
     left: 50%;
     top: 0;
     height: 100%;
     transform: translateX(-50%);
+    object-fit: cover !important;
+    object-position: top !important;
   }
 
   // @keyframes spin {