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