fix 样式优化

hookehuyr
Commit f53f3c9f92514724a213d748971772ffadf4be9f f53f3c9f 1 parent 62dc4b7c
Showing 4 changed files with 57 additions and 26 deletions
package.json
src/views/bieyuan/info.vue
src/views/bieyuan/map.vue
yarn.lock
--- a/package.json
View file @f53f3c9
+++ b/package.json
View file @f53f3c9
@@ -41,7 +41,7 @@
     "unplugin-vue-components": "^0.24.1",
     "uuid": "^8.3.2",
     "v-viewer": "^3.0.11",
-    "vant": "^4.8.1",
+    "vant": "^4.9.6",
     "vconsole": "^3.14.6",
     "video.js": "^8.3.0",
     "vite-plugin-dynamic-import": "^0.9.6",
--- a/src/views/bieyuan/info.vue
View file @f53f3c9
+++ b/src/views/bieyuan/info.vue
View file @f53f3c9
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 16:39:55
+ * @LastEditTime: 2024-09-18 17:25:26
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -61,14 +61,6 @@
         </van-tabs>
       </div>
     </div>
-    <div style="display: flex; justify-content: center; margin: 2rem 0;">
-      <van-image
-        width="3rem"
-        height="3rem"
-        fit="contain"
-        src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
-      />
-    </div>
   </div>
 </template>
--- a/src/views/bieyuan/map.vue
View file @f53f3c9
+++ b/src/views/bieyuan/map.vue
View file @f53f3c9
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 16:43:00
+ * @LastEditTime: 2024-09-18 17:24:37
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
 <template>
   <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
-    <div @click="scanQrcode" style="position: absolute; bottom: 3rem; left: calc(50% - 2.5rem);">
+    <div style="position: absolute; top: 2rem; right: 1rem; display: flex; flex-direction: column;">
+      <van-icon size="2rem" name="search" color="#DD7850" style="margin-bottom: 1rem;" />
+      <van-image
+        width="2rem"
+        height="2rem"
+        fit="contain"
+        src="https://cdn.ipadbiz.cn/bieyuan/map/icon/NAV@3x.png"
+      />
+    </div>
+    <div style="position: absolute; top: 2rem; left: calc(50% - 1.5rem);">
+      <van-image
+        width="3rem"
+        height="3rem"
+        fit="contain"
+        src="https://cdn.ipadbiz.cn/bieyuan/map/icon/index_logo@3x.png"
+      />
+    </div>
+    <div @click="scanQrcode" style="position: absolute; bottom: 1rem; left: calc(50% - 2.5rem);">
       <van-image
         width="5rem"
         height="5rem"
@@ -18,10 +35,16 @@
     </div>
     <van-config-provider :theme-vars="themeVars">
-      <van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange">
+      <van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange" :content-draggable="true">
+        <template #header>
+          <div class="custom-header">
+            <h3>自定义标题</h3>
+            <button @click="show = false">关闭</button>
+          </div>
+        </template>
         <page-info ref="pageInfo"></page-info>
         <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
-          <van-icon name="cross" color="#FFF" size="1.5rem" />
+          <van-icon name="arrow-left" color="#FFF" size="1.5rem" />
         </div>
       </van-floating-panel>
     </van-config-provider>
@@ -306,7 +329,7 @@ export default {
             // 打开浮动面板
             this.info_height = (0.5 * window.innerHeight);
             // 浮动面板样式
-            $('.van-floating-panel__content').css('borderRadius', '1rem');
+            $('.van-floating-panel__content').css('borderRadius', '0.5rem');
           })
         }
       });
@@ -575,17 +598,20 @@ export default {
     },
     onHeightChange ({ height }) { // 监听浮动面板高度变化
       if (height === window.innerHeight) {
-        // 浮动面板样式
+        // // 浮动面板样式
-        $('.van-floating-panel__content').css('borderRadius', '0');
+        // $('.van-floating-panel__content').css('borderRadius', '0');
-        this.showClose = true;
+        // this.showClose = true;
+        this.$router.push({
+          path: '/bieyuan/info'
+        })
       } else {
-        $('.van-floating-panel__content').css('borderRadius', '1rem');
+        $('.van-floating-panel__content').css('borderRadius', '0.5rem');
         this.showClose = false;
       }
     },
     closeFloatPanel () {
       this.info_height = (0.5 * window.innerHeight);
-      $('.van-floating-panel__content').css('borderRadius', '1rem');
+      $('.van-floating-panel__content').css('borderRadius', '0.5rem');
       this.showClose = false;
       // 关闭音频
       this.$refs.pageInfo.outerStopAudio();
@@ -776,4 +802,12 @@ export default {
   top: 1rem;
   left: 1rem;
 }
+
+.custom-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #f7f8fa;
+}
 </style>
--- a/yarn.lock
View file @f53f3c9
+++ b/yarn.lock
View file @f53f3c9
@@ -426,11 +426,16 @@
     "@vue/compiler-ssr" "3.3.4"
     "@vue/shared" "3.3.4"
-"@vue/shared@3.3.4", "@vue/shared@^3.0.0":
+"@vue/shared@3.3.4":
   version "3.3.4"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.3.4.tgz"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
+"@vue/shared@^3.5.5":
+  version "3.5.6"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.5.6.tgz#602b3c2dccfe612f9e2e52e861dd7db340961a4f"
+  integrity sha512-eidH0HInnL39z6wAt6SFIwBrvGOpDWsDxlw3rCgo1B+CQ1781WzQUSU3YjxgdkcJo9Q8S6LmXTkvI+cLHGkQfA==
+
 "@vueuse/core@^8.5.0":
   version "8.9.4"
   resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/core/-/core-8.9.4.tgz"
@@ -3139,14 +3144,14 @@ v-viewer@^3.0.11:
     lodash "^4.17.21"
     viewerjs "^1.9.0"
-vant@^4.8.1:
+vant@^4.9.6:
-  version "4.8.1"
+  version "4.9.6"
-  resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.8.1.tgz#b4fce5fb5aa9dfa42143c4122d1e2f92407ec768"
+  resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.9.6.tgz#b82467589bca1a587efc6109c33ffe919dcb9e15"
-  integrity sha512-SkFZM3Z3Bwi5do+iQNfRgDi7b+Ka29rUUNzck06W2KoFie3CLTqSifLa5TuZCEoXPSkqR+fRH/VE5G57mmL8sg==
+  integrity sha512-lT0Q6hlYkZQngFWaQSxUIy8AK5bL0IlLiEtyNhMgwDwFpb3JV9DV03GWpUIQM45APm5SCC81xnPIjlrqP/64QA==
   dependencies:
     "@vant/popperjs" "^1.3.0"
     "@vant/use" "^1.6.0"
-    "@vue/shared" "^3.0.0"
+    "@vue/shared" "^3.5.5"
 vconsole@^3.14.6:
   version "3.15.0"