activityLink/src/views/choujiang/Login.vue

<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>