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.
111 lines
2.8 KiB
111 lines
2.8 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 router = useRouter();
|
|
const authStore = useAuthStore();
|
|
const handleLogin = () => {
|
|
if (password.value === '') {
|
|
alert('请输入密码');
|
|
return;
|
|
}
|
|
if (password.value == '000000') {
|
|
authStore.login();
|
|
router.push('/hxlCj');
|
|
} else {
|
|
if (password.value === '123456') {
|
|
// 添加登录状态存储
|
|
authStore.login(); // 使用Pinia登录方法
|
|
router.push('/choujiang');
|
|
} else {
|
|
alert('密码错误，请重试');
|
|
}
|
|
}
|
|
};
|
|
// 登录逻辑处理
|
|
console.log('登录信息:', {
|
|
password: password.value,
|
|
});
|
|
// 这里可以添加实际的登录API调用
|
|
</script>
|
|
<style scoped>
|
|
.login-container {
|
|
background-image: url('../../assets/登录背景.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: 55%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 450px;
|
|
/* 增加卡片宽度 */
|
|
height: 285px;
|
|
padding: 2.5rem;
|
|
/* 增加内边距 */
|
|
background: rgba(255, 255, 255, 0.3);
|
|
/* 调整背景颜色为半透明白色 */
|
|
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: 1.2rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1.3rem;
|
|
/* 增大字体大小 */
|
|
margin-bottom: 2.5rem;
|
|
/* 增加底部间距 */
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.login-button {
|
|
width: 100%;
|
|
padding: 1.2rem;
|
|
/* 增加按钮内边距 */
|
|
background-color: #e92821a3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 1.3rem;
|
|
/* 增大字体大小 */
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.login-button:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
</style>
|