Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f53f3c9f 1 parent 62dc4b7c

fix 样式优化

Inline Side-by-side
Showing 4 changed files with 57 additions and 26 deletions
......@@ -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",
......
<!--
* @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>
......
<!--
* @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');
this.showClose = true;
// // 浮动面板样式
// $('.van-floating-panel__content').css('borderRadius', '0');
// 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>
......
......@@ -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:
version "4.8.1"
resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.8.1.tgz#b4fce5fb5aa9dfa42143c4122d1e2f92407ec768"
integrity sha512-SkFZM3Z3Bwi5do+iQNfRgDi7b+Ka29rUUNzck06W2KoFie3CLTqSifLa5TuZCEoXPSkqR+fRH/VE5G57mmL8sg==
vant@^4.9.6:
version "4.9.6"
resolved "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.9.6.tgz#b82467589bca1a587efc6109c33ffe919dcb9e15"
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"
......