controller.vue

<template>
  <div class="controller-container">
    <van-action-bar>
      <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon" />
      <van-action-bar-icon icon="aim" text="云台" @click="onClickIcon" />
      <van-action-bar-button type="danger" color="#387CF5" text="截图巡检" @click="onClickButton" />
    </van-action-bar>
  </div>
</template>

<script setup>
const emit = defineEmits(['screenshot'])

function onClickIcon() {
  console.log('onClickIcon')
}
function onClickButton() {
  console.log('onClickButton')
  emit('screenshot')
}
</script>

<style lang="less">
.controller-container {
  .van-action-bar-icon {
    width: 60px;
    .van-icon {
      font-size: 32px;
    }
  }
  .van-button {
    border-radius: 16px;
  }
}
</style>