设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

设备管理 样式调整

 src/components/IndexHeader.vue

@@ -265,13 +265,14 @@
  .right {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input ::v-deep {
      input {
        height: 62px;
        height: 50px;
        width: 180px;
        background-color: rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.05) !important;
        border: none;
        border-radius: 0;
        color: #fff;
@@ -282,13 +283,14 @@
      }

      .el-input__suffix {
        padding-top: 23px;
        padding-right: 23px;
        padding-top: 17px;
        padding-right: 19px;
      }

      .search {
        color: #fff;
        cursor: pointer;
      .iconList {
        .search {
          color: #fff !important;
          cursor: pointer;
        }
      }
    }

@@ -313,8 +315,8 @@
    }

    .userImg {
      height: 48px;
      width: 48px;
      height: 28px;
      width: 28px;
      margin: 0 20px;
    }
  }

 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 {

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

@@ -455,7 +455,8 @@

<style scoped lang="scss">
.FormList {
  width: 1280px;
  // width: 100%;
  min-width: 1280px;
  // padding: 0 24px;
  // background: #36b24a;
  background-color: #1f2a3e;

 src/views/equipmentManagement/equipmentList/index.vue

@@ -42,7 +42,7 @@
  padding-bottom: 24px;
  .breadcrumb {
    padding: 24px 0;
    width: 1280px;
    width: 95%;
    // background-color: #34405a;
    margin: 0 auto;
    display: flex;