2024.4.18

开始制作登录页面

<template>
<div id="app">
<div class="login-container">
<div class="background-image"></div>
<div class="login-form">
<h1>欢迎登录</h1>
<div class="input-group">
<label for="username">用户名/手机号码</label>
<input type="text" id="username" v-model="username">
</div>
<div class="input-group">
<label for="password">密码</label>
<input type="password" id="password" v-model="password">
</div>
<button @click="login">登录</button>
<div class="third-party-login">
<button>使用微信登录</button>
<button>使用QQ登录</button>
<button>使用微博登录</button>
</div>
<div class="links">
<a href="#">忘记密码？</a>
<a href="#">用户协议</a>
<a href="#">隐私政策</a>
</div>
<div class="register-link">
还没有账号？<a href="#">立即注册</a>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 模拟账号密码验证
if (this.username === '20223819' && this.password === '20223819') {
// 登录成功，跳转到首页
this.$router.push('/home');
} else {
alert('账号或密码错误！');
}
}
}
};
</script>

<style scoped>
/* CSS样式在这里 */
body, html {
margin: 0;
padding: 0;
height: 100%;
}

#app {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.login-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('~@/static/img/add.png');

background-size: cover;
background-position: center;
filter: blur(8px);
z-index: -1;
}

.login-form {
position: relative;
z-index: 1;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.login-form h1 {
margin-bottom: 20px;
}

.input-group {
text-align: left;
margin-bottom: 15px;
}

.input-group label {
display: block;
margin-bottom: 5px;
color: #333;
}

.input-group input {

width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}

.login-form button {
width: 100%;
padding: 10px;
background-color: #FF0066;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.login-form button:hover {
background-color: #808080;
}

.third-party-login {
margin-top: 20px;
}

.third-party-login button {
margin-right: 10px;
padding: 10px 20px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #E6005C;
cursor: pointer;
transition: background-color 0.3s;
}

.third-party-login button:hover {
background-color: #808080;
}

.links {
margin-top: 20px;
}

.links a {
margin-right: 10px;
color: #999;
text-decoration: none;
}

.register-link {
margin-top: 20px;
}

.register-link a {
color: #FF0066;
text-decoration: none;
font-weight: bold;
}
</style>