Browse Source

修改速度和新需求

master
zhaoruhui 3 weeks ago
parent
commit
6af3e80041
  1. 2
      dev/index.html
  2. 1
      dev/static/css/anniversary-764e1885.css
  3. 1
      dev/static/css/anniversary-8993770b.css
  4. 1
      dev/static/css/liveEvent-78b5cc10.css
  5. BIN
      dev/static/images/bg-8cd013e1.png
  6. BIN
      dev/static/images/notice-198e0e2c.png
  7. BIN
      dev/static/images/rotate-5c7fe2e8.png
  8. BIN
      dev/static/images/show-19c5f6e1.png
  9. BIN
      dev/static/images/tanchuang4-5957606f.png
  10. BIN
      dev/static/images/wheel-411be3b0.png
  11. 2
      dev/static/js/Login-de989279.js
  12. 1
      dev/static/js/anniversary-14b20c6a.js
  13. 1
      dev/static/js/anniversary-2b714fe0.js
  14. 2
      dev/static/js/cj-e4f3294e.js
  15. 2
      dev/static/js/dong-a4662ef6.js
  16. 2
      dev/static/js/homePage-4ac59308.js
  17. 2
      dev/static/js/index-a9386e9b.js
  18. 4
      dev/static/js/index-b9fddaa3.js
  19. 2
      dev/static/js/index-d20229ec.js
  20. 1
      dev/static/js/liveEvent-365d5885.js
  21. 2
      dev/static/js/request-b41ce745.js
  22. 224
      src/views/platform/liveEvent.vue

2
dev/index.html

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

1
dev/static/css/anniversary-764e1885.css

