5.8

pengwei

2025-05-08 b281791abab23d672922b7e9b7d1b51e348ed710

 ÏîÄ¿´úÂë/ÉìËõ¸Ë/client/src/views/tts/PickAndDrop/PickAndDrop.vue

@@ -102,6 +102,14 @@
            </div>
          </div>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <div class="video_l">
            <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
              >视频监控左侧</span
            >
            <img src="@/assets/imgs/right.png" alt="" />
          </div>
        </div>
      </div>
      <div class="content_r">
        <div class="model">右侧伸缩杆</div>
@@ -117,6 +125,14 @@
              <div class="pulse2"></div>
              <div class="pulse3"></div>
            </div>
          </div>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <div class="video_r">
            <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
              >视频监控右侧</span
            >
            <img src="@/assets/imgs/left.png" alt="" />
          </div>
        </div>
      </div>
@@ -138,6 +154,14 @@
            </div>
          </div>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <div class="video_l">
            <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
              >视频监控左侧</span
            >
            <img src="@/assets/imgs/right.png" alt="" />
          </div>
        </div>
      </div>
      <div class="content_r">
        <div class="model">右侧伸缩杆</div>
@@ -153,6 +177,14 @@
              <div class="pulse2"></div>
              <div class="pulse3"></div>
            </div>
          </div>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center">
          <div class="video_r">
            <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
              >视频监控右侧</span
            >
            <img src="@/assets/imgs/left.png" alt="" />
          </div>
        </div>
      </div>
@@ -217,10 +249,8 @@
    height: 7.83rem;
    display: flex;
    justify-content: space-between;

    .button_l {
      display: flex;

      .btnicon {
        display: flex;
        justify-content: center;
@@ -319,6 +349,7 @@

    .content_l {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 50%;
      height: 45rem;
@@ -326,7 +357,7 @@
      color: rgba(16, 16, 16, 1);
      box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
      border: 0.06rem solid rgba(6, 229, 231, 1);

      padding: 2rem 0rem;
      .model {
        color: #fff;
        text-align: center;
@@ -337,14 +368,15 @@
      .operate {
        display: flex;
        flex-direction: column;
        padding: 0.88rem 0.88rem;
        align-items: flex-end;
        padding: 0.58rem 0.58rem;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 8.75rem;
          height: 4.19rem;
          height: 3.19rem;
          border-radius: 0.31rem;
          background: linear-gradient(
            90deg,
@@ -446,10 +478,22 @@
          }
        }
      }
      .video_l {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        border: 0.25rem solid rgba(255, 255, 255, 0.8);
        img {
          width: 6rem;
          height: 8rem;
        }
      }
    }

    .content_r {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 50%;
      height: 45rem;
@@ -458,7 +502,7 @@
      box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
      border: 0.06rem solid rgba(6, 229, 231, 1);
      margin-left: 2rem;

      padding: 2rem 0rem;
      .model {
        color: #fff;
        text-align: center;
@@ -469,14 +513,14 @@
      .operate {
        display: flex;
        flex-direction: column;
        padding: 0.88rem 0.88rem;

        align-items: flex-end;
        padding: 0.58rem 0.58rem;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 8.75rem;
          height: 4.19rem;
          height: 3.19rem;
          border-radius: 0.31rem;
          background: linear-gradient(
            90deg,
@@ -576,6 +620,17 @@
            height: 4.375rem;
            opacity: 0;
          }
        }
      }
      .video_r {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        border: 0.25rem solid rgba(255, 255, 255, 0.8);
        img {
          width: 6rem;
          height: 8rem;
        }
      }
    }
@@ -588,12 +643,13 @@
    .content_l {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      width: 100%;
      height: 45rem;
      background-color: rgba(9, 48, 104, 1);
      color: rgba(16, 16, 16, 1);
      box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
      border: 0.06rem solid rgba(6, 229, 231, 1);
      padding: 2rem 0rem;

      .model {
        color: #fff;
@@ -605,8 +661,8 @@
      .operate {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0.88rem 0.88rem;

        .item {
          display: flex;
          flex-direction: column;
@@ -713,19 +769,27 @@
            opacity: 0;
          }
        }
      }
      .video_l {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70rem;
        border: 0.75rem solid rgba(255, 255, 255, 0.8);
      }
    }

    .content_r {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      justify-content: space-around;
      width: 100%;
      height: 45rem;
      background-color: rgba(9, 48, 104, 1);
      color: rgba(16, 16, 16, 1);
      box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
      border: 0.06rem solid rgba(6, 229, 231, 1);
      margin-top: 10%;
      padding: 2rem 0rem;

      .model {
        color: #fff;
@@ -737,8 +801,8 @@
      .operate {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0.88rem 0.88rem;

        .item {
          display: flex;
          flex-direction: column;
@@ -846,6 +910,13 @@
          }
        }
      }
      .video_r {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70rem;
        border: 0.75rem solid rgba(255, 255, 255, 0.8);
      }
    }
  }
}