vue 關於圖片和文字的絕對定位 js 動態設置定位

背景

• 實現以下功能，並且在頁面縮放下 文字不會偏差
  

結果

• 核心代碼

    <div class="content-box" id="od-datas">
      <div class="od-data">
        <p class="od-detail">{{ fmtValue(infoData.estation['Meter.Ptotal'],2) }} kW</p>
        <p class="od-detail">{{ fmtValue(infoData.estation['Meter.Qtotal'],2) }} kVar</p>
        <p class="od-detail">{{ fmtValue(infoData.estation['Meter.Ia'],2) }} A</p>
        <p class="od-title">能源站負荷</p>
      </div>

      <div class="od-data">
        <p class="od-title">市電</p>
        <p class="od-detail">{{ fmtValue(infoData.es['Meter.Ptotal'],2)}} kW</p>
        <p class="od-detail">{{ fmtValue(infoData.es['Meter.Qtotal'],2)}} kVar</p>
        <p class="od-detail">{{ fmtValue(infoData.es['Meter.Ia'],2)}} A</p>
      </div>

      <div class="od-data">
        <p class="od-detail">{{ fmtValue(infoData.yq['Meter.Ptotal'],2)}} kW</p>
        <p class="od-detail">{{ fmtValue(infoData.yq['Meter.Qtotal'],2)}} kVar</p>
        <p class="od-detail">{{ fmtValue(infoData.yq['Meter.Ia'],2)}} A</p>
        <p class="od-title">用戶負荷</p>
      </div>

      <div class="od-data">
        <p class="od-title">光伏</p>
        <p class="od-detail">{{ fmtValue(infoData.pv['Meter.Ptotal'],2)}} kW</p>
      </div>

      <div class="od-data">
        <p class="od-detail">0 kW</p>
        <p class="od-detail">0 kW</p>
        <p class="od-title">儲能</p>
      </div>
    </div>

.content-box {
  padding-top: 15px;
  height: calc(100% - 25px);
  box-sizing: border-box;
  position: relative;
  background-image: url(../../../assets/imgs/optimizationData-bg.png);
  background-repeat: no-repeat;
  background-position: center;
}
.od-data {
  position: absolute;
}
// 下 1-3-5
.od-data:nth-child(1) {
  bottom: 35px;
  left: 410px;
  .od-title {
    margin-top: 35px;
  }
}
.od-data:nth-child(3) {
  bottom: 35px;
  left: 860px;
  .od-title {
    margin-top: 35px;
  }
}
.od-data:nth-child(5) {
  width: 120px;
  bottom: 35px;
  left: 1310px;
  .od-title {
    margin-top: 50px;
  }
  .od-detail {
    position: absolute;
    bottom: 90px;
    &:nth-child(1) {
      left: 0px;
    }
    &:nth-child(2) {
      left: -123px;
    }
  }
}
// 上 2-4
.od-data:nth-child(2) {
  top: 40px;
  left: 675px;
  .od-title {
    margin-bottom: 75px;
  }
}
.od-data:nth-child(4) {
  top: 40px;
  left: 1035px;
  .od-title {
    margin-bottom: 90px;
  }
}
.od-title {
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 25px;
}

  mounted(){ // dom加載完畢之後，開始計算 文字位置，並且添加窗口變化的監聽
    this.resizePosition();
     window.addEventListener("resize", () => {
       console.log('windows resize');
       this.resizePosition();
     });
  },


// 計算絕對定位的
 resizePosition() {
      // 重新定位
     
        // 背景圖 1166*361
        // 1920*1080 下 1660*425  開始計算位置
        let width = document.getElementById("od-datas").offsetWidth;
        let height = document.getElementById("od-datas").offsetHeight;

        let pleft = (width - 1166) / 2;
        let ptop = (height - 361) / 2;
        let pbottom = (height - 361) / 2;

        let left0 = 163 + pleft;
        let left2 = 613 + pleft;
        let left4 = 1063 + pleft;

        let left1 = 428 + pleft;
        let left3 = 788 + pleft;

        let bottom = 3 + pbottom;
        let top = 7 + ptop;

        var pdata = document.getElementsByClassName("od-data");
        pdata[0].style.bottom = bottom + "px";
        pdata[0].style.left = left0 + "px";
        pdata[2].style.bottom = bottom + "px";
        pdata[2].style.left = left2 + "px";
        pdata[4].style.bottom = bottom + "px";
        pdata[4].style.left = left4 + "px";

        pdata[1].style.bottom = top + "px";
        pdata[1].style.left = left1 + "px";
        pdata[3].style.bottom = top + "px";
        pdata[3].style.left = left3 + "px";
    }