微信记账本 记一笔 vue+css 代码

以下是微信记账本的记一笔页面的 Vue+CSS 代码：

<template>
  <div class="add-record">
    <h2>记一笔</h2>
    <form>
      <div class="form-group">
        <label for="type">类型：</label>
        <select id="type" v-model="type">
          <option value="income">收入</option>
          <option value="expense">支出</option>
        </select>
      </div>
      <div class="form-group">
        <label for="amount">金额：</label>
        <input type="number" id="amount" v-model="amount" />
      </div>
      <div class="form-group">
        <label for="date">日期：</label>
        <input type="date" id="date" v-model="date" />
      </div>
      <div class="form-group">
        <label for="note">备注：</label>
        <textarea id="note" v-model="note"></textarea>
      </div>
      <button type="submit" @click.prevent="addRecord">添加</button>
    </form>
  </div>
</template>

<style>
.add-record {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  font-size: 24px;
  margin: 0 0 20px;
}

form {
  display: flex;
  flex-wrap: wrap;
}

.form-group {
  flex-basis: 100%;
  margin-bottom: 20px;
}

label {
  display: inline-block;
  width: 60px;
  font-size: 16px;
  margin-right: 10px;
}

input[type="number"],
input[type="date"],
textarea {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

button[type="submit"] {
  background-color: #4caf50;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}
</style>

<script>
export default {
  data() {
    return {
      type: "expense",
      amount: 0,
      date: new Date().toISOString().substr(0, 10),
      note: ""
    };
  },
  methods: {
    addRecord() {
      const record = {
        type: this.type,
        amount: Number(this.amount),
        date: this.date,
        note: this.note
      };
      // 将记录添加到数据库或本地存储中
      console.log(record);
      // 清空表单
      this.type = "expense";
      this.amount = 0;
      this.date = new Date().toISOString().substr(0, 10);
      this.note = "";
    }
  }
};
</script>

这段代码使用了一些基本的 CSS 样式，包括：

- `max-width`、`margin` 和 `padding` 属性来控制页面的宽度和边距；
- `font-size` 和 `margin` 属性来控制标题的样式；
- `display` 和 `flex-wrap` 属性来控制表单元素的布局；
- `flex-basis` 属性来控制表单元素的宽度；
- `label`、`input` 和 `textarea` 元素的样式；
- `background-color`、`color`、`padding`、`font-size`、`border`、`border-radius` 和 `cursor` 属性来控制按钮的样式；
- `transition` 属性来控制按钮的过渡效果。