diff --git a/vite-tailwindcss/src/components/LikeBurst.vue b/vite-tailwindcss/src/components/LikeBurst.vue index 23e1e49..8c1d62c 100644 --- a/vite-tailwindcss/src/components/LikeBurst.vue +++ b/vite-tailwindcss/src/components/LikeBurst.vue @@ -16,15 +16,19 @@ import { ref } from 'vue' const hearts = ref([]) let uid = 0 +/** 单次最多同时排队的爱心数,避免超高点赞拖垮渲染 */ +const MAX_BURST = 80 + const burst = (count = 3) => { - const n = Math.max(1, Math.min(3, count)) + const n = Math.max(0, Math.min(MAX_BURST, Math.floor(Number(count) || 0))) + if (!n) return for (let i = 0; i < n; i += 1) { const id = ++uid - const left = 12 + Math.random() * 48 - const drift = (Math.random() - 0.5) * 36 - const duration = 1.2 + Math.random() * 0.6 - const delay = i * 0.08 - const scale = 0.85 + Math.random() * 0.45 + const left = 10 + Math.random() * 200 + const drift = (Math.random() - 0.5) * 90 + const duration = 1.25 + Math.random() * 0.7 + const delay = i * 0.045 + const scale = 0.8 + Math.random() * 0.55 hearts.value.push({ id, style: { @@ -50,15 +54,15 @@ defineExpose({ burst }) position: fixed; left: 0; bottom: 0; - width: 120px; - height: 55vh; + width: min(46vw, 280px); + height: 58vh; z-index: 45; pointer-events: none; overflow: hidden; } .like-burst-heart { position: absolute; - bottom: 24px; + bottom: 28px; color: #f472b6; font-size: 22px; line-height: 1; @@ -78,7 +82,7 @@ defineExpose({ burst }) } 100% { opacity: 0; - transform: translate3d(var(--drift, 0px), -42vh, 0) scale(var(--scale, 1)); + transform: translate3d(var(--drift, 0px), -46vh, 0) scale(var(--scale, 1)); } } diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue index edacbd0..86f2b96 100644 --- a/vite-tailwindcss/src/views/index/index.vue +++ b/vite-tailwindcss/src/views/index/index.vue @@ -85,19 +85,30 @@ -
+
+ +