Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f41f9f93 1 parent 83cb000f

样式调整

Inline Side-by-side
Showing 3 changed files with 29 additions and 24 deletions
......@@ -12,8 +12,12 @@ declare module '@vue/runtime-core' {
InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanCol: typeof import('vant/es')['Col']
VanDialog: typeof import('vant/es')['Dialog']
VanIcon: typeof import('vant/es')['Icon']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
}
}
......
......@@ -3,7 +3,7 @@
<div class="info-window-wrapper">
<div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
<div class="hideScrollBar info-window-title">
<div v-for="(item, index) in info.details" :key="index" @click="handleTitle(index)"
<div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
:class="[isActive === index ? 'checked' : '', 'item']">
<span>{{ item.name }}</span>
</div>
......@@ -12,7 +12,7 @@
<van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
<van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
</div>
<div v-for="(item, index) in info.details" :key="index">
<div v-for="(item, index) in info?.details" :key="index">
<div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
<div v-if="isActive === index && item.audio" class="info-control">
<div v-if="!is_play" @click="play()" class="control-play">
......@@ -89,7 +89,7 @@ export default {
infoWindow(val) {
if (val) {
// 加载录音
this.audio.src = this.info.details[this.isActive]['audio'];
this.audio.src = this.info?.details[this.isActive]['audio'];
let play_status = this.audio.play() // 播放
if (play_status) {
play_status.then(() => {
......@@ -374,7 +374,7 @@ export default {
width: 33.333%;
flex-shrink: 0;
color: #888;
font-size: 1.2rem;
font-size: 1.1rem;
margin-bottom: 0.75rem;
display: inline-block;
}
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-05 16:47:36
* @LastEditTime: 2023-06-06 14:45:27
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
......@@ -9,8 +9,8 @@
<div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
<div id="container"></div>
<div class="nav-bar-wrapper">
<div class="hideScrollBar" style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
<div class="hideScrollBar nav-bar-content">
<div v-for="(item, index) in navBarList" :key="index" :class="[isActive === index ? 'checked' : '', 'item']"
@click="setNavLayer(item, index)">
<van-icon name="shop-o" size="1.5rem" /><br />
<span style="font-size: 0.85rem; margin-top: 0.5rem; display: inline-block;">{{ item.name }}</span>
......@@ -47,24 +47,19 @@
<div class="operate-bar-wrapper">
<div class="box-wrapper">
<div class="item" @click="setLocation">
<i class="fa fa-crosshairs"></i><br />
定位
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem" style="vertical-align: middle;" />
</div>
<div v-if="show_walk_route" class="item" @click="setWalkRoute">
<i class="fa fa-eye"></i><br />
步行
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
</div>
<div v-else class="item" @click="removeWalkRoute">
<i class="fa fa-eye-slash"></i><br />
步行
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
</div>
<div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
<i class="fa fa-eye"></i><br />
路线
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
</div>
<div v-else class="item" @click="handleSafeRoute(false)">
<i class="fa fa-eye-slash"></i><br />
路线
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
</div>
</div>
</div>
......@@ -213,7 +208,7 @@ export default {
show_nav_popup: false,
showInfoWindow: false,
infoWindow: {},
itemInfo: '',
itemInfo: {},
navBarList: [],
rect: {},
navList: [],
......@@ -268,7 +263,7 @@ export default {
initMap() {
// 初始化地图
this.map = new AMap.Map('container', {
viewMode: '3D', // 设置地图模式
viewMode: '2D', // 设置地图模式
turboMode: false,
showIndoorMap: false,
defaultCursor: 'pointer', // 地图默认鼠标样式
......@@ -1025,10 +1020,15 @@ export default {
text-align: center;
box-shadow: 0 -1px 0 rgba(80, 80, 80, 0.1);
z-index: 999;
padding: 0.5rem 0;
// padding: 0.5rem 0;
padding-bottom: 0.5rem;
.nav-bar-content {
display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;
}
.item {
padding-top: 0.5rem;
color: #888;
width: 21.5%; flex-shrink: 0; padding-top: 1rem;
}
.checked {
......@@ -1044,9 +1044,9 @@ export default {
}
.operate-bar-wrapper {
position: absolute;
right: 20px;
top: 5%;
position: fixed;
left: 20px;
bottom: 6rem;
width: 20px;
height: auto;
z-index: 100;
......@@ -1064,8 +1064,9 @@ export default {
height: 2rem;
background-color: white;
margin-bottom: 1rem;
border-radius: 1px;
border-radius: 50%;
padding: 2.5px;
line-height: 2rem;
}
}
}
......