lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 礼物特效

Browse Source
This commit is contained in:
李琦
2026-08-03 11:48:31 +08:00
parent ab2cafeb1b
commit 63fea7e903
6 changed files with 435 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
vite-tailwindcss/src/views/index/index.vue
View File

@@ -291,16 +291,16 @@
<!-- 礼物面板 -->
<div v-if="showGiftPanel" class="fixed inset-0 z-[60] bg-black/25 transition-opacity duration-200" @click="closeGiftPanel"></div>
<div
class="gift-panel fixed bottom-0 left-0 right-0 mx-auto w-full max-w-[420px] bg-[#fdfbf7] rounded-t-2xl shadow-xl transition-transform duration-300 z-[70] px-4 pt-4 pb-5 flex flex-col"
class="gift-panel fixed bottom-0 left-0 right-0 mx-auto w-full max-w-[420px] rounded-t-2xl shadow-xl transition-transform duration-300 z-[70] px-3 pt-3 pb-4 flex flex-col"
:class="{ 'pointer-events-none': !showGiftPanel }"
:style="{ transform: showGiftPanel ? 'translateY(0)' : 'translateY(110%)' }"
>
<div class="gift-panel-handle" aria-hidden="true"></div>
<div class="flex items-center justify-between mb-2.5 px-0.5">
<span class="text-[13px] text-[#a88c6b] tracking-[0.25em]">送一份心意</span>
<button type="button" class="p-1.5 text-[#a88c6b]/70 text-sm leading-none" @click="closeGiftPanel">✕</button>
<div class="flex items-center justify-between mb-1.5 px-0.5">
<span class="text-[12px] text-[#c8c4bc] tracking-[0.25em]">送一份心意</span>
<button type="button" class="p-1 text-[#c8c4bc]/80 text-sm leading-none" @click="closeGiftPanel">✕</button>
</div>
<div class="gift-quota mb-2.5">
<div class="gift-quota mb-1.5">
<span v-if="giftQuota.remain > 0">还可赠送 <b>{{ giftQuota.remain }}</b> 次</span>
<span v-else>赠送次数已用完，再点赞 <b>{{ giftQuota.likes_to_next }}</b> 次可多送 1 次</span>
<span class="gift-quota-sub">已送 {{ giftQuota.gift_used }} / {{ giftQuota.gift_allow }} · 点赞 {{ giftQuota.my_likes }}（每 {{ giftQuota.likes_per_gift }} 赞 +1 次）</span>
@@ -308,7 +308,7 @@
<input
v-model="giftForm.name"
placeholder="您的姓名"
class="w-full bg-white border-[0.5px] border-[#a88c6b]/25 rounded-lg px-3 py-2 text-[12px] mb-2.5 focus:outline-none focus:border-[#a88c6b]"
class="gift-name-input w-full rounded-lg px-3 py-2 text-[12px] mb-1.5 focus:outline-none"
/>
<div class="gift-grid">
<button
@@ -319,8 +319,11 @@
:disabled="giftBusy || giftQuota.remain <= 0"
@click="handleSendGift(g.key)"
>
<span class="gift-item-label calligraphy-strong">{{ g.label }}</span>
<span class="gift-item-count">{{ giftCounts[g.key] || 0 }}</span>
<span
class="gift-item-preview calligraphy-strong"
:style="{ backgroundImage: g.preview }"
>{{ g.label }}</span>
<span class="gift-item-caption">{{ g.label }}</span>
</button>
</div>
</div>
@@ -1538,7 +1541,11 @@ const openGiftPanel = async () => {
} catch { /* ignore */ }
}
const onGiftPlayStart = ({ giftType, name, count }) => {
const onGiftPlayStart = ({ giftType, name, count, phase }) => {
if (phase === 'mult') {
giftFeedRef.value?.revealCount(giftType, count)
return
}
giftFeedRef.value?.push(name, giftType, count)
}
@@ -1552,7 +1559,14 @@ const replayGiftFeedOnly = (list) => {
const it = items[i]
i += 1
giftFeedRef.value?.push(it.name, it.giftType, it.count)
if (i < items.length) setTimeout(tick, 900)
if (it.count > 1) {
setTimeout(() => {
giftFeedRef.value?.revealCount(it.giftType, it.count)
if (i < items.length) setTimeout(tick, 500)
}, 900)
} else if (i < items.length) {
setTimeout(tick, 900)
}
}
tick()
}
@@ -1583,7 +1597,7 @@ const handleSendGift = async (giftType) => {
if (showGiftFx.value) {
giftEffectRef.value?.play({ giftType, name, count: 1 })
} else {
giftFeedRef.value?.push(name, giftType, 1)
giftFeedRef.value?.bumpOrPush(name, giftType)
}
toast.success('心意已送达')
} catch (e) {
@@ -1901,73 +1915,100 @@ watch(
.gift-fab.busy { opacity: 0.7; pointer-events: none; }
.gift-icon { font-size: 16px; color: #a88c6b; line-height: 1; }
.gift-panel {
max-height: min(52dvh, 380px);
max-height: min(56dvh, 420px);
overflow-y: auto;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(55, 55, 60, 0.94);
color: #e8e6e2;
}
.gift-panel-handle {
width: 36px;
height: 4px;
width: 32px;
height: 3px;
border-radius: 999px;
background: rgba(168, 140, 107, 0.28);
margin: 0 auto 10px;
background: rgba(255, 255, 255, 0.22);
margin: 0 auto 8px;
}
.gift-quota {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(168, 140, 107, 0.08);
color: #7a6550;
font-size: 11px;
line-height: 1.45;
gap: 1px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
color: rgba(232, 230, 226, 0.78);
font-size: 10px;
line-height: 1.4;
letter-spacing: 0.04em;
}
.gift-quota b { color: #a88c6b; font-weight: 600; }
.gift-quota b { color: #f0e6c8; font-weight: 600; }
.gift-quota-sub {
font-size: 10px;
color: #8A8680;
font-size: 9px;
color: rgba(232, 230, 226, 0.48);
letter-spacing: 0.02em;
}
.gift-name-input {
background: rgba(255, 255, 255, 0.08);
border: 0.5px solid rgba(255, 255, 255, 0.14);
color: #f5f3ef;
}
.gift-name-input::placeholder {
color: rgba(232, 230, 226, 0.4);
}
.gift-name-input:focus {
border-color: rgba(240, 230, 200, 0.45);
}
.gift-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
gap: 4px;
}
.gift-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 52px;
padding: 6px 4px;
justify-content: flex-start;
gap: 1px;
min-height: 72px;
padding: 6px 2px 4px;
border-radius: 10px;
border: 0.5px solid rgba(168, 140, 107, 0.22);
background: #fff;
color: #5c4a35;
border: 0.5px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
color: #e8e6e2;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.gift-item:active { transform: scale(0.96); }
.gift-item:disabled { opacity: 0.6; pointer-events: none; }
.gift-item-label {
font-size: 14px;
line-height: 1.15;
color: #a88c6b;
.gift-item:disabled { opacity: 0.45; pointer-events: none; }
.gift-item-preview {
display: block;
width: 100%;
min-height: 40px;
line-height: 1.1;
font-size: 24px;
letter-spacing: 0.04em;
text-align: center;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.gift-item-count {
font-size: 10px;
color: #8A8680;
letter-spacing: 0.04em;
.gift-item-caption {
font-size: 8px;
line-height: 1.15;
color: rgba(232, 230, 226, 0.5);
letter-spacing: 0.03em;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 360px) {
.gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gift-item { min-height: 48px; }
.gift-item-label { font-size: 15px; }
.gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.gift-item { min-height: 80px; }
.gift-item-preview { font-size: 28px; min-height: 46px; }
.gift-item-caption { font-size: 9px; }
}
.action-comment-row {
position: relative;