Browse Source
Merge branch 'pangluotong/feature-20250712103401-抽奖' into milestone-20250722-抽奖
songtongtong/feature-20250717104937-众筹
Merge branch 'pangluotong/feature-20250712103401-抽奖' into milestone-20250722-抽奖
songtongtong/feature-20250717104937-众筹
pangluotong
4 weeks ago
10 changed files with 1287 additions and 91 deletions
-
1059package-lock.json
-
10package.json
-
BINsrc/assets/loginback.png
-
BINsrc/assets/展开.png
-
16src/main.js
-
20src/router/index.js
-
20src/stores/auth.js
-
102src/views/choujiang/Login.vue
-
136src/views/choujiang/lottery/PrizePanel.vue
-
5vite.config.js
1059
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 1920 | Height: 1080 | Size: 1.7 MiB |
|
After Width: 40 | Height: 34 | Size: 2.9 KiB |
@ -0,0 +1,20 @@ |
|||
import { defineStore } from 'pinia'; |
|||
import { ref } from 'vue'; |
|||
export const useAuthStore = defineStore('auth', () => { |
|||
// 登录状态
|
|||
const isLoggedIn = ref(false); |
|||
// 登录方法
|
|||
const login = () => { |
|||
isLoggedIn.value = true; |
|||
}; |
|||
// 登出方法
|
|||
const logout = () => { |
|||
isLoggedIn.value = false; |
|||
}; |
|||
return { |
|||
isLoggedIn, |
|||
login, |
|||
logout |
|||
}; |
|||
},{persist : false}); |
|||
//开启持久化)
|
|||
@ -0,0 +1,102 @@ |
|||
<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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue