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