fix:修改文字位置

ZhangXianQiang

2024-03-05 6c757d5dab619fd759854778978270f0eecaec93

 src/views/daoAnOffice/chartgd.vue

@@ -1,66 +1,103 @@
<template>
  <div class="home">
    <div id="map-box"></div>
<!--    <div class="btn">-->
<!--      <el-button type="primary" @click="btnsubmit">确定</el-button>-->
<!--    </div>-->
    <div  style="position: absolute;bottom: 0;left: 0">
      <el-button @click="btnlk" type="primary">实时路况</el-button>
      <el-button @click="toggleTrafic">地图切换</el-button>
    </div>
    <div class="info-box">
<!--      right菜单-->
      <div class="info-div" @click="accidentProneRoadSections">
        事故易发多发路段
      </div>
      <div class="info-div" @click="keyTouristChannels">
        重点旅游通道
      </div>
      <div class="info-div">
        都江堰景区
      </div>
      <div class="info-div" @click="policeForceDeployment">
        警力配备
      </div>
      <div class="info-div" @click="fencingConstruction">
        打围施工
      </div>
      <div class="info-div">
        交通事故易发点
      </div>
      <div class="info-div" @click="keyTransportationEnterprises">
        重点运输企业
      </div>
      <div class="info-div">
        公交线路
      </div>
      <div class="info-div">
        安全隐患
    <div style="position: absolute;bottom: 5%;right: 35%;z-index: 999">
      <div @click="btnlk" class="item-tb">
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>

