样式调整

hookehuyr
Commit f41f9f9391b257a3949f7926cea7620b20829555 f41f9f93 1 parent 83cb000f
Showing 3 changed files with 29 additions and 24 deletions
components.d.ts
src/components/InfoWindow.vue
src/views/index.vue
--- a/components.d.ts
View file @f41f9f9
+++ b/components.d.ts
View file @f41f9f9
@@ -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']
   }
 }
--- a/src/components/InfoWindow.vue
View file @f41f9f9
+++ b/src/components/InfoWindow.vue
View file @f41f9f9
@@ -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;
   }
--- a/src/views/index.vue
View file @f41f9f9
+++ b/src/views/index.vue
View file @f41f9f9
 <!--
  * @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 class="hideScrollBar nav-bar-content">
-        <div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
+        <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;
+  position: fixed;
-  right: 20px;
+  left: 20px;
-  top: 5%;
+  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;
     }
   }
 }