vue3编写样式好看的客房入住记录vue

为了编写出样式好看的客房入住记录Vue页面，我们可以考虑使用以下技巧：

1. 使用CSS框架：Vue3中很常用的CSS框架是Bootstrap和TailwindCSS。这些框架提供了许多现成的CSS样式和组件，可以让我们快速地构建漂亮的UI界面。

2. 使用Vue3的组件系统：Vue3的组件系统非常强大，可以帮助我们将页面拆分成小组件，每个组件只关注自己的逻辑和样式。这样可以使代码更加清晰、易于维护，同时也方便我们重用组件。

3. 使用CSS预处理器：CSS预处理器如Sass和Less可以让我们使用变量、嵌套规则、混合器等高级特性来编写CSS，使得代码更加简洁、易于维护。

4. 遵循设计原则：一个漂亮的UI界面需要符合一定的设计原则，如色彩搭配、版面设计、字体选择等等。我们可以参照现有的设计规范或者使用设计工具如Sketch和Figma来帮助我们设计出更好的UI界面。

下面是一个简单的客房入住记录Vue页面的示例代码：

<template>
  <div class="container">
    <h1>客房入住记录</h1>
    <table>
      <thead>
        <tr>
          <th>客房号</th>
          <th>入住时间</th>
          <th>退房时间</th>
          <th>房费</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="room in rooms" :key="room.roomNumber">
          <td>{{ room.roomNumber }}</td>
          <td>{{ room.checkInDate }}</td>
          <td>{{ room.checkOutDate }}</td>
          <td>{{ room.roomFee }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rooms: [
        { roomNumber: '101', checkInDate: '2021-01-01', checkOutDate: '2021-01-03', roomFee: '$200' },
        { roomNumber: '102', checkInDate: '2021-01-02', checkOutDate: '2021-01-05', roomFee: '$300' },
        { roomNumber: '103', checkInDate: '2021-01-03', checkOutDate: '2021-01-06', roomFee: '$350' },
      ],
    };
  },
};
</script>

<style lang="scss">
.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

th,
td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}
</style>

在这个示例中，我们使用了Bootstrap提供的样式来设置表格的外观，同时使用了SCSS预处理器来编写样式。我们还使用了Vue3的组件系统来将页面拆分成小组件，每个组件只关注自己的逻辑和样式。最终，我们得到了一个简单但漂亮的客房入住记录Vue页面。