mod:遥控器 静态文件

frontend/src/router/index.ts

@@ -55,6 +55,14 @@ const routes: RouteRecordRaw[] = [
             title: '详情高级配置'
         }
     },
+    {
+        path: "/remote_control",
+        name: "RemoteControl",
+        component: () => import("@/views/RemoteControl/index.vue"),
+        meta: {
+            title: '遥控器'
+        }
+    },
 ];
 
 const router = createRouter({

frontend/src/views/RemoteControl/index.vue

@@ -0,0 +1,63 @@
+<template>
+
+
+  <headerBar
+    title="遥控模拟器"
+  />
+
+  <div class="main-container">
+    <el-row align="middle">
+      <el-col :span="8"></el-col>
+      <el-col :span="8"><div class="button up">上</div></el-col>
+      <el-col :span="8"></el-col>
+    </el-row>
+    <el-row align="middle">
+      <el-col :span="8"><div class="button up">左脚</div></el-col>
+      <el-col :span="8"><div class="button up">拍照</div></el-col>
+      <el-col :span="8"><div class="button up">右脚</div></el-col>
+    </el-row>
+    <el-row align="middle">
+      <el-col :span="8"></el-col>
+      <el-col :span="8"><div class="button up">下</div></el-col>
+      <el-col :span="8"></el-col>
+    </el-row>
+    <el-row align="middle" class="mar-top-50">
+      <el-col :span="1"></el-col>
+      <el-col :span="8"><div class="button up">继续</div></el-col>
+      <el-col :span="6"></el-col>
+      <el-col :span="8"><div class="button up">停止</div></el-col>
+      <el-col :span="1"></el-col>
+    </el-row>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import headerBar from '@/components/header-bar/index.vue'
+</script>
+
+<style scoped lang="scss">
+.main-container {
+  background: #EAECED;
+  height: calc(100vh - 30px);
+  padding-top: 30px;
+}
+.button {
+  width: 68px;
+  height: 68px;
+  background: #fff;
+  border-radius: 68px;
+  line-height: 68px;
+  color: #474747;
+  margin: 0 auto;
+  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
+}
+.el-row {
+  min-height: 100px;
+}
+.button:hover {
+  background: #2957FF;
+  color: #fff;
+  cursor: pointer;
+}
+</style>