jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-01 17:41:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 抽奖ui优化 #494

Browse Source
This commit is contained in:
tim
2025-08-12 01:07:50 +08:00
parent fb7d134b27
commit f977f96407
3 changed files with 80 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_nuxt/assets/global.css
View File

@@ -16,6 +16,7 @@
--menu-text-color: black;
--scroller-background-color: rgba(130, 175, 180, 0.5);
--normal-background-color: rgb(241, 241, 241);
--lottery-background-color: rgb(241, 241, 241);
--login-background-color: rgb(248, 248, 248);
--login-background-color-hover: #e0e0e0;
--text-color: black;
@@ -42,6 +43,7 @@
--menu-selected-background-color: rgba(255, 255, 255, 0.1);
--menu-text-color: white;
--normal-background-color: #000000;
--lottery-background-color: #4e4e4e;
--login-background-color: #575757;
--login-background-color-hover: #717171;
--text-color: #eee;

41
frontend_nuxt/pages/new-post.vue
View File

@@ -43,6 +43,7 @@
@crop="onPrizeCropped"
/>
<div class="prize-row">
<span class="prize-row-title">奖品图片</span>
<label class="prize-container">
<img v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
<i v-else class="fa-solid fa-image default-prize-icon"></i>
@@ -51,11 +52,11 @@
</label>
</div>
<div class="prize-name-row">
<span>奖品描述</span>
<input class="prize-name-input" v-model="prizeDescription" placeholder="奖品描述" />
<span class="prize-row-title">奖品描述</span>
<BaseInput v-model="prizeDescription" placeholder="奖品描述" />
</div>
<div class="prize-count-row">
<span>奖品数量</span>
<span class="prize-row-title">奖品数量</span>
<div class="prize-count-input">
<input
class="prize-count-input-field"
@@ -66,7 +67,7 @@
</div>
</div>
<div class="prize-time-row">
<span>抽奖结束时间</span>
<span class="prize-row-title">抽奖结束时间</span>
<client-only>
<flat-pickr v-model="endTime" :config="dateConfig" class="time-picker" />
</client-only>
@@ -490,6 +491,7 @@ export default {
.post-submit:hover {
background-color: var(--primary-color-hover);
}
.post-submit.disabled:hover {
background-color: var(--primary-color-disabled);
}
@@ -534,8 +536,21 @@ export default {
gap: 20px;
}
.prize-row-title {
font-size: 16px;
color: var(--text-color);
font-weight: bold;
margin-bottom: 10px;
}
.prize-row {
display: flex;
flex-direction: column;
}
.prize-name-row {
display: flex;
flex-direction: column;
}
.prize-container {
@@ -545,11 +560,15 @@ export default {
border-radius: 10px;
overflow: hidden;
cursor: pointer;
background-color: var(--lottery-background-color);
display: flex;
align-items: center;
justify-content: center;
}
.default-prize-icon {
font-size: 100px;
opacity: 0.5;
font-size: 30px;
opacity: 0.1;
color: var(--text-color);
}
@@ -585,8 +604,7 @@ export default {
.prize-count-row,
.prize-time-row {
display: flex;
align-items: center;
gap: 10px;
flex-direction: column;
}
.prize-count-input {
@@ -612,11 +630,18 @@ export default {
padding: 0 10px;
font-size: 16px;
color: var(--text-color);
background-color: var(--lottery-background-color);
}
.time-picker {
max-width: 200px;
height: 30px;
background-color: var(--lottery-background-color);
border-radius: 5px;
border: 1px solid var(--border-color);
padding: 0 10px;
font-size: 16px;
color: var(--text-color);
}
@media (max-width: 768px) {

56
frontend_nuxt/pages/posts/[id]/index.vue
View File

@@ -110,20 +110,35 @@
<div class="prize-count">x {{ lottery.prizeCount }}</div>
</div>
<div class="prize-end-time prize-info-right">
<div class="prize-end-time-title">离结束还有</div>
<div v-if="!isMobile" class="prize-end-time-title">离结束还有</div>
<div class="prize-end-time-value">{{ countdown }}</div>
<div
v-if="loggedIn && !hasJoined && !lotteryEnded"
class="join-prize-button"
@click="joinLottery"
>
<div class="join-prize-button-text">参与抽奖</div>
</div>
<div v-else-if="hasJoined" class="join-prize-button-disabled">
<div class="join-prize-button-text">已参与</div>
<div v-if="!isMobile" class="join-prize-button-container-desktop">
<div
v-if="loggedIn && !hasJoined && !lotteryEnded"
class="join-prize-button"
@click="joinLottery"
>
<div class="join-prize-button-text">参与抽奖</div>
</div>
<div v-else-if="hasJoined" class="join-prize-button-disabled">
<div class="join-prize-button-text">已参与</div>
</div>
</div>
</div>
</div>
<div v-if="isMobile" class="join-prize-button-container-mobile">
<div
v-if="loggedIn && !hasJoined && !lotteryEnded"
class="join-prize-button"
@click="joinLottery"
>
<div class="join-prize-button-text">参与抽奖</div>
</div>
<div v-else-if="hasJoined" class="join-prize-button-disabled">
<div class="join-prize-button-text">已参与</div>
</div>
</div>
</div>
<div class="prize-member-container">
<img
@@ -145,6 +160,9 @@
alt="avatar"
@click="gotoUser(w.id)"
/>
<div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
{{ lotteryWinners[0].username }}
</div>
</div>
</div>
</div>
@@ -1181,7 +1199,8 @@ export default {
display: flex;
flex-direction: column;
gap: 10px;
background-color: var(--normal-background-color);
background-color: var(--lottery-background-color);
border-radius: 10px;
padding: 10px;
}
@@ -1190,6 +1209,12 @@ export default {
flex-direction: row;
justify-content: space-between;
width: 100%;
align-items: center;
}
.join-prize-button-container-mobile {
margin-top: 15px;
margin-bottom: 10px;
}
.prize-icon {
@@ -1256,6 +1281,7 @@ export default {
padding: 5px 10px;
border-radius: 8px;
cursor: pointer;
text-align: center;
}
.join-prize-button:hover {
@@ -1263,6 +1289,7 @@ export default {
}
.join-prize-button-disabled {
text-align: center;
margin-left: 10px;
background-color: var(--primary-color);
color: white;
@@ -1278,6 +1305,8 @@ export default {
height: 30px;
margin-left: 3px;
border-radius: 50%;
object-fit: cover;
cursor: pointer;
}
.prize-member-winner {
@@ -1348,5 +1377,10 @@ export default {
.loading-container {
width: 100%;
}
.join-prize-button,
.join-prize-button-disabled {
margin-left: 0;
}
}
</style>