<!--      搜索-->
<!--      <el-input-->
<!--          v-model="keyword"-->
<!--          placeholder="输入关键字搜索"-->
<!--          style="width: 300px"-->
<!--          @change="handleSearch"-->
<!--      >-->
<!--      </el-input>-->
<!--      <div class="ul">-->
<!--        <div class="li" v-for="item in data" :key="item.id" @click="handleSelect(item)">-->
<!--          <div class="d-flex flex-column">-->
<!--            <span style="margin-bottom: 6px">{{item.name}}</span>-->
<!--            <span>地址：{{item.address}}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <div class="info-box">
      <!--      right菜单-->
      <div class="info-div" @click="accidentProneRoadSections">
        <img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>事故易发多发路段</p>
          <p>78</p>
        </div>
      </div>
      <div class="info-div" @click="keyTouristChannels">
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>重点旅游通道</p>
          <p>178</p>
        </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/djyjq.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>都江堰景区</p>
          <p>278</p>
        </div>
      </div>
      <div class="info-div" @click="policeForceDeployment">
        <img src="@/assets/img/jlpb.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>警力配备</p>
          <p>348</p>
        </div>
      </div>
      <div class="info-div" @click="fencingConstruction">
        <img src="@/assets/img/dwsg.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>打围施工</p>
          <p>578</p>
        </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/jtysqy.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>交通事故易发点</p>
          <p>788</p>
        </div>
      </div>
      <div class="info-div" @click="keyTransportationEnterprises">
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>重点运输企业</p>
          <p>758</p>
        </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/gjxl.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>公交线路</p>
          <p>785</p>
        </div>
      </div>
      <div class="info-div">
        <img src="@/assets/img/aqyh.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>安全隐患</p>
          <p>718</p>
        </div>
      </div>

      <!--      搜索-->
      <!--      <el-input-->
      <!--          v-model="keyword"-->
      <!--          placeholder="输入关键字搜索"-->
      <!--          style="width: 300px"-->
      <!--          @change="handleSearch"-->
      <!--      >-->
      <!--      </el-input>-->
      <!--      <div class="ul">-->
      <!--        <div class="li" v-for="item in data" :key="item.id" @click="handleSelect(item)">-->
      <!--          <div class="d-flex flex-column">-->
      <!--            <span style="margin-bottom: 6px">{{item.name}}</span>-->
      <!--            <span>地址：{{item.address}}</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script lang="ts" setup>
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
<script setup>
import { shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import { Pointer } from "@element-plus/icons-vue";

const map = shallowRef(null);
const keyword = ref('');
@@ -77,20 +114,17 @@
let marker = ref(null);
let AMapObj, placeSearch, geocoder;
const props = defineProps({
  form:{}
  form: {}
})

onMounted(async () => {
  await initMap()
  gddt()
});
const gddt = () =>{
const gddt = () => {

}

const toggleTrafic = () => {
  emit('changeDt')
};
const fencingConstruction = () => {
  //构建信息窗体中显示的内容
  let info = [];
@@ -105,7 +139,7 @@
  //      position: [103.646554,30.989656],
  //      offset: new AMap.Pixel(-13, -30)
  //    });
  if (isKeyTour.value){
  if (isKeyTour.value) {
    // marker.setMap(map.value);
    if (marker.value) {
      marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
@@ -113,21 +147,21 @@
      marker.value = new AMap.Marker({
        map: map.value,
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
        position: [103.646233,30.989999],
        position: [103.646233, 30.989999],
        offset: new AMap.Pixel(13, 30),

      });
    }
    infoWindow.open(map.value,marker.value.getPosition());
    infoWindow.open(map.value, marker.value.getPosition());
    isKeyTour.value = false;
  }else {
  } else {
    console.log("清除marker")
    closeInfoWindow()
    infoWindow.close()
    marker.value.setMap(null); // 清除marker
    // marker.setMap(null)
    // marker = null;
    isKeyTour.value =true
    isKeyTour.value = true
  }

}
@@ -155,7 +189,7 @@
  //      position: [103.646554,30.989656],
  //      offset: new AMap.Pixel(-13, -30)
  //    });
  if (isKeyTour.value){
  if (isKeyTour.value) {
    // marker.setMap(map.value);
    if (marker.value) {
      marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
@@ -163,13 +197,13 @@
      marker.value = new AMap.Marker({
        map: map.value,
        icon: startIcon,
        position: [103.646044,30.989495],
        position: [103.646044, 30.989495],
        offset: new AMap.Pixel(13, 30)
      });
    }
    infoWindow.open(map.value,marker.value.getPosition());
    infoWindow.open(map.value, marker.value.getPosition());
    isKeyTour.value = false;
  }else {
  } else {

    console.log("清除marker")
    closeInfoWindow()
@@ -177,7 +211,7 @@
    marker.value.setMap(null); // 清除marker
    // marker.setMap(null)
    // marker = null;
    isKeyTour.value =true
    isKeyTour.value = true
  }

}
@@ -186,32 +220,32 @@
  let info = [];
  info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>都江堰客运中心</h4>");
  info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>日累积人流量达到3000+\n" +
      "\n" +
      "xxxxxxxxxxxxxxxx</p>");
    "\n" +
    "xxxxxxxxxxxxxxxx</p>");
  const infoWindow = new AMap.InfoWindow({
    content: info.join("")  //使用默认信息窗体框样式，显示信息内容
  });

     //构建信息窗体中显示的内容
   // marker = new AMap.Marker({
   //      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
   //      position: [103.646554,30.989656],
   //      offset: new AMap.Pixel(-13, -30)
   //    });
  if (isKeyTour.value){
  //构建信息窗体中显示的内容
  // marker = new AMap.Marker({
  //      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
  //      position: [103.646554,30.989656],
  //      offset: new AMap.Pixel(-13, -30)
  //    });
  if (isKeyTour.value) {
    // marker.setMap(map.value);
    if (marker.value) {
      marker.value.setMap(map.value); // 如果已有marker，重新设置地图实例
    } else {
      marker.value = new AMap.Marker({
        map: map.value,
        position: [103.646554,30.989656],
        position: [103.646554, 30.989656],
        offset: new AMap.Pixel(13, 30)
      });
    }
    infoWindow.open(map.value,marker.value.getPosition());
    infoWindow.open(map.value, marker.value.getPosition());
    isKeyTour.value = false;
  }else {
  } else {

    console.log("清除marker")
    closeInfoWindow()
@@ -219,7 +253,7 @@
    marker.value.setMap(null); // 清除marker
    // marker.setMap(null)
    // marker = null;
    isKeyTour.value =true
    isKeyTour.value = true
  }

}
@@ -231,70 +265,70 @@
  info.push("<p class='input-item' style='display: flex;flex-wrap: wrap;width: 270px'>近三年发生交通事故XX起，其中造成人员伤亡xx起，XXXXXXXXXXXXXXXXXXXXX</p>");
  const infoWindow = new AMap.InfoWindow({
    content: info.join("")  //使用默认信息窗体框样式，显示信息内容
   });
    if(isIdent.value){
      vectorLayer.value = new AMap.VectorLayer({
        zIndex: 100,
      });
      // 添加矢量图层到地图上
      map.value.add(vectorLayer.value);
      // 添加路段标注
      const path = [
        [103.646504,30.989656],
        [103.647669,30.989409]
      ];
      const polyline = new AMap.Polyline({
        path: path,
        borderWeight: 5,
        strokeColor: 'orange',
      });
      const markers = new AMap.Marker({
        icon:'',
        map: map.value,
        position: [103.635750,30.983912]
      });
  });
  if (isIdent.value) {
    vectorLayer.value = new AMap.VectorLayer({
      zIndex: 100,
    });
    // 添加矢量图层到地图上
    map.value.add(vectorLayer.value);
    // 添加路段标注
    const path = [
      [103.646504, 30.989656],
      [103.647669, 30.989409]
    ];
    const polyline = new AMap.Polyline({
      path: path,
      borderWeight: 5,
      strokeColor: 'orange',
    });
    const markers = new AMap.Marker({
      icon: '',
      map: map.value,
      position: [103.635750, 30.983912]
    });




      infoWindow.open(map.value,[103.646504,30.989656]);
      // polyline.setMap(map.value);
    infoWindow.open(map.value, [103.646504, 30.989656]);
    // polyline.setMap(map.value);

      // // 添加起点和终点标注
      // const startMarker = new AMap.Marker({
      //   position: path[0],
      //   map: map.value,
      //   icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      //   anchor: 'bottom-center',
      // });
      // const endMarker = new AMap.Marker({
      //   position: path[path.length - 1],
      //   map: map.value,
      //   icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      //   anchor: 'bottom-center',
      // });
      vectorLayer.value.add(polyline);
      // // 将标注点添加到数组中，用于后续操作（如点击事件）
      // markers.value = [startMarker, endMarker];
      isIdent.value = false
    }else {
      isIdent.value = true
      infoWindow.close()
      closeInfoWindow()
      vectorLayer.value.clear(); // 清除矢量图层上的所有图形
    }
    // // 添加起点和终点标注
    // const startMarker = new AMap.Marker({
    //   position: path[0],
    //   map: map.value,
    //   icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //   anchor: 'bottom-center',
    // });
    // const endMarker = new AMap.Marker({
    //   position: path[path.length - 1],
    //   map: map.value,
    //   icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //   anchor: 'bottom-center',
    // });
    vectorLayer.value.add(polyline);
    // // 将标注点添加到数组中，用于后续操作（如点击事件）
    // markers.value = [startMarker, endMarker];
    isIdent.value = false
  } else {
    isIdent.value = true
    infoWindow.close()
    closeInfoWindow()
    vectorLayer.value.clear(); // 清除矢量图层上的所有图形
  }
}
const keyTransportationEnterprises = (callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) => {
  let endIcon= new AMap.Icon({
  let endIcon = new AMap.Icon({
    size: new AMap.Size(25, 34),
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
    imageSize: new AMap.Size(135, 40),
    imageOffset: new AMap.Pixel(-95, -3)
  })
  const marker = new AMap.Marker({
    icon:endIcon,
    icon: endIcon,
    map: map.value,
    position: [103.635750,30.983912]
    position: [103.635750, 30.983912]
  });
  console.log('重点运输企业')
  // 添加点击事件打开信息窗体
@@ -308,33 +342,33 @@
  //   // 打开信息窗体
  //   infoWindow.open(map.value, [103.635750,30.983912]);
  // });
//   var marker = new AMap.Marker({
//     icon: "",
//     position: [103.635750,30.983912]
//   });
//   var marker1 = new AMap.Marker({
//     icon: "",
//     position: [103.635750,30.983412]
//   });
  //   var marker = new AMap.Marker({
  //     icon: "",
  //     position: [103.635750,30.983912]
  //   });
  //   var marker1 = new AMap.Marker({
  //     icon: "",
  //     position: [103.635750,30.983412]
  //   });
  map.value.add(marker);
  map.value.setFitView();
// // 删除已有Marker对象使用：
//   map.value.remove(marker)
// // 可以一次性添加多个Marker实例，只需将每个Marker示例放入一个数组Array中。
// // 多个点实例组成的数组
//   const markerList = [marker, marker1];
//   map.value.add(markerList);
// // 绑定Marker实例的事件
//
// // 绑定事件
  // // 删除已有Marker对象使用：
  //   map.value.remove(marker)
  // // 可以一次性添加多个Marker实例，只需将每个Marker示例放入一个数组Array中。
  // // 多个点实例组成的数组
  //   const markerList = [marker, marker1];
  //   map.value.add(markerList);
  // // 绑定Marker实例的事件
  //
  // // 绑定事件
  marker.on('click', clickHandler);

};
function closeInfoWindow() {
  map.value.clearInfoWindow();
}
 //构建自定义信息窗体
    function createInfoWindow(title, content) {
//构建自定义信息窗体
function createInfoWindow(title, content) {
  var info = document.createElement("div");
  info.className = "custom-info input-card content-window-card";

@@ -372,63 +406,63 @@
  info.appendChild(bottom);
  return info;
}
const clickHandler = (e)=> {
const clickHandler = (e) => {
  console.log(e)
  // alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
    // 创建信息窗体实例
  // 创建信息窗体实例
  var title = '正华物流',
      content = [];
    content = [];
  content.push("正华物流主要从事XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
  content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>");
    const infoWindow = new AMap.InfoWindow({
      content: createInfoWindow(title, content.join("<br/>")), // 信息窗体内容
      offset: new AMap.Pixel(10, -280)
    });
  const infoWindow = new AMap.InfoWindow({
    content: createInfoWindow(title, content.join("<br/>")), // 信息窗体内容
    offset: new AMap.Pixel(10, -280)
  });

    // 打开信息窗体
    infoWindow.open(map.value, [103.635750,30.983912]);
  // 打开信息窗体
  infoWindow.open(map.value, [103.635750, 30.983912]);
};
const btnlk= ()=>{
  console.log('实时路况图层',isVisible.value)
const btnlk = () => {
  console.log('实时路况图层', isVisible.value)

  if (isVisible.value){
  if (isVisible.value) {
    trafficLayer.value.show();
    isVisible.value = false
  }else{
  } else {
    // map.value.removePlugin('map-box');
    console.log('隐藏实时路况图层',isVisible.value)
    console.log('隐藏实时路况图层', isVisible.value)
    // map.value.removePlugin('AMap.TruckDriving');
    trafficLayer.value.hide();
    isVisible.value = true
  }
}
function initMap(){
function initMap() {
  AMapLoader.load({
    key: 'f7251c9df6162e94e699f1720f7932c4',  //设置您的key
    version: "2.0",
    plugins: ['AMap.ToolBar','AMap.Driving'],
    plugins: ['AMap.ToolBar', 'AMap.Driving'],
    AMapUI: {
      version: "1.1",
      plugins: [],

    },
    Loca:{
    Loca: {
      version: "2.0.0"
    },
  }).then((AMap)=>{
  }).then((AMap) => {
    // console.log(AMap);
    AMapObj = AMap;
    map.value = new AMap.Map("map-box",{
      viewMode:"3D",
      zoom:12,
      zooms:[2,22],
      center: [103.635750,30.983912],
    map.value = new AMap.Map("map-box", {
      viewMode: "3D",
      zoom: 12,
      zooms: [2, 22],
      center: [103.635750, 30.983912],
      mapStyle: "amap://styles/grey",
    });
    // 实例化TileLayer.Traffic实例
    trafficLayer.value = new AMap.TileLayer.Traffic({
      zIndex: 10, // 设置路况图层的zIndex
      showTraffic:true
      showTraffic: true
    });

    // 将实时路况图层添加到地图上
@@ -438,47 +472,47 @@

    map.value.on('click', onMapClick);
    AMap.plugin(
        ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
          'AMap.Geocoder','AMap.AutoComplete'],
        () => {
          // 缩放条
          const toolbar = new AMap.ToolBar();
          // 比例尺
          const scale = new AMap.Scale();
          // 定位
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 超过10秒后停止定位，默认：5s
            position: 'RT', // 定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
          });
          geocoder = new AMap.Geocoder({
            city: '全国',
          });
          map.value.addControl(geolocation);
          map.value.addControl(toolbar);
          map.value.addControl(scale);
          placeSearch = new AMap.PlaceSearch({
            city: '全国',
            pageSize: 10, // 单页显示结果条数
            pageIndex: 1, // 页码
            citylimit: false, // 是否强制限制在设置的城市内搜索
            autoFitView: true,
          });
      ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch',
        'AMap.Geocoder', 'AMap.AutoComplete'],
      () => {
        // 缩放条
        const toolbar = new AMap.ToolBar();
        // 比例尺
        const scale = new AMap.Scale();
        // 定位
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：5s
          position: 'RT', // 定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
        });
    if(props.form){
      keyword.value=props.form.adress
        geocoder = new AMap.Geocoder({
          city: '全国',
        });
        map.value.addControl(geolocation);
        map.value.addControl(toolbar);
        map.value.addControl(scale);
        placeSearch = new AMap.PlaceSearch({
          city: '全国',
          pageSize: 10, // 单页显示结果条数
          pageIndex: 1, // 页码
          citylimit: false, // 是否强制限制在设置的城市内搜索
          autoFitView: true,
        });
      });
    if (props.form) {
      keyword.value = props.form.adress
      handleSearch(props.form.adress)
      let e={
        lnglat:{
          lng:props.form.longitude,
      let e = {
        lnglat: {
          lng: props.form.longitude,
          lat: props.form.latitude
        }
      }
      onMapClick(e)
    }
  }).catch(e=>{
  }).catch(e => {
    console.log(e);
  })
}
@@ -499,21 +533,21 @@
// 点击地图
function onMapClick(e) {
  coord.value = e.lnglat.lng + ',' + e.lnglat.lat
  geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
  geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result为对应的地理位置详细信息
      keyword.value = result.regeocode.formattedAddress
      addresstext.value = result.regeocode.formattedAddress
      adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
      adcode.value = result.regeocode.addressComponent.adcode.slice(0, 4) + '00'
    }
  })
  drawMarker(e.lnglat)
}
function onMapadcode (e){
  geocoder.getAddress([e.location.lng, e.location.lat], function(status, result) {
function onMapadcode(e) {
  geocoder.getAddress([e.location.lng, e.location.lat], function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result为对应的地理位置详细信息
      adcode.value = result.regeocode.addressComponent.adcode.slice(0,4)+'00'
      adcode.value = result.regeocode.addressComponent.adcode.slice(0, 4) + '00'
    }
  })
}
@@ -546,14 +580,16 @@
  map.value.add(marker);
  map.value.setZoomAndCenter(16, [longitude, latitude]);
}
const emit = defineEmits(['btnAddress','changeDt'])
function btnsubmit(){
  emit('btnAddress',coord.value,addresstext.value,adcode.value)
const emit = defineEmits(['btnAddress', 'changeDt'])
function btnsubmit() {
  emit('btnAddress', coord.value, addresstext.value, adcode.value)
}
// initMap();
</script>
<style>
html, body, #container {
<style scoped>
html,
body,
#container {
  height: 100%;
  width: 100%;
}
@@ -623,54 +659,95 @@

span {
  margin-left: 5px;
  //font-size: 11px;
}

.info-middle img {
  //float: left;
  height: 100%;
  width: 100%;
  margin-right: 6px;
}
</style>
<style lang="scss" scoped>

.home{
.home {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  .info-div{

  .info-div {
    align-items: center;
    display: flex;
    cursor: pointer;
    margin-top: 0.5rem;
    background-color: #4E2749;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.5rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #74A6F2;

    .item-tb-img {
      width: 20px;
      height: 20px;
    }

    .info-div-p {
      flex: 1;
      margin-left: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .info-box {
    position: absolute;
    top: 8px;
    right: 8px;
    top: 80px;
    right: 34%;
    width: 300px;
    //height: 100%;
    //background-color: #1f1f1f;
    height: 100%;
    background-color: #1f1f1f;
    opacity: 0.6;
    background: #11223A;
    border: 1px solid #29466A;
    background-color: #131F3F;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }

  .item-tb {
    cursor: pointer;
    margin-top: 20px;

    .item-tb-img {
      width: 65px;
    }

    .item-tb-p {
      line-height: 35px;
      background: #00adb5;
      color: #fff;
      text-align: center;
      text-shadow:
        0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
    }
  }
}
.ul{

.ul {
  margin-top: 10px;
  height: 60%;
  overflow-y: scroll;
  .li{

  .li {
    padding: 5px 10px;
    background: #FFFFFF;
    margin-bottom: 10px;
    min-height: 60px;
    .d-flex{

    .d-flex {
      background: #FFFFFF;
      color: #1f1f1f;
      display: flex;
@@ -679,13 +756,14 @@
  }
}

#map-box{
#map-box {
  height: calc(100% - 30px);
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.btn{

.btn {
  padding: 10px;
  display: flex;
  align-items: center;
@@ -697,6 +775,7 @@
:deep() .amap-logo {
  display: none !important;
}

:deep() .amap-copyright {
  display: none !important;
}