fix：bug

zhengquan/src/App.vue

@@ -60,6 +60,10 @@ onMounted(() => {
   font-family: 'AlibabaPuHuiTi2.0-105Heavy';
   src: url('./assets/fonts/AlibabaPuHuiTi2.0-105Heavy.ttf');
 }
+@font-face {
+  font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
+  src: url('./assets/fonts/AlibabaPuHuiTi2.0-75SemiBold.ttf');
+}
 
 @font-face {
   font-family: 'SourceHanSansCN-Medium';

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

@@ -139,12 +139,18 @@ watch(curProject, (newValue: string) => {
   console.log(newValue)
 })
 
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight < window.innerWidth
+})
+
 </script>
 
 <template>
   <div class='scene-list-box'>
     <!-- 信息展示 -->
-    <div class="info-shade" v-show="curUnit && isShowInfoBox && !browser.mobile">
+    <div class="info-shade"
+      v-show="(curUnit && isShowInfoBox && !browser.mobile) || (isFlatLandscape && curUnit && isShowInfoBox)">
       <div id="infoBoxPc" class="info-box">
         <img class="close-icon" @click="isShowInfoBox = false" src="@/assets/images/close-icon.png" alt="">
         <div class="info-box-top"></div>
@@ -179,7 +185,7 @@ watch(curProject, (newValue: string) => {
 
     </div>
     <!-- 信息展示移动端 -->
-    <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile">
+    <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile && !isFlatLandscape">
       <!-- 返回按钮 -->
       <img class="back-icon" src="@/assets/images/scene/back.png" @click="isShowInfoBox = false" alt="">
       <div class="content-info">
@@ -198,7 +204,7 @@ watch(curProject, (newValue: string) => {
       </div>
 
     </div>
-    <div class="content" v-if="!browser.mobile">
+    <div class="content" v-if="!browser.mobile || isFlatLandscape">
       <!-- 左箭头 -->
       <div class="arrows-left" :style="{ opacity: startItem != 0 ? '1' : '0' }"
         @click="() => { startItem != 0 ? startItem -= 21 : '' }">
@@ -223,7 +229,7 @@ watch(curProject, (newValue: string) => {
           </div>
           <div v-if="startItem + item - 1 < store.dataAll.welfareList.length"
             :class="store.dataAll.welfareList[startItem + item - 1].title.length > 8 ? 'item-name' : ''"
-            :style="{ whiteSpace: 'nowrap', marginTop: '-0.2vh' }"> {{ store.dataAll.welfareList[startItem + item -
+            :style="{ whiteSpace: 'nowrap' }"> {{ store.dataAll.welfareList[startItem + item -
               1] ? store.dataAll.welfareList[startItem + item - 1].title : '' }}</div>
         </div>
       </div>
@@ -249,8 +255,10 @@ watch(curProject, (newValue: string) => {
         </div>
       </div>
     </div>
-    <img v-show="browser.mobile" class="icon-down" src="@/assets/images/home/icon-down.png" alt="" @click="close">
-    <img v-show="!browser.mobile" class="line-down" src="@/assets/images/home/line-down.png" alt="" @click="close">
+    <img v-show="browser.mobile && !isFlatLandscape" class="icon-down" src="@/assets/images/home/icon-down.png" alt=""
+      @click="close">
+    <img v-show="!browser.mobile || isFlatLandscape" class="line-down" src="@/assets/images/home/line-down.png" alt=""
+      @click="close">
   </div>
 </template>
 
@@ -293,6 +301,7 @@ watch(curProject, (newValue: string) => {
       top: 3%;
       right: 1%;
       cursor: pointer;
+      z-index: 100;
     }
   }
 
@@ -390,7 +399,7 @@ watch(curProject, (newValue: string) => {
             .option-list {
               min-width: 80%;
               max-width: 100%;
-              max-height: 150px;
+              max-height: 10vh;
               overflow-y: auto;
               // position: absolute;
               top: 100%;
@@ -523,8 +532,12 @@ watch(curProject, (newValue: string) => {
 
         .list-item-con {
           width: 100%;
-          height: 90%;
-          // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+          min-height: 85%;
+          max-height: 90%;
+          background: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
 
           // object-fit: cover;
@@ -888,5 +901,4 @@ watch(curProject, (newValue: string) => {
     }
 
   }
-}
-</style>
+}</style>

zhengquan/src/views/Scene/ScenePage.vue

@@ -186,9 +186,9 @@ const animalZhenShuNumber = ref(48 as number)
 const animalZhenShu = computed(() => {
   return `steps(${animalZhenShuNumber.value})`
 })
-const translateXNumber = computed(() => {
-  return browser.mobile ? `${-100 * animalZhenShuNumber.value}px` : `${-200 * animalZhenShuNumber.value}px`
-})
+// const translateXNumber = computed(() => {
+//   return browser.mobile ? `${-100 * animalZhenShuNumber.value}px` : `${-200 * animalZhenShuNumber.value}px`
+// })
 
 // const translateXNumberChange = computed(() => {
 //   return `${-200 * animalZhenShuNumber.value}px`
@@ -801,7 +801,7 @@ const changePassFu = () => {
     .conttent {
       width: 30%;
       height: 40%;
-      background: rgba(255, 0, 0, 0.562);
+      background: rgba(0, 0, 0, 0.7);
       border-radius: 15px;
       display: flex;
       flex-direction: column;
@@ -878,7 +878,8 @@ const changePassFu = () => {
 
     .box-content {
       padding: 30px;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(15px);
       border-radius: 10px;
       color: white;
       line-height: 35px;
@@ -886,34 +887,47 @@ const changePassFu = () => {
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      max-width: 90%;
+      box-sizing: border-box;
+      box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+      // font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
 
       .text {
         display: -webkit-inline-box;
+        text-align: center;
         // align-items: center;
 
         bottom {
-          padding: 5px 20px;
-          font-size: 14px;
+          padding: 3px 15px;
+          font-size: 16px;
           border: white solid 1px;
           border-radius: 10px;
           height: 30px;
           cursor: pointer;
           height: 20px;
           margin: 0 5px;
+          font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
+          background: #bc121b4b ;
+          border: 1.2px #b3312abe solid;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
+
         }
 
       }
 
       .i-know {
         width: 200px;
-        color: black;
-        background: white;
+        color: white;
+        background: #bc121bbb;
         border-radius: 10px;
         border: 1px solid rgba(0, 0, 0, 0.5);
         cursor: pointer;
         display: flex;
         justify-content: center;
         margin-top: 20px;
+        font-family: 'AlibabaPuHuiTi2.0-105Heavy';
+        box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.5);
+
       }
 
 

zhengquan/src/views/UnitWall/components/unitList.vue

@@ -34,14 +34,12 @@ watch(hoverIndex, () => {
 }, { immediate: true })
 
 
-// watch(curUnit, (newVal: any) => {
-//   if (newVal) {
+// 判断是否为平板横屏
+const isFlatLandscape = computed(() => {
+  return browser.mobile && window.innerWidth > 1000 && window.innerHeight < window.innerWidth
+})
+
 
-//   }
-// }, {
-//   deep: true,
-//   immediate: true
-// })
 
 const goBack = () => {
   router.replace({
@@ -114,7 +112,8 @@ watch(curProject, (newValue: string) => {
   <div class='scene-list-box'>
     <img class="backBtn" src="@/assets/images/scene/back.png" alt="" @click="goBack()">
     <!-- 信息展示 -->
-    <div class="info-shade" v-show="curUnit && isShowInfoBox && !browser.mobile">
+    <div class="info-shade"
+      v-show="(curUnit && isShowInfoBox && !browser.mobile) || (isFlatLandscape && curUnit && isShowInfoBox)">
       <div id="infoBoxPc" class="info-box">
         <img class="close-icon" @click="isShowInfoBox = false" src="@/assets/images/close-icon.png" alt="">
         <div class="info-box-top"></div>
@@ -153,7 +152,7 @@ watch(curProject, (newValue: string) => {
 
     </div>
     <!-- 信息展示移动端 -->
-    <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile">
+    <div class="info-box-mo" v-show="isShowInfoBox && browser.mobile && !isFlatLandscape">
       <!-- 返回按钮 -->
       <img class="back-icon" src="@/assets/images/scene/back.png" @click="isShowInfoBox = false" alt="">
       <div class="content-info">
@@ -176,7 +175,7 @@ watch(curProject, (newValue: string) => {
       </div>
 
     </div>
-    <div class="content" v-if="!browser.mobile">
+    <div class="content" v-if="!browser.mobile || isFlatLandscape">
       <!-- 左箭头 -->
       <div class="arrows-left" :style="{ opacity: startItem != 0 ? '1' : '0' }"
         @click="() => { startItem != 0 ? startItem -= 21 : '' }">
@@ -201,7 +200,7 @@ watch(curProject, (newValue: string) => {
           </div>
           <div v-if="startItem + item - 1 < store.dataAll.welfareList.length"
             :class="store.dataAll.welfareList[startItem + item - 1].title.length > 8 ? 'item-name' : ''"
-            :style="{ whiteSpace: 'nowrap', marginTop: '0' }"> {{ store.dataAll.welfareList[startItem + item -
+            :style="{ whiteSpace: 'nowrap' }"> {{ store.dataAll.welfareList[startItem + item -
               1] ? store.dataAll.welfareList[startItem + item - 1].title : '' }}</div>
         </div>
       </div>
@@ -279,6 +278,7 @@ watch(curProject, (newValue: string) => {
       top: 3%;
       right: 1%;
       cursor: pointer;
+      z-index: 100;
     }
   }
 
@@ -402,7 +402,7 @@ watch(curProject, (newValue: string) => {
             .option-list {
               min-width: 80%;
               max-width: 100%;
-              max-height: 150px;
+              max-height: 10vh;
               overflow-y: auto;
               // position: absolute;
               top: 100%;
@@ -535,8 +535,12 @@ watch(curProject, (newValue: string) => {
 
         .list-item-con {
           width: 100%;
-          height: 90%;
-          // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+          min-height: 85%;
+          max-height: 90%;
+          background: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
 
           // object-fit: cover;