|
|
@ -64,30 +64,7 @@ |
|
|
> |
|
|
> |
|
|
获奖名单 |
|
|
获奖名单 |
|
|
</button> |
|
|
</button> |
|
|
<!-- <div |
|
|
|
|
|
v-if="showWinnerList" |
|
|
|
|
|
class="winner-modal-mask" |
|
|
|
|
|
@click="closeWinnerList" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="winner-modal" |
|
|
|
|
|
:style="{ |
|
|
|
|
|
position: 'absolute', |
|
|
|
|
|
left: modalLeft + 'px', |
|
|
|
|
|
top: modalTop + 'px', |
|
|
|
|
|
}" |
|
|
|
|
|
@click.stop |
|
|
|
|
|
> |
|
|
|
|
|
<div class="winner-modal-title">Homily ID</div> |
|
|
|
|
|
<ul class="winner-list"> |
|
|
|
|
|
<li v-for="(user, idx) in fakeWinners" :key="idx"> |
|
|
|
|
|
<span>{{ user.id }}</span> |
|
|
|
|
|
<span>{{ user.prize }}</span> |
|
|
|
|
|
</li> |
|
|
|
|
|
</ul> |
|
|
|
|
|
</div> --> |
|
|
|
|
|
<!-- </div> --> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -95,7 +72,7 @@ |
|
|
<div v-else> |
|
|
<div v-else> |
|
|
<div class="prize-panel-root"> |
|
|
<div class="prize-panel-root"> |
|
|
<div |
|
|
<div |
|
|
class="prize-panel-list" |
|
|
|
|
|
|
|
|
class="prize-panel-list1" |
|
|
v-if="prizes && prizes.length && lastRevealedIdx >= 0" |
|
|
v-if="prizes && prizes.length && lastRevealedIdx >= 0" |
|
|
> |
|
|
> |
|
|
<div |
|
|
<div |
|
|
@ -134,23 +111,9 @@ |
|
|
prizes[lastRevealedIdx].count |
|
|
prizes[lastRevealedIdx].count |
|
|
}} |
|
|
}} |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="prize-panel-footer"> |
|
|
|
|
|
|
|
|
</div> <div class="prize-panel-footer"> |
|
|
<div class="arrow-down" @click="toggleWinnerList"></div> |
|
|
<div class="arrow-down" @click="toggleWinnerList"></div> |
|
|
<!-- <div class="arrow-up " @click="openWinnerList"> </div> |
|
|
|
|
|
<button |
|
|
|
|
|
|
|
|
|
|
|
ref="winnerBtnRef" |
|
|
|
|
|
class="winner-btn" |
|
|
|
|
|
@click="toggleWinnerList" |
|
|
|
|
|
> |
|
|
|
|
|
获奖名单 |
|
|
|
|
|
</button> --> |
|
|
|
|
|
<div |
|
|
|
|
|
|
|
|
<div |
|
|
v-if="showWinnerList" |
|
|
v-if="showWinnerList" |
|
|
class="winner-modal-mask" |
|
|
class="winner-modal-mask" |
|
|
@click="closeWinnerList" |
|
|
@click="closeWinnerList" |
|
|
@ -196,8 +159,14 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -272,6 +241,7 @@ function canRevealPrize(idx) { |
|
|
// 卡片点击事件 |
|
|
// 卡片点击事件 |
|
|
function handleReveal(idx) { |
|
|
function handleReveal(idx) { |
|
|
// 检查是否可以揭秘这个奖品 |
|
|
// 检查是否可以揭秘这个奖品 |
|
|
|
|
|
if (idx !== nextRevealIdx.value ) {alert("请按顺序揭秘奖品!"); return;} |
|
|
if (idx === nextRevealIdx.value && canRevealPrize(idx)) { |
|
|
if (idx === nextRevealIdx.value && canRevealPrize(idx)) { |
|
|
revealedCount.value++; |
|
|
revealedCount.value++; |
|
|
lastRevealedIdx.value = idx; // 记录最新揭秘的索引 |
|
|
lastRevealedIdx.value = idx; // 记录最新揭秘的索引 |
|
|
@ -331,15 +301,6 @@ async function openWinnerList() { |
|
|
if (lastRevealedIdx.value >= 0) { |
|
|
if (lastRevealedIdx.value >= 0) { |
|
|
showOne.value = false; |
|
|
showOne.value = false; |
|
|
} |
|
|
} |
|
|
// 设置弹窗位置 |
|
|
|
|
|
// nextTick(() => { |
|
|
|
|
|
// const btn = winnerBtnRef.value; |
|
|
|
|
|
// if (btn) { |
|
|
|
|
|
// const rect = btn.getBoundingClientRect(); |
|
|
|
|
|
// modalLeft.value = rect.left - 23; |
|
|
|
|
|
// modalTop.value = rect.bottom + 18; // 4px间距 |
|
|
|
|
|
// } |
|
|
|
|
|
// }); |
|
|
|
|
|
} |
|
|
} |
|
|
function closeWinnerList() { |
|
|
function closeWinnerList() { |
|
|
showWinnerList.value = false; |
|
|
showWinnerList.value = false; |
|
|
@ -378,15 +339,6 @@ async function toggleWinnerList() { |
|
|
showOne.value = false; |
|
|
showOne.value = false; |
|
|
console.log("设置 showOne 为 false"); |
|
|
console.log("设置 showOne 为 false"); |
|
|
} |
|
|
} |
|
|
// 设置弹窗位置 |
|
|
|
|
|
// nextTick(() => { |
|
|
|
|
|
// const btn = winnerBtnRef.value; |
|
|
|
|
|
// if (btn) { |
|
|
|
|
|
// const rect = btn.getBoundingClientRect(); |
|
|
|
|
|
// modalLeft.value = rect.left - 23; |
|
|
|
|
|
// modalTop.value = rect.bottom + 18; // 4px间距 |
|
|
|
|
|
// } |
|
|
|
|
|
// }); |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
// 当关闭获奖名单且showOne为false时，将其切换回true |
|
|
// 当关闭获奖名单且showOne为false时，将其切换回true |
|
|
if (!showOne.value) { |
|
|
if (!showOne.value) { |
|
|
@ -423,6 +375,36 @@ function getProgressPercent(prize) { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
gap: 18px; |
|
|
gap: 18px; |
|
|
|
|
|
height: 400px; |
|
|
|
|
|
overflow-x: hidden !important; |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
padding-right: 10px; |
|
|
|
|
|
scrollbar-width: thin; |
|
|
|
|
|
scrollbar-color: #ffd283 rgba(255, 210, 131, 0.3); /* Firefox */ |
|
|
|
|
|
} |
|
|
|
|
|
.prize-panel-list1 { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 20px; |
|
|
|
|
|
left: 20px; |
|
|
|
|
|
background: none; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
min-width: 320px; |
|
|
|
|
|
max-width: 342px; |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
display: flex;} |
|
|
|
|
|
|
|
|
|
|
|
.prize-panel-list::-webkit-scrollbar { |
|
|
|
|
|
width: 6px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.prize-panel-list::-webkit-scrollbar-track { |
|
|
|
|
|
background: rgba(255, 210, 131, 0.3); |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.prize-panel-list::-webkit-scrollbar-thumb { |
|
|
|
|
|
background-color: #ffd283; |
|
|
|
|
|
border-radius: 3px; |
|
|
} |
|
|
} |
|
|
.prize-panel-item { |
|
|
.prize-panel-item { |
|
|
background: #ffd283; |
|
|
background: #ffd283; |
|
|
@ -521,20 +503,21 @@ function getProgressPercent(prize) { |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
} |
|
|
} |
|
|
.prize-panel-footer { |
|
|
.prize-panel-footer { |
|
|
position: absolute; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
bottom: -26px; |
|
|
|
|
|
|
|
|
position: fixed; |
|
|
|
|
|
right: 750px; |
|
|
|
|
|
bottom: 435px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
z-index: 20; |
|
|
z-index: 20; |
|
|
/* 移除 move-up 相关 */ |
|
|
|
|
|
|
|
|
padding: 10px 0; |
|
|
|
|
|
border-radius: 0 0 6px 6px; |
|
|
} |
|
|
} |
|
|
.arrow-up { |
|
|
.arrow-up { |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 36px; |
|
|
|
|
|
height: 24px; |
|
|
|
|
|
|
|
|
width: 50px; |
|
|
|
|
|
height: 30px; |
|
|
margin-bottom: 4px; |
|
|
margin-bottom: 4px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
background-image: url("../../../assets/展开.png"); |
|
|
background-image: url("../../../assets/展开.png"); |
|
|
@ -544,10 +527,10 @@ function getProgressPercent(prize) { |
|
|
} |
|
|
} |
|
|
.arrow-down { |
|
|
.arrow-down { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
top: 120px; |
|
|
|
|
|
left: 181px; |
|
|
|
|
|
width: 36px; |
|
|
|
|
|
height: 38px; |
|
|
|
|
|
|
|
|
top: 100px; |
|
|
|
|
|
left: 150px; |
|
|
|
|
|
width: 47px; |
|
|
|
|
|
height: 28px; |
|
|
margin-bottom: 4px; |
|
|
margin-bottom: 4px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
background-image: url("../../../assets/展开.png"); |
|
|
background-image: url("../../../assets/展开.png"); |
|
|
@ -568,8 +551,8 @@ function getProgressPercent(prize) { |
|
|
} |
|
|
} |
|
|
.winner-modal-mask { |
|
|
.winner-modal-mask { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
top: 155px; |
|
|
|
|
|
left:33px; |
|
|
|
|
|
|
|
|
top: 142px; |
|
|
|
|
|
left:-4px; |
|
|
width: 100vw; |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
height: 100vh; |
|
|
background: rgba(0, 0, 0, 0.01); |
|
|
background: rgba(0, 0, 0, 0.01); |
|
|
|
pangluotong
4 weeks ago