Skip to content

C
corporate-culture-qd
Commit 2c70572b by lijiabin
Options

【需求 20520】 styles: 优化样式

parent 0519d87a
Showing with 289 additions and 132 deletions
src/components/common/LuckyWheel/index.vue
<template> <template>
<Comp @handle-prize-result="handlePrizeResult" /> <Comp @handle-prize-result="handlePrizeResult" />
<el-button @click="testAnimation">测试动画</el-button>
<Teleport to="body"> <Teleport to="body">
<Transition name="result"> <Transition name="result">
<div <div
...@@ -27,12 +26,23 @@ ...@@ -27,12 +26,23 @@
:data-scale="fanItemMotion(index, fanStackTexts.length).scale" :data-scale="fanItemMotion(index, fanStackTexts.length).scale"
> >
<div class="blessing-fan-face"> <div class="blessing-fan-face">
<span class="blessing-fan-emoji">{{ fanEmoji(index) }}</span> <div class="blessing-fan-top">
<span class="blessing-fan-orb" aria-hidden="true" />
<span class="blessing-fan-string" />
<!-- <span class="blessing-fan-label">今日签</span> -->
</div>
<div class="blessing-fan-meta">
<span class="blessing-fan-divider" />
<span class="blessing-fan-headline">签语</span>
<span class="blessing-fan-divider" />
</div>
<div class="blessing-fan-text"> <div class="blessing-fan-text">
<span class="blessing-fan-emoji">{{ fanEmoji(index) }}</span>
<span <span
v-for="(char, charIndex) in text.split('')" v-for="(char, charIndex) in text.split('')"
:key="`${char}-${charIndex}`" :key="`${char}-${charIndex}`"
class="blessing-fan-char" class="blessing-fan-char"
:class="{ 'is-gap': char === ' ' }"
> >
{{ char }} {{ char }}
</span> </span>
...@@ -44,21 +54,26 @@ ...@@ -44,21 +54,26 @@
<div ref="blessingTagStageRef" class="blessing-tag-stage"> <div ref="blessingTagStageRef" class="blessing-tag-stage">
<div ref="blessingTagRef" class="blessing-tag"> <div ref="blessingTagRef" class="blessing-tag">
<div ref="blessingTagTopRef" class="blessing-tag-top"> <div ref="blessingTagTopRef" class="blessing-tag-top">
<span class="blessing-tag-hole" /> <span class="blessing-tag-orb" aria-hidden="true" />
<span class="blessing-tag-knot" /> <span class="blessing-tag-string" />
<span class="blessing-tag-label">今日签</span>
</div>
<div class="blessing-tag-meta">
<span class="blessing-tag-divider" />
<span class="blessing-tag-headline">签语</span>
<span class="blessing-tag-divider" />
</div> </div>
<div class="blessing-tag-headline">LUCKY</div>
<div class="blessing-tag-divider" />
<div class="blessing-text" :class="{ 'is-long-text': blessingChars.length > 10 }"> <div class="blessing-text" :class="{ 'is-long-text': blessingChars.length > 10 }">
<span <span
v-for="(char, index) in blessingChars" v-for="(char, index) in blessingChars"
:key="`${char}-${index}`" :key="`${char}-${index}`"
:ref="setBlessingCharRef" :ref="setBlessingCharRef"
:class="{ 'is-gap': char === ' ' }"
> >
{{ char }} {{ char }}
</span> </span>
</div> </div>
<div ref="blessingSealRef" class="blessing-tag-seal">GOOD DAY</div> <div ref="blessingSealRef" class="blessing-tag-seal">大吉</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -442,18 +457,6 @@ const handlePrizeResult = (prize: LuckWheelResultDto) => { ...@@ -442,18 +457,6 @@ const handlePrizeResult = (prize: LuckWheelResultDto) => {
currentPrize.value = prize currentPrize.value = prize
showResult.value = true showResult.value = true
} }
const testAnimation = () => {
showResult.value = true
currentPrize.value = {
prizeId: null,
prizeImageUrl: '',
prizeName: '谢谢参与',
blessingText: '拒绝精神内耗 本人配享太庙',
coinCost: 0,
isWin: false,
}
}
</script> </script>
<style> <style>
...@@ -518,17 +521,18 @@ const testAnimation = () => { ...@@ -518,17 +521,18 @@ const testAnimation = () => {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 120px; bottom: 120px;
width: 390px; width: 460px;
height: 390px; height: 300px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient( background: radial-gradient(
circle, ellipse at center,
rgba(255, 223, 119, 0.44) 0%, rgba(255, 247, 219, 0.32) 0%,
rgba(255, 204, 63, 0.14) 45%, rgba(244, 229, 188, 0.16) 36%,
rgba(255, 204, 63, 0) 76% rgba(244, 229, 188, 0.06) 54%,
rgba(244, 229, 188, 0) 76%
); );
transform: translateX(-50%); transform: translateX(-50%);
filter: blur(18px); filter: blur(34px);
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
} }
...@@ -553,30 +557,12 @@ const testAnimation = () => { ...@@ -553,30 +557,12 @@ const testAnimation = () => {
z-index: 1; z-index: 1;
} }
/* .blessing-tag-slot {
position: absolute;
left: 50%;
bottom: 56px;
width: 138px;
height: 100px;
border-radius: 999px 999px 30px 30px;
background:
linear-gradient(180deg, rgba(107, 68, 0, 0.34), rgba(107, 68, 0, 0.06)),
radial-gradient(circle at 50% 0, rgba(255, 233, 165, 0.42), rgba(255, 233, 165, 0) 74%);
box-shadow:
inset 0 10px 18px rgba(87, 51, 0, 0.18),
0 10px 22px rgba(0, 0, 0, 0.16);
transform: translateX(-50%);
z-index: 2;
} */
.blessing-tag-stage { .blessing-tag-stage {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 28px; bottom: 28px;
width: 188px; width: 188px;
height: 550px; height: 550px;
/* overflow: hidden; */
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2; z-index: 2;
} }
...@@ -585,7 +571,7 @@ const testAnimation = () => { ...@@ -585,7 +571,7 @@ const testAnimation = () => {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
width: 84px; width: 88px;
height: 450px; height: 450px;
transform-origin: center 100%; transform-origin: center 100%;
transform: translateX(calc(-50% + var(--x-offset))) translateY(var(--y-offset)) transform: translateX(calc(-50% + var(--x-offset))) translateY(var(--y-offset))
...@@ -596,80 +582,177 @@ const testAnimation = () => { ...@@ -596,80 +582,177 @@ const testAnimation = () => {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 16px 16px 11px 11px; border-radius: 1.45rem;
background: background:
linear-gradient( radial-gradient(circle at top, rgba(255, 255, 255, 0.34), transparent 42%),
180deg, linear-gradient(180deg, #fffdf8 0%, #f8f0de 58%, #efe1bf 100%);
rgba(255, 249, 204, 0.76) 0%, border: 1px solid rgba(216, 200, 169, 0.7);
rgba(255, 236, 165, 0.16) 12%,
transparent 18%
),
linear-gradient(180deg, #ffdd68 0%, #f7c529 56%, #ebb116 100%);
border: 1px solid rgba(123, 79, 0, 0.18);
box-shadow: box-shadow:
0 16px 28px rgba(0, 0, 0, 0.18), 0 18px 32px rgba(58, 39, 18, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px rgba(138, 105, 61, 0.12),
inset 0 -10px 24px rgba(162, 101, 0, 0.12); inset 0 1px 0 rgba(255, 255, 255, 0.85);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px 0 18px; padding: 14px 8px 16px;
overflow: hidden; overflow: hidden;
} }
.blessing-fan-face::before { .blessing-fan-face::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 9px; inset: 8px;
border-radius: 11px; border-radius: 1.1rem;
border: 1px solid rgba(142, 92, 0, 0.14); border: 1px solid rgba(210, 192, 157, 0.45);
pointer-events: none; pointer-events: none;
} }
.blessing-fan-emoji { .blessing-fan-face::after {
content: '';
position: absolute;
left: 14px;
right: 14px;
top: 10px;
height: 56px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.45);
filter: blur(18px);
pointer-events: none;
}
.blessing-fan-top {
position: relative; position: relative;
z-index: 1; z-index: 1;
color: rgba(94, 53, 0, 0.88); width: 100%;
font-size: 15px; display: flex;
font-weight: 700; flex-direction: column;
letter-spacing: 0.5px; align-items: center;
}
.blessing-fan-orb {
width: 8px;
height: 8px;
border-radius: 50%;
background: #c14a3f;
box-shadow: 0 0 0 3px rgba(193, 74, 63, 0.08);
}
.blessing-fan-string {
width: 1.5px;
height: 16px;
margin-top: 3px;
border-radius: 999px;
background: linear-gradient(180deg, #c14a3f, rgba(193, 74, 63, 0.1));
}
.blessing-fan-label {
margin-top: 6px;
color: #9d8460;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.22em;
}
.blessing-fan-meta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 4px;
margin-top: 10px;
color: #b29467;
}
.blessing-fan-headline {
font-size: 8px;
font-weight: 500;
letter-spacing: 0.08em;
}
.blessing-fan-divider {
width: 12px;
height: 1px;
background: rgba(204, 181, 141, 0.55);
} }
.blessing-fan-text { .blessing-fan-text {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 20px; margin-top: 16px;
color: rgba(96, 53, 0, 0.68); flex: 1 1 auto;
width: 100%;
padding: 10px 4px 18px;
color: #503821;
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
letter-spacing: 1px; letter-spacing: 0.08em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start;
gap: 6px; gap: 6px;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
text-shadow: 0 1px 0 rgba(255, 251, 224, 0.2);
}
.blessing-fan-emoji {
margin-bottom: 12px;
color: rgba(104, 69, 0, 0.82);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
} }
.blessing-fan-char { .blessing-fan-char {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); position: relative;
line-height: 1;
}
.blessing-fan-char.is-gap {
margin: 10px 0;
opacity: 0;
}
.blessing-fan-char::after {
content: '';
position: absolute;
left: 50%;
bottom: -2px;
width: 2px;
height: 2px;
border-radius: 50%;
background: rgba(167, 119, 7, 0.22);
transform: translateX(-50%);
}
.blessing-fan-char:last-child::after {
display: none;
}
.blessing-fan-char.is-gap::after {
display: none;
} }
.blessing-tag { .blessing-tag {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
width: 120px; width: 7.5rem;
min-height: 470px; min-height: 32rem;
padding: 20px 0 26px; padding: 20px 14px 26px;
border-radius: 18px; border-radius: 2.2rem;
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 14%), radial-gradient(circle at top, rgba(255, 255, 255, 0.34), transparent 42%),
linear-gradient(180deg, #ffe783 0%, #ffc93f 48%, #f0b416 100%); linear-gradient(180deg, #fffdf8 0%, #f8f0de 58%, #efe1bf 100%);
border: 1px solid rgba(118, 74, 0, 0.18); border: 1px solid rgba(216, 200, 169, 0.7);
box-shadow: box-shadow:
0 24px 54px rgba(0, 0, 0, 0.24), 0 24px 60px rgba(58, 39, 18, 0.16),
0 12px 36px rgba(255, 205, 63, 0.24), 0 10px 24px rgba(138, 105, 61, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.85);
inset 0 -16px 24px rgba(171, 100, 0, 0.12);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -681,22 +764,33 @@ const testAnimation = () => { ...@@ -681,22 +764,33 @@ const testAnimation = () => {
.blessing-tag::before { .blessing-tag::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 10px 9px; inset: 11px;
border-radius: 14px; border-radius: 1.75rem;
border: 1px solid rgba(125, 81, 0, 0.16); border: 1px solid rgba(210, 192, 157, 0.45);
pointer-events: none; pointer-events: none;
} }
.blessing-tag::after { .blessing-tag::after {
content: ''; content: '';
position: absolute; position: absolute;
left: 16px; left: 20px;
right: 16px; right: 20px;
top: 12px; top: 14px;
height: 92px; height: 80px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)); background: rgba(255, 255, 255, 0.45);
filter: blur(4px); filter: blur(24px);
pointer-events: none;
}
.blessing-tag-stage::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.16;
mix-blend-mode: multiply;
background-image: radial-gradient(rgba(146, 118, 72, 0.28) 0.6px, transparent 0.6px);
background-size: 7px 7px;
pointer-events: none; pointer-events: none;
} }
...@@ -706,76 +800,109 @@ const testAnimation = () => { ...@@ -706,76 +800,109 @@ const testAnimation = () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
z-index: 1;
} }
.blessing-tag-hole { .blessing-tag-orb {
width: 13px; width: 14px;
height: 13px; height: 14px;
border-radius: 50%; border-radius: 50%;
background: rgba(116, 72, 0, 0.28); background: #c14a3f;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14); box-shadow: 0 0 0 4px rgba(193, 74, 63, 0.08);
} }
.blessing-tag-knot { .blessing-tag-string {
width: 2px; width: 2px;
height: 26px; height: 26px;
margin-top: 4px; margin-top: 4px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(180deg, rgba(125, 82, 0, 0.72), rgba(125, 82, 0, 0.2)); background: linear-gradient(180deg, #c14a3f, rgba(193, 74, 63, 0.1));
} }
.blessing-tag-headline { .blessing-tag-label {
margin-top: 6px; margin-top: 8px;
color: rgba(120, 69, 0, 0.56); color: #9d8460;
font-size: 11px; font-size: 11px;
font-weight: 800; font-weight: 800;
letter-spacing: 3px; letter-spacing: 0.42em;
}
.blessing-tag-meta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
color: #b29467;
font-size: 12px;
letter-spacing: 0.12em;
}
.blessing-tag-headline {
color: #b29467;
font-size: 11px;
font-weight: 500;
} }
.blessing-tag-divider { .blessing-tag-divider {
width: 56px; width: 24px;
height: 1px; height: 1px;
margin: 12px 0 18px; background: rgba(204, 181, 141, 0.55);
background: linear-gradient(
90deg,
rgba(133, 86, 0, 0),
rgba(133, 86, 0, 0.46),
rgba(133, 86, 0, 0)
);
} }
.blessing-text { .blessing-text {
color: #603500; position: relative;
font-size: 26px; z-index: 1;
margin: 16px 0;
width: 100%;
flex: 1;
justify-content: center;
color: #503821;
font-size: 24px;
font-weight: 700; font-weight: 700;
letter-spacing: 2px; letter-spacing: 0.14em;
line-height: 1; line-height: 1.26;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 10px; justify-content: center;
flex: 1; gap: 6px;
padding: 0 10px; padding: 20px 8px;
border-radius: 1.6rem;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
writing-mode: vertical-rl;
text-orientation: mixed;
} }
.blessing-text.is-long-text { .blessing-text.is-long-text {
font-size: 23px; font-size: 21px;
gap: 8px;
} }
.blessing-text > span { .blessing-text > span {
display: inline-block;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
} }
.blessing-text > span.is-gap {
margin: 12px 0;
opacity: 0;
}
.blessing-tag-seal { .blessing-tag-seal {
position: relative;
z-index: 1;
margin-top: 18px; margin-top: 18px;
padding: 5px 10px; padding: 6px 14px;
border-radius: 999px; border-radius: 999px;
background: rgba(144, 41, 22, 0.1); border: 1px solid rgba(199, 93, 79, 0.2);
color: rgba(123, 44, 28, 0.68); background: rgba(185, 65, 53, 0.1);
font-size: 10px; color: #b33f34;
font-size: 9px;
font-weight: 800; font-weight: 800;
letter-spacing: 1.8px; letter-spacing: 0.28em;
box-shadow: 0 4px 10px rgba(185, 65, 53, 0.08);
} }
.blessing-caption { .blessing-caption {
...@@ -804,6 +931,12 @@ const testAnimation = () => { ...@@ -804,6 +931,12 @@ const testAnimation = () => {
min-height: 560px; min-height: 560px;
} }
.blessing-glow {
width: 320px;
height: 220px;
bottom: 112px;
}
.blessing-fan-scene { .blessing-fan-scene {
width: min(94vw, 390px); width: min(94vw, 390px);
height: 434px; height: 434px;
...@@ -816,10 +949,14 @@ const testAnimation = () => { ...@@ -816,10 +949,14 @@ const testAnimation = () => {
} }
.blessing-fan-item { .blessing-fan-item {
width: 70px; width: 74px;
height: 304px; height: 304px;
} }
.blessing-fan-face {
padding: 12px 6px 12px;
}
.blessing-tag-stage { .blessing-tag-stage {
width: 160px; width: 160px;
height: 484px; height: 484px;
...@@ -827,23 +964,43 @@ const testAnimation = () => { ...@@ -827,23 +964,43 @@ const testAnimation = () => {
} }
.blessing-tag { .blessing-tag {
width: 118px; width: 9.6rem;
min-height: 410px; min-height: 27rem;
padding: 18px 12px 22px;
} }
.blessing-fan-text { .blessing-fan-text {
font-size: 14px; margin-top: 12px;
padding: 14px 2px;
font-size: 13px;
gap: 6px; gap: 6px;
} }
.blessing-fan-emoji {
margin-bottom: 8px;
font-size: 14px;
}
.blessing-fan-char.is-gap {
margin: 8px 0;
}
.blessing-fan-label,
.blessing-fan-headline {
font-size: 7px;
}
.blessing-text { .blessing-text {
font-size: 23px; font-size: 20px;
gap: 8px; padding: 18px 6px;
} }
.blessing-text.is-long-text { .blessing-text.is-long-text {
font-size: 20px; font-size: 18px;
gap: 7px; }
.blessing-text > span.is-gap {
margin: 10px 0;
} }
.blessing-caption-title { .blessing-caption-title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment