element ui 做个页面 全屏的 上面有标题和时间 中间是功能按钮 方块的 不同颜色的 标题时间 在一排 中间十个按钮 按钮上面有图标 尽量往中间靠拢 四周留白中间占满 按钮

Element UI是一个流行的前端UI库，它可以帮助快速构建用户界面。要创建一个全屏、带有标题、时间以及功能按钮的页面，你可以按照以下步骤操作：

1. 首先，引入Element UI的相关CSS和JS文件到项目中。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 设置页面布局结构，使用`<el-container>`和`<el-row>`创建一个响应式的栅格系统，以便内容居中对齐。

<div id="app">
  <el-container style="height: 100%; padding: 0;">
    <el-header style="background-color: #f5f5f5; text-align: center;">
      <!-- 标题 -->
      <h1>页面标题</h1>
      <!-- 时间 -->
      <p>当前时间</p>
    </el-header>

    <el-container>
      <el-row type="flex" justify="center" align="middle" style="height: calc(100% - 100px);">
        <!-- 功能按钮 -->
        <el-col :span="8" v-for="(button, index) in buttons" :key="index">
          <el-button :icon="button.icon" :type="button.color" size="medium" @click="handleButtonClick(index)">
            {{ button.label }}
          </el-button>
        </el-col>
      </el-row>
    </el-container>
  </el-container>
</div>

3. 创建Vue实例并设置数据：

new Vue({
  el: '#app',
  data() {
    return {
      buttons: [
        { label: '按钮1', icon: 'el-icon-menu', color: 'primary' },
        ... // 添加其他9个按钮配置
      ],
      currentTime: new Date().toLocaleTimeString(), // 获取当前时间
    };
  },
  methods: {
    handleButtonClick(index) {
      console.log(`点击了第${index+1}个按钮`);
    }
  }
});

4. 调整样式以适应全屏，并为元素添加圆角等美化效果。你可以在CSS自定义主题中调整按钮和其他组件的颜色和间距。

记得替换上述代码中的`button.label`、`button.icon`以及时间获取部分为实际需求的内容。此外，如果你想让按钮更美观，可以参考Element UI的官方文档，了解如何定制按钮组件的样式。