@ -0,0 +1 @@
.container[data-v-a18fa743]{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-a18fa743]{position:relative;width:500px;height:500px;margin:auto auto 10px}.balance[data-v-a18fa743]{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;transition:all .3s ease-out}.balance.updating[data-v-a18fa743]{transform:translate(-50%) scale(1.1);color:gold;text-shadow:0 0 30px rgba(255,215,0,.8)}.guang[data-v-a18fa743]{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-a18fa743]{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-a18fa743]{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-a18fa743]{pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.prize-image[data-v-a18fa743]{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;object-fit:contain}.jiantou[data-v-a18fa743]{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-a18fa743]{cursor:not-allowed;opacity:1;filter:grayscale(30%)}.result-popup[data-v-a18fa743]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;justify-content:center;align-items:center;animation:fadeIn-a18fa743 .1s ease-in-out}.popup-content[data-v-a18fa743]{position:relative;width:100%;height:100%}.popup-bg[data-v-a18fa743]{position:absolute;top:13%;left:48%;transform:translate(-50%);width:650px;height:650px;background-size:contain;background-position:center;background-repeat:no-repeat;display:flex;justify-content:center;align-items:center;z-index:1001;animation:popupAnimation-a18fa743 .05s forwards}.prize-value[data-v-a18fa743]{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;z-index:1002;opacity:0;animation:textFadeIn-a18fa743 .3s ease-out .3s forwards,textScale-a18fa743 1s infinite alternate .6s}.end-message[data-v-a18fa743]{font-size:100px;color:gold}@keyframes fadeIn-a18fa743{0%{opacity:0}to{opacity:1}}@keyframes popupAnimation-a18fa743{0%{transform:translate(-50%) scale(.8);opacity:0}70%{transform:translate(-50%) scale(1.05);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes textFadeIn-a18fa743{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes textScale-a18fa743{0%{transform:scale(1)}to{transform:scale(1.1)}}

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

@ -1 +0,0 @@
.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}}

1
dev/static/css/liveEvent-78b5cc10.css

@ -0,0 +1 @@
[data-v-66e81808]{margin:0;padding:0;box-sizing:border-box}.wheel-page[data-v-66e81808]{width:100vw;height:100vh;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.bg-container[data-v-66e81808]{position:absolute;inset:0;z-index:1;display:flex;justify-content:center;align-items:center}.bg-image[data-v-66e81808]{width:100%;height:100%;object-fit:cover;object-position:center 42%}.wheel-container[data-v-66e81808]{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;width:600px;height:600px;max-width:85vmin;max-height:85vmin;margin-top:60px;margin-bottom:2%;transform:translateY(40px)}.wheel[data-v-66e81808]{width:100%;height:100%;transition:transform 4s cubic-bezier(.3,.1,.1,1);transform-origin:center}.rotate-btn[data-v-66e81808]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:215px;aspect-ratio:1 / 1;cursor:pointer;z-index:3;transition:transform .2s,opacity .2s,filter .2s;object-fit:contain;object-position:center}.rotate-btn[data-v-66e81808]:hover:not(.disabled){transform:translate(-50%,-50%) scale(1.05)}.rotate-btn.disabled[data-v-66e81808]{cursor:not-allowed;opacity:1;filter:grayscale(40%)}.dialog-overlay[data-v-66e81808]{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:10;animation:fadeIn-66e81808 .5s}.dialog-content[data-v-66e81808]{position:relative;width:600px;height:412px;max-width:85vw;max-height:65vh}.dialog-bg[data-v-66e81808]{width:100%;height:100%;object-fit:contain}.close-btn[data-v-66e81808]{position:absolute;top:22%;right:13.2%;width:5%;cursor:pointer}.notice-img[data-v-66e81808]{position:absolute;top:22%;left:50%;transform:translate(-50%);width:33%}.show-container[data-v-66e81808]{position:absolute;top:41%;left:0;width:100%;display:flex;justify-content:center}.show-bg[data-v-66e81808]{width:71.6%}.prize-number[data-v-66e81808]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:66px;font-weight:700;color:#ffeb3b;text-shadow:0 0 10px rgba(255,235,59,.8);animation:pulse-66e81808 1s infinite alternate}@keyframes fadeIn-66e81808{0%{opacity:0}to{opacity:1}}@keyframes pulse-66e81808{0%{transform:translate(-50%,-50%) scale(1);text-shadow:0 0 10px rgba(255,235,59,.8)}to{transform:translate(-50%,-50%) scale(1.1);text-shadow:0 0 20px rgba(255,235,59,1)}}@media (max-width: 900px){.wheel-container[data-v-66e81808]{width:75vmin;height:75vmin;margin-top:40px}}@media (max-width: 600px){.wheel-container[data-v-66e81808]{width:80vmin;height:80vmin;margin-top:30px}.dialog-content[data-v-66e81808]{max-height:55vh}}@media (max-height: 600px) and (orientation: landscape){.wheel-container[data-v-66e81808]{width:65vmin;height:65vmin;margin-top:20px}.bg-image[data-v-66e81808]{object-position:center 30%}}@media (max-width: 375px){.wheel-container[data-v-66e81808]{width:70vmin;height:70vmin;margin-top:20px}.dialog-content[data-v-66e81808]{max-width:80vw;max-height:50vh}}

BIN
dev/static/images/bg-8cd013e1.png

After

Width: 1920  |  Height: 1080  |  Size: 1.8 MiB

BIN
dev/static/images/notice-198e0e2c.png

After

Width: 498  |  Height: 126  |  Size: 18 KiB

BIN
dev/static/images/rotate-5c7fe2e8.png

After

Width: 430  |  Height: 492  |  Size: 194 KiB

BIN
dev/static/images/show-19c5f6e1.png

After

Width: 1190  |  Height: 254  |  Size: 130 KiB

BIN
dev/static/images/tanchuang4-5957606f.png

After

Width: 1710  |  Height: 1238  |  Size: 1.5 MiB

BIN
dev/static/images/wheel-411be3b0.png

After

Width: 1360  |  Height: 1360  |  Size: 2.5 MiB

2
dev/static/js/Login-035b204b.js → dev/static/js/Login-de989279.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-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};
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-b9fddaa3.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-14b20c6a.js

