vue2好看的登录页面

以下是一个基于Vue2的简单登录页面设计，包含背景图片、表单输入和登录按钮，您可以根据自己的需求进行修改和优化：

<template>
  <div class="login-page">
    <div class="login-form">
      <h2 class="login-title">欢迎登录</h2>
      <form>
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" class="form-control" id="username" placeholder="请输入用户名" v-model="username">
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" class="form-control" id="password" placeholder="请输入密码" v-model="password">
        </div>
        <button type="submit" class="btn btn-primary btn-block" @click.prevent="login">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login() {
        // TODO: 登录逻辑
      }
    }
  }
</script>

<style>
  .login-page {
    background-image: url('/static/login-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
  }
  .login-form {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    padding: 20px;
    margin: 100px auto;
    max-width: 400px;
    text-align: center;
  }
  .login-title {
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 20px;
    text-align: left;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .form-control {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
  }
  .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    font-weight: bold;
  }
  .btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
    color: #fff;
  }
  .btn-block {
    display: block;
    width: 100%;
  }
</style>

在这个示例中，我们使用了Vue2框架来创建一个简单的登录页面。页面背景使用了一个背景图片，表单输入和登录按钮使用了Bootstrap样式。登录按钮点击事件调用了login方法，您可以在其中添加登录逻辑。

希望这个示例能够帮助您设计出一个漂亮的登录页面。