style: mobile

package.json

@@ -6,8 +6,8 @@
     "serve": "cross-env TITLE=大理洱海科普馆 vue-cli-service serve",
     "build:test": "cross-env TITLE=大理洱海科普馆 vue-cli-service build",
     "push:test": "cross-env node ./scripts/publish.js",
-    "serve:lfjng": "cross-env SCENE=lfjng HOT_DOMAIN=http://localhost/#/hotspot TITLE=雷锋纪念馆-新时代廉洁文化专题展 vue-cli-service serve",
-    "build:lfjng:test": "cross-env SCENE=lfjng HOT_DOMAIN=https://houseoss.4dkankan.com/project/leifeng-jng/lfjng.html#/hotspot TITLE=雷锋纪念馆-新时代廉洁文化专题展 vue-cli-service build",
+    "serve:lfjng": "cross-env SCENE=lfjng HOT_DOMAIN=http://localhost/#/hotspot TITLE=做一颗永不生锈的螺丝钉——新时代廉洁文化专题展 vue-cli-service serve",
+    "build:lfjng:test": "cross-env SCENE=lfjng HOT_DOMAIN=https://houseoss.4dkankan.com/project/leifeng-jng/lfjng.html#/hotspot TITLE=做一颗永不生锈的螺丝钉——新时代廉洁文化专题展 vue-cli-service build",
     "lint": "vue-cli-service lint",
     "prepare": "husky install"
   },

src/views/home/components/popup/index.scss

@@ -1,9 +1,11 @@
 #popup {
   display: none;
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
   padding: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   text-align: center;
   background: rgba(0, 0, 0, 0.6);
   z-index: var(--z-index-popper);

src/views/hotspot/index.scss

@@ -156,6 +156,17 @@
 }
 
 @media only screen and (max-width: 600px) {
+  .hotspot-page {
+    .audioIcon {
+      top: 20px;
+      right: 60px;
+
+      img {
+        width: 35px;
+        height: 35px;
+      }
+    }
+  }
   .hotspot-page-info {
     top: unset;
     left: 0;
@@ -164,7 +175,8 @@
     display: flex;
     flex-direction: column;
     padding: 20px 25px;
-    height: 167px;
+    max-width: 100%;
+    height: calc(100vh - 50vh - 95px);
     box-sizing: border-box;
     border-top-left-radius: 17px;
     border-top-right-radius: 17px;
@@ -191,6 +203,7 @@
       width: 100%;
       height: 0;
       color: white;
+      font-size: 15px;
 
       &::-webkit-scrollbar {
         width: 2px;
@@ -235,8 +248,9 @@
     background-image: url('@/assets/images/icon-right-min.png');
   }
   .hotspot-page-main {
-    top: 37%;
+    top: 75px;
     width: 100%;
+    transform: translateX(-50%);
   }
 
   .hotspot-page-video {

src/views/hotspot/index.vue

@@ -202,8 +202,14 @@
             arr.push({ id: 2, type: 'video', name: '视频', icon: VideoIcon, acIcon: AcVideoIcon });
           } else {
             this.$nextTick(() => {
-              this.audioSta = true;
-              this.$refs.volumeRef.play();
+              if (
+                !window.navigator.userAgent.match(
+                  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+                )
+              ) {
+                this.audioSta = true;
+                this.$refs.volumeRef.play();
+              }
             });
           }
           if (resData.images) {