@ -0,0 +1 @@
import{_ as e,f as a,i as l,o as t,c as s,a as n,n as u,t as i,j as o,b as r,k as c,F as v,p as g,q as p}from"./index-b9fddaa3.js";const m={class:"turntable-container"},d=["src"],f={key:1,class:"result-popup"},b={key:0,class:"prize-value"},h={key:2,class:"result-popup"},T={key:0,class:"prize-value end-message"},y={__name:"anniversary",setup(e){const y=new URL("/test/static/images/anniversary-bb5da2b5.png",self.location).href,k=new URL("/test/static/images/pandi-2e66c020.png",self.location).href,w=new URL("/test/static/images/pan-d67b226f.png",self.location).href,I=new URL("/test/static/images/jiantou-6ad85925.png",self.location).href,L=new URL("/test/static/images/tanchuang-567bad06.png",self.location).href,R=new URL("/test/static/images/guang-026487ca.png",self.location).href,U=[{value:"500",angle:0},{value:"-880",angle:60},{value:"18",angle:120},{value:"-27",angle:180},{value:"100",angle:240},{value:"-188",angle:300}],$=a(7120),x=a(7120),M=a(0),j=a(!1),z=a(!1),_=a(!1),C=a(""),q=a(0),D=a(!1),F=a(0),O=a(0),P=a(!1),A=a(!1);let B=null,E=null,G=null,H=null,J=null,K=null;const N=a(["-27","-27","-27","-27","18","18","100","-188"]),Q={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};l(()=>{clearTimeout(B),clearTimeout(E),clearTimeout(G),clearTimeout(H),clearTimeout(J),clearTimeout(K)});const S=e=>Q[e]||"",V=(e,a)=>{const l=U[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(l)}px, ${100*-Math.cos(l)}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)"}},W=()=>{if(j.value||q.value>=8)return;clearTimeout(B),clearTimeout(E),clearTimeout(G),clearTimeout(H),clearTimeout(J),clearTimeout(K),j.value=!0,_.value=!1,D.value=!1,P.value=!1,A.value=!1,z.value=!1;const e=Math.floor(Math.random()*N.value.length),a=N.value[e];N.value.splice(e,1);const l=U.find(e=>e.value===a);if(!l)return void(j.value=!1);let t=(720-M.value%360-l.angle)%360;const s=M.value+1440+t;M.value=s,B=setTimeout(()=>{j.value=!1,q.value++,C.value=a,q.value>=8?(O.value++,D.value=!0,J=setTimeout(()=>{A.value=!0,K=setTimeout(()=>{$.value+=parseInt(a),x.value=$.value,z.value=!0,setTimeout(()=>z.value=!1,300)},300)},300),G=setTimeout(()=>{D.value=!1,A.value=!1},2e3)):(F.value++,_.value=!0,H=setTimeout(()=>{P.value=!0,K=setTimeout(()=>{$.value+=parseInt(a),x.value=$.value,z.value=!0,setTimeout(()=>z.value=!1,300)},300)},300),E=setTimeout(()=>{_.value=!1,P.value=!1},2e3))},5e3)};return(e,a)=>{return t(),s("div",{class:"container",style:o({backgroundImage:`url(${r(y)})`})},[n("div",m,[n("div",{class:u(["balance",{updating:z.value}])},i(x.value),3),q.value>=8?(t(),s("div",{key:0,class:"guang",style:o({backgroundImage:`url(${r(R)})`})},null,4)):c("",!0),n("div",{class:"pandi",style:o({backgroundImage:`url(${r(k)})`})},null,4),n("div",{class:"pan",style:o({transform:`translate(-50%, -50%) scale(1.5) rotate(${M.value}deg)`,backgroundImage:`url(${r(w)})`})},[(t(),s(v,null,g(U,(e,l)=>n("div",{key:l,class:"prize-container",style:o(V(l,M.value))},[n("img",{src:S(e.value),class:"prize-image",draggable:"false",onDragstart:a[0]||(a[0]=p(()=>{},["prevent"])),onMousedown:a[1]||(a[1]=p(()=>{},["prevent"]))},null,40,d)],4)),64))],4),n("div",{class:u(["jiantou",{disabled:j.value||q.value>=8}]),onClick:W,style:o({backgroundImage:`url(${r(I)})`})},null,6),_.value?(t(),s("div",f,[(t(),s("div",{class:"popup-content",key:"result-"+F.value},[n("div",{class:"popup-bg",style:o({backgroundImage:`url(${r(L)})`})},[P.value?(t(),s("div",b,i((l=C.value,parseInt(l)>0?`+${l}`:l)),1)):c("",!0)],4)]))])):c("",!0),D.value?(t(),s("div",h,[(t(),s("div",{class:"popup-content",key:"end-"+O.value},[n("div",{class:"popup-bg",style:o({backgroundImage:`url(${r(L)})`})},[A.value?(t(),s("div",T," 抽奖结束 ")):c("",!0)],4)]))])):c("",!0)])],4);var l}}},k=e(y,[["__scopeId","data-v-a18fa743"]]);export{k as default};

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

@ -1 +0,0 @@
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-e4f3294e.js
File diff suppressed because it is too large
View File

2
dev/static/js/dong-d1134683.js → dev/static/js/dong-a4662ef6.js

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

2
dev/static/js/homePage-450bf29a.js → dev/static/js/homePage-4ac59308.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-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};
import{u as o,r as s,o as a,c as n,a as t,b as u,d as c}from"./index-b9fddaa3.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-a9386e9b.js
File diff suppressed because it is too large
View File

4
dev/static/js/index-b9fddaa3.js
File diff suppressed because it is too large
View File

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

1
dev/static/js/liveEvent-365d5885.js
File diff suppressed because it is too large
View File

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

224
src/views/platform/liveEvent.vue

@ -2,34 +2,38 @@
<div class="wheel-page"> <div class="wheel-page">
<!-- 背景 --> <!-- 背景 -->
<div class="bg-container"> <div class="bg-container">
<img class="bg-image" :src="bgImage" alt="Background" />
<img class="bg-image" src="/src/assets/img/liveEvent/bg.png" alt="Background" />
</div> </div>
<!-- 转盘 + 按钮 --> <!-- 转盘 + 按钮 -->
<div class="wheel-container"> <div class="wheel-container">
<img <img
class="wheel" class="wheel"
:src="wheelImage"
:class="{ spinning: isSpinning }"
src="/src/assets/img/liveEvent/wheel.png"
alt="Wheel" alt="Wheel"
:style="{ transform: `rotate(${rotationDegrees}deg)` }" :style="{ transform: `rotate(${rotationDegrees}deg)` }"
/> />
<img <img
class="rotate-btn" class="rotate-btn"
:src="rotateImage"
src="/src/assets/img/liveEvent/rotate.png"
alt="Rotate Button" alt="Rotate Button"
:class="{ disabled: isRotated }"
:class="{ disabled: isFinished || (isRotated && !isSpinning) }"
@click="startRotation" @click="startRotation"
/> />
</div> </div>
<!-- 指针新增用于视觉参考 -->
<div class="pointer" v-if="showPointer"></div>
<!-- 弹窗 --> <!-- 弹窗 -->
<div class="dialog-overlay" v-if="showDialog"> <div class="dialog-overlay" v-if="showDialog">
<div class="dialog-content"> <div class="dialog-content">
<img class="dialog-bg" :src="tanchuangImage" alt="Dialog Background" />
<img class="close-btn" :src="closeImage" alt="Close" @click="closeDialog" />
<img class="notice-img" :src="noticeImage" alt="Notice" />
<img class="dialog-bg" src="/src/assets/img/liveEvent/tanchuang4.png" alt="Dialog Background" />
<img class="close-btn" src="/src/assets/img/liveEvent/close.png" alt="Close" @click="closeDialog" />
<img class="notice-img" src="/src/assets/img/liveEvent/notice.png" alt="Notice" />
<div class="show-container"> <div class="show-container">
<img class="show-bg" :src="showImage" alt="Show Background" />
<img class="show-bg" src="/src/assets/img/liveEvent/show.png" alt="Show Background" />
<div class="prize-number">-1880</div> <div class="prize-number">-1880</div>
</div> </div>
</div> </div>
@ -38,60 +42,143 @@
</template> </template>
<script setup> <script setup>
/* -------------------- 图片引入 -------------------- */
import bgImage from '@/assets/img/liveEvent/bg.png'
import wheelImage from '@/assets/img/liveEvent/wheel.png'
import rotateImage from '@/assets/img/liveEvent/rotate.png'
import tanchuangImage from '@/assets/img/liveEvent/tanchuang4.png'
import closeImage from '@/assets/img/liveEvent/close.png'
import noticeImage from '@/assets/img/liveEvent/notice.png'
import showImage from '@/assets/img/liveEvent/show.png'
import { ref, nextTick, onMounted } from 'vue'
/* -------------------- 核心常量 -------------------- */ /* -------------------- 核心常量 -------------------- */
const SEGMENT = 360 / 7
const TARGET_ANGLE = 360 - SEGMENT // 308.57° 12 -1880
const SEGMENT = 360 / 7 // 51.43°
const PRIZE_ANGLES = {
'-1980': 0, // 12
'-1880': SEGMENT * 6, // 51.43°
'-1580': SEGMENT * 5, // 102.86°
'-1280': SEGMENT * 4, // 154.29°
'-666': SEGMENT * 3, // 205.71°
'-888': SEGMENT * 2, // 257.14°
'-88': SEGMENT // 308.57°
}
const TARGET_ANGLE = PRIZE_ANGLES['-1880'] // -1880
const SHOW_DELAY = 500 //
const SPIN_SPEED = 0.288 // / CSS 360°/1250ms
/* -------------------- 响应式状态 -------------------- */ /* -------------------- 响应式状态 -------------------- */
import { ref, onUnmounted } from 'vue'
const isRotated = ref(false) // true
const isRotated = ref(false) //
const showDialog = ref(false) const showDialog = ref(false)
const rotationDegrees = ref(0) const rotationDegrees = ref(0)
let rotationTimeout = null
const isSpinning = ref(false) //
const showPointer = ref(true) // 12
const isFinished = ref(false) //
let rafId = null // requestAnimationFrame id
/* -------------------- 初始化 -------------------- */
onMounted(() => {
nextTick(() => {
const wheelEl = document.querySelector('.wheel')
if (wheelEl) {
wheelEl.style.transform = `rotate(0deg)`
}
})
})
/* -------------------- 点击按钮:启动 / 停止 -------------------- */
async function startRotation() {
if (isFinished.value) return //
/* -------------------- 仅允许转一次 -------------------- */
function startRotation() {
if (isRotated.value) return
isRotated.value = true
const wheelEl = document.querySelector('.wheel')
if (!wheelEl) return
const current = rotationDegrees.value % 360
const extra = 2160 // 6 360
rotationDegrees.value = extra + TARGET_ANGLE - current
//
if (!isSpinning.value) {
isSpinning.value = true
isRotated.value = true
wheelEl.style.transition = 'none'
wheelEl.style.transform = `rotate(${rotationDegrees.value}deg)`
await nextTick()
wheelEl.classList.add('spinning')
return
}
//
wheelEl.classList.remove('spinning')
wheelEl.style.transition = 'none'
// 0~360°
const mat = window.getComputedStyle(wheelEl).transform
let nowDeg = 0
if (mat !== 'none') {
const values = mat.split(',')
const sin = parseFloat(values[1])
const cos = parseFloat(values[4])
nowDeg = Math.round(Math.atan2(sin, cos) * (180 / Math.PI))
}
nowDeg = (nowDeg + 360) % 360
//
let neededRotation = TARGET_ANGLE - nowDeg
if (neededRotation < 0) {
neededRotation += 360
}
rotationTimeout = setTimeout(() => (showDialog.value = true), 4000)
const extraSpins = 0
const totalRotation = neededRotation + (extraSpins)
const startDeg = rotationDegrees.value
const finalTargetDeg = startDeg + totalRotation
//
const uniformDeg = totalRotation - 180
const uniformDuration = uniformDeg / SPIN_SPEED //
const decelerateDuration = 1200 //
const startTime = performance.now()
const step = (now) => {
const elapsed = now - startTime
let currentDeg = startDeg
// 1 CSS
if (elapsed <= uniformDuration) {
const progress = Math.min(elapsed / uniformDuration, 1)
currentDeg = startDeg + uniformDeg * progress
}
// 2
else if (elapsed <= uniformDuration + decelerateDuration) {
const decelProgress = Math.min(
(elapsed - uniformDuration) / decelerateDuration,
1
)
const easeProgress = 1 - Math.pow(1 - decelProgress, 3)
currentDeg = startDeg + uniformDeg + 180 * easeProgress
}
// 3 -
else {
currentDeg = finalTargetDeg
cancelAnimationFrame(rafId)
rotationDegrees.value = currentDeg
wheelEl.style.transform = `rotate(${currentDeg}deg)`
isFinished.value = true //
setTimeout(() => (showDialog.value = true), SHOW_DELAY)
return
}
rotationDegrees.value = currentDeg
wheelEl.style.transform = `rotate(${currentDeg}deg)`
rafId = requestAnimationFrame(step)
}
rafId = requestAnimationFrame(step)
} }
/* -------------------- 关闭弹窗(不再重置按钮)-------------------- */
/* -------------------- 关闭弹窗 -------------------- */
function closeDialog() { function closeDialog() {
showDialog.value = false showDialog.value = false
// isRotated.value = false
} }
onUnmounted(() => {
if (rotationTimeout) {
clearTimeout(rotationTimeout)
rotationTimeout = null
}
})
</script> </script>
<style scoped> <style scoped>
/* ---------- 基础重置 ---------- */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.wheel-page { .wheel-page {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -102,7 +189,15 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
} }
/* ---------- 背景 ---------- */
.pointer {
position: absolute;
top: 10%;
width: 2px;
height: 50px;
background-color: red;
z-index: 4;
}
.bg-container { .bg-container {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -111,6 +206,7 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.bg-image { .bg-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -118,7 +214,6 @@ onUnmounted(() => {
object-position: center 42%; object-position: center 42%;
} }
/* ---------- 转盘容器(放大 + 下移) ---------- */
.wheel-container { .wheel-container {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -134,38 +229,46 @@ onUnmounted(() => {
transform: translateY(40px); transform: translateY(40px);
} }
/* ---------- 转盘 ---------- */
.wheel { .wheel {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: transform 4s cubic-bezier(0.3, 0.1, 0.1, 1);
transform-origin: center; transform-origin: center;
} }
/* ---------- 按钮(永久一次)---------- */
@keyframes slowSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.wheel.spinning {
animation: slowSpin 1.25s linear infinite;
}
.rotate-btn { .rotate-btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); /* 几何中心对齐 */
width: 215px; /* 原图宽度 */
aspect-ratio: 1 / 1; /* 强制正方形盒子,高度=215px */
transform: translate(-50%, -50%);
width: 215px;
aspect-ratio: 1 / 1;
cursor: pointer; cursor: pointer;
z-index: 3; z-index: 3;
transition: transform 0.2s, opacity 0.2s, filter 0.2s; transition: transform 0.2s, opacity 0.2s, filter 0.2s;
object-fit: contain; /* 原图等比完整显示 */
object-fit: contain;
object-position: center; object-position: center;
} }
.rotate-btn:hover:not(.disabled) { .rotate-btn:hover:not(.disabled) {
transform: translate(-50%, -50%) scale(1.05); transform: translate(-50%, -50%) scale(1.05);
} }
.rotate-btn.disabled { .rotate-btn.disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 1; opacity: 1;
filter: grayscale(40%); filter: grayscale(40%);
pointer-events: none; /* 彻底禁用点击事件 */
} }
/* ---------- 弹窗 ---------- */
.dialog-overlay { .dialog-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
@ -176,6 +279,7 @@ onUnmounted(() => {
z-index: 10; z-index: 10;
animation: fadeIn 0.5s; animation: fadeIn 0.5s;
} }
.dialog-content { .dialog-content {
position: relative; position: relative;
width: 600px; width: 600px;
@ -183,11 +287,13 @@ onUnmounted(() => {
max-width: 85vw; max-width: 85vw;
max-height: 65vh; max-height: 65vh;
} }
.dialog-bg { .dialog-bg {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
.close-btn { .close-btn {
position: absolute; position: absolute;
top: 22%; top: 22%;
@ -195,6 +301,7 @@ onUnmounted(() => {
width: 5%; width: 5%;
cursor: pointer; cursor: pointer;
} }
.notice-img { .notice-img {
position: absolute; position: absolute;
top: 22%; top: 22%;
@ -202,6 +309,7 @@ onUnmounted(() => {
transform: translateX(-50%); transform: translateX(-50%);
width: 33%; width: 33%;
} }
.show-container { .show-container {
position: absolute; position: absolute;
top: 41%; top: 41%;
@ -210,9 +318,11 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.show-bg { .show-bg {
width: 71.6%; width: 71.6%;
} }
.prize-number { .prize-number {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -225,15 +335,11 @@ onUnmounted(() => {
animation: pulse 1s infinite alternate; animation: pulse 1s infinite alternate;
} }
/* ---------- 动画 ---------- */
@keyframes fadeIn { @keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
from { opacity: 0; }
to { opacity: 1; }
} }
@keyframes pulse { @keyframes pulse {
from { from {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
@ -245,7 +351,6 @@ onUnmounted(() => {
} }
} }
/* ---------- 响应式 ---------- */
@media (max-width: 900px) { @media (max-width: 900px) {
.wheel-container { .wheel-container {
width: 75vmin; width: 75vmin;
@ -253,6 +358,7 @@ onUnmounted(() => {
margin-top: 40px; margin-top: 40px;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.wheel-container { .wheel-container {
width: 80vmin; width: 80vmin;
@ -263,6 +369,7 @@ onUnmounted(() => {
max-height: 55vh; max-height: 55vh;
} }
} }
@media (max-height: 600px) and (orientation: landscape) { @media (max-height: 600px) and (orientation: landscape) {
.wheel-container { .wheel-container {
width: 65vmin; width: 65vmin;
@ -273,6 +380,7 @@ onUnmounted(() => {
object-position: center 30%; object-position: center 30%;
} }
} }
@media (max-width: 375px) { @media (max-width: 375px) {
.wheel-container { .wheel-container {
width: 70vmin; width: 70vmin;

Loading…
Cancel
Save