CameraMachine/frontend/src/views/RemoteControl/index.vue

<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>