设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/views/equipmentManagement/equipmentList/components/Content.vue

@@ -81,7 +81,8 @@
          this.map = new AMap.Map(`map${status}`, {
            //设置地图容器id
            zoom: this.zoom, //初始化地图级别
            center: this.center //初始化地图中心点位置
            center: this.center, //初始化地图中心点位置
            mapStyle: "amap://styles/macaron" // macaron  whitesmoke
          })

          //初始化查询地理位置插件
@@ -114,7 +115,7 @@
            `<div class="nodeMarker" id="node${index}}">` +
            '<img class="normal" src="/images/equipmentManagement/default.png">' +
            '<img class="selected" src="/images/equipmentManagement/select.png">' +
            `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP地址: <span class="data">${item.devIp}</span> </div> <div class="property">设备位置: <span class="data">${item.province}</span></div><div class="property">安装时间: <span class="data">${item.installTime}</span></div></div>`
            `<div class="box"><div class="box-triangle"></div> <div class=box-txt"> <div class="name">${item.devName}</div> <div class="property">IP地址: <span class="data">${item.devIp}</span> </div> <div class="property">设备位置: <span class="data">${item.province}</span></div><div class="property">安装时间: <span class="data">${item.installTime}</span></div></div></div>`
          ;("</div>")

          let marker = new this.AMap.Marker({
@@ -163,7 +164,8 @@
  position: relative;
  box-sizing: border-box;
  // padding: 20px;
  width: 1280px;
  width: 95%;
  min-width: 1280px;
  // background-color: #34405a;
  margin: 0 auto;

@@ -189,8 +191,10 @@
    }
    #map,
    #mapFull {
      width: 1232px;
      height: 496px;
      width: 100%;
      // height: 496px;
      min-height: 496px;
      height: 60vh;
      border-radius: 8px;

      ::v-deep .nodeMarker {
@@ -198,13 +202,29 @@
        .selected {
          display: none;
        }
        .box-triangle {
          // box-sizing: border-box;
          // display: none;
          // position: absolute;
          position: absolute;
          top: -15px;
          left: 115px;

          height: 0px;
          width: 0px;
          // background: red;
          border-bottom: 8px solid #ffffff;
          border-top: 8px solid transparent;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
        }

        .box {
          box-sizing: border-box;
          display: none;
          position: absolute;
          padding: 20px 10px;
          top: 40px;
          top: 66px;
          left: -100px;
          width: 247px;
          height: 160px;
@@ -212,9 +232,15 @@
          filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));

          .name {
            margin-bottom: 14px;
            font-weight: bold;
            opacity: 1;
            font-family: PingFangSC-Bold;
            font-size: 16px;
            font-weight: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #3d3d3d;

            margin-bottom: 14px;
          }

          .property {