帮我写一份好看的功能齐全的uniapp遥控器界面代码

好的，下面是一份比较全面的uniapp遥控器界面代码，包含了更多的样式和功能：

<template>
  <view class="container">
    <view class="screen">
      <text class="title">遥控器</text>
      <text class="content">{{ message }}</text>
    </view>
    <view class="row">
      <button class="button" @tap="sendCommand('power')">
        <text class="iconfont icon-power"></text>
        <text>电源</text>
      </button>
      <button class="button" @tap="sendCommand('mute')">
        <text class="iconfont icon-mute"></text>
        <text>静音</text>
      </button>
      <button class="button" @tap="sendCommand('home')">
        <text class="iconfont icon-home"></text>
        <text>主页</text>
      </button>
    </view>
    <view class="row">
      <button class="button" @tap="sendCommand('up')">
        <text class="iconfont icon-arrow-up"></text>
        <text>上</text>
      </button>
    </view>
    <view class="row">
      <button class="button" @tap="sendCommand('left')">
        <text class="iconfont icon-arrow-left"></text>
        <text>左</text>
      </button>
      <button class="button" @tap="sendCommand('ok')">
        <text class="iconfont icon-ok"></text>
        <text>确定</text>
      </button>
      <button class="button" @tap="sendCommand('right')">
        <text class="iconfont icon-arrow-right"></text>
        <text>右</text>
      </button>
    </view>
    <view class="row">
      <button class="button" @tap="sendCommand('down')">
        <text class="iconfont icon-arrow-down"></text>
        <text>下</text>
      </button>
    </view>
    <view class="row">
      <button class="button" @tap="sendCommand('back')">
        <text class="iconfont icon-back"></text>
        <text>返回</text>
      </button>
      <button class="button" @tap="sendCommand('menu')">
        <text class="iconfont icon-menu"></text>
        <text>菜单</text>
      </button>
      <button class="button" @tap="sendCommand('exit')">
        <text class="iconfont icon-exit"></text>
        <text>退出</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendCommand(command) {
      // 这里可以通过接口将指令发送给设备
      console.log('发送指令:', command)
      this.message = '发送指令:' + command
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}

.screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 120px;
  background-color: #007aff;
  color: #fff;
  font-size: 32px;
}

.title {
  font-size: 48px;
  margin-bottom: 10px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}

.iconfont {
  font-size: 48px;
  margin-bottom: 10px;
}

.content {
  margin-top: 20px;
  font-size: 24px;
}
</style>

这份代码中，我们使用了更加漂亮的样式，并且增加了一些功能，比如显示发送的指令，以及使用了一些图标字体。