高德地图API-设置考勤范围

  1 <template>
  2     <div class="page-setting-setgps">
  3         <!--head-->
  4         <div class="header" >
  5 
  6         </div>
  7         <!--tab-->
  8         <div class="tab">
  9             <group gutter="0" ref="search1">
 10                 <search :auto-fixed="false" position="fixed" v-model="searchValue" placeholder="搜索地点" @on-focus="onFocus" @on-submit="onSubmit"  ref="search"></search>
 11             </group>
 12             <group gutter="0" ref="map">
 13                 <div class="amap-wrapper"  id="imap">
 14                     <!--<el-amap ref="map"  id="imap" vid="amapDemo" :zoom="12" resizeEnable="true" :plugin="plugin" :center="mapCenter" class="amap-box" :events="events">-->
 15                         <!--<el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker" icon="resource/img/gps_mark.png" animation="AMAP_ANIMATION_DROP"></el-amap-marker>-->
 16                     <!--</el-amap>-->
 17                     <div class="panel" style="text-align: center;" v-show="!map"> 
 18                         <div class="panel-box panel-box_attend" style="height: 50vh"  @click="createMap">
 19                             <div class="panel-box_bd">
 20                                 <p class="panel-box_desc"><img src="resource/img/attend/gps2.png" class="panel-box_img" style="width: 1rem"/><br/>{{mapdesc}}</p>
 21                             </div>
 22                         </div>
 23                     </div>
 24                 </div>
 25             </group>
 26 
 27             <Loading v-show="isLoading" text="数据加载中"></Loading>
 28 
 29             <group ref="mapList" gutter="0" v-show="pois.length>0" class="mont-list group-cell-label-cls">
 30                 <cell v-for="(i,index) in pois" :key="index" :title="i.name" class="" @click.native="beforeConfirm(i,index)" >
 31                     <img v-show="showIndex == index" class="icon-del" src="resource/img/attend/icon_common_select@2x.png"/>
 32                 </cell>
 33             </group>
 34 
 35             <!--<group gutter="0.1rem">-->
 36                 <!--<x-button mini type="primary" @click.native="initMap">初始化地图</x-button>-->
 37                 <!--<x-button mini type="primary" @click.native="initAmap">加载地图</x-button>-->
 38             <!--</group>-->
 39 
 40             <!--<div id="imap" style="width: 100vw;height: 300px"></div>-->
 41 
 42                 <slot>
 43                     <div class="topTips" v-if="pois.length==0" >
 44                         <div class="panel" style="text-align: center">
 45                             <div class="panel-box panel-box_attend">
 46                                 <div class="panel-box_bd">
 47                                     <p class="panel-box_desc">暂无地址记录</p>
 48                                 </div>
 49                             </div>
 50                         </div>
 51                     </div>
 52                 </slot>
 53             <!--<cell @click.native="showConfirmPlugin2" value="showConfirmPlugin"></cell>-->
 54             <div v-transfer-dom>
 55                 <confirm v-model="showConfirm"
 56                          class="gpsConfirm"
 57                          title="考勤范围名称"
 58                          ref="confirm"
 59                          @on-cancel="onCancel"
 60                          @on-confirm="onConfirm"
 61                          @on-show="onShow"
 62                          @on-hide="onHide">
 63                     <input class="mont-input" type="text" maxlength="150" placeholder="请输入考勤范围名称" v-model="montName" />
 64                 </confirm>
 65             </div>
 66         </div>
 67     </div>
 68 </template>
 69 
 70 <script>
 71     import { registerHandler, notifyAppBackEvent, LocationObserverFunction} from ‘../../../lib/common/SnJsBridge.js‘;
 72     import { throttle, initTitleMenu, showToast,isPC } from ‘../../../lib/extend.js‘;
 73     import { Group, Cell, Search, Confirm, XButton,TransferDom,Loading   } from ‘vux‘;
 74     // import SnLoading from ‘../../../components/baseComponents/SnLoading.vue‘;
 75     import Vue from ‘vue‘
 76     import VueAMap from ‘vue-amap‘;
 77     Vue.use(VueAMap);
 78     window.initAmap = function () {
 79         Vue.data.map = new AMap.Map(‘imap‘, {
 80             // center: [114.424170,  30.463359],
 81             zoom: 12
 82         });
 83         Vue.data.map.plugin([‘AMap.Autocomplete‘, ‘AMap.PlaceSearch‘, ‘AMap.Scale‘, ‘AMap.OverView‘, ‘AMap.ToolBar‘, ‘AMap.MapType‘, ‘AMap.PolyEditor‘, ‘AMap.CircleEditor‘,‘AMap.CitySearch‘,‘AMap.Geolocation‘,‘AMap.Geocoder‘]);
 84     };
 85 
 86     export default {
 87         components: {
 88             Group,
 89             Cell,
 90             Search,
 91             Confirm,
 92             XButton,
 93             Loading
 94         },
 95         directives: {
 96             TransferDom
 97         },
 98         data() {
 99             return {
100                 markers: [],
101                 city:‘‘,
102                 mapCenter:‘‘,
103                 results: [],
104                 value: ‘‘,
105                 pois:[],
106                 searchValue:‘‘,
107                 attenGroupInfo:‘‘,
108                // gpsChecked:[]
109                 showConfirm:false,
110                 selectPoi:‘‘,
111                 montName:‘‘,
112                 map:null,
113                 mapdesc:‘‘,
114                 nowCity:‘‘,         //当前城市名
115                 isLoading:true, 
116                 PcGpsData:‘‘,       //PC当前定位信息
117                 nowGps:[],          //当前定位经纬度
118                 geocoder:‘‘,    
119                 showIndex:0,        //初始对号显示
120                 marker:‘‘,          //初始化marker
121                 markerSearch:‘‘,    //搜索时marker
122                 circle:‘‘,          //初始化图层（圆）
123                 circleSearch:‘‘,    //搜索时图层（圆）
124                 circleRadius:100    //半径 默认100
125             }
126         },
127         created() {
128             let _this = this;
129             _this.init();
130             initTitleMenu([‘位置‘,{name:‘刷新‘,menuId:‘but_2_0‘,type: 2,func:function(){_this.refresh();}}]);
131         },
132         computed: {
133             gpsChecked: {
134                 get() {
135                     return this.$store.state.monetList;
136                 }
137             },
138         },
139         mounted() {
140             let _this = this;
141             _this.createMap();
142             _this.setMapListHeight()
143         },
144         methods: {
145             init(){
146                 let _this = this;
147                 _this.dataInit();
148                 notifyAppBackEvent(); //调用app，通知返回事件
149                 registerHandler(‘notifyAppBack‘, function(data){//点击app返回事件
150                     throttle(function(){
151                         //_this.$router.goBack();//回退上一页
152                         _this.$router.isBack = true;
153                         _this.$router.push({ name: ‘setting‘})
154                     }.bind(this));
155                 })
156             },
157             // 数据初始化  , 从APP获取数据
158             dataInit: function() {
159                 let _this = this;
160                 _this.gpsChecked = _this.$store.state.monetList;
161                 if(!isPC()){
162                     _this.getLocationInfo();
163                 }
164             },
165             //获取当前定位信息
166             getLocationInfo(){
167                 let _this = this;
168                 // 实时监听gps信息
169                 LocationObserverFunction({observerType: 0});
170                 if(isPC()){
171                     let PcGps = _this.PcGpsData
172                     // console.log(‘PcGps :‘, PcGps);
173                     let locationInfo={
174                             longitude:PcGps.position.lng,
175                             latitude:PcGps.position.lat,
176                             regionName:PcGps.formattedAddress
177                         }
178                     let cityName = locationInfo.regionName
179                     _this.searchMap(cityName)
180                     _this.setMapCenter([locationInfo.longitude,locationInfo.latitude])
181                 }else{
182                     registerHandler(‘LocationNotify‘, function (result) {
183                         // console.log(‘result :‘, result);
184                         if (JSON.parse(result).retCode == 0) {
185                             let locationInfo = JSON.parse(result).data;
186                             let cityName = locationInfo.regionName
187                             _this.searchMap(cityName)
188                             _this.nowCity = locationInfo.cityName
189                             _this.setMapCenter([locationInfo.longitude,locationInfo.latitude]);
190                         }
191                     }.bind(this));
192                 }
193             },
194             openRouter(name){
195                 let _this = this;
196                 _this.$router.push({ name: name });
197                 //this.$router.push({ name: name, })
198             },
199             onSearchResult(pois) {
200                 console.log(pois);
201                 let _this = this
202                 let latSum = 0;
203                 let lngSum = 0;
204                 if (pois.length > 0) {
205                     this.markers = [];//清空
206                     this.map.clearMap();//清空
207                     // pois.forEach(poi,key => {
208                     //     let {lng, lat} = poi.location;
209                     //     lngSum += lng;
210                     //     latSum += lat;
211                     //     this.markers.push([poi.location.lng, poi.location.lat]);
212                     //     var marker = new AMap.Marker({
213                     //         // content:poi.name,
214                     //         position: new AMap.LngLat(poi.location.lng, poi.location.lat),
215                     //         title: ‘marker‘
216                     //     });
217                     //     this.map.add(marker);
218                     // });
219                     this.markers.push([pois[0].location.lng, pois[0].location.lat]);
220                     //--------搜索时，绘制marker-----------
221                          _this.markerSearch = new AMap.Marker({
222                             // content:poi.name,
223                             position: new AMap.LngLat(pois[0].location.lng, pois[0].location.lat),
224                             title: ‘marker‘
225                         });
226                         this.map.add(_this.markerSearch);
227                     let center = {
228                         // lng: lngSum / pois.length,
229                         // lat: latSum / pois.length,
230                         lng: pois[0].location.lng,
231                         lat: pois[0].location.lat
232                     };
233                     // console.log(‘this.mapCenter :‘, this.mapCenter);
234                     this.mapCenter = [center.lng, center.lat];//移动map中心
235                     this.map.setCenter(this.mapCenter);
236                     this.pois = pois;
237                     _this.isLoading = false
238                     //--------搜索时，绘制图层（圆)-----------
239                     let nowGps = _this.mapCenter.length==0? [114.424529, 30.463046]:_this.mapCenter
240                     _this.circleSearch = new AMap.Circle({
241                         center: nowGps,
242                         radius: _this.circleRadius, //半径
243                         borderWeight: 3,
244                         strokeColor: "rgba(0,0,0,0)", 
245                         strokeOpacity: 1,
246                         strokeWeight: 6,
247                         strokeOpacity: 0.2,
248                         fillOpacity: 0.4,
249                         strokeStyle: ‘solid‘,
250                         strokeDasharray: [10, 10], 
251                         // 线样式还支持 ‘dashed‘
252                         fillColor: ‘#1791fc‘,
253                         zIndex: 50,
254                     })
255                     _this.circleSearch.setMap(_this.map)
256                     
257                 }
258 
259             },
260             //GPS事件
261             //search end
262             searchMap(val){
263                 let _this = this;
264                 let placeSearch= new AMap.PlaceSearch({
265                     city:_this.nowCity
266                 });
267                 let search = this.searchValue == ‘‘?val:this.searchValue
268                 if(search instanceof Array){
269                     // console.log(‘上 :‘);
270                     placeSearch.searchNearBy(‘‘,search,500,function(status, result) {
271                         // console.log(status,result);
272                         if(‘OK‘==result.info&&result.poiList.pois.length>0){
273                             _this.onSearchResult(result.poiList.pois)
274                         }else{
275                             _this.pois = [];
276                             _this.markers = [];
277                         }
278                     })
279                 }else{
280                     // console.log(‘下 :‘);
281                     placeSearch.search(search,function(status, result){
282                         // console.log(status,result);
283                         if(‘OK‘==result.info&&result.poiList.pois.length>0){
284                             _this.onSearchResult(result.poiList.pois)
285                         }else{
286                             _this.pois = [];
287                             _this.markers = [];
288                         }
289                     })  
290                 }
291                 
292             },
293             setCircle(){
294                 let _this = this
295                 let nowGps = _this.mapCenter.length==0? [114.424529, 30.463046]:_this.mapCenter
296                 _this.circle = new AMap.Circle({
297                     center: nowGps,
298                     radius: _this.circleRadius, //半径
299                     borderWeight: 3,
300                     strokeColor: "rgba(0,0,0,0)", 
301                     strokeOpacity: 1,
302                     strokeWeight: 6,
303                     strokeOpacity: 0.2,
304                     fillOpacity: 0.4,
305                     strokeStyle: ‘solid‘,
306                     strokeDasharray: [10, 10], 
307                     // 线样式还支持 ‘dashed‘
308                     fillColor: ‘#1791fc‘,
309                     zIndex: 50,
310                 })
311                 _this.circle.setMap(_this.map)
312                 // _this.map.setFitView([ circle ])
313             },
314             searchCity(){
315                 let _this = this
316                 var citySearch = new AMap.CitySearch()
317                 citySearch.getLocalCity(function (status, result) {
318                     if (status === ‘complete‘ && result.info === ‘OK‘) {
319                         _this.nowCity = result.city
320                         console.group(‘1 :‘, 1);
321                         console.log(status,result);
322                     // 查询成功，result即为当前所在城市信息
323                     }
324                 })
325             },
326             beforeConfirm(poi,index){
327                 let _this = this;
328                 _this.showIndex = index
329                 _this.selectPoi = poi;
330                 _this.showConfirm = true;
331                 _this.markerSearch.setPosition(new AMap.LngLat(poi.location.lng,poi.location.lat))  //选择列表时，设置marker位置
332                 _this.map.setCenter([poi.location.lng,poi.location.lat])
333                 _this.mapCenter = [poi.location.lng,poi.location.lat]
334                 _this.circleSearch.setCenter(new AMap.LngLat(poi.location.lng,poi.location.lat))    //选择列表时，设置图层（圆）位置
335             },
336             onShow(){
337                 let _this = this;
338                 //_this.$refs.confirm.setInputValue(_this.selectPoi.name);
339                 _this.montName = _this.selectPoi.name;
340                 //this.$refs[‘confirmFocus‘].focus()
341             },
342             onHide(){
343                 let _this = this;
344                 console.log(‘onHide :‘);
345             },
346             onConfirm(value){
347                 let _this = this;
348                 if(!_this.montName){
349                     showToast(‘请输入考勤范围名称‘);
350                     return false;
351                 }else{
352                     //判断是否已有该地址经纬度
353                     let gpsAddFlag = true;
354                     //校验wifi mac是否重复
355                     _this.gpsChecked.forEach(i=>{
356                         if(i.longitude == _this.selectPoi.location.lng.toFixed(6)*10e5&&i.dimension == _this.selectPoi.location.lat.toFixed(6)*10e5){
357                             showToast(‘已设置该考勤地点，请添加其他地点‘);
358                             gpsAddFlag = false;
359                         }
360                     });
361                     if(!!gpsAddFlag){
362                         _this.addGps(_this.selectPoi, _this.montName);
363                     }
364                 }
365 
366             },
367             addGps(poi, value){
368                 let _this = this;
369                 let newPoi = {
370                     //id:poi.id,
371                     longitude:poi.location.lng.toFixed(6)*10e5,
372                     dimension:poi.location.lat.toFixed(6)*10e5,
373                     address:poi.address,
374                     regionName:value||poi.name,
375                     radius:500
376                 };
377                 _this.gpsChecked.push(newPoi);
378                 //let monetList = _this.uniqueArray(_this.$store.state.monetList, newPoi);
379                 _this.$store.commit(‘updateChangeflag‘);
380                 _this.$store.commit(‘updateMonetList‘,  _this.gpsChecked);
381                 _this.$router.isBack = true;
382                 _this.$router.push({ name: ‘setting‘ })
383             },
384             //搜索框事件
385             onSubmit () {
386                 let _this = this
387                 _this.$refs.search.setBlur();
388                 _this.showIndex = 0;
389                 _this.searchMap()
390                 console.log(‘on Submit‘)
391             },
392             onFocus () {
393                 let _this = this
394                 _this.searchCity();
395                 console.log(‘on focus‘)
396             },
397             onCancel () {
398                 console.log(‘on cancel‘)
399             },
400             refresh(){
401                 //该方法安卓会重新打开一个页面，暂时不用this.$router.go(0);
402                 let _this = this;
403                 _this.pois = [];
404                 _this.markers = [];
405                 _this.searchValue = ‘‘;
406                 _this.$refs.search.setBlur();
407                 _this.dataInit();
408             },
409             //判断已选择的是否存在
410             uniqueArray(arr, poi){
411                 let res = [];
412                // var json = {};
413 
414                 for(var i = 0; i < arr.length; i++){
415                    if( arr[i].id == poi.id ){
416                       //已存在
417                        console.log(‘已存在‘)
418                    }else{
419                        res.push(arr[i]);
420                    }
421                 }
422                 if(arr.length == 0){
423                     res[0] = poi ;
424                 }
425                 return res;
426             },
427             //初始化设置地图中心
428             setMapCenter(data){
429                 this.mapCenter = data;
430                 this.map.setZoomAndCenter(14, data);
431                 LocationObserverFunction({observerType: 1});
432             },
433             createMap(){
434                 let _this = this;
435                // _this.initMap();
436                 _this.clickMap();
437                 // _this.initAmap()
438                 _this.mapdesc = ‘‘;
439                 setTimeout(()=>{
440                     _this.mapdesc = ‘载入地图失败，点击重新载入‘;
441                     _this.initAmap();
442                 },1500)
443             },
444             //初始化地图 //无用
445             initMap(){
446                 VueAMap.initAMapApiLoader({
447                     key: ‘6dc72bbbc2824a9295b256b8330ae7ef‘,
448                     plugin: [‘AMap.Autocomplete‘, ‘AMap.PlaceSearch‘, ‘AMap.Scale‘, ‘AMap.OverView‘, ‘AMap.ToolBar‘, ‘AMap.MapType‘, ‘AMap.PolyEditor‘, ‘AMap.CircleEditor‘,‘AMap.CitySearch‘,‘AMap.Geolocation‘,‘AMap.Geocoder‘],
449                     v: ‘1.4.4‘
450                 });
451             },
452             //初始化高德地图
453             initAmap(){
454                 let _this = this;
455                 if(!_this.map){
456                     // console.log(‘_this.mapCenter :‘, _this.mapCenter);
457                     _this.map = new AMap.Map(‘imap‘, {
458                         // center: _this.mapCenter,
459                         zoom: 12
460                     });
461                     _this.map.plugin([‘AMap.Autocomplete‘, ‘AMap.PlaceSearch‘, ‘AMap.Scale‘, ‘AMap.OverView‘, ‘AMap.ToolBar‘, ‘AMap.MapType‘, ‘AMap.PolyEditor‘, ‘AMap.CircleEditor‘,‘AMap.CitySearch‘,‘AMap.Geolocation‘,‘AMap.Geocoder‘],function(){
462                             var geolocation = new AMap.Geolocation({
463                             // 是否使用高精度定位，默认：true
464                             enableHighAccuracy: true,
465                             // 设置定位超时时间，默认：无穷大
466                             timeout: 10000,
467                             // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
468                             buttonOffset: new AMap.Pixel(10, 20),
469                             //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
470                             zoomToAccuracy: true,     
471                             //  定位按钮的排放位置,  RB表示右下
472                             buttonPosition: ‘RB‘
473                             })
474 
475                             geolocation.getCurrentPosition()
476                             AMap.event.addListener(geolocation, ‘complete‘, _this.onComplete)
477                             AMap.event.addListener(geolocation, ‘error‘, _this.onError)
478                     });
479                     _this.map.on(‘dragstart‘,function(){
480                             _this.nowGps=[];
481                             let nowCenter = _this.map.getCenter()   //获取当前坐标经纬度
482                             let nowLng = Number(nowCenter.lng);
483                             let nowlat = Number(nowCenter.lat);
484                             _this.nowGps.push(nowLng)
485                             _this.nowGps.push(nowlat)
486                             _this.getRadiusGps(_this.nowGps)        //设置默认城市，设置中心marker        
487                             _this.searchValue =‘‘          
488                             // console.log(‘12121 :‘, ‘circle之前‘);         
489                             _this.setCircle()                       //设置中心图层（圆）
490                         _this.map.on(‘dragging‘,function(){
491                             _this.nowGps=[];
492                             let nowCenter = _this.map.getCenter()
493                             let nowLng = Number(nowCenter.lng);
494                             let nowlat = Number(nowCenter.lat);
495                             _this.nowGps.push(nowLng)
496                             _this.nowGps.push(nowlat)
497                             // console.log(‘_this.marker.getPosition() :‘, _this.marker.getPosition());
498                             _this.marker.setPosition(new AMap.LngLat(nowLng,nowlat))    //使marker跟随，推拽移动
499                             _this.circle.setCenter(new AMap.LngLat(nowLng,nowlat))      //使图层（圆）跟随，拖拽移动
500                             // console.log(‘_this.nowGps :‘, _this.nowGps);
501                         })
502                     })
503                     _this.map.on(‘dragend‘,function () {
504                         _this.showIndex = 0;
505                         _this.searchMap(_this.nowGps)   //拖拽结束 搜索当前坐标点信息
506                 })
507                 }
508             },
509             //设置默认城市，设置中心marker    
510             getRadiusGps(val){
511                 let _this =this;
512                 _this.geocoder = new AMap.Geocoder({
513                     city: _this.nowCity, //城市设为北京，默认：“全国”
514                     radius: 500 //范围，默认：500
515                 });
516                 _this.markers = [];//清空
517                 _this.map.clearMap();//清空
518                 _this.markers.push(val);
519                 _this.marker = new AMap.Marker({
520                     // content:poi.name,
521                     position: new AMap.LngLat(val[0],val[1]),
522                     title: ‘marker‘
523                 });
524                 _this.map.add(_this.marker);
525             },
526             //PC获取当前坐标经纬度，成功时
527             onComplete(data){
528                 // console.log(‘1data :‘, data);
529                 let _this = this 
530                 _this.PcGpsData = data
531                 _this.getLocationInfo()
532             },
533             //PC获取当前坐标经纬度，失败时
534             onError(err){
535                 console.log(‘1err :‘, err);
536             },
537             //初始化地图
538             clickMap(){
539                 var url = ‘//webapi.amap.com/maps?v=1.4.6&key=6dc72bbbc2824a9295b256b8330ae7ef&callback=initAmap‘;
540                 var jsapi = document.createElement(‘script‘);
541                 jsapi.charset = ‘utf-8‘;
542                 jsapi.src = url;
543                 document.head.appendChild(jsapi);
544             },
545             //动态设置列表高度
546             setMapListHeight(){
547                 let _this = this
548                 let searchHeight = _this.$refs.search1.$el.offsetHeight
549                 let mapHeight = _this.$refs.map.$el.offsetHeight
550                 let Height = searchHeight+mapHeight+‘px‘
551                 _this.$refs.mapList.$el.style.height =` calc(100vh - ${Height})`;
552             }
553         },
554         watch:{
555             PcGpsData(newValue,oldValue){
556                 
557             }
558         }
559     }
560 </script>
561 <style scoped lang="less">
562     @import ‘~components/style/common.less‘;
563     .header{
564         border-top:0;
565 
566     }
567     .tab{
568         //background: @color-white;
569         overflow: hidden;
570         .amap-wrapper {
571             width: 100%;
572             height: 50vh;
573         }
574         .mont-list{
575             overflow-y: scroll;
576             height:50vh;
577         }
578         .mont-input{
579             font-size: 1.2rem;
580             padding: .5rem;
581             width: 85%;
582             box-sizing: content-box;
583             background: transparent;
584             border: 1px solid #e2e3e4;
585             border-radius: 5px;
586         }
587         .panel{
588             font-size: 1rem;
589             .panel-box {
590                 padding: 15px;
591                 position: relative;
592             }
593             .panel-box_attend {
594                 display: flex;
595                 align-items: center;
596                 .panel-box_hd {
597                     margin-right: .8em;
598                     width: 60px;
599                     height: 60px;
600                     line-height: 60px;
601                     text-align: center;
602                 }
603                 .panel-box_bd {
604                     flex: 1;
605                     min-width: 0;
606                 }
607                 .panel-box_img {
608                     width: 100%;
609                     max-height: 100%;
610                     vertical-align: top;
611                     border-radius: .4rem;
612                 }
613                 .panel-box_title {
614                     font-weight: 400;
615                     width: auto;
616                     overflow: hidden;
617                     text-overflow: ellipsis;
618                     white-space: nowrap;
619                     word-wrap: normal;
620                     word-wrap: break-word;
621                     word-break: break-all;
622                 }
623                 .panel-box_day{
624                     text-align: right;
625                     margin-right: .32rem;
626                     color:@color-blue;
627                 }
628             }
629             .panel-box_desc {
630                 color: #999999;
631                 font-size: 13px;
632                 line-height: 1.2;
633                 overflow: hidden;
634                 text-overflow: ellipsis;
635                 display: -webkit-box;
636                 -webkit-box-orient: vertical;
637                 -webkit-line-clamp: 2;
638             }
639             .panel-box_time{
640                 flex: 1;
641                 -webkit-flex: 1;
642                 display: -webkit-box;
643                 display: -webkit-flex;
644                 display: flex;
645 
646             }
647             .box_time {
648                 padding-top: 0.2rem;
649             }
650             .box_icon {
651                 /*position: absolute;*/
652                 /*right: 0.2rem;*/
653                 /*top: 0.45rem;*/
654                 /*text-align: right;*/
655                 /*width: 0.4rem;*/
656             }
657             .box_icon_img {
658                 width: 0.6rem;
659             }
660             .set-tips{
661                 position: relative;
662                 display: flex;
663                 align-items: center;
664                 padding: 15px 0;
665                 color: @color-blue;
666                 label {
667                     /*width: 2rem;*/
668                     height: 2rem;
669                     line-height: 2.5rem;
670                     margin: 0 .5rem 0 1rem;
671                     display: block;
672                     word-wrap: break-word;
673                     word-break: break-all;
674                     img{
675                         width: 1.3rem;
676                     }
677                 }
678             }
679         }
680         .bdtop{
681             border-top: 1px solid #dddddd;
682         }
683         .icon-del{
684             width: 1rem;
685         }
686         .mgbtm{
687             margin-bottom: .5rem;
688         }
689     }
690     .list{
691         margin-top: 0.32rem;
692         padding-bottom: 3.5rem;
693     }
694 </style>
695 
696 <style lang="less">
697     div .weui-dialog__btn_primary {
698         color: #478aee;
699     }
700     .page-setting-setgps {
701        div .weui-cell {
702            padding: 14px 15px;
703            border-bottom: 1px solid #D1D1D1;
704            &:before {
705                 border-top: 0;
706             }
707         }
708         .weui-search-bar__form {
709             font-size: 22px;
710         }
711        .weui-search-bar__box .weui-icon-search{
712            line-height: 32px;
713        }
714       .weui-search-bar__box .weui-search-bar__input {
715           padding: 0;
716       }
717       
718     }
719 </style>