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

1. 弹幕功能

Browse Source 
2. 点赞
3. 导航引导
4. ai弹幕、审核
This commit is contained in:
李琦
2026-08-01 17:25:33 +08:00
parent 7eb82426b9
commit 02202619c6
2 changed files with 112 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
vite-tailwindcss/index.html
View File

@@ -4,14 +4,14 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/liqi/20260731/1774761336736_compressed_compressed.webp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="（公历2026年9月4日）岁在丙午，仲秋之吉，四日佳期。谨订良缘，敢邀台驾。" />
<meta name="description" content="💍（公历2026年9月4日）岁在丙午，仲秋之吉，四日佳期。谨订良缘，敢邀台驾。" />
<meta property="og:type" content="website" />
<meta property="og:title" content="李琦&李逸烁的婚礼请柬" />
<meta property="og:description" content="（公历2026年9月4日）岁在丙午，仲秋之吉，四日佳期。谨订良缘，敢邀台驾。" />
<meta name="twitter:title" content="李琦&李逸烁的婚礼请柬" />
<meta name="twitter:description" content="（公历2026年9月4日）岁在丙午，仲秋之吉，四日佳期。谨订良缘，敢邀台驾。" />
<meta property="og:title" content="💕李琦❤️李逸烁 💍💒婚礼请柬" />
<meta property="og:description" content="💍（公历2026年9月4日）岁在丙午，仲秋之吉，四日佳期。谨订良缘，敢邀台驾。" />
<meta name="twitter:title" content="💕李琦❤️李逸烁 💍💒婚礼请柬" />
<meta name="twitter:description" content="💍（公历2026年9月4日）岁在丙午，仲秋之吉，四日佳期。谨订良缘，敢邀台驾。" />
<meta property="og:image" content="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/liqi/20260731/1774761336736_compressed_compressed.webp">
<title>💕李琦❤️李逸烁 💍💒婚礼请柬</title>
<title>💕李琦❤️李逸烁 💒婚礼请柬</title>
</head>
<body>
<div id="app"></div>

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

@@ -84,30 +84,40 @@
</div>
</div>
<!-- 右下互动区：点赞 / 回执 / 祝福 -->
<div class="fixed bottom-6 right-5 z-50 flex flex-col items-end gap-3">
<!-- 底部互动区：点赞 / 填写 / 评论条 -->
<div class="action-dock">
<div class="action-dock-row">
<button
type="button"
class="action-pill like-fab"
:class="{ liked: likePulse, busy: likeBusy }"
:disabled="likeBusy"
title="点赞"
@click="handleLike"
>
<i class="fa-heart like-icon" :class="likePulse ? 'fa-solid' : 'fa-regular'"></i>
<span class="like-count">{{ likeCount }}</span>
</button>
<button
type="button"
class="action-pill action-rsvp"
title="出席回执"
@click="showTrackList = false; isDrawerOpen = true"
>
<img src="https://api.iconify.design/lucide:clipboard-pen.svg?color=%23a88c6b" class="action-pill-icon" alt="" />
<!-- <span>填写</span>-->
</button>
</div>
<button
type="button"
class="like-fab"
:class="{ liked: likePulse, busy: likeBusy }"
:disabled="likeBusy"
title="点赞"
@click="handleLike"
>
<i class="fa-heart like-icon" :class="likePulse ? 'fa-solid' : 'fa-regular'"></i>
<span class="like-count">{{ likeCount }}</span>
</button>
<div @click="showTrackList = false; isDrawerOpen = true" class="control-btn cursor-pointer" title="出席回执">
<img src="https://api.iconify.design/lucide:clipboard-pen.svg?color=%23a88c6b" class="w-4 h-4" />
</div>
<div
v-if="data.danmakuEnabled"
@click="showTrackList = false; showBlessingDrawer = true"
class="control-btn cursor-pointer"
type="button"
class="action-comment"
title="送祝福"
@click="showTrackList = false; showBlessingDrawer = true"
>
<img src="https://api.iconify.design/lucide:message-circle-heart.svg?color=%23a88c6b" class="w-4 h-4" />
</div>
<img src="https://api.iconify.design/lucide:message-circle-heart.svg?color=%23a88c6b" class="action-comment-icon" alt="" />
<span>写一句祝福</span>
</button>
</div>
<LikeBurst ref="likeBurstRef" />
@@ -1080,26 +1090,92 @@ watch(
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9999px;
backdrop-filter: blur(12px); border: 0.5px solid rgba(168, 140, 107, 0.3); color: #a88c6b; background: rgba(255,255,255,0.6);
}
.action-dock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
pointer-events: none;
}
.action-dock-row {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
pointer-events: none;
}
.action-dock-row > * { pointer-events: auto; }
.action-pill {
min-width: 52px;
min-height: 52px;
padding: 8px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 9999px;
cursor: pointer;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 0.5px solid rgba(168, 140, 107, 0.28);
background: rgba(255, 253, 249, 0.42);
color: #a88c6b;
box-shadow: 0 6px 18px rgba(92, 74, 53, 0.08);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.action-pill:active { transform: scale(0.97); }
.action-pill-icon { width: 18px; height: 18px; display: block; }
.action-rsvp {
font-size: 13px;
letter-spacing: 0.18em;
padding: 10px 18px;
}
.like-fab {
width: 38px; min-height: 48px; padding: 6px 4px 5px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
border-radius: 9999px; cursor: pointer;
backdrop-filter: blur(12px);
border: 0.5px solid rgba(168, 140, 107, 0.3);
background: rgba(255,255,255,0.6);
flex-direction: column;
gap: 3px;
padding: 8px 12px;
min-width: 52px;
}
.like-fab.liked {
border-color: rgba(244, 114, 182, 0.55);
background: rgba(255, 241, 247, 0.9);
border-color: rgba(244, 114, 182, 0.45);
background: rgba(255, 241, 247, 0.5);
}
.like-fab.busy { opacity: 0.7; pointer-events: none; }
.like-icon { font-size: 14px; color: #a88c6b; line-height: 1; }
.like-icon { font-size: 18px; color: #a88c6b; line-height: 1; }
.like-fab.liked .like-icon { color: #f472b6; }
.like-count {
font-size: 9px; letter-spacing: 0.02em; color: #a88c6b;
font-size: 11px; letter-spacing: 0.02em; color: #a88c6b;
line-height: 1; text-align: center; max-width: 100%;
}
.like-fab.liked .like-count { color: #f472b6; font-weight: 600; }
.action-comment {
pointer-events: auto;
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 9999px;
cursor: pointer;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 0.5px solid rgba(168, 140, 107, 0.26);
background: rgba(255, 253, 249, 0.38);
color: #a88c6b;
font-size: 13px;
letter-spacing: 0.28em;
box-shadow: 0 8px 22px rgba(92, 74, 53, 0.1);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.action-comment:active { transform: scale(0.99); }
.action-comment-icon { width: 18px; height: 18px; opacity: 0.9; }
.danmaku-color-row {
display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 2px 0;
}