feat:数据驾驶舱基础页面搭建

shuishen

2026-01-07 31b028f962e1cfe4c1ef91c706a90fd3aa983533

 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-07 15:20:14
 * @LastEditTime : 2026-01-07 17:33:02
 * @FilePath     : \applications\drone-command\src\views\dataCockpit\index.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
@@ -11,8 +11,8 @@
<template>
  <div class="page-container">
    <MapContainer />  
    <LeftContainer />  
    <RightContainer />  
    <LeftContainer class="left-container" />  
    <RightContainer class="right-container" />  
    <CenterContainer />  
  </div>
</template>
@@ -30,4 +30,45 @@
    width: 100%;
    height: 100%;
  }

  .left-container,
  .right-container {
    position: absolute;
    top: 96px;
    bottom: 0;
    width: 401px;
    z-index: 9;
    backdrop-filter: blur(5px);

    ::v-deep(.wrapper) {
      position: absolute;
      top: 17px;
      bottom: 20px;
      padding: 20px;
      width: 300px;
      background: rgba(0,0,0,0.3);
      border-radius: 10px 10px 10px 10px;
    }
  }

  .left-container {
    top: 96px;
    left: 0;
    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;
    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>