Browse Source

修改样式

dev
zhaoruhui 19 hours ago
parent
commit
859f89bcd8
  1. 2
      dev/index.html
  2. 1
      dev/static/css/anniversary-8993770b.css
  3. BIN
      dev/static/images/-188-ca9ef78b.png
  4. BIN
      dev/static/images/-27-156016ee.png
  5. BIN
      dev/static/images/-880-8ecef737.png
  6. BIN
      dev/static/images/100-0699546f.png
  7. BIN
      dev/static/images/18-9d7f51c3.png
  8. BIN
      dev/static/images/500-004d6090.png
  9. BIN
      dev/static/images/anniversary-bb5da2b5.png
  10. BIN
      dev/static/images/guang-026487ca.png
  11. BIN
      dev/static/images/jiantou-6ad85925.png
  12. BIN
      dev/static/images/pan-d67b226f.png
  13. BIN
      dev/static/images/pandi-2e66c020.png
  14. BIN
      dev/static/images/tanchuang-567bad06.png
  15. 2
      dev/static/js/Login-035b204b.js
  16. 1
      dev/static/js/anniversary-2b714fe0.js
  17. 2
      dev/static/js/cj-e5a91f8f.js
  18. 2
      dev/static/js/dong-d1134683.js
  19. 2
      dev/static/js/homePage-450bf29a.js
  20. 2
      dev/static/js/index-0060069a.js
  21. 2
      dev/static/js/index-368c0fa6.js
  22. 2
      dev/static/js/index-92928ab3.js
  23. 2
      dev/static/js/request-6049a811.js
  24. BIN
      src/assets/img/anniversary/tanchuang2.png
  25. 239
      src/views/platform/anniversary.vue

2
dev/index.html

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/test/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>弘历周年庆</title>
<script type="module" crossorigin src="/test/static/js/index-77fd5149.js"></script>
<script type="module" crossorigin src="/test/static/js/index-368c0fa6.js"></script>
<link rel="stylesheet" href="/test/static/css/index-c1620e5d.css">
</head>
<body>

1
dev/static/css/anniversary-8993770b.css

