Skip to content

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

抽奖·

parent 5638ff35
Show whitespace changes
Inline Side-by-side
Showing with 1268 additions and 84 deletions
index.html
View file @ 59e5a7ed
......@@ -5,6 +5,8 @@
<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">
<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>
</head>
<body>
......
package.json
View file @ 59e5a7ed
......@@ -18,7 +18,6 @@
"element-ui": "^2.13.0",
"signalr": "^2.4.1",
"socket.io-client": "^2.2.0",
"three": "^0.111.0",
"vue": "^2.5.2",
"vue-baberrage": "^2.1.9",
"vue-router": "^3.0.1",
......
src/assets/css/LuckDraw.css
View file @ 59e5a7ed
......@@ -25,17 +25,17 @@
background-repeat: no-repeat;
position: relative;
left: 1px;
top: 10px;
top: -16px;
}
.container .box{
width: 40%;
height: 72%;
width: 48%;
height: 50%;
background: url(/static/image/draw/bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
top: 29%;
transform: translate(-50%, -50%);
}
.container .box .title {
......@@ -49,12 +49,12 @@
position: absolute;
left: 50%;
margin-left: -150px;
top: 38px;
top: 26px;
font-size: 3.4rem;
}
.jiangpin-box{
width: 100%;
margin-top: -4rem;
margin-top: -7rem;
}
.jiangpin-box p {
text-align: center;
......@@ -64,7 +64,7 @@
}
.jiangpin-box .img-box{
width: 230px;
height: 358.1px;
height: 230px;
background: url(/static/image/draw/award_box.png);
background-repeat: no-repeat;
background-size: 100% 100%;
......@@ -75,7 +75,7 @@
}
.jiangpin-box .img-box img{
width: 180px;
height: 290.1px;
height: 180px;
border-radius: 50%;
}
.join-total-box{
......@@ -88,26 +88,28 @@
padding: 0 2rem;
box-sizing: border-box;
position: absolute;
top: 70px;
top: 45px;
}
.join-total-box span{
color: #eaa30a;
}
.choujiang-btn{
width: 100%;
position: absolute;
bottom: 0;
}
.choujiang-btn div{
height: 80px;
width: 170px;
height: 64px;
width: 196px;
background: url(/static/image/draw/btn_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 60px auto 0 auto;
margin: 16px auto 0 auto;
color: #ffff72;
text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px;
font-size: 3rem;
text-align: center;
line-height: 80px;
line-height: 64px;
cursor: pointer;
position: relative;
}
......@@ -162,15 +164,16 @@
}
.award-ctrl{
position: absolute;
bottom: 1rem;
bottom: .5rem;
left: 1rem;
color: #6a6a6a;
z-index: 30;
}
.award-ctrl .iconfont{
cursor: pointer;
}
.w60{
width: 60px;
width: 68px;
}
.award-in{
width: 100%;
......@@ -191,3 +194,112 @@
background-color: red;
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
......@@ -4,20 +4,20 @@
<div class="bg_video_box">
<video src="/static/video/cjbj1.mp4" autoplay="autoplay" muted="muted" loop="loop" ref="homeBGvideo"></video>
</div>
</div>
<div class="container">
<!-- 未开始 -->
<div class="box" v-if="awardData[awardIndex].nameList.length === 0 && awardNo">
<div class="box" v-if="awardData.length && awardData[awardIndex].nameList.length === 0 && awardNo">
<div class="jinbian"></div>
<p class="title">幸运抽奖</p>
<div class="join-total-box">
<div>
<span>中奖人数：</span>{{awardData[awardIndex].nameList.length}}
<span>中奖人数：</span>{{awardData.length && awardData[awardIndex].nameList.length}}
</div>
<div>
<span>参与人数：</span>{{dataList2.length}}
</div>
</div>
<div class="jiangpin-box" >
<p>{{awardData[awardIndex].name}}</p>
<div class="img-box">
......@@ -26,11 +26,11 @@
<p>{{awardData[awardIndex].proName}}</p>
</div>
<div class="award-ctrl">
<span class="iconfont iconzuosanjiaoxing" @click="awardIndex === 0 ? '' : switchAward(1)"></span>
<span class="iconfont iconzuosanjiaoxing" @click="switchAward(1)"></span>
<span>一次抽取</span>&nbsp;&nbsp;
<el-select v-model="awardPP" class="w60">
<el-option
v-for="item in awardData[awardIndex].options"
v-for="item in awardData[awardIndex].maxNum"
:key="item"
:label="item"
:value="item">
......@@ -38,19 +38,59 @@
</el-select>
&nbsp;&nbsp;
<span>人</span>
<span class="iconfont iconyousanjiaoxing" @click="awardIndex === awardData.length-1 ? '' : switchAward(2)"></span>
<span class="iconfont iconyousanjiaoxing" @click="switchAward(2)"></span>
</div>
<div class="choujiang-btn">
<div @click="awardGo()"><span class="btn-light"></span>开始抽奖</div>
</div>
</div>
<!-- 抽奖中 -->
<div v-if="awardIn" class="award-in">
<img v-for="item in dataList2" :class="item.class" :src="item.photo" alt="">
<div v-show="awardIn" id="lottery3d-stage"></div>
<!-- 抽奖后 显示中奖名单 -->
<div class="box box_2" v-if="(awardData.length && awardData[awardIndex].nameList.length !== 0 && !awardIn) || awardOut">
<div class="jinbian"></div>
<div class="join-total-box">
<div>
<span>中奖人数：</span>{{awardData.length && awardData[awardIndex].nameList.length}}
</div>
<!-- 抽奖后 -->
<div v-if="awardOut">
<div>
<span>参与人数：</span>{{dataList2.length}}
</div>
</div>
<div class="jiangpin-box" >
<div class="img-box">
<img :src="awardData[awardIndex].img" alt="">
</div>
<p class="f2">{{awardData[awardIndex].proName}}</p>
<p class="f2b">{{awardData[awardIndex].name}}</p>
</div>
<div class="pp-box">
<div class="people" v-for="item in awardData[awardIndex].nameList">
<div class="people-div">
<img :src="item.Img">
<div class="people-div-bs">
</div>
</div>
<p class="people-name">{{item.EmpName}}</p>
</div>
</div>
<div class="award-ctrl">
<span class="iconfont iconzuosanjiaoxing" @click="switchAward(1)"></span>
<span>一次抽取</span>&nbsp;&nbsp;
<el-select v-model="awardPP" class="w60">
<el-option
v-for="item in awardData[awardIndex].maxNum"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
&nbsp;&nbsp;
<span>人</span>
<span class="iconfont iconyousanjiaoxing" @click="switchAward(2)"></span>
</div>
<div class="choujiang-btn">
<div @click="awardGo()"><span class="btn-light"></span>开始抽奖</div>
</div>
</div>
</div>
......@@ -76,51 +116,18 @@ export default {
},
awardPP: 1,
awardIndex: 0,
awardData: [
{
name: '一等奖',
maxNum: 10,
proName: '电话1',
id: 1,
img: 'https://paimgcdn.baidu.com/6A033253EF5FBFE0?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F2018218531.jpg&rz=bxt_2_968_600&v=0',
nameList: [],
options: [1,2,3,4,5,6,7,8,9,10]
},
{
name: '二等奖',
maxNum: 20,
proName: '电话2',
id: 2,
img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2834960552,2586725046&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=a34f2bae0cfaecb2150ca2d8d67442e2',
nameList: [],
options: [1,2,3,4,5,10,20]
},
{
name: '三等奖',
maxNum: 30,
proName: '耳机',
id: 3,
img: 'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1939050805.jpg',
nameList: [],
options: [1,2,3,4,5,10,20,30]
}
],
dataList2: [
{
img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2988564731,2262824079&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=ad5118c4e0fe7df400c0ebba337753b7',
class: 'head1'
},
{
img: 'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1559282698,742202892&fm=58',
class: 'head1'
}
],
awardData: [],
dataList2: [],
awardNo: true,
awardIn: false,
awardOut: false,
testValue: 666,
moveIndex: 0,
classIndex: 1
camera: '',
scene: '',
cards: [],
renderer: null,
speed: 50,
stageStop: false,
AwardId: ''
}
},
created () {
......@@ -145,33 +152,119 @@ export default {
})
that.dataList2 = data
});
that.$PROXY.invoke("GetLottery", '', '').done(data => {
data.map(x=>{
let obj = {
name: x.n,
maxNum: Number(x.a),
proName: x.award,
id: x.i,
img: x.img,
nameList: JSON.parse(x.lotteryHistoryList)
}
that.awardData.push(obj)
})
})
}, 2000)
// 空格键结束抽奖
document.onkeydown = function(e){
var keyNum = window.event ? e.keyCode :e.which;
if(keyNum==32){
}
}
},
methods: {
init() {
let $this = this;
$this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
$this.camera.position.z = 3500;
$this.scene = new THREE.Scene();
var k = document.createElement("img");
k.className = "headImg";
var s;
var h = Math.sqrt(50),
u = Math.floor(h / 2);
for (var p = 0; p < 50; p++) {
var x = Math.floor(p / h) % h;
var j = (p % h);
if (x == u && j == u) {
continue
}
var o = k.cloneNode();
o.src = $this.dataList2[p].photo;
var m = new THREE.CSS3DSprite(o);
var w = window.innerWidth / h,
q = window.innerHeight / h;
var g = w / q;
var l = 300,
t = l * g;
m.position.x = (j * w - window.innerWidth / 2 + w / 2) + (j - 2) * t;
m.position.y = (x * q - window.innerHeight / 2 + q / 2) * -1 - (x - 2) * l;
m.position.z = -$this.getRandom(26000, 50000);
$this.scene.add(m);
$this.cards.push(m)
}
$this.renderer = new THREE.CSS3DRenderer();
$this.renderer.setSize(window.innerWidth, window.innerHeight);
$this.renderer.domElement.style.position = "absolute";
document.getElementById("lottery3d-stage").appendChild($this.renderer.domElement);
$this.animate()
},
animate() {
let $this = this;
requestAnimationFrame(function() {
$this.animate()
});
$this.speed -= 0.8;
if ($this.speed < 400) {
$this.speed = 400
}
var g = $this.cards.length;
if ($this.stageStop === false) {
for (var j = 0; j < g; j++) {
var h = $this.cards[j];
h.position.z += $this.speed;
if (h.position.z > 3500) {
var l = $this.dataList2[$this.getRandom(0, $this.dataList2.length)];
if (l) {
h.element.src = l.photo;
h.position.z = -$this.getRandom(26000, 50000)
}
}
}
}
$this.renderer.render($this.scene, $this.camera)
},
getRandom(d, a) {
var b = a - d;
var c = Math.random() * b + d;
return parseInt(c, 10)
},
headMove: function () {
this.init()
let $this = this
setTimeout(x=>{
$this.dataList2[$this.moveIndex].class = `head1 stylie${$this.classIndex}`
$this.classIndex++
if ($this.classIndex > 8 ){
$this.classIndex = 1
}
$this.moveIndex++
$this.headMove()
}, 100)
$this.$PROXY.invoke("GetLottery", $this.awardData[$this.awardIndex].id, $this.awardPP).done(data => {
console.log(data)
})
},
// 启动抽奖
awardGo: function () {
if (this.awardIn) return
this.awardNo = false
this.awardIn = true
this.headMove()
},
switchAward: function (type) {
console.log(type, this.awardIndex )
if (type === 1) {
if (this.awardIndex === 0) return
this.awardIndex--
} else {
if (this.awardIndex === this.awardData.length-1) return
this.awardIndex++
}
this.awardPP = 1
},
windowResize: function () {
let WindowW = window.innerWidth
......@@ -184,6 +277,16 @@ export default {
}
}
</script>
<style scoped>
<style>
@import "../../assets/css/LuckDraw.css";
#lottery3d-stage>div{
height: calc(100vh) !important;
}
.headImg{
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid #fce3a0;
box-shadow: 0 0 18px 3px #97312d;
}
</style>
src/plugin/signalr.js
View file @ 59e5a7ed
......@@ -9,7 +9,7 @@ const HUB_API = 'http://192.168.2.65:7838/signalr';
// 建立连接
export function startConnection() {
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)
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 source diff could not be displayed because it is too large. You can view the blob instead.
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