fix:适配平板横屏模式

scene/src/assets/style/myBase.css

@@ -18,7 +18,7 @@
 }
 
 #thumb-container {
-  width: auto !important;
+  /* width: auto !important; */
 }
 
 #thumb-container .thumbImg .overlay {
@@ -97,7 +97,7 @@
   }
 
   #thumb-container {
-    width: 590px !important;
+    /* width: 590px !important; */
   }
 
 }

zhengquan/src/views/Home/components/homeTabbar.vue

@@ -26,12 +26,18 @@ const openUnit = () => {
   isOpenSceneList.value = false
 };
 
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight  < window.innerWidth
+})
+
 const openMo = ref(false)
 
 </script>
 
 <template>
-  <div class='tabbar-box' v-if="!browser.mobile">
+  <!-- 不是移动端或者是平板端的横屏 -->
+  <div class='tabbar-box' v-if="!browser.mobile || isFlatLandscape">
     <img class="line-up" src="@/assets/images/home/line-up.png" alt="" @click="openScene">
     <!-- 公益单位 -->
     <div class="item-box gonyi">

zhengquan/src/views/Scene/ScenePage.vue

@@ -1115,7 +1115,8 @@ const changePassFu = () => {
       }
 
       100% {
-        background-position-x: v-bind('translateXNumber');
+        // background-position-x: v-bind('translateXNumber');
+        background-position-x: calc(100% - 200px);
       }
     }
 
@@ -1143,7 +1144,8 @@ const changePassFu = () => {
       }
 
       100% {
-        background-position-x: v-bind('translateXNumber');
+        // background-position-x: v-bind('translateXNumber');
+        background-position-x: calc(100% - 200px);
       }
     }
 
@@ -1534,7 +1536,8 @@ const changePassFu = () => {
         }
 
         100% {
-          background-position-x: v-bind('translateXNumber');
+          // background-position-x: v-bind('translateXNumber');
+          background-position-x: calc(100% - 200px);
         }
       }
 

zhengquan/src/views/WelcomePage/WelcomePage.vue

@@ -13,6 +13,11 @@ const router = useRouter()
 
 const countDownNumber = ref(5)
 
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight  < window.innerWidth
+})
+
 onMounted(() => {
 
   let timer = setInterval(() => {
@@ -30,18 +35,13 @@ onMounted(() => {
 
 <template>
   <div class='welcome-page'
-    :style="{ background: `url(${browser.mobile ? bgImgMo : bgImg})`, backgroundSize: `${browser.mobile ? 'cover' : '100% 100%'}`, backgroundPosition: browser.mobile ? 'center' : '' }">
+    :style="{ background: `url(${browser.mobile && !isFlatLandscape ? bgImgMo : bgImg})`, backgroundSize: `${browser.mobile && !isFlatLandscape ? 'cover' : '100% 100%'}`, backgroundPosition: browser.mobile && !isFlatLandscape ? 'center' : '' }">
     <img class="logo" src="@/assets/images/logo.png" alt="">
     <div class="center-box"
-      :style="{ background: `url(${browser.mobile ? centerImgMo : centerImg})`, backgroundSize: '100% 100%' }">
+      :style="{ background: `url(${browser.mobile && !isFlatLandscape ? centerImgMo : centerImg})`, backgroundSize: '100% 100%' }">
     </div>
     <div class="title-box"
-      :style="{ background: `url(${browser.mobile ? sponsorImgMo : sponsorImg})`, backgroundSize: '100% 100%' }"></div>
-    <!-- <div class="sponsor-box">
-      <span style="margin-right: 10px;"><strong>主办单位：</strong>中国证券博物馆</span>|
-      <strong style="margin-left: 10px;">支持单位：</strong>上海证券期货文化发展基金会
-    </div> -->
-
+      :style="{ background: `url(${browser.mobile && !isFlatLandscape ? sponsorImgMo : sponsorImg})`, backgroundSize: '100% 100%' }"></div>
     <!-- 倒数进入主页 -->
     <div class="count-down">
       {{ countDownNumber }}s