Skip to content

N
NEWYEARPARTY
Commit 59e5a7ed authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

抽奖·

parent 5638ff35
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1268 additions and 84 deletions
index.html
View file @ 59e5a7ed
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet"> <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script> <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script src="/static/js/three.min.js"></script>
<script src="/static/js/CSS3DRenderer.min.js"></script>
<title>四川和平国际旅行社</title> <title>四川和平国际旅行社</title>
</head> </head>
<body> <body>
......
package.json
View file @ 59e5a7ed
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"signalr": "^2.4.1", "signalr": "^2.4.1",
"socket.io-client": "^2.2.0", "socket.io-client": "^2.2.0",
"three": "^0.111.0",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-baberrage": "^2.1.9", "vue-baberrage": "^2.1.9",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
......
src/assets/css/LuckDraw.css
View file @ 59e5a7ed
...@@ -25,17 +25,17 @@ ...@@ -25,17 +25,17 @@
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
left: 1px; left: 1px;
top: 10px; top: -16px;
} }
.container .box{ .container .box{
width: 40%; width: 48%;
height: 72%; height: 50%;
background: url(/static/image/draw/bg.png); background: url(/static/image/draw/bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
left: 50%; left: 50%;
top: 50%; top: 29%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.container .box .title { .container .box .title {
...@@ -49,12 +49,12 @@ ...@@ -49,12 +49,12 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -150px; margin-left: -150px;
top: 38px; top: 26px;
font-size: 3.4rem; font-size: 3.4rem;
} }
.jiangpin-box{ .jiangpin-box{
width: 100%; width: 100%;
margin-top: -4rem; margin-top: -7rem;
} }
.jiangpin-box p { .jiangpin-box p {
text-align: center; text-align: center;
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
} }
.jiangpin-box .img-box{ .jiangpin-box .img-box{
width: 230px; width: 230px;
height: 358.1px; height: 230px;
background: url(/static/image/draw/award_box.png); background: url(/static/image/draw/award_box.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
} }
.jiangpin-box .img-box img{ .jiangpin-box .img-box img{
width: 180px; width: 180px;
height: 290.1px; height: 180px;
border-radius: 50%; border-radius: 50%;
} }
.join-total-box{ .join-total-box{
...@@ -88,26 +88,28 @@ ...@@ -88,26 +88,28 @@
padding: 0 2rem; padding: 0 2rem;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
top: 70px; top: 45px;
} }
.join-total-box span{ .join-total-box span{
color: #eaa30a; color: #eaa30a;
} }
.choujiang-btn{ .choujiang-btn{
width: 100%; width: 100%;
position: absolute;
bottom: 0;
} }
.choujiang-btn div{ .choujiang-btn div{
height: 80px; height: 64px;
width: 170px; width: 196px;
background: url(/static/image/draw/btn_bg.png); background: url(/static/image/draw/btn_bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 60px auto 0 auto; margin: 16px auto 0 auto;
color: #ffff72; color: #ffff72;
text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px; text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px;
font-size: 3rem; font-size: 3rem;
text-align: center; text-align: center;
line-height: 80px; line-height: 64px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
...@@ -162,15 +164,16 @@ ...@@ -162,15 +164,16 @@
} }
.award-ctrl{ .award-ctrl{
position: absolute; position: absolute;
bottom: 1rem; bottom: .5rem;
left: 1rem; left: 1rem;
color: #6a6a6a; color: #6a6a6a;
z-index: 30;
} }
.award-ctrl .iconfont{ .award-ctrl .iconfont{
cursor: pointer; cursor: pointer;
} }
.w60{ .w60{
width: 60px; width: 68px;
} }
.award-in{ .award-in{
width: 100%; width: 100%;
...@@ -190,4 +193,113 @@ ...@@ -190,4 +193,113 @@
transition: all linear 1.5s; transition: all linear 1.5s;
background-color: red; background-color: red;
animation: head_move1 4s infinite ease; animation: head_move1 4s infinite ease;
}
#container {
height: 400px;
}
.box.box_2 .jiangpin-box {
position: absolute;
top: 85px;
z-index: 20;
}
.box.box_2 .jiangpin-box .img-box{
width: 100px;
height: 100px;
}
.box.box_2 .jiangpin-box .img-box img{
width: 80px;
height: 80px;
}
.f2{
font-size: 2rem !important;
}
.f2b{
font-size: 2.4rem !important;
}
.pp-box{
width: 100%;
height: 52%;
margin-top: -40px;
-webkit-mask-image: url(/static/image/draw/mask.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(/static/image/draw/mask.png);
mask-repeat: no-repeat;
mask-size: 100% 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pp-box .people {
width: 160px;
height: 160px;
overflow: hidden;
font-size: 1.4rem;
color: #dbe7f7;
position: relative;
transition: all .35s;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
text-align: center;
z-index: 1;
}
.pp-box .people .people-div{
width: 120px;
height: 120px;
margin: 0 auto;
position: relative;
text-align: center;
}
.pp-box .people .people-div img{
width: 80%;
height: 80%;
margin-top: 10%;
border-radius: 50%;
}
.people-div-bs{
width: 100%;
height: 100%;
background: url(/static/image/draw/head_box.png) no-repeat;
background-size: 100% 100%;
padding: 1px;
position: absolute;
animation: circleLeft 3s infinite linear;
top: 0;
}
.pp-box .people .people-name {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
font-size: 2rem;
margin: 0 auto;
line-height: 160%;
font-weight: bold;
width: 80%;
text-align: center;
color: #ffff72;
text-shadow: #ff7a4d 1px 1px 5px, #ff7a4d 0 1px 5px, #ff7a4d 1px 0 5px, #ff7a4d 1px 1px 5px;
}
@keyframes circleLeft {
0% {
transform: rotate(0)
}
100% {
transform: rotate(-360deg)
}
}
@-webkit-keyframes circleLeft {
0% {
transform: rotate(0)
}
100% {
transform: rotate(-360deg)
}
} }
\ No newline at end of file
src/components/playGame/LuckDraw.vue
View file @ 59e5a7ed
This diff is collapsed.
src/plugin/signalr.js
View file @ 59e5a7ed
...@@ -9,7 +9,7 @@ const HUB_API = 'http://192.168.2.65:7838/signalr'; ...@@ -9,7 +9,7 @@ const HUB_API = 'http://192.168.2.65:7838/signalr';
// 建立连接 // 建立连接
export function startConnection() { export function startConnection() {
HUB = $.hubConnection(HUB_API, { HUB = $.hubConnection(HUB_API, {
qs: `i=888888&n=罗超&p=${encodeURIComponent("http://imgfile.oytour.com/New/Upload/User/20191018150051176.png")}` qs: `i=888888&n=罗超&e=2020-01-01&p=${encodeURIComponent("http://imgfile.oytour.com/New/Upload/User/20191018150051176.png")}`
}) })
let PROXY = HUB.createHubProxy(HUBNAME) let PROXY = HUB.createHubProxy(HUBNAME)
HUB.start().done((connection) => { HUB.start().done((connection) => {
......
static/js/CSS3DRenderer.min.js 0 → 100644
View file @ 59e5a7ed
THREE.CSS3DObject=function(a){THREE.Object3D.call(this);this.element=a;this.element.style.position="absolute";this.addEventListener("removed",function(){if(this.element.parentNode!==null){this.element.parentNode.removeChild(this.element)}})};THREE.CSS3DObject.prototype=Object.create(THREE.Object3D.prototype);THREE.CSS3DObject.prototype.constructor=THREE.CSS3DObject;THREE.CSS3DSprite=function(a){THREE.CSS3DObject.call(this,a)};THREE.CSS3DSprite.prototype=Object.create(THREE.CSS3DObject.prototype);THREE.CSS3DSprite.prototype.constructor=THREE.CSS3DSprite;THREE.CSS3DRenderer=function(){console.log("THREE.CSS3DRenderer",THREE.REVISION);var d,g;var n,l;var m=new THREE.Matrix4();var a={camera:{fov:0,style:""},objects:{}};var i=document.createElement("div");i.style.overflow="hidden";this.domElement=i;var j=document.createElement("div");j.style.WebkitTransformStyle="preserve-3d";j.style.MozTransformStyle="preserve-3d";j.style.transformStyle="preserve-3d";i.appendChild(j);var c=/Trident/i.test(navigator.userAgent);this.setClearColor=function(){};this.getSize=function(){return{width:d,height:g}};this.setSize=function(q,p){d=q;g=p;n=d/2;l=g/2;i.style.width=q+"px";i.style.height=p+"px";j.style.width=q+"px";j.style.height=p+"px"};function o(p){return Math.abs(p)<1e-10?0:p}function k(p){var q=p.elements;return"matrix3d("+o(q[0])+","+o(-q[1])+","+o(q[2])+","+o(q[3])+","+o(q[4])+","+o(-q[5])+","+o(q[6])+","+o(q[7])+","+o(q[8])+","+o(-q[9])+","+o(q[10])+","+o(q[11])+","+o(q[12])+","+o(-q[13])+","+o(q[14])+","+o(q[15])+")"}function f(p,s){var q=p.elements;var r="matrix3d("+o(q[0])+","+o(q[1])+","+o(q[2])+","+o(q[3])+","+o(-q[4])+","+o(-q[5])+","+o(-q[6])+","+o(-q[7])+","+o(q[8])+","+o(q[9])+","+o(q[10])+","+o(q[11])+","+o(q[12])+","+o(q[13])+","+o(q[14])+","+o(q[15])+")";if(c){return"translate(-50%,-50%)translate("+n+"px,"+l+"px)"+s+r}return"translate(-50%,-50%)"+r}function b(q,v,w){if(q instanceof THREE.CSS3DObject){var u;if(q instanceof THREE.CSS3DSprite){m.copy(v.matrixWorldInverse);m.transpose();m.copyPosition(q.matrixWorld);m.scale(q.scale);m.elements[3]=0;m.elements[7]=0;m.elements[11]=0;m.elements[15]=1;u=f(m,w)}else{u=f(q.matrixWorld,w)}var s=q.element;var t=a.objects[q.id]&&a.objects[q.id].style;if(t===undefined||t!==u){s.style.WebkitTransform=u;s.style.MozTransform=u;s.style.transform=u;a.objects[q.id]={style:u};if(c){a.objects[q.id].distanceToCameraSquared=e(v,q)}}if(s.parentNode!==j){j.appendChild(s)}}for(var r=0,p=q.children.length;r<p;r++){b(q.children[r],v,w)}}var e=function(){var q=new THREE.Vector3();var p=new THREE.Vector3();return function(s,r){q.setFromMatrixPosition(s.matrixWorld);p.setFromMatrixPosition(r.matrixWorld);return q.distanceToSquared(p)}}();function h(r){var p=Object.keys(a.objects).sort(function(t,s){return a.objects[t].distanceToCameraSquared-a.objects[s].distanceToCameraSquared});var q=p.length;r.traverse(function(t){var s=p.indexOf(t.id+"");if(s!==-1){t.element.style.zIndex=q-s}})}this.render=function(s,r){var p=r.projectionMatrix.elements[5]*l;if(a.camera.fov!==p){i.style.WebkitPerspective=p+"px";i.style.MozPerspective=p+"px";i.style.perspective=p+"px";a.camera.fov=p}s.updateMatrixWorld();if(r.parent===null){r.updateMatrixWorld()}var t="translateZ("+p+"px)"+k(r.matrixWorldInverse);var q=t+"translate("+n+"px,"+l+"px)";if(a.camera.style!==q&&!c){j.style.WebkitTransform=q;j.style.MozTransform=q;j.style.transform=q;a.camera.style=q}b(s,r,t);if(c){h(s)}}};
\ No newline at end of file
static/js/three.min.js 0 → 100644
View file @ 59e5a7ed
This diff is collapsed.
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