Merge remote-tracking branch 'origin/master'

罗广辉

2025-03-31 99e8c98928ef2a65cbabedc7dff3f786ea6d98ae

 src/views/SignMachineNest/components/MachineRight/MachineStatus.vue

@@ -7,16 +7,59 @@
        <img src="@/assets/images/signMachineNest/machineRight/wrj.png" alt="">
        <div class="info-right">
          <div class="name">Matrice 30</div>
          <div class="wz">当前位置：450.32；210.56</div>
          <div class="">
            <div>舱内关机</div>
            <div>需要维保</div>
          <div class="wz">
            <span class="left">当前位置：</span>
            <span class="right">450.32；210.56</span>
          </div>
          <div class="close-wb">
            <div class="close">舱内关机</div>
            <div class="wb">需要维保</div>
          </div>
        </div>
      </div>
      <div class="status">
        <div>实时真高</div>
        <div>200<span>米</span></div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/height.png" alt="">
            <span class="text">实时真高</span>
          </div>
          <div class="text-data">200<span class="text">米</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/speed.png" alt="">
            <span class="text">飞行速度</span>
          </div>
          <div class="text-data">12<span class="text">米/秒</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/signal.png" alt="">
            <span class="text">信号强度</span>
          </div>
          <div class="text-data">强</div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/electricity.png" alt="">
            <span class="text">电池电量</span>
          </div>
          <div class="text-data">98<span class="text">%</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/distance.png" alt="">
            <span class="text">飞行距离</span>
          </div>
          <div class="text-data">98<span class="text">km</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/duration.png" alt="">
            <span class="text">飞行时长</span>
          </div>
          <div class="text-data">188<span class="text">min</span></div>
        </div>
      </div>
    </div>
  </div>
@@ -38,25 +81,104 @@
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    
    padding: 8px 0px 20px 18px;
    .info {
      display: flex;
      // justify-content: ce;
      height: 88px;
      display: flex;
      align-items: center;
      img {
        width: 94px;
        height: 88px;
        margin-right: 22px;
      }
      .info-right {
        name {
        .name {
          width: 184px;
          height: 31px;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 24px;
          color: #0BE5F5;
          line-height: 28px;
        }
        .wz {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-size: 14px;
          color: #FFFFFF;
            line-height: 16px;
          .left {
            width: 70px;
            height: 21px;
            font-weight: 400;
            opacity: 0.6;
          }
          .right {
            width: 100px;
            height: 21px;
            font-weight: bold;
          }
        }
        .close-wb {
          display: flex;
          margin-top: 10px;
          text-align: center;
          line-height: 16px;
          .close {
            width: 60px;
            height: 20px;
            background: rgba(255,178,106,0.2);
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FFB26A;
            color: #FFB26A;
            margin-right: 10px;
          }
          .wb {    
            width: 60px;
            height: 20px;       
            background: rgba(255,106,106,0.2);
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FF6A6A;
            color: #FF6A6A;
          }
        }
      
      }
    }
    .status {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin-top: 18px;
      .card {
        width: calc(33.33% - 14px); 
      }
      img {
        width: 16px;
        height: 16px;
        // margin-right: 0px;
        // margin-top: 2px;
      }
      .text {
        width: 56px;
        height: 21px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 16px;
      }
      .text-data {
        // width: 40px;
        margin-left: 20px;
        height: 23px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 18px;
        color: #0BE5F5;
        line-height: 21px;
      }
    }
 }