Browse Source

refactor(frontend): 重构遥控器页面布局并优化 LED 控制按钮

- 调整了 el-col 组件的 span 属性,优化页面布局
- 移除了未使用的 el-dropdown 组件,简化代码结构
- 将 LED 控制按钮拆分为单独的开和关按钮,提高用户体验
panqiuyao 4 months ago
parent
commit
301c91ecf9
1 changed files with 7 additions and 18 deletions
  1. 7 18
      frontend/src/views/RemoteControl/index.vue

+ 7 - 18
frontend/src/views/RemoteControl/index.vue

@@ -15,26 +15,15 @@
       <el-col :span="3"></el-col>
     </el-row>
     <el-row align="middle">
-      <el-col :span="9"></el-col>
+      <el-col :span="6"></el-col>
       <el-col :span="6">
-        <el-col :span="6">
-          <div class="button up" @click.native="switchLED(1)"  @contextmenu.native="switchLED(0)">LED</div>
-        </el-col>
-<!--          <el-dropdown>
-
-
-            <div class="button up">
-              LED
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click.native="switchLED(1)">开</el-dropdown-item>
-                <el-dropdown-item @click.native="switchLED(0)">关</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>-->
+        <div class="button up" @click.native="switchLED(1)" >LED开</div>
       </el-col>
-      <el-col :span="9"></el-col>
+      <el-col :span="1"></el-col>
+      <el-col :span="6">
+        <div class="button up" @click.native="switchLED(0)">LED关</div>
+      </el-col>
+      <el-col :span="4"></el-col>
     </el-row>
     <div class="te-c  fs-14"  style="color: #8C92A7">左脚控制左脚鞋启动拍摄</div>
     <div class="te-c  fs-14"  style="color: #8C92A7">右脚控制右脚鞋启动拍摄</div>