@ -0,0 +1 @@
.container[data-v-5955b856]{width:100vw;height:100vh;background-image:url(/test/static/images/anniversary-bb5da2b5.png);background-size:100% auto;background-position:center center;background-repeat:no-repeat;background-color:#000;overflow:hidden;position:relative}.turntable-container[data-v-5955b856]{position:relative;width:500px;height:500px;margin:auto auto 10px}.balance[data-v-5955b856]{position:absolute;top:2%;left:50%;transform:translate(-50%);font-size:120px;text-shadow:0 0 20px rgba(255,215,0,.5);font-weight:900;color:#ffff82;z-index:1000;width:150%;text-align:center;font-family:Arial Black,Gadget,sans-serif;letter-spacing:2px}.guang[data-v-5955b856]{position:absolute;top:-10%;left:50%;transform:translate(-50%);width:500px;height:400px;background-size:contain;background-position:center;background-repeat:no-repeat;z-index:1}.pandi[data-v-5955b856]{position:absolute;width:100%;height:100%;left:50%;transform:translate(-50%) scale(1.5);bottom:-65%;background-size:contain;background-position:center bottom;background-repeat:no-repeat;z-index:2}.pan[data-v-5955b856]{position:absolute;width:62%;height:62%;bottom:-69%;left:48.3%;transform-origin:center center;background-size:contain;background-position:center;background-repeat:no-repeat;z-index:3;transition:transform 5s cubic-bezier(.17,.67,.21,.99)}.prize-container[data-v-5955b856]{pointer-events:none}.prize-image[data-v-5955b856]{width:auto;height:70px;max-width:90px;object-fit:contain}.jiantou[data-v-5955b856]{position:absolute;width:15%;height:15%;bottom:-21%;left:48%;transform:translate(-50%,-50%) scale(1.5);background-size:contain;background-position:center;background-repeat:no-repeat;z-index:5;cursor:pointer}.jiantou.disabled[data-v-5955b856]{cursor:not-allowed;opacity:1;filter:grayscale(30%)}.result-popup[data-v-5955b856]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;justify-content:center;align-items:center}.popup-content[data-v-5955b856]{position:relative;width:100%;height:100%}.popup-bg[data-v-5955b856]{position:absolute;top:-40%;left:50%;transform:translate(-50%);width:800px;height:800px;background-size:contain;background-position:center;background-repeat:no-repeat;display:flex;justify-content:center;align-items:center;z-index:101}.prize-value[data-v-5955b856]{font-size:120px;text-shadow:0 0 20px rgba(255,215,0,.5);font-weight:900;color:#ffff82;margin-top:40px;font-family:Arial Black,Gadget,sans-serif}.end-message[data-v-5955b856]{font-size:100px;color:gold;text-shadow:0 0 15px rgba(255,215,0,.7)}.pulse-animation[data-v-5955b856]{animation:pulse-5955b856 1s infinite alternate}@keyframes pulse-5955b856{0%{transform:scale(1.1);text-shadow:0 0 20px rgba(255,215,0,.5)}to{transform:scale(1);text-shadow:0 0 30px rgba(255,215,0,.8)}}.flip-enter-active[data-v-5955b856]{animation:flipIn-5955b856 .1s ease-out}.flip-leave-active[data-v-5955b856]{animation:flipOut-5955b856 .2s ease-in}@keyframes flipIn-5955b856{0%{transform:perspective(600px) rotateY(90deg);opacity:0}to{transform:perspective(600px) rotateY(0);opacity:1}}@keyframes flipOut-5955b856{0%{transform:perspective(600px) rotateY(0);opacity:1}to{transform:perspective(600px) rotateY(90deg);opacity:0}}

BIN
dev/static/images/-188-ca9ef78b.png

After

Width: 96  |  Height: 65  |  Size: 6.8 KiB

BIN
dev/static/images/-27-156016ee.png

After

Width: 96  |  Height: 65  |  Size: 6.6 KiB

BIN
dev/static/images/-880-8ecef737.png

After

Width: 96  |  Height: 65  |  Size: 5.0 KiB

BIN
dev/static/images/100-0699546f.png

After

Width: 96  |  Height: 65  |  Size: 6.3 KiB

BIN
dev/static/images/18-9d7f51c3.png

After

Width: 96  |  Height: 65  |  Size: 5.5 KiB

BIN
dev/static/images/500-004d6090.png

After

Width: 96  |  Height: 65  |  Size: 5.9 KiB

BIN
dev/static/images/anniversary-bb5da2b5.png

After

Width: 1207  |  Height: 679  |  Size: 766 KiB

BIN
dev/static/images/guang-026487ca.png

After

Width: 253  |  Height: 253  |  Size: 60 KiB

BIN
dev/static/images/jiantou-6ad85925.png

After

Width: 72  |  Height: 90  |  Size: 8.3 KiB

BIN
dev/static/images/pan-d67b226f.png

After

Width: 310  |  Height: 310  |  Size: 58 KiB

BIN
dev/static/images/pandi-2e66c020.png

After

Width: 426  |  Height: 492  |  Size: 120 KiB

BIN
dev/static/images/tanchuang-567bad06.png

After

Width: 300  |  Height: 300  |  Size: 278 KiB

2
dev/static/js/Login-3131a6ec.js → dev/static/js/Login-035b204b.js

@ -1 +1 @@
import{_ as a,f as s,u as l,B as o,o as e,c as t,a as n,q as u,C as i,D as r}from"./index-77fd5149.js";const p={class:"login-container"},d={class:"login-card"},c={class:"form-group"},v=a({__name:"Login",setup(a){const v=s(""),g=l(),m=o(),h=()=>{""!==v.value?"hl2025"==v.value?(m.login(),g.push("/hxlCj")):"hl2024"===v.value?(m.login(),g.push("/choujiang")):alert("密码错误,请重试"):alert("请输入密码")};return(a,s)=>(e(),t("div",p,[n("div",d,[n("form",{onSubmit:u(h,["prevent"])},[n("div",c,[i(n("input",{type:"password",id:"password","onUpdate:modelValue":s[0]||(s[0]=a=>v.value=a),placeholder:"请输入密码"},null,512),[[r,v.value]])]),s[1]||(s[1]=n("button",{type:"submit",class:"login-button"},"进入抽奖",-1))],32)])]))}},[["__scopeId","data-v-b3aae28a"]]);export{v as default};
import{_ as a,f as s,u as l,B as o,o as e,c as t,a as n,q as u,C as i,D as r}from"./index-368c0fa6.js";const p={class:"login-container"},d={class:"login-card"},c={class:"form-group"},v=a({__name:"Login",setup(a){const v=s(""),g=l(),m=o(),h=()=>{""!==v.value?"hl2025"==v.value?(m.login(),g.push("/hxlCj")):"hl2024"===v.value?(m.login(),g.push("/choujiang")):alert("密码错误,请重试"):alert("请输入密码")};return(a,s)=>(e(),t("div",p,[n("div",d,[n("form",{onSubmit:u(h,["prevent"])},[n("div",c,[i(n("input",{type:"password",id:"password","onUpdate:modelValue":s[0]||(s[0]=a=>v.value=a),placeholder:"请输入密码"},null,512),[[r,v.value]])]),s[1]||(s[1]=n("button",{type:"submit",class:"login-button"},"进入抽奖",-1))],32)])]))}},[["__scopeId","data-v-b3aae28a"]]);export{v as default};

1
dev/static/js/anniversary-2b714fe0.js

@ -0,0 +1 @@
import{_ as e,f as a,w as s,o as t,c as l,a as n,t as i,j as u,b as c,k as r,F as o,p as g,n as v,d as p,x as d,T as f}from"./index-368c0fa6.js";const m={class:"turntable-container"},b={class:"balance"},h=["src"],y={key:0,class:"result-popup"},w={class:"popup-content"},k={key:0,class:"result-popup"},L={class:"popup-content"},I={__name:"anniversary",setup(e){const I=new URL("/test/static/images/anniversary-bb5da2b5.png",self.location).href,R=new URL("/test/static/images/pandi-2e66c020.png",self.location).href,U=new URL("/test/static/images/pan-d67b226f.png",self.location).href,$=new URL("/test/static/images/jiantou-6ad85925.png",self.location).href,x=new URL("/test/static/images/tanchuang-567bad06.png",self.location).href,_=new URL("/test/static/images/guang-026487ca.png",self.location).href,j=[{value:"500",angle:0},{value:"-880",angle:60},{value:"18",angle:120},{value:"-27",angle:180},{value:"100",angle:240},{value:"-188",angle:300}],z=a(8e3),M=a(0),T=a(!1),C=a(!1),F=a(""),O=a(0),P=a(!1),q=a(!1),A=a(["-27","-27","-27","-27","18","18","100","-188"]),B={18:new URL("/test/static/images/18-9d7f51c3.png",self.location).href,"-27":new URL("/test/static/images/-27-156016ee.png",self.location).href,100:new URL("/test/static/images/100-0699546f.png",self.location).href,"-188":new URL("/test/static/images/-188-ca9ef78b.png",self.location).href,500:new URL("/test/static/images/500-004d6090.png",self.location).href,"-880":new URL("/test/static/images/-880-8ecef737.png",self.location).href};s(C,e=>{!e&&q.value&&(P.value=!0,q.value=!1,setTimeout(()=>{P.value=!1},3e3))});const D=e=>B[e]||"",E=(e,a)=>{const s=j[e].angle*Math.PI/180;return{position:"absolute",left:"50%",top:"50%",width:"80px",height:"80px",marginLeft:"-40px",marginTop:"-40px",transform:`translate(${100*Math.sin(s)}px, ${100*-Math.cos(s)}px) rotate(${-a}deg)`,transformOrigin:"center center",display:"flex",justifyContent:"center",alignItems:"center",transition:"transform 5s cubic-bezier(0.17, 0.67, 0.21, 0.99)"}},G=()=>{if(T.value||O.value>=8)return;T.value=!0,C.value=!1;const e=Math.floor(Math.random()*A.value.length),a=A.value[e];A.value.splice(e,1);const s=j.find(e=>e.value===a);if(!s)return void(T.value=!1);let t=(720-M.value%360-s.angle)%360;const l=M.value+1440+t;M.value=l,setTimeout(()=>{T.value=!1,O.value++,F.value=a,C.value=!0,z.value+=parseInt(a),O.value>=8&&(q.value=!0),setTimeout(()=>{C.value=!1},3500)},5e3)};return(e,a)=>(t(),l("div",{class:"container",style:u({backgroundImage:`url(${c(I)})`})},[n("div",m,[n("div",b,i(z.value),1),O.value>=8?(t(),l("div",{key:0,class:"guang",style:u({backgroundImage:`url(${c(_)})`})},null,4)):r("",!0),n("div",{class:"pandi",style:u({backgroundImage:`url(${c(R)})`})},null,4),n("div",{class:"pan",style:u({transform:`translate(-50%, -50%) scale(1.5) rotate(${M.value}deg)`,backgroundImage:`url(${c(U)})`})},[(t(),l(o,null,g(j,(e,a)=>n("div",{key:a,class:"prize-container",style:u(E(a,M.value))},[n("img",{src:D(e.value),class:"prize-image"},null,8,h)],4)),64))],4),n("div",{class:v(["jiantou",{disabled:T.value||O.value>=8}]),onClick:G,style:u({backgroundImage:`url(${c($)})`})},null,6),p(f,{name:"flip"},{default:d(()=>{return[C.value?(t(),l("div",y,[n("div",w,[n("div",{class:"popup-bg",style:u({backgroundImage:`url(${c(x)})`})},[n("div",{class:v(["prize-value",{"pulse-animation":C.value}])},i((e=F.value,parseInt(e)>0?`+${e}`:e)),3)],4)])])):r("",!0)];var e}),_:1}),p(f,{name:"flip"},{default:d(()=>[P.value?(t(),l("div",k,[n("div",L,[n("div",{class:"popup-bg",style:u({backgroundImage:`url(${c(x)})`})},a[0]||(a[0]=[n("div",{class:"prize-value end-message"}," 抽奖结束 ",-1)]),4)])])):r("",!0)]),_:1})])],4))}},R=e(I,[["__scopeId","data-v-5955b856"]]);export{R as default};

2
dev/static/js/cj-e5a91f8f.js
File diff suppressed because it is too large
View File

2
dev/static/js/dong-027197ce.js → dev/static/js/dong-d1134683.js

@ -1,4 +1,4 @@
import{s as t}from"./request-eed9b906.js";
import{s as t}from"./request-6049a811.js";
/**
* @license
* Copyright 2010-2025 Three.js Authors

2
dev/static/js/homePage-2cfe0142.js → dev/static/js/homePage-450bf29a.js

@ -1 +1 @@
import{u as o,r as s,o as a,c as n,a as t,b as u,d as c}from"./index-77fd5149.js";const e={__name:"homePage",setup(e){const r=o();return(o,e)=>{const h=s("Mascot");return a(),n("div",null,[t("button",{onClick:e[0]||(e[0]=o=>u(r).push("/choujiang"))},"抽奖"),t("button",{onClick:e[1]||(e[1]=o=>u(r).push("/zhongchou"))},"众筹"),c(h)])}}};export{e as default};
import{u as o,r as s,o as a,c as n,a as t,b as u,d as c}from"./index-368c0fa6.js";const e={__name:"homePage",setup(e){const r=o();return(o,e)=>{const h=s("Mascot");return a(),n("div",null,[t("button",{onClick:e[0]||(e[0]=o=>u(r).push("/choujiang"))},"抽奖"),t("button",{onClick:e[1]||(e[1]=o=>u(r).push("/zhongchou"))},"众筹"),c(h)])}}};export{e as default};

2
dev/static/js/index-0060069a.js
File diff suppressed because it is too large
View File

2
dev/static/js/index-368c0fa6.js
File diff suppressed because it is too large
View File

2
dev/static/js/index-92928ab3.js
File diff suppressed because it is too large
View File

2
dev/static/js/request-6049a811.js
File diff suppressed because it is too large
View File

BIN
src/assets/img/anniversary/tanchuang2.png

After

Width: 750  |  Height: 750  |  Size: 134 KiB

239
src/views/platform/anniversary.vue

@ -2,9 +2,9 @@
<div class="container" :style="{ backgroundImage: `url(${anniversary})` }">
<div class="turntable-container">
<!-- 余额显示区域 -->
<div class="balance">{{ balance }}</div>
<div class="balance" :class="{ updating: isBalanceUpdating }">{{ displayBalance }}</div>
<!-- 光效背景只在剩余次数为0时显示 -->
<!-- 光效背景 -->
<div
class="guang"
v-if="drawCount >= 8"
@ -14,7 +14,7 @@
<!-- 转盘底座 -->
<div class="pandi" :style="{ backgroundImage: `url(${pandi})` }"></div>
<!-- 转盘主体 -->
<!-- 转盘主体 -->
<div
class="pan"
:style="{
@ -22,15 +22,20 @@
backgroundImage: `url(${pan})`
}"
>
<!-- 奖品位置 -->
<!-- 奖品位置 - 添加了防止点击和拖动的属性 -->
<div
v-for="(prize, index) in prizePositions"
:key="index"
class="prize-container"
:style="getPrizeContainerStyle(index, rotation)"
>
<!-- 奖品图片 -->
<img :src="getPrizeImage(prize.value)" class="prize-image"/>
<img
:src="getPrizeImage(prize.value)"
class="prize-image"
draggable="false"
@dragstart.prevent
@mousedown.prevent
/>
</div>
</div>
@ -43,36 +48,32 @@
></div>
<!-- 中奖结果弹窗 -->
<transition name="flip">
<div class="result-popup" v-if="showResult">
<div class="popup-content">
<div class="popup-bg" :style="{ backgroundImage: `url(${tanchuang})` }">
<div class="prize-value" :class="{ 'pulse-animation': showResult }">
{{ formatPrizeValue(resultValue) }}
</div>
<div class="result-popup" v-if="showResult">
<div class="popup-content" :key="'result-' + resultKey">
<div class="popup-bg" :style="{ backgroundImage: `url(${tanchuang})` }">
<div class="prize-value" v-if="showPrizeText">
{{ formatPrizeValue(resultValue) }}
</div>
</div>
</div>
</transition>
</div>
<!-- 抽奖结束弹窗 -->
<transition name="flip">
<div class="result-popup" v-if="showEndPopup">
<div class="popup-content">
<div class="popup-bg" :style="{ backgroundImage: `url(${tanchuang})` }">
<div class="prize-value end-message">
抽奖结束
</div>
<div class="result-popup" v-if="showEndPopup">
<div class="popup-content" :key="'end-' + endKey">
<div class="popup-bg" :style="{ backgroundImage: `url(${tanchuang})` }">
<div class="prize-value end-message" v-if="showEndText">
抽奖结束
</div>
</div>
</div>
</transition>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { ref, onBeforeUnmount } from 'vue'
//
const anniversary = new URL('@/assets/img/anniversary/anniversary.png', import.meta.url).href
@ -94,13 +95,24 @@ const prizePositions = [
//
const balance = ref(8000)
const displayBalance = ref(8000)
const rotation = ref(0)
const isSpinning = ref(false)
const isBalanceUpdating = ref(false)
const showResult = ref(false)
const resultValue = ref('')
const drawCount = ref(0)
const showEndPopup = ref(false)
const shouldShowEndPopup = ref(false) //
const resultKey = ref(0)
const endKey = ref(0)
const showPrizeText = ref(false)
const showEndText = ref(false)
let spinTimeout = null
let resultTimeout = null
let endPopupTimeout = null
let textDelayTimeout = null
let endTextDelayTimeout = null
let balanceUpdateTimeout = null
//
const prizeDistribution = ref([
@ -120,26 +132,22 @@ const prizeImages = {
'-880': new URL('@/assets/img/anniversary/-880.png', import.meta.url).href
}
// +
//
onBeforeUnmount(() => {
clearTimeout(spinTimeout)
clearTimeout(resultTimeout)
clearTimeout(endPopupTimeout)
clearTimeout(textDelayTimeout)
clearTimeout(endTextDelayTimeout)
clearTimeout(balanceUpdateTimeout)
})
//
const formatPrizeValue = (value) => {
const num = parseInt(value)
return num > 0 ? `+${value}` : value
}
//
watch(showResult, (newVal) => {
if (!newVal && shouldShowEndPopup.value) {
//
showEndPopup.value = true
shouldShowEndPopup.value = false //
// 3
setTimeout(() => {
showEndPopup.value = false
}, 3000)
}
})
const getPrizeImage = (prize) => {
return prizeImages[prize] || ''
}
@ -172,9 +180,23 @@ const getPrizeContainerStyle = (index, currentRotation) => {
const startSpin = () => {
if (isSpinning.value || drawCount.value >= 8) return
//
clearTimeout(spinTimeout)
clearTimeout(resultTimeout)
clearTimeout(endPopupTimeout)
clearTimeout(textDelayTimeout)
clearTimeout(endTextDelayTimeout)
clearTimeout(balanceUpdateTimeout)
//
isSpinning.value = true
showResult.value = false
showEndPopup.value = false
showPrizeText.value = false
showEndText.value = false
isBalanceUpdating.value = false
//
const randomIndex = Math.floor(Math.random() * prizeDistribution.value.length)
const selectedPrize = prizeDistribution.value[randomIndex]
prizeDistribution.value.splice(randomIndex, 1)
@ -185,30 +207,56 @@ const startSpin = () => {
return
}
//
const currentAngle = rotation.value % 360
let remainingAngle = (720 - currentAngle - targetPrize.angle) % 360
const totalRotation = rotation.value + 1440 + remainingAngle
rotation.value = totalRotation
setTimeout(() => {
//
spinTimeout = setTimeout(() => {
isSpinning.value = false
drawCount.value++
resultValue.value = selectedPrize
showResult.value = true
//
balance.value += parseInt(selectedPrize)
//
//
if (drawCount.value >= 8) {
shouldShowEndPopup.value = true //
endKey.value++
showEndPopup.value = true
endTextDelayTimeout = setTimeout(() => {
showEndText.value = true
//
balanceUpdateTimeout = setTimeout(() => {
balance.value += parseInt(selectedPrize)
displayBalance.value = balance.value
isBalanceUpdating.value = true
setTimeout(() => isBalanceUpdating.value = false, 300)
}, 300)
}, 300)
endPopupTimeout = setTimeout(() => {
showEndPopup.value = false
showEndText.value = false
}, 2000)
} else {
//
resultKey.value++
showResult.value = true
textDelayTimeout = setTimeout(() => {
showPrizeText.value = true
//
balanceUpdateTimeout = setTimeout(() => {
balance.value += parseInt(selectedPrize)
displayBalance.value = balance.value
isBalanceUpdating.value = true
setTimeout(() => isBalanceUpdating.value = false, 300)
}, 300)
}, 300)
resultTimeout = setTimeout(() => {
showResult.value = false
showPrizeText.value = false
}, 2000)
}
// 3
setTimeout(() => {
showResult.value = false
}, 3500)
}, 5000)
}
</script>
@ -247,6 +295,13 @@ const startSpin = () => {
text-align: center;
font-family: 'Arial Black', Gadget, sans-serif;
letter-spacing: 2px;
transition: all 0.3s ease-out;
}
.balance.updating {
transform: translateX(-50%) scale(1.1);
color: #FFD700;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}
.guang {
@ -291,9 +346,20 @@ const startSpin = () => {
.prize-container {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.prize-image {
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
width: auto;
height: 70px;
max-width: 90px;
@ -327,10 +393,11 @@ const startSpin = () => {
left: 0;
width: 100%;
height: 100%;
z-index: 100;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.1s ease-in-out;
}
.popup-content {
@ -341,18 +408,19 @@ const startSpin = () => {
.popup-bg {
position: absolute;
top: -40%;
left: 50%;
top: 13%;
left: 48%;
transform: translateX(-50%);
width: 800px;
height: 800px;
width: 650px;
height: 650px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
z-index: 101;
z-index: 1001;
animation: popupAnimation 0.05s forwards;
}
.prize-value {
@ -360,58 +428,45 @@ const startSpin = () => {
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
font-weight: 900;
color: rgb(255, 255, 130);
margin-top: 40px;
margin-top: -40px;
font-family: 'Arial Black', Gadget, sans-serif;
z-index: 1002;
opacity: 0;
animation:
textFadeIn 0.3s ease-out 0.3s forwards,
textScale 1s infinite alternate 0.6s;
}
.end-message {
font-size: 100px;
color: #FFD700;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}
.pulse-animation {
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
0% {
transform: scale(1.1);
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
100% {
transform: scale(1);
text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.flip-enter-active {
animation: flipIn 0.1s ease-out;
@keyframes popupAnimation {
0% { transform: translateX(-50%) scale(0.8); opacity: 0; }
70% { transform: translateX(-50%) scale(1.05); opacity: 1; }
100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.flip-leave-active {
animation: flipOut 0.2s ease-in;
}
@keyframes flipIn {
0% {
transform: perspective(600px) rotateY(90deg);
@keyframes textFadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
100% {
transform: perspective(600px) rotateY(0deg);
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes flipOut {
0% {
transform: perspective(600px) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective(600px) rotateY(90deg);
opacity: 0;
}
@keyframes textScale {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
</style>
Loading…
Cancel
Save