热点详情界面 pc端和移动端 样式bug修复

src/views/HomeMobile.vue

@@ -200,14 +200,14 @@
             </div>
           </transition>
         </button> -->
-      <button @click="onClickShare">
+      <!-- <button @click="onClickShare">
         <img
           class="share"
           src="@/assets/images/share-mobile.png"
           alt=""
           draggable="false"
         >
-      </button>
+      </button> -->
     </menu>
 
     <div class="desc-wrap">
@@ -608,9 +608,11 @@ export default {
         line-height: 26px;
         font-family: Adobe Heiti Std;
         top: 77px;
+        bottom: 40px;
         left: 26px;
         right: 26px;
         width: calc(100% - 26px * 2);
+        overflow: auto;
       }
     }
   }

src/views/HomeWeb.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="hotspot-home">
+  <div
+    ref="comp-root"
+    class="hotspot-home"
+  >
     <audio
       ref="bg-audio"
       class="bg-audio"
@@ -71,14 +74,14 @@
             </div>
           </transition>
         </button> -->
-        <button @click="onClickShare">
+        <!-- <button @click="onClickShare">
           <img
             class="share"
             src="@/assets/images/share.png"
             alt=""
             draggable="false"
           >
-        </button>
+        </button> -->
       </menu>
 
       <div
@@ -342,6 +345,17 @@ export default {
         }
       })
     })
+
+    if (window.innerWidth < 1350 || window.innerHeight < 810) {
+      const realWHRatio = window.innerWidth / window.innerHeight
+      if (realWHRatio > 1350 / 810) {
+        const scaleRate = window.innerHeight / 810
+        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
+      } else {
+        const scaleRate = window.innerWidth / 1350
+        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`
+      }
+    }
   },
   methods: {
     async getData() {
@@ -399,11 +413,11 @@ export default {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
   width: 1350px;
   height: 810px;
   padding: 0 70px 0 0;
   color: #F1F3F4;
+  transform: translate(-50%, -50%);
   > .bg-audio {
     display: none;
   }