8 changed files with 167 additions and 34 deletions
-
BINactivitylink/src/img/1.jpg
-
5activitylink/src/router/index.js
-
105activitylink/src/views/homePage.vue
-
6activitylink/src/views/zhongchou/activity/index.vue
-
6activitylink/src/views/zhongchou/gift/index.vue
-
20activitylink/src/views/zhongchou/index.vue
-
24activitylink/src/views/zhongchou/level/index.vue
-
35activitylink/src/views/zhongchou/mainImg/DefaultImage.vue
After Width: 5244 | Height: 2950 | Size: 2.1 MiB |
@ -1,17 +1,108 @@ |
|||||
<template> |
<template> |
||||
<div> |
|
||||
<button @click="router.push('/choujiang')">抽奖</button> |
|
||||
<button @click="router.push('/zhongchou')">众筹</button> |
|
||||
|
|
||||
|
<div class="login-container"> |
||||
|
<div class="login-box"> |
||||
|
<h2>登录</h2> |
||||
|
<form @submit.prevent="login"> |
||||
|
<div class="input-group"> |
||||
|
<label for="username">用户名</label> |
||||
|
<input type="text" id="username" v-model="username" required> |
||||
|
</div> |
||||
|
<div class="input-group"> |
||||
|
<label for="password">密码</label> |
||||
|
<input type="password" id="password" v-model="password" required> |
||||
|
</div> |
||||
|
<button type="submit">登录</button> |
||||
|
</form> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
|
import { ref } from "vue"; |
||||
import { useRouter } from "vue-router"; |
import { useRouter } from "vue-router"; |
||||
|
|
||||
|
import { ElMessage } from 'element-plus' |
||||
const router = useRouter(); |
const router = useRouter(); |
||||
|
const username = ref(""); |
||||
|
const password = ref(""); |
||||
|
|
||||
|
const login = () => { |
||||
|
// 这里可以添加实际的登录验证逻辑 |
||||
|
if (username.value=='homily' && password.value=='27zn') { |
||||
|
// 登录成功后跳转到抽奖页面 |
||||
|
ElMessage({ |
||||
|
message: '登陆成功,欢迎您使用本系统', |
||||
|
type: 'success', |
||||
|
}) |
||||
|
router.push("/zhongchou/mainimg"); |
||||
|
}else { |
||||
|
ElMessage({ |
||||
|
message: '请输入正确的用户名和密码', |
||||
|
type: 'error', |
||||
|
}) |
||||
|
} |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
.login-container { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: url('@/img/1.jpg') no-repeat center center fixed; |
||||
|
background-size: cover; |
||||
|
background-position: center; |
||||
|
z-index: 0; |
||||
|
|
||||
|
/* 使用 Flexbox 布局 */ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.login-box { |
||||
|
background-color: rgba(255, 255, 255, 0.9); |
||||
|
padding: 2rem; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
||||
|
width: 100%; |
||||
|
max-width: 400px; |
||||
|
z-index: 1; /* 提高 z-index 确保覆盖背景 */ |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
text-align: center; |
||||
|
margin-bottom: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.input-group { |
||||
|
margin-bottom: 1rem; |
||||
|
} |
||||
|
|
||||
|
.input-group label { |
||||
|
display: block; |
||||
|
margin-bottom: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
.input-group input { |
||||
|
width: 100%; |
||||
|
padding: 0.5rem; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
width: 100%; |
||||
|
padding: 0.75rem; |
||||
|
border: none; |
||||
|
border-radius: 4px; |
||||
|
background-color: #42b983; |
||||
|
color: white; |
||||
|
font-size: 1rem; |
||||
|
cursor: pointer; |
||||
|
transition: background-color 0.3s; |
||||
|
} |
||||
|
|
||||
|
button:hover { |
||||
|
background-color: #369d6e; |
||||
|
} |
||||
</style> |
</style> |
@ -0,0 +1,35 @@ |
|||||
|
<template> |
||||
|
<div class="default-image-container"> |
||||
|
<div class="default-image"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
// 如果不需要逻辑,可以只保留模板和样式 |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.default-image-container { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: -1; /* 放在其他内容之后 */ |
||||
|
} |
||||
|
|
||||
|
.default-image { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: url('@/img/1.jpg') no-repeat center center fixed; |
||||
|
background-size: cover; |
||||
|
background-position: center; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue