修改样式

chenyao

2025-02-18 d3cea5df5077c60ad4aabb4dbedc6d56dd4783be

 src/views/DronePilotDetails.vue

@@ -6,6 +6,7 @@
          Your browser is too old which doesn't support HTML5 video.
        </video>
        <el-empty v-show="videoUrl == ''" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
        <div v-if="videoUrl" class="center-point"></div>
      </div>
      <div class="l-map" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
        <div id="cesiumContainerBigMap"></div>
@@ -301,6 +302,7 @@
    }
    case EBizCode.FlightTaskProgress: { // 获取进度
      // 如果点击列表进入没有获取到航线文件，那么这里重新请求一次
      console.log('航线有么？',payload)
      if (ssLinePath.value == '') {
        getWrjSsLx()
      }
@@ -420,6 +422,9 @@
    lZoom.style.position = 'fixed';
    cesiumContainer.style.width = `${screenWidth.value/2}px`
    cesiumContainer.style.height = `${screenHeight.value}px`
    cesiumContainer.style.position = 'static'
    cesiumContainer.style.right = '0'
    cesiumContainer.style.marginLeft = '0%'
  } else { //竖屏
    isLandscape.value = false;
    screenWidthVideo.value = window.innerWidth
@@ -430,6 +435,8 @@
    lZp.style.right = '32%';
    cesiumContainer.style.width = `${screenHeight.value}px`
    cesiumContainer.style.height = `${screenHeight.value/2}px`
    // cesiumContainer.style.position = 'absolute'
    cesiumContainer.style.marginLeft = '-32%'
  }
};

@@ -549,8 +556,6 @@
    // position: relative;
    // display: flex;
    .l-map {
      position: absolute;
      right: 36%;
      .l-zp {
        position: fixed;
        right: 16%;
@@ -581,6 +586,7 @@
    }
  }
  .l-video {
    position: relative;
    .el-empty {
      width: 100%;
      height: 100%;
@@ -593,11 +599,23 @@
        margin: 0;
      }
    }
    .center-point {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.4rem;
      height: 0.4rem;
      opacity: 0.5;
      border-radius: 50%;
      background-color: yellow;
      transform: translate(-50%, -50%);
      justify-content: center;
    }
  }
  #cesiumContainerBigMap {
    width: 100%;
    height: 100%;
    margin-right: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;