<template>
    <div class="login">
      <h1>登录</h1>
      <form>
        <label>用户名:</label>
        <input type="text" v-model="username" />
        <label>密码:</label>
        <input type="password" v-model="password" />
        <button type="button" @click="login">登录</button>
      </form>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
  </template>
  
  <script>
  export default {
    name: "Login",
    data() {
      return {
        username: "",
        password: "",
        errorMessage: "",
      };
    },
    methods: {
      login() {
        // 调用后端接口进行登录验证
        // 假设接口返回一个对象，包含成功或失败的信息
        let response = { success: true };
  
        if (response.success) {
          // 登录成功
          this.$router.push("/home"); // 跳转到主页
        } else {
          // 登录失败
          this.errorMessage = "用户名或密码错误";
        }
      },
    },
  };
  </script>
  
  <style>
  .login {
    margin: 50px auto;
    width: 400px;
    text-align: center;
  }
  
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  label {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 10px;
  }
  
  input[type="text"],
  input[type="password"] {
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
  }
  
  button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #009688;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .error-message {
    color: red;
    margin-top: 10px;
  }
  </style>
  