好看的vue登录页面(附 源代码 背景图)

以下是一个简单的Vue登录页面示例，包括了样式和背景图：

<template>
  <div class="login-container">
    <div class="login-box">
      <h2>Login</h2>
      <form>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" v-model="username" required>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" v-model="password" required>
        </div>
        <button @click.prevent="login">Login</button>
      </form>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 这里应该是登录逻辑
      console.log('Login with:', this.username, this.password);
    }
  }
};
</script>
 
<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: url('../assets/background.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.login-box {
  width: 300px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
 
h2 {
  text-align: center;
  margin-bottom: 20px;
}
 
.form-group {
  margin-bottom: 20px;
}
 
.form-group label {
  display: block;
  margin-bottom: 5px;
}
 
.form-group input[type="text"],
.form-group input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}
 
.form-group input[type="submit"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #5cb85c;
  font-size: 16px;
  color: white;
  cursor: pointer;
}
 
.form-group input[type="submit"]:hover {
  background: #429942;
}
</style>

在这个示例中，登录页面背景设置为一张图片，通过CSS背景属性实现。login-container类负责设置背景图片，而login-box类负责创建一个带有阴影和圆角的登录框。

请确保你有一张名为background.jpg的图片放在Vue项目的assets文件夹中，并且路径是正确的。

这个示例提供了一个简单的登录表单和样式，你可以根据需要扩展登录逻辑。