You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.7 KiB
102 lines
2.7 KiB
<template>
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<form @submit.prevent="handleLogin">
|
|
<div class="form-group">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
v-model="password"
|
|
|
|
placeholder="请输入密码"
|
|
/>
|
|
</div>
|
|
<button type="submit" class="login-button">进入抽奖</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useAuthStore } from '../../stores/auth';
|
|
const password = ref('');
|
|
const CORRECT_PASSWORD = '123456';
|
|
const router = useRouter();
|
|
const authStore = useAuthStore();
|
|
const handleLogin = () => {
|
|
if (password.value === '') {
|
|
alert('请输入密码');
|
|
return;
|
|
}
|
|
if (password.value === CORRECT_PASSWORD) {
|
|
alert('登录成功，即将跳转到抽奖页面');
|
|
// 添加登录状态存储
|
|
authStore.login(); // 使用Pinia登录方法
|
|
router.push('/choujiang');
|
|
} else {
|
|
alert('密码错误，请重试');
|
|
}
|
|
};
|
|
// 登录逻辑处理
|
|
console.log('登录信息:', {
|
|
password: password.value,
|
|
});
|
|
// 这里可以添加实际的登录API调用
|
|
</script>
|
|
<style scoped>
|
|
.login-container {
|
|
background-image: url('../../assets/loginback.png'); /* 确保路径正确 */
|
|
background-position: center;
|
|
background-size: cover;
|
|
height: 100vh; /* 确保背景图片覆盖整个视口高度 */
|
|
width: 100vw; /* 确保背景图片覆盖整个视口宽度 */
|
|
position: fixed; /* 使用fixed定位确保背景图片覆盖整个页面 */
|
|
top: 0;
|
|
left: 0;
|
|
/* z-index: -1; 确保背景图片在其他内容下方 */
|
|
}
|
|
|
|
.login-card {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 300px; /* 设置固定宽度 */
|
|
height: 200px; /* 设置固定高度 */
|
|
padding: 2rem;
|
|
background: rgba(255, 255, 255, 0.8); /* 调整背景颜色为半透明白色 */
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
z-index: 1; /* 确保卡片在背景图片上方 */
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
margin-bottom: 2rem;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.login-button {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
background-color: #42b983;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.login-button:hover {
|
|
background-color: #359469;
|
|
}
|
|
</style>
|