转盘缩小调整

chenyao

2025-02-08 9a9b8eda3d4a3c9805035a0ef99065107e6c0d5f

转盘缩小调整

 src/views/DronePilotList.vue

@@ -102,14 +102,14 @@

onMounted(() => {
  
  navigator.geolocation.getCurrentPosition(
        (success) => {
          console.log(success.coords.longitude, '经纬度')
          // position.value = {
          //   latitude: success.coords.latitude,
          //   longitude: success.coords.longitude,
          // };
        })
  // navigator.geolocation.getCurrentPosition(
  //       (success) => {
  //         console.log(success.coords.longitude, '经纬度')
  //         position.value = {
  //           latitude: success.coords.latitude,
  //           longitude: success.coords.longitude,
  //         };
  //       })

  init()
  // 设置定时器，每隔 3 秒刷新一次数据

 src/views/components/comPass.vue

@@ -155,9 +155,9 @@
    position: relative;
    color: #1fa3f6;
    background-color: rgba(0, 0, 0, 0.5);
    // img {
    //   height: 100px;
    // }
    img {
      height: 50px;
    }
  }
  .left-img-new {
    &::before {
@@ -169,10 +169,10 @@
    }
    .scale {
      position: absolute;
      width: 0.6rem;
      height: 0.6rem;
      width: 0.3rem;
      height: 0.3rem;
      background-color: #1fa3f6;
      left: -0.9rem;
      left: -0.5rem;

      &::before {
        content: '';
@@ -180,10 +180,10 @@
        width: 0;
        height: 0;
        top: 0rem;
        left: 0.6rem;
        border-top: solid 5px transparent;
        border-left: solid 5px #1fa3f6;
        border-bottom: solid 5px transparent;
        left: 0.3rem;
        border-top: solid 3px transparent;
        border-left: solid 3px #1fa3f6;
        border-bottom: solid 3px transparent;
      }
    }
  }
@@ -198,21 +198,21 @@
    .arrow-box {
      position: absolute;
      bottom: 0;
      left: 1.1rem;
      left: 0.6rem;

      .arrow {
        position: relative;
        width: 0.6rem;
        height: 0.6rem;
        width: 0.3rem;
        height: 0.3rem;
        background-color: #1fa3f6;

        &::before {
          content: '';
          position: absolute;
          left: -0.6rem;
          left: -0.3rem;
          top: 0;
          border: 5px solid transparent {
            right: solid 5px #1fa3f6;
          border: 3px solid transparent {
            right: solid 3px #1fa3f6;
          }
        }
      }
@@ -334,11 +334,11 @@
    position: relative;
    .compass-box {
      margin: 0 0.6rem;
      width: 8rem;
      height: 8rem;
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      position: relative;
      border: 30px solid rgba($color: #323931, $alpha: 0.5);
      border: 24px solid rgba($color: #323931, $alpha: 0.5);
      box-shadow: 0 2px 12px 0 #158aff;
      user-select: none;
      // top: 15px;
@@ -346,8 +346,8 @@
      .scale {
        width: calc(100% + 68px);
        position: absolute;
        top: calc(50% - 15px);
        left: -37px;
        top: calc(50% - 10px);
        left: -34px;
        padding-left: 12px;
        font-weight: bold;
        color: #c1c3c4;
@@ -357,11 +357,11 @@
        -moz-transform: rotate(var(--rotate));
        -webkit-transform: rotate(var(--rotate));
        -o-transform: rotate(var(--rotate));

        font-size: 12px;
        &:nth-child(3n - 2) {
          color: #fff;
          // font-weight: bolder;
          font-size: 20px;
          font-size: 14px;
        }

        // @for $i from 1 through 12 {
@@ -454,8 +454,8 @@
    }

    .center-show {
      width: 30px;
      height: 40px;
      width: 1rem;
      height: 1.4rem;
      position: absolute;
      left: 50%;
      top: 50%;