导航样式调整

hookehuyr
Commit 45d23ee36888049b93ffb7342b9afb905cd4f686 45d23ee3 1 parent 20d06d5c
Showing 2 changed files with 56 additions and 38 deletions
src/common/tiantan_v2.js
src/views/index.vue
--- a/src/common/tiantan_v2.js
View file @45d23ee
+++ b/src/common/tiantan_v2.js
View file @45d23ee
@@ -91,7 +91,7 @@ var touristSpots = [{
 var spotInfo = [
   {
     name: '三宝楼',
-    position: [120.587519, 31.315924],
+    position: [120.587436, 31.316177],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
   },
   {
@@ -101,7 +101,7 @@ var spotInfo = [
   },
   {
     name: '罗汉堂',
-    position: [120.58764, 31.315011],
+    position: [120.587581, 31.31505],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。
@@ -116,7 +116,7 @@ var spotInfo = [
   },
   {
     name: '大雄宝殿',
-    position: [120.587249, 31.314722],
+    position: [120.587116, 31.314809],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png',
     note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
@@ -147,12 +147,12 @@ var toiletInfo = [
 var activityInfo = [
   {
     name: '西花园湖心亭',
-    position: [120.586253, 31.315273],
+    position: [120.586478, 31.315098],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
   },
   {
     name: '四百岁神龟',
-    position: [120.585948, 31.315095],
+    position: [120.585947, 31.315011],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png',
   },
 ];
--- a/src/views/index.vue
View file @45d23ee
+++ b/src/views/index.vue
View file @45d23ee
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-02 10:57:57
+ * @LastEditTime: 2023-06-02 16:03:29
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -19,39 +19,39 @@
         <div style="width: 4rem;flex-shrink: 0;"></div>
         <div style="position: fixed; right: 0; background-color: white; height: 4.5rem; width: 4rem;">
           <div style="padding-top: 40%;">
-            <van-icon v-if="!show_nav_popup" name="arrow-down" @click="handleNavPopup" size="1.15rem" />
+            <van-icon v-if="!show_nav_popup" name="arrow-up" @click="handleNavPopup" size="1.15rem" />
-            <van-icon v-else name="arrow-up" @click="handleNavPopup" size="1.15rem" />
+            <van-icon v-else name="arrow-down" @click="handleNavPopup" size="1.15rem" />
           </div>
         </div>
       </div>
-      <van-popup v-model:show="show_nav_popup" position="top" duration="0" :overlay="false"
+      <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
-        :style="{ padding: '1rem', top: '4.5rem' }">
+        :style="{ padding: '1rem', bottom: '4.5rem' }">
         <div style="text-align: left;">
-          <div @click="positionMarker" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
+          <div @click="positionMarker()" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
           <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;法云堂</div>
           <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;罗汉堂</div>
           <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;大雄宝殿</div>
         </div>
       </van-popup>
     </div>
-    <div class="safe-route-wrapper">
+    <!-- <div class="safe-route-wrapper">
       <span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
       <span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
-    </div>
+    </div> -->
-    <div class="tool-bar-wrapper">
+    <!-- <div class="tool-bar-wrapper">
       <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;">
         <van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
         <van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
         <van-icon name="aim" @click="setLocation" />
       </div>
-    </div>
+    </div> -->
     <div class="operate-bar-wrapper">
       <div class="box-wrapper">
-        <!-- <div class="item" @click="setTitleLayer">
+        <div class="item" @click="setLocation">
-          <i class="fa fa-cube"></i><br />
+          <i class="fa fa-crosshairs"></i><br />
-          贴片
+          定位
-        </div> -->
+        </div>
         <div v-if="show_walk_route" class="item" @click="setWalkRoute">
           <i class="fa fa-eye"></i><br />
           步行
@@ -60,17 +60,27 @@
           <i class="fa fa-eye-slash"></i><br />
           步行
         </div>
+        <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
+          <i class="fa fa-eye"></i><br />
+          路线
+        </div>
+        <div v-else class="item" @click="handleSafeRoute(false)">
+          <i class="fa fa-eye-slash"></i><br />
+          路线
+        </div>
       </div>
     </div>
+
+    <!-- <div style="position: fixed; bottom: 0; height: 2rem; width: 100%; background-color: white; z-index: 999;"></div> -->
+
     <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
       <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
       <div class="popup-wrapper">
         <div class="title">
           {{ popup_title }}
         </div>
-        <div class="content" v-html="popup_content">
+        <div class="content" v-html="popup_content"></div>
-        </div>
+        <video-player ref="videoPlayer" style="width: 100%; height: 30vh; margin-top: 1rem;"
-        <video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
           poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
           :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
       </div>
@@ -264,7 +274,7 @@ export default {
         layers: [
           // new AMap.TileLayer.RoadNet(),
         ],
-        features: ['bg'], // 设置地图上显示的元素种类
+        features: ['bg', 'road'], // 设置地图上显示的元素种类
         animateEnable: false, // 地图平移过程中是否使用动画
       });
       // 添加地图点击事件
@@ -451,10 +461,12 @@ export default {
         }
         // 绑定景点的点击事件 - 文字出现才能触发
         var clickListener = marker.on('click', (e) => {
-          this.show_popup = true;
+          // this.show_popup = true;
-          this.popup_title = x.name;
+          // this.popup_title = x.name;
-          this.popup_content = x.note;
+          // this.popup_content = x.note;
-          this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
+          // this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
+          // this.positionMarker(coord.spotInfo[i].position);
+          this.positionMarker([120.587519, 31.315924]);
         })
         //
         this.spotInfo.push(marker);
@@ -715,7 +727,7 @@ export default {
     setTitleLayer() {
       var layer = new AMap.TileLayer.Flexible({
         cacheSize: 50,
-        opacity: 1,
+        opacity: 0.5,
         zIndex: 100,
         createTile: function (x, y, z, success, fail) {
           if (z === 17) {
@@ -738,7 +750,6 @@ export default {
               return;
             }
           }
-          console.warn(z);
           var img = document.createElement('img');
           img.onload = function () {
@@ -899,12 +910,11 @@ export default {
     handleNavPopup() {
       this.show_nav_popup = !this.show_nav_popup
     },
-    positionMarker() {
+    positionMarker(position = [120.587519, 31.315924]) {
-      // this.setInfoWindow([120.587519, 31.315924])
       // 点击后创建自定义信息窗口
-      this.setInfoWindows([120.587519, 31.315924])
+      this.setInfoWindows(position)
       // 把地图中心点设置为当前点击的标记点
-      this.map.setZoomAndCenter(this.zoom, [120.587519, 31.315924]);
+      this.map.setZoomAndCenter(this.zoom, position);
       //
       this.show_nav_popup = false;
     },
@@ -985,14 +995,15 @@ export default {
 }
 .nav-bar-wrapper {
-  position: absolute;
+  position: fixed;
-  top: 0;
+  bottom: 0;
   left: 0;
-  right: 0;
   height: 4.5rem;
+  width: 100%;
   background-color: white;
   text-align: center;
   box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
+  z-index: 999;
   .item {
     padding-top: 0.5rem;
@@ -1005,7 +1016,7 @@ export default {
 .safe-route-wrapper {
   position: absolute;
-  bottom: 1rem;
+  bottom: 2rem;
   right: 1rem;
   background-color: white;
 }
@@ -1045,7 +1056,10 @@ export default {
     margin-bottom: 0.85rem;
   }
-  .content {}
+  .content {
+    line-height: 1.75;
+    font-size: 0.95rem;
+  }
 }
@@ -1057,4 +1071,8 @@ export default {
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
 }
+
+.van-dialog__confirm, .van-dialog__confirm:active {
+  color: #AB8F57;
+}
 </style>