Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d0851587 1 parent 35b4437c

新增头部导航和下拉，infowindow组件化

Inline Side-by-side
Showing 4 changed files with 217 additions and 145 deletions
...@@ -9,6 +9,7 @@ export {} ...@@ -9,6 +9,7 @@ export {}
9 9
10 declare module '@vue/runtime-core' { 10 declare module '@vue/runtime-core' {
11 export interface GlobalComponents { 11 export interface GlobalComponents {
12 + InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
12 RouterLink: typeof import('vue-router')['RouterLink'] 13 RouterLink: typeof import('vue-router')['RouterLink']
13 RouterView: typeof import('vue-router')['RouterView'] 14 RouterView: typeof import('vue-router')['RouterView']
14 VanCol: typeof import('vant/es')['Col'] 15 VanCol: typeof import('vant/es')['Col']
......
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-05-19 15:52:36 5 + * @LastEditTime: 2023-05-30 17:23:26
6 - * @FilePath: /tswj/src/App.vue 6 + * @FilePath: /map-demo/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
9 <template> 9 <template>
...@@ -64,6 +64,7 @@ html, ...@@ -64,6 +64,7 @@ html,
64 body { 64 body {
65 width: 100%; 65 width: 100%;
66 height: 100%; 66 height: 100%;
67 + overflow: hidden;
67 } 68 }
68 69
69 body { 70 body {
......
1 +<template>
2 + <div>
3 + <div class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">
4 +
5 + {{ title }}
6 + <div id="del-div">
7 + <div type="primary" icon="el-icon-close" @click="close()">123</div>
8 + </div>
9 + <div style="text-align: center;">
10 + <button type="primary">主要按钮</button>
11 + </div>
12 + </div>
13 + </div>
14 +</template>
15 +
16 +<script>
17 +export default {
18 + props: {
19 + infoWindow: {
20 + type: Object,
21 + default: () => { }
22 + },
23 + title: {
24 + type: String,
25 + default: ''
26 + }
27 + },
28 + methods: {
29 + // 关闭
30 + close() {
31 + // 高德地图信息窗关闭的api
32 + this.infoWindow.close()
33 + },
34 + edit() {
35 + console.log('编辑按钮测试')
36 + },
37 + del() {
38 + console.log('删除按钮测试')
39 + }
40 + }
41 +}
42 +</script>
43 +
44 +<style lang="less" scoped>
45 +#del-div {
46 + position: absolute;
47 + right: 20;
48 + top: 20;
49 + transform: scale(1.2);
50 +}
51 +</style>
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-05-30 13:45:04 4 + * @LastEditTime: 2023-05-30 18:09:09
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div style="height: 100vh; position: relative;"> 9 + <div style="height: 100vh; position: relative; overflow: hidden;">
10 <div id="container"></div> 10 <div id="container"></div>
11 - <div class="nav-bar-wrapper"> 11 + <div id="abc" class="nav-bar-wrapper">
12 - <van-row> 12 + <div class="hideScrollBar"
13 - <van-col span="8" :class="[isActive === 0 ? 'checked' : '', 'item']" @click="setNavLayer(0)"> 13 + style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
14 + <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 0 ? 'checked' : '', 'item']"
15 + @click="setNavLayer(0)">
14 <van-icon name="shop-o" size="1.25rem" /><br /> 16 <van-icon name="shop-o" size="1.25rem" /><br />
15 <span style="font-size: 0.85rem;">景区信息</span> 17 <span style="font-size: 0.85rem;">景区信息</span>
16 - </van-col> 18 + </div>
17 - <van-col span="8" :class="[isActive === 1 ? 'checked' : '', 'item']" @click="setNavLayer(1)"> 19 + <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 1 ? 'checked' : '', 'item']"
20 + @click="setNavLayer(1)">
18 <van-icon name="shop-o" size="1.25rem" /><br /> 21 <van-icon name="shop-o" size="1.25rem" /><br />
19 <span style="font-size: 0.85rem;">卫生间</span> 22 <span style="font-size: 0.85rem;">卫生间</span>
20 - </van-col> 23 + </div>
21 - <van-col span="8" :class="[isActive === 2 ? 'checked' : '', 'item']" @click="setNavLayer(2)"> 24 + <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 2 ? 'checked' : '', 'item']"
25 + @click="setNavLayer(2)">
22 <van-icon name="shop-o" size="1.25rem" /><br /> 26 <van-icon name="shop-o" size="1.25rem" /><br />
23 <span style="font-size: 0.85rem;">活动中心</span> 27 <span style="font-size: 0.85rem;">活动中心</span>
24 - </van-col> 28 + </div>
25 - </van-row> 29 + <div style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === 2 ? 'checked' : '', 'item']"
30 + @click="setNavLayer(2)">
31 + <van-icon name="shop-o" size="1.25rem" /><br />
32 + <span style="font-size: 0.85rem;">活动中心</span>
33 + </div>
34 + <div style="width: 4rem;flex-shrink: 0;"></div>
35 +
36 + <div style="position: fixed; right: 0; background-color: white; height: 4.5rem; width: 4rem;">
37 + <div style="padding-top: 40%;">
38 + <van-icon v-if="!show_nav_popup" name="arrow-down" @click="handleNavPopup" size="1.15rem" />
39 + <van-icon v-else name="arrow-up" @click="handleNavPopup" size="1.15rem" />
40 + </div>
41 + </div>
42 + </div>
43 +
44 + <van-popup v-model:show="show_nav_popup" position="top" duration="0" :overlay="false"
45 + :style="{ padding: '1rem', top: '4.5rem' }">
46 + <div style="text-align: left;">
47 + <div @click="positionMarker" style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;三宝楼</div>
48 + <div style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;法云堂</div>
49 + <div style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;罗汉堂</div>
50 + <div style="margin-bottom: 0.5rem;"><van-icon name="fire-o" />&nbsp;大雄宝殿</div>
51 + </div>
52 + </van-popup>
26 </div> 53 </div>
27 <div class="safe-route-wrapper"> 54 <div class="safe-route-wrapper">
28 <span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span> 55 <span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
...@@ -52,7 +79,7 @@ ...@@ -52,7 +79,7 @@
52 </div> 79 </div>
53 </div> 80 </div>
54 <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem' }"> 81 <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem' }">
55 - <van-icon name="cross" @click="show_popup = false" style="float: right; color: gray;" /> 82 + <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
56 <div class="popup-wrapper"> 83 <div class="popup-wrapper">
57 <div class="title"> 84 <div class="title">
58 {{ popup_title }} 85 {{ popup_title }}
...@@ -61,14 +88,17 @@ ...@@ -61,14 +88,17 @@
61 </div> 88 </div>
62 <video-player ref="videoPlayer" style="width: 100%; height: 10rem;" 89 <video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
63 poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" 90 poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
64 - :src="video_src" 91 + :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
65 - class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
66 </div> 92 </div>
67 </van-popup> 93 </van-popup>
68 94
69 <van-dialog v-model:show="dialog_show" title="温馨提示"> 95 <van-dialog v-model:show="dialog_show" title="温馨提示">
70 <div style="padding: 1rem; text-align: center;">您不在景区范围内</div> 96 <div style="padding: 1rem; text-align: center;">您不在景区范围内</div>
71 </van-dialog> 97 </van-dialog>
98 +
99 + <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
100 + <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
101 + <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle"></InfoWindow>
72 </div> 102 </div>
73 </template> 103 </template>
74 104
...@@ -79,6 +109,8 @@ import coord from '@/common/tiantan_v2' ...@@ -79,6 +109,8 @@ import coord from '@/common/tiantan_v2'
79 // import AMap from 'AMap' 109 // import AMap from 'AMap'
80 import _ from 'lodash'; 110 import _ from 'lodash';
81 import $ from 'jquery'; 111 import $ from 'jquery';
112 +//引入定义的信息窗组件
113 +import InfoWindow from '@/components/InfoWindow'
82 114
83 const GPS = { 115 const GPS = {
84 PI: 3.14159265358979324, 116 PI: 3.14159265358979324,
...@@ -137,7 +169,7 @@ const GPS = { ...@@ -137,7 +169,7 @@ const GPS = {
137 }; 169 };
138 170
139 export default { 171 export default {
140 - // components: { Flexbox, FlexboxItem }, 172 + components: { InfoWindow },
141 data() { 173 data() {
142 return { 174 return {
143 map: '', 175 map: '',
...@@ -183,7 +215,11 @@ export default { ...@@ -183,7 +215,11 @@ export default {
183 show_walk_route: true, 215 show_walk_route: true,
184 popup_title: '', 216 popup_title: '',
185 popup_content: '', 217 popup_content: '',
186 - video_src: '' 218 + video_src: '',
219 + show_nav_popup: false,
220 + showInfoWindow: false,
221 + infoWindow: {},
222 + infoWindowTitle: '',
187 } 223 }
188 }, 224 },
189 mounted() { 225 mounted() {
...@@ -293,104 +329,49 @@ export default { ...@@ -293,104 +329,49 @@ export default {
293 ] 329 ]
294 }); 330 });
295 }, 331 },
296 - layerMap1() { 332 + // loadPublicEquipment() { // 加载公共设备图标
297 - // 图层地图 333 + // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
298 - this.imageLayer = new AMap.ImageLayer({ 334 + // _.each(coord.sheshi, (x, i) => {
299 - // url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg', 335 + // var marker = new AMap.ElasticMarker({
300 - // url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg', 336 + // position: coord.sheshi[i].position,
301 - url: 'images/xys1.png', 337 + // zooms: [14, 20],
302 - bounds: new AMap.Bounds( 338 + // styles: [{
303 - [120.585202, 31.312918], [120.588828, 31.316511] // 对象西南角经纬度和东北角经纬度值 339 + // icon: {
304 - // [116.327911, 39.939229], 340 + // img: coord.sheshi[i].icon,
305 - // [116.342659, 39.946275] // 对象西南角经纬度和东北角经纬度值 341 + // size: [16, 16], // 可见区域的大小
306 - ), 342 + // anchor: 'bottom-center', // 锚点
307 - opacity: 1, // 图层透明度，默认为 1 343 + // fitZoom: 14, // 最合适的级别
308 - zooms: [2, 20], 344 + // scaleFactor: 2, // 地图放大一级的缩放比例系数
309 - zIndex: 6 // 图层的层级，默认为 6 345 + // maxScale: 1.4, // 最大放大比例
310 - }); 346 + // minScale: 0.8 // 最小放大比例
311 - this.map = new AMap.Map('container', { 347 + // }
312 - viewMode: '3D', // 设置地图模式 348 + // }],
313 - turboMode: false, 349 + // zoomStyleMapping
314 - showIndoorMap: false, 350 + // });
315 - defaultCursor: 'pointer', // 地图默认鼠标样式 351 + // let infoWindowContent =
316 - showBuildingBlock: false, // 是否展示地图 3D 楼块 352 + // '<div className="custom-infowindow input-card">' +
317 - zoom: 18, // 设置地图显示的缩放级别 353 + // '<label style="color:grey">公共厕所</label>' +
318 - zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30] 354 + // // 为 infowindow 添加自定义事件
319 - showLabel: false, // 是否展示地图文字和 POI 信息 355 + // '<div id="lnglat2container" class="btn">我要走过去</div>' +
320 - pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。 356 + // '</div>';
321 - rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0 357 + // // 创建一个自定义内容的 infowindow 实例
322 - center: [120.587237, 31.314805], // 设置地图中心点坐标 358 + // let infoWindow = new AMap.InfoWindow({
323 - forceVector: false, 359 + // position: coord.sheshi[i].position,
324 - rotateEnable: false, 360 + // offset: new AMap.Pixel(0, -30),
325 - resizeEnable: true, //是否监控地图容器尺寸变化 361 + // content: infoWindowContent
326 - layers: [ 362 + // });
327 - new AMap.TileLayer.RoadNet(), 363 + // if (clickListener) {
328 - this.imageLayer, 364 + // infoWindow.off('click', clickListener)
329 - ] 365 + // }
330 - }); 366 + // // 绑定景点的点击事件 - 文字出现才能触发
331 - }, 367 + // var clickListener = marker.on('click', (e) => {
332 - layerMap2() { 368 + // infoWindow.open(this.map);
333 - // 图层地图 369 + // })
334 - this.imageLayer = new AMap.ImageLayer({ 370 + // //
335 - url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg', 371 + // this.facilities.push(marker);
336 - bounds: new AMap.Bounds( 372 + // })
337 - [116.327911, 39.939229], 373 + // this.map.add(this.facilities);
338 - [116.342659, 39.946275] 374 + // },
339 - ),
340 - zooms: [15, 20]
341 - });
342 - this.map = new AMap.Map('container', {
343 - center: [120.587237, 31.314805],
344 - zoom: 15,
345 - layers: [
346 - AMap.createDefaultLayer(),
347 - // this.imageLayer,
348 - ]
349 - });
350 - },
351 - loadPublicEquipment() { // 加载公共设备图标
352 - var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
353 - _.each(coord.sheshi, (x, i) => {
354 - var marker = new AMap.ElasticMarker({
355 - position: coord.sheshi[i].position,
356 - zooms: [14, 20],
357 - styles: [{
358 - icon: {
359 - img: coord.sheshi[i].icon,
360 - size: [16, 16], // 可见区域的大小
361 - anchor: 'bottom-center', // 锚点
362 - fitZoom: 14, // 最合适的级别
363 - scaleFactor: 2, // 地图放大一级的缩放比例系数
364 - maxScale: 1.4, // 最大放大比例
365 - minScale: 0.8 // 最小放大比例
366 - }
367 - }],
368 - zoomStyleMapping
369 - });
370 - let infoWindowContent =
371 - '<div className="custom-infowindow input-card">' +
372 - '<label style="color:grey">公共厕所</label>' +
373 - // 为 infowindow 添加自定义事件
374 - '<div id="lnglat2container" class="btn">我要走过去</div>' +
375 - '</div>';
376 - // 创建一个自定义内容的 infowindow 实例
377 - let infoWindow = new AMap.InfoWindow({
378 - position: coord.sheshi[i].position,
379 - offset: new AMap.Pixel(0, -30),
380 - content: infoWindowContent
381 - });
382 - if (clickListener) {
383 - infoWindow.off('click', clickListener)
384 - }
385 - // 绑定景点的点击事件 - 文字出现才能触发
386 - var clickListener = marker.on('click', (e) => {
387 - infoWindow.open(this.map);
388 - })
389 - //
390 - this.facilities.push(marker);
391 - })
392 - this.map.add(this.facilities);
393 - },
394 loadScenicSpot() { // 加载景点图标 375 loadScenicSpot() { // 加载景点图标
395 var spots = []; 376 var spots = [];
396 var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 } 377 var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
...@@ -442,29 +423,29 @@ export default { ...@@ -442,29 +423,29 @@ export default {
442 }) 423 })
443 this.map.add(spots); 424 this.map.add(spots);
444 }, 425 },
445 - loadPlant() { // 加载植物图标 426 + // loadPlant() { // 加载植物图标
446 - var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 427 + // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
447 - var trees = new AMap.ElasticMarker({ 428 + // var trees = new AMap.ElasticMarker({
448 - position: [116.410908, 39.88057], 429 + // position: [116.410908, 39.88057],
449 - zooms: [15.5, 20], 430 + // zooms: [15.5, 20],
450 - styles: [{ 431 + // styles: [{
451 - icon: { 432 + // icon: {
452 - img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png', 433 + // img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png',
453 - size: [366, 201], 434 + // size: [366, 201],
454 - anchor: 'center', 435 + // anchor: 'center',
455 - imageSize: [865, 1156], 436 + // imageSize: [865, 1156],
456 - imageOffset: [-44, -480], 437 + // imageOffset: [-44, -480],
457 - fitZoom: 17.5, 438 + // fitZoom: 17.5,
458 - scaleFactor: 2, 439 + // scaleFactor: 2,
459 - maxScale: 2, 440 + // maxScale: 2,
460 - minScale: 0.125 441 + // minScale: 0.125
461 - } 442 + // }
462 - }], 443 + // }],
463 - zoomStyleMapping 444 + // zoomStyleMapping
464 - }); 445 + // });
465 446
466 - this.map.add(trees); 447 + // this.map.add(trees);
467 - }, 448 + // },
468 loadSpotMaker() { // 加载景点标记 449 loadSpotMaker() { // 加载景点标记
469 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 450 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
470 _.each(coord.spotInfo, (x, i) => { 451 _.each(coord.spotInfo, (x, i) => {
...@@ -636,18 +617,16 @@ export default { ...@@ -636,18 +617,16 @@ export default {
636 }, 617 },
637 addLayer() { 618 addLayer() {
638 this.layerMap(); 619 this.layerMap();
639 - // this.layerMap1(); 620 + // this.loadPublicEquipment();
640 - // this.layerMap2();
641 - this.loadPublicEquipment();
642 this.loadScenicSpot(); 621 this.loadScenicSpot();
643 - this.loadPlant(); 622 + // this.loadPlant();
644 this.setMapBoundary(); 623 this.setMapBoundary();
645 }, 624 },
646 removeLayer() { 625 removeLayer() {
647 this.initMap(); 626 this.initMap();
648 - this.loadPublicEquipment(); 627 + // this.loadPublicEquipment();
649 this.loadScenicSpot(); 628 this.loadScenicSpot();
650 - this.loadPlant(); 629 + // this.loadPlant();
651 this.setMapBoundary(); 630 this.setMapBoundary();
652 }, 631 },
653 setLocation() { // 开启定位服务 632 setLocation() { // 开启定位服务
...@@ -891,7 +870,37 @@ export default { ...@@ -891,7 +870,37 @@ export default {
891 this.removeSafeRoute() 870 this.removeSafeRoute()
892 this.open_safe_route = true; 871 this.open_safe_route = true;
893 } 872 }
873 + },
874 + handleNavPopup() {
875 + this.show_nav_popup = !this.show_nav_popup
876 + },
877 + positionMarker() {
878 + // this.setInfoWindow([120.587519, 31.315924])
879 + // 点击后创建自定义信息窗口
880 + this.setInfoWindows('title', 'content', [120.587519, 31.315924])
881 + // 把地图中心点设置为当前点击的标记点
882 + this.map.setZoomAndCenter(this.zoom, [120.587519, 31.315924]);
883 + //
884 + this.show_nav_popup = false;
885 + },
886 + setInfoWindows(title, content, position) {
887 + // 此时需要把组件的样式设置为可见
888 + this.showInfoWindow = true
889 + // 设置marker头部的标题信息窗口
890 + const infoWindow = new AMap.InfoWindow({
891 + // 使用自定义窗体
892 + isCustom: true,
893 + // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
894 + content: this.$refs['infoWindow'].$el,
895 + // 设置定位偏移量
896 + offset: new AMap.Pixel(0, -30),
897 + })
898 + this.infoWindow = infoWindow;
899 + this.infoWindowTitle = 'xxxx'
900 + // 信息窗口打开
901 + infoWindow.open(this.map, position)
894 } 902 }
903 +
895 } 904 }
896 } 905 }
897 </script> 906 </script>
...@@ -954,7 +963,7 @@ export default { ...@@ -954,7 +963,7 @@ export default {
954 top: 0; 963 top: 0;
955 left: 0; 964 left: 0;
956 right: 0; 965 right: 0;
957 - height: 3.5rem; 966 + height: 4.5rem;
958 background-color: white; 967 background-color: white;
959 text-align: center; 968 text-align: center;
960 box-shadow: 0 2px 2px rgba(0, 0, 0, .2); 969 box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
...@@ -1011,4 +1020,14 @@ export default { ...@@ -1011,4 +1020,14 @@ export default {
1011 1020
1012 .content {} 1021 .content {}
1013 } 1022 }
1023 +
1024 +
1025 +.hideScrollBar::-webkit-scrollbar {
1026 + display: none;
1027 +}
1028 +
1029 +.hideScrollBar {
1030 + -ms-overflow-style: none;
1031 + overflow: -moz-scrollbars-none;
1032 +}
1014 </style> 1033 </style>
......