vue实现有背景图片的登陆页面

以下是一个简单的示例：

HTML:

<div id="app">
  <div class="login-wrapper">
    <div class="login-box">
      <h1>Login</h1>
      <form>
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" id="username" v-model="username">
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" v-model="password">
        </div>
        <button type="submit" @click.prevent="login">Login</button>
      </form>
    </div>
  </div>
</div>

CSS:

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('background.jpg');
  background-size: cover;
}

.login-wrapper {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 5px;
}

.login-box {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}

button {
  background-color: #008CBA;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #00688B;
}

button:active {
  background-color: #004E67;
}

Vue:

new Vue({
  el: '#app',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 登陆逻辑
    }
  }
})

在这个示例中，我们使用了背景图片作为页面的背景，并在登录框中添加了一些基本的表单元素。此外，我们还使用了Vue来管理表单数据和处理登录逻辑。