feat:数据驾驶舱面板样式结构调整

shuishen

2026-01-16 a7eb62af22f86f4972da1497ed38415681183ae3

feat:数据驾驶舱面板样式结构调整

 applications/drone-command/src/views/dataCockpit/components/LeftContainer.vue

@@ -107,14 +107,14 @@
    transition: transform 0.3s ease-in-out;

    &.collapsed {
        transform: translateX(-100%);
        transform: translateX(calc(-100% - 17px - 32px));
    }
}

.collapse-btn {
    position: absolute;
    top: 50%;
    left: 357px;
    left: 300px;
    cursor: pointer;
    display: flex;
    align-items: center;
@@ -124,8 +124,8 @@
    transform: translateY(-50%);

    .arrow {
        width: 24px;
        height: 24px;
        width: 32px;
        height: 32px;
        background: url('@/assets/images/dataCockpit/left-btn.png') center / 100% 100% no-repeat;
    }


 applications/drone-command/src/views/dataCockpit/components/RightContainer.vue

@@ -2,7 +2,7 @@
 * @Author       : yuan
 * @Date         : 2026-01-07 15:17:54
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-09 16:54:31
 * @LastEditTime : 2026-01-16 17:23:06
 * @FilePath     : \applications\drone-command\src\views\dataCockpit\components\RightContainer.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
@@ -259,14 +259,14 @@
    position: relative;

    &.collapsed {
        transform: translateX(100%);
        transform: translateX(calc(100% + 17px + 32px));
    }
}

.collapse-btn {
    position: absolute;
    top: 50%;
    right: 357px;
    right: 300px;
    cursor: pointer;
    display: flex;
    align-items: center;
@@ -276,8 +276,8 @@
    transform: translateY(-50%);

    .arrow {
        width: 24px;
        height: 24px;
        width: 32px;
        height: 32px;
        background: url('@/assets/images/dataCockpit/right-btn.png') center / 100% 100% no-repeat;
    }


 applications/drone-command/src/views/dataCockpit/index.vue

@@ -2,7 +2,7 @@
 * @Author       : yuan
 * @Date         : 2026-01-06 16:35:50
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-09 16:34:39
 * @LastEditTime : 2026-01-16 17:17:24
 * @FilePath     : \applications\drone-command\src\views\dataCockpit\index.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
@@ -53,44 +53,36 @@
  .left-container,
  .right-container {
    position: absolute;
    top: 96px;
    bottom: 0;
    width: 401px;
    bottom: 20px;
    width: 300px;
    z-index: 9;
    backdrop-filter: blur(2px);
    border-radius: 10px 10px 10px 10px;

    ::v-deep(.wrapper) {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 17px;
      bottom: 20px;
      top: 0;
      bottom: 0;
      padding: 20px;
      width: 300px;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(16px);
      border-radius: 10px 10px 10px 10px;
      box-sizing: border-box;
    }
  }

  .left-container {
    top: 96px;
    left: 0;
    top: 113px;
    left: 17px;
    background: linear-gradient( 270deg, rgba(17,23,34,0) 0%, rgba(17,23,34,0.56) 50%, rgba(17,23,34,0.96) 100%);

    ::v-deep(.wrapper) {
      left: 17px;
    }
  }

  .right-container {
    top: 54px;
    right: 0;
    top: 75px;
    right: 17px;
    background: linear-gradient( 270deg, rgba(17,23,34,0.96) 0.16%, rgba(17,23,34,0.56) 57.57%, rgba(4,30,37,0) 100%);

    ::v-deep(.wrapper) {
      top: 21px;
      right: 17px;
    }
  }
</style>