Skip to content

N
NEWYEARPARTY
Commit 8f799d33 authored by 罗超's avatar 罗超
Browse files
Options

优化全局配置

parent 2cae4af9
Hide whitespace changes
Inline Side-by-side
Showing with 1023 additions and 834 deletions
.gitignore
View file @ 8f799d33
......@@ -15,3 +15,4 @@ selenium-debug.log
*.ntvs*
*.njsproj
*.sln
yarn.lock
src/App.vue
View file @ 8f799d33
......@@ -44,7 +44,7 @@ export default {
$this.MsgBus.$emit('nextMusic')
}
}, false);
$this.connectServer()
//$this.connectServer()
this.MsgBus.$on('setBarrageShow', function (type) {
$this.barrageIsShow = type
})
......@@ -63,6 +63,7 @@ export default {
$this.setAudioPlay(0)
}, 50)
})
this.getMsg();
// setInterval(()=>{
// let barrageObj = {
// id: ++this.currentId,
......@@ -74,6 +75,7 @@ export default {
// }
// $this.barrageList.push(barrageObj)
// }, 5000)
//this.sendMsg();
},
methods: {
setAudioType: function (type) {
......@@ -87,31 +89,32 @@ export default {
this.$refs.homeAudio.pause()
}
},
connectServer() {
var $this = this;
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=888888&n=罗超&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}`
});
$this.proxy = conn.createHubProxy("annualLeaveHub");
$this.getMsg();
conn
.start()
.done(data => {
$this.sendMsg();
})
.fail(data => {});
},
// connectServer() {
// var $this = this;
// var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
// qs: `i=888888&n=罗超&p=${encodeURIComponent(
// "http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
// )}`
// });
// $this.proxy = conn.createHubProxy("annualLeaveHub");
// $this.getMsg();
// conn
// .start()
// .done(data => {
// $this.sendMsg();
// })
// .fail(data => {});
// },
sendMsg () {
var $this = this;
$this.proxy.invoke("SendBarrage", '0.0 让我康康是谁在说我坏话？').done(msg => {
$this.$PROXY.invoke("SendBarrage", '0.0 让我康康是谁在说我坏话？').done(msg => {
console.log(msg)
});
},
getMsg () {
var $this = this;
$this.proxy.on("barrage", data => {
console.log(this.$PROXY)
this.$PROXY.on("barrage", data => {
let barrage = data
let barrageObj = {
id: ++this.currentId,
......
src/components/playGame/Money.vue
View file @ 8f799d33
......@@ -31,82 +31,74 @@
position: absolute;
}
#leafContainer > div {
position: absolute;
width: 100px;
height: 100px;
z-index: 1;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in
position: absolute;
width: 100px;
height: 100px;
z-index: 1;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}
#leafContainer > div > img {
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade {
0%
{
opacity: 1
0% {
opacity: 1;
}
95%
{
opacity: 1
95% {
opacity: 1;
}
100%
{
opacity: 0
100% {
opacity: 0;
}
}
@-webkit-keyframes drop {
0%
{
-webkit-transform: translate(0, -50px)
0% {
-webkit-transform: translate(0, -50px);
}
100%
{
-webkit-transform: translate(0, 650px)
100% {
-webkit-transform: translate(0, 650px);
}
}
@-webkit-keyframes clockwiseSpin {
0%
{
-webkit-transform: rotate(-50deg)
0% {
-webkit-transform: rotate(-50deg);
}
100%
{
-webkit-transform: rotate(50deg)
100% {
-webkit-transform: rotate(50deg);
}
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
0%
{
-webkit-transform: scale(-1, 1) rotate(50deg)
}
100%
{
-webkit-transform: scale(-1, 1) rotate(-50deg)
}
}
.shuchaopiao .Number_prompt{
width: 100%;
height: 310px;
background: url(../../../static/image/shuqian/Number_prompt6.png) no-repeat center;
background-size: contain;
position: absolute;
z-index: 700;
top: 35%;
}
.shuchaopiao .Number_prompt_div{
margin-top:120px;
0% {
-webkit-transform: scale(-1, 1) rotate(50deg);
}
100% {
-webkit-transform: scale(-1, 1) rotate(-50deg);
}
}
.shuchaopiao .Number_prompt {
width: 100%;
height: 310px;
background: url(../../../static/image/shuqian/Number_prompt6.png) no-repeat
center;
background-size: contain;
position: absolute;
z-index: 700;
top: 35%;
}
.shuchaopiao .Number_prompt_div {
margin-top: 120px;
text-align: center;
}
.shuchaopiao .Numberpro_number{
.shuchaopiao .Numberpro_number {
font-size: 38px;
position: relative;
padding-left: 155px;
......@@ -114,7 +106,7 @@
text-shadow: 4px 2px 6px #000;
color: #ffd24d;
}
.shuchaopiao .Numberpro_left{
.shuchaopiao .Numberpro_left {
position: absolute;
left: 0;
top: 0;
......@@ -126,832 +118,928 @@
}
.shuchaopiao .Numberpro_number .game_join_total {
color: #ffff73;
text-shadow: 0 0 35px #d15c16, 0 0 40px #dc5e0b, 0 0 50px #9d430e, 0 0 75px #ba4b0d;
font-weight: bold;
-webkit-text-fill-color: currentColor;
color: #ffff73;
text-shadow: 0 0 35px #d15c16, 0 0 40px #dc5e0b, 0 0 50px #9d430e,
0 0 75px #ba4b0d;
font-weight: bold;
-webkit-text-fill-color: currentColor;
}
.shuchaopiao .Numberpro_right {
position: absolute;
right: 0;
top: 0;
font-size: 28px;
color: #ffe599;
line-height: 45px;
width: 31px;
height: 52px;
position: absolute;
right: 0;
top: 0;
font-size: 28px;
color: #ffe599;
line-height: 45px;
width: 31px;
height: 52px;
}
.shuchaopiao .prompt_img {
width: 790px;
margin: 20px auto 0 auto;
position: relative;
height: 70px;
width: 900px;
margin: 20px auto 0 auto;
position: relative;
height: 70px;
}
.shuchaopiao .prompt_img span {
margin-left: 10px;
margin-right: 10px;
width: 70px;
height: 70px;
display: inline-block;
background-size: cover;
background-image: url(../../../static/image/shuqian/lotter_win_bg.png);
text-align: center;
line-height: 70px;
/* position: absolute; */
margin-left: 10px;
margin-right: 10px;
width: 70px;
height: 70px;
display: inline-block;
background-size: cover;
background-image: url(../../../static/image/shuqian/lotter_win_bg.png);
text-align: center;
line-height: 70px;
/* position: absolute; */
}
.shuchaopiao .prompt_img span img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-top: 5px;
}
.shuchaopiao .hd-game-btn-container{
position: absolute;
bottom: 5px;
right: .5%;
z-index: 1000;
width: 160px;
height: 80px;
border-radius: 8px;
background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
background-size: 100% 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
margin-top: 5px;
}
.shuchaopiao .hd-game-btn-container {
position: absolute;
bottom: 5px;
right: 0.5%;
z-index: 1000;
width: 160px;
height: 80px;
border-radius: 8px;
background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
background-size: 100% 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.shuchaopiao .hd-game-btn-container .hd-game-btn {
min-width: 70px;
max-width: 100px;
width: 100px;
height: 62px;
border-radius: .3em;
background: rgba(17,17,17,.6) url(../../../static/image/shuqian/g_game_btn_bg2.png) left no-repeat;
text-align: center;
cursor: pointer;
color: #f4d4b0;
cursor: pointer;
display: flex;
margin: 0 5px;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
min-width: 70px;
max-width: 100px;
width: 100px;
height: 62px;
border-radius: 0.3em;
background: rgba(17, 17, 17, 0.6)
url(../../../static/image/shuqian/g_game_btn_bg2.png) left no-repeat;
text-align: center;
cursor: pointer;
color: #f4d4b0;
cursor: pointer;
display: flex;
margin: 0 5px;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
}
.hd-game-btn-container .icon-go {
background: url(../../../static/image/shuqian/img-begin.png?1) no-repeat;
background-size: cover;
width: 22px;
height: 22px;
background: url(../../../static/image/shuqian/img-begin.png?1) no-repeat;
background-size: cover;
width: 22px;
height: 22px;
}
.hd-game-btn-container .hd-game-btn span{
font-size:1.3rem;
.hd-game-btn-container .hd-game-btn span {
font-size: 1.3rem;
}
.hd-game-btn-container .hd-game-btn:nth-child(2){
margin-left:0;
.hd-game-btn-container .hd-game-btn:nth-child(2) {
margin-left: 0;
}
.hd-game-btn-container .icon-lajitong {
background: url(../../../static/image/shuqian/icon-reset2.png) no-repeat;
background-size: cover;
width: 20px;
height: 22px;
background: url(../../../static/image/shuqian/icon-reset2.png) no-repeat;
background-size: cover;
width: 20px;
height: 22px;
}
.shu-start-tooltip-box {
text-align: center;
position: fixed;
top: 40%;
left: 50%;
margin-left: -441px;
margin-top: -200px;
z-index: 99;
background: url(../../../static/image/shuqian/g_game_cd_bg5.png) no-repeat;
background-size: cover;
width: 883px;
height: 392px;
text-align: center;
position: fixed;
top: 40%;
left: 50%;
margin-left: -441px;
margin-top: -200px;
z-index: 99;
background: url(../../../static/image/shuqian/g_game_cd_bg5.png) no-repeat;
background-size: cover;
width: 883px;
height: 392px;
}
.shuchaopiao .shu-num-box {
font-size: 150px;
line-height: 150px;
height: 150px;
font-family: "Arial",cursive;
color: #ffff73;
text-shadow: 0 0 35px #d15c16, 0 0 40px #dc5e0b, 0 0 50px #9d430e, 0 0 75px #ba4b0d;
font-weight: bold;
-webkit-text-fill-color: currentColor;
animation: dTime 1s infinite ease;
transform: scale(2,2);
margin-top:175px;
font-size: 150px;
line-height: 150px;
height: 150px;
font-family: "Arial", cursive;
color: #ffff73;
text-shadow: 0 0 35px #d15c16, 0 0 40px #dc5e0b, 0 0 50px #9d430e,
0 0 75px #ba4b0d;
font-weight: bold;
-webkit-text-fill-color: currentColor;
animation: dTime 1s infinite ease;
transform: scale(2, 2);
margin-top: 175px;
}
@keyframes dTime {
1% {
transform: scale(2);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(2);
opacity: 0
}
1% {
transform: scale(2);
opacity: 1;
}
90% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.shuchaopiao .fireworks {
width: 100%;
height: 100%;
position: relative
width: 100%;
height: 100%;
position: relative;
}
.shuchaopiao .fireworks_left{
.shuchaopiao .fireworks_left {
top: 38%;
left: 25%;
}
.shuchaopiao .fireworks_right {
top: 28%;
right: 23%
top: 28%;
right: 23%;
}
.shuchaopiao .fireworks_left, .shuchaopiao .fireworks_right {
width: 200px;
height: 200px;
background: url(../../../static/image/shuqian/fk.png) no-repeat center;
-webkit-animation: sprite 1s steps(1) infinite;
overflow: hidden;
position: absolute;
.shuchaopiao .fireworks_left,
.shuchaopiao .fireworks_right {
width: 200px;
height: 200px;
background: url(../../../static/image/shuqian/fk.png) no-repeat center;
-webkit-animation: sprite 1s steps(1) infinite;
overflow: hidden;
position: absolute;
}
@-webkit-keyframes sprite {
0%{
background-position: 0 0
0% {
background-position: 0 0;
}
4.34%{
background-position: 0 -210px
4.34% {
background-position: 0 -210px;
}
8.68%
{
background-position: 0 -420px
8.68% {
background-position: 0 -420px;
}
13.02%
{
background-position: 0 -630px
13.02% {
background-position: 0 -630px;
}
17.36%
{
background-position: 0 -840px
17.36% {
background-position: 0 -840px;
}
21.7%
{
background-position: 0 -1050px
21.7% {
background-position: 0 -1050px;
}
26.04%
{
background-position: 0 -1260px
26.04% {
background-position: 0 -1260px;
}
30.38%
{
background-position: 0 -1470px
30.38% {
background-position: 0 -1470px;
}
34.72%
{
background-position: 0 -1680px
34.72% {
background-position: 0 -1680px;
}
39.06%
{
background-position: 0 -1890px
39.06% {
background-position: 0 -1890px;
}
43.4%
{
background-position: 0 -2100px
43.4% {
background-position: 0 -2100px;
}
47.74%
{
background-position: 0 -2310px
47.74% {
background-position: 0 -2310px;
}
52.08%
{
background-position: 0 -2520px
52.08% {
background-position: 0 -2520px;
}
56.42%
{
background-position: 0 -2730px
56.42% {
background-position: 0 -2730px;
}
60.76%
{
background-position: 0 -2940px
60.76% {
background-position: 0 -2940px;
}
65.1%
{
background-position: 0 -3150px
65.1% {
background-position: 0 -3150px;
}
69.44%
{
background-position: 0 -3360px
69.44% {
background-position: 0 -3360px;
}
73.78%
{
background-position: 0 -3570px
73.78% {
background-position: 0 -3570px;
}
78.12%
{
background-position: 0 -3780px
78.12% {
background-position: 0 -3780px;
}
82.46%
{
background-position: 0 -3990px
82.46% {
background-position: 0 -3990px;
}
86.8%
{
background-position: 0 -4200px
86.8% {
background-position: 0 -4200px;
}
91.14%
{
background-position: 0 -4410px
91.14% {
background-position: 0 -4410px;
}
95.48%
{
background-position: 0 -4620px
95.48% {
background-position: 0 -4620px;
}
100%
{
background-position: 0 -4830px
100% {
background-position: 0 -4830px;
}
}
.retouching_animation {
position: absolute;
top: 56%;
left: 50%;
width: 35px;
height: 47px;
background: url(../../../static/image/shuqian/tiny_lantern.png) no-repeat center/cover;
transform: translate(-50%);
transition-duration: 10s;
-moz-transition-duration: 10s;
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
}
.shuchaopiao .shu-rank-list{
position: absolute;
bottom: 90px;
width: 100%;
text-align: center;
position: absolute;
top: 56%;
left: 50%;
width: 35px;
height: 47px;
background: url(../../../static/image/shuqian/tiny_lantern.png) no-repeat
center/cover;
transform: translate(-50%);
transition-duration: 10s;
-moz-transition-duration: 10s;
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
}
.shuchaopiao .shu-rank-list {
position: absolute;
bottom: 90px;
width: 100%;
text-align: center;
}
.shuchaopiao .shu-rank-item {
width: 106px;
margin-right: 30px;
position: relative;
display: inline-block;
z-index: 2;
width: 106px;
margin-right: 30px;
position: relative;
display: inline-block;
z-index: 2;
}
.shuchaopiao .shu-rank-item-head{
background: url(../../../static/image/shuqian/shu033.png);
height: 22px;
.shuchaopiao .shu-rank-item-head {
background: url(../../../static/image/shuqian/shu033.png);
height: 22px;
}
.shuchaopiao .shu-rank-item-body{
background: url(../../../static/image/shuqian/shu022.png);
.shuchaopiao .shu-rank-item-body {
background: url(../../../static/image/shuqian/shu022.png);
}
.shuchaopiao .shu-rank-item-footer {
background: url(../../../static/image/shuqian/shu011.png);
height: 8px;
width: 100%;
background: url(../../../static/image/shuqian/shu011.png);
height: 8px;
width: 100%;
}
.shuchaopiao .shu-rank-item-info {
text-align: center;
font-size: 20px;
position: absolute;
top: -160px;
width: 138px;
left: -15px;
text-align: center;
font-size: 20px;
position: absolute;
top: -160px;
width: 138px;
left: -15px;
}
.shuchaopiao .shu-rank-item-info img {
width: 75px;
height: 75px;
border-radius: 50%;
border: 6px solid #fdbe23;
width: 75px;
height: 75px;
border-radius: 50%;
border: 6px solid #fdbe23;
}
.shuchaopiao .shu-rank-item-info .ranking {
display: block;
position: absolute;
bottom: 108px;
right: 42px;
width: 10px;
height: 10px;
color: #fffe4d;
font-weight: 700;
font-size: 18px;
display: block;
position: absolute;
bottom: 108px;
right: 42px;
width: 10px;
height: 10px;
color: #fffe4d;
font-weight: 700;
font-size: 18px;
}
.shu-rank-item-info .shu-rank-item-score {
display: block;
color: #ffd24c;
margin-bottom: 5px;
white-space: nowrap;
font-weight: bold;
text-shadow: #8d2201 2px 0 0, #8d2201 0 2px 0, #8d2201 -2px 0 0, #8d2201 0 -2px 0;
display: block;
color: #ffd24c;
margin-bottom: 5px;
white-space: nowrap;
font-weight: bold;
text-shadow: #8d2201 2px 0 0, #8d2201 0 2px 0, #8d2201 -2px 0 0,
#8d2201 0 -2px 0;
}
.shu-rank-item-info .shu-rank-item-name {
display: block;
color: #ffd835;
white-space: nowrap;
line-height: 200%;
text-shadow: #8d2201 2px 0 0, #8d2201 0 2px 0, #8d2201 -2px 0 0, #8d2201 0 -2px 0;
text-overflow: ellipsis;
font-weight: bold;
overflow: hidden;
margin-bottom: 20px;
display: block;
color: #ffd835;
white-space: nowrap;
line-height: 200%;
text-shadow: #8d2201 2px 0 0, #8d2201 0 2px 0, #8d2201 -2px 0 0,
#8d2201 0 -2px 0;
text-overflow: ellipsis;
font-weight: bold;
overflow: hidden;
margin-bottom: 20px;
}
.shu-rank-item-info::before {
content: "";
width: 33px;
height: 32px;
display: block;
position: absolute;
bottom: 90px;
color: #fffb4b;
padding-top: 3px;
font-weight: 700;
font-size: 18px;
right: 30px;
background: url(../../../static/image/shuqian/first_few.png);
content: "";
width: 33px;
height: 32px;
display: block;
position: absolute;
bottom: 90px;
color: #fffb4b;
padding-top: 3px;
font-weight: 700;
font-size: 18px;
right: 30px;
background: url(../../../static/image/shuqian/first_few.png);
}
.shuchaopiao .number-ani-box {
padding: 107px 50px 0 40px;
text-align: center;
width: 422px;
height: 422px;
position: fixed;
top: 33%;
left: 48%;
margin-left: -205px;
margin-top: -180px;
z-index: 100;
/* display: none; */
border-radius: 50%;
animation: numberAni 1s infinite ease;
background: url(../../../static/image/shuqian/number-ani-boxBs.png);
background-size: 100% 100%
padding: 107px 50px 0 40px;
text-align: center;
width: 422px;
height: 422px;
position: fixed;
top: 33%;
left: 48%;
margin-left: -205px;
margin-top: -180px;
z-index: 100;
/* display: none; */
border-radius: 50%;
animation: numberAni 1s infinite ease;
background: url(../../../static/image/shuqian/number-ani-boxBs.png);
background-size: 100% 100%;
}
.shuchaopiao .number-ani-box .imgNumberImg {
position: absolute;
left: 100px;
top: 175px;
width: 178px
position: absolute;
left: 100px;
top: 175px;
width: 178px;
}
.shuchaopiao .number-ani-box .imgNumberImg2 {
position: absolute;
right: 110px;
top: 175px;
width: 178px
position: absolute;
right: 110px;
top: 175px;
width: 178px;
}
@keyframes numberAni {
1% {
transform: scale(3);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(3);
opacity: 0
}
1% {
transform: scale(3);
opacity: 1;
}
90% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(3);
opacity: 0;
}
}
.number-ani-box img {
margin-left: 8px
margin-left: 8px;
}
/* 首页样式开始 */
.game-cover-man{
background: url(../../../static/image/shuqian/new-back-top3.jpg) no-repeat center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.game-cover-manTop{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.game-cover-manTop img{
width:100%;
}
.game-cover-manBottom{
background: url(../../../static/image/shuqian/game-title-bottom.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.game-cover-div{
text-align: center;
position: fixed;
top: 26%;
width: 100%;
margin-top: -120px;
z-index: 99;
display: block;
.game-cover-man {
background: url(../../../static/image/shuqian/new-back-top3.jpg) no-repeat
center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.cover-box {
position: absolute;
z-index: 100;
top: 50%;
width: 1000px;
height: 640px;
margin-top: -20px;
left: 50%;
margin-left: -500px;
text-align: center;
overflow: hidden;
.game-cover-manTop {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.cover-box .circle-light {
background: url(../../../static/image/shuqian/light.png) no-repeat;
width: 70%;
height: 70%;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -35%;
top: 210px;
opacity: 0;
.game-cover-manTop img {
width: 100%;
}
.circle-light1{
animation:circleRoate1 5s infinite ease-in 3s forwards;
-webkit-animation:circleRoate1 5s infinite ease-in 3s forwards;
.game-cover-manBottom {
background: url(../../../static/image/shuqian/game-title-bottom.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
@keyframes circleRoate1{
0.1%{opacity:.6;transform:rotate(0)}
100%{opacity:.6;transform:rotate(360deg)}
.game-cover-div {
text-align: center;
position: fixed;
top: 26%;
width: 100%;
margin-top: -120px;
z-index: 99;
display: block;
}
.cover-box .ribbon-flag {
background: url(../../../static/image/shuqian/flag.png) no-repeat;
width: 834px;
height: 185px;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -417px;
top: 490px;
opacity: 0;
animation: carFlag 1s 1 ease-in-out 1s forwards;
.cover-box {
position: absolute;
z-index: 100;
top: 50%;
width: 1000px;
height: 640px;
margin-top: -20px;
left: 50%;
margin-left: -500px;
text-align: center;
overflow: hidden;
}
@keyframes carFlag{
0.1%{opacity:0;transform:translateY(120px)}
33%{opacity:1;transform:translateY(0)}
66%{opacity:1;transform:translateY(20px)}
100%{opacity:1;transform:translateY(0)}
.cover-box .circle-light {
background: url(../../../static/image/shuqian/light.png) no-repeat;
width: 70%;
height: 70%;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -35%;
top: 210px;
opacity: 0;
}
.circle-light1 {
animation: circleRoate1 5s infinite ease-in 3s forwards;
-webkit-animation: circleRoate1 5s infinite ease-in 3s forwards;
}
@keyframes circleRoate1 {
0.1% {
opacity: 0.6;
transform: rotate(0);
}
100% {
opacity: 0.6;
transform: rotate(360deg);
}
}
.cover-box .red-lefthand {
background: url(../../../static/image/shuqian/hand01.png) no-repeat;
width: 96px;
height: 68px;
background-size: 100% 100%;
position: absolute;
left: 27%;
top: 461px;
.cover-box .ribbon-flag {
background: url(../../../static/image/shuqian/flag.png) no-repeat;
width: 834px;
height: 185px;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -417px;
top: 490px;
opacity: 0;
animation: carFlag 1s 1 ease-in-out 1s forwards;
}
@keyframes carFlag {
0.1% {
opacity: 0;
transform: translateY(120px);
}
33% {
opacity: 1;
transform: translateY(0);
}
66% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.cover-box .red-hand1{
animation:redHand1 1.5s infinite ease-in 2.5s forwards;
-webkit-animation:redHand1 1.5s infinite ease-in 2.5s forwards
}
@keyframes redHand1{
0.1%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
50%{opacity:1;transform:matrix(0.866,0.5,-0.5,0.866,0,0)}
100%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
.cover-box .red-lefthand {
background: url(../../../static/image/shuqian/hand01.png) no-repeat;
width: 96px;
height: 68px;
background-size: 100% 100%;
position: absolute;
left: 27%;
top: 461px;
opacity: 0;
}
.cover-box .red-hand1 {
animation: redHand1 1.5s infinite ease-in 2.5s forwards;
-webkit-animation: redHand1 1.5s infinite ease-in 2.5s forwards;
}
@keyframes redHand1 {
0.1% {
opacity: 1;
transform: matrix(0.866, -0.5, 0.5, 0.866, 0, 0);
}
50% {
opacity: 1;
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
100% {
opacity: 1;
transform: matrix(0.866, -0.5, 0.5, 0.866, 0, 0);
}
}
@keyframes redHand2{
0.1%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
50%{opacity:1;transform:matrix(0.866,0.5,-0.5,0.866,0,0)}
100%{opacity:1;transform:matrix(0.866,-0.5,0.5,0.866,0,0)}
@keyframes redHand2 {
0.1% {
opacity: 1;
transform: matrix(0.866, -0.5, 0.5, 0.866, 0, 0);
}
50% {
opacity: 1;
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}
100% {
opacity: 1;
transform: matrix(0.866, -0.5, 0.5, 0.866, 0, 0);
}
}
.cover-box .red-righthand {
background: url(../../../static/image/shuqian/hand02.png) no-repeat;
width: 122px;
height: 106px;
background-size: 100% 100%;
position: absolute;
right: 29%;
top: 419px;
opacity: 0;
background: url(../../../static/image/shuqian/hand02.png) no-repeat;
width: 122px;
height: 106px;
background-size: 100% 100%;
position: absolute;
right: 29%;
top: 419px;
opacity: 0;
}
.cover-box .red-build {
background: url(../../../static/image/shuqian/people.png) no-repeat;
width: 366px;
height: 290px;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -183px;
top: 330px;
background: url(../../../static/image/shuqian/people.png) no-repeat;
width: 366px;
height: 290px;
background-size: 100% 100%;
position: absolute;
left: 50%;
margin-left: -183px;
top: 330px;
opacity: 0;
animation: buildCloud 2s 1 ease-in-out 1.4s forwards;
}
@keyframes buildCloud {
0.1% {
opacity: 0;
animation: buildCloud 2s 1 ease-in-out 1.4s forwards;
}
@keyframes buildCloud{
0.1%{opacity:0;transform:scale(0.2)}
33%{opacity:1;transform:scale(1.1)}
66%{opacity:1;transform:scale(0.9)}
100%{opacity:1;transform:scale(1)}
transform: scale(0.2);
}
33% {
opacity: 1;
transform: scale(1.1);
}
66% {
opacity: 1;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.cover-box .glass-light {
background: url(../../../static/image/shuqian/sun-light.png) no-repeat;
background-size: 100% 100%;
width: 100px;
height: 100px;
position: absolute;
right: 43%;
top: 368px;
background: url(../../../static/image/shuqian/sun-light.png) no-repeat;
background-size: 100% 100%;
width: 100px;
height: 100px;
position: absolute;
right: 43%;
top: 368px;
opacity: 0;
animation: glassLight 1s 1 linear 3.4s forwards;
}
@keyframes glassLight {
0.1% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
animation: glassLight 1s 1 linear 3.4s forwards;
}
@keyframes glassLight{
0.1%{opacity:1;transform:translateX(0)}
100%{opacity:0;transform:translateX(60px)}
transform: translateX(60px);
}
}
.cover-box .dai-left {
background: url(../../../static/image/shuqian/money01.png) no-repeat;
width: 70px;
height: 132px;
background-size: 100% 100%;
position: absolute;
left: 23%;
top: 335px;
opacity: 0;
background: url(../../../static/image/shuqian/money01.png) no-repeat;
width: 70px;
height: 132px;
background-size: 100% 100%;
position: absolute;
left: 23%;
top: 335px;
opacity: 0;
}
.cover-box .dai-right {
background: url(../../../static/image/shuqian/money02.png) no-repeat;
width: 74px;
height: 128px;
background-size: 100% 100%;
position: absolute;
right: 23%;
top: 311px;
opacity: 0;
background: url(../../../static/image/shuqian/money02.png) no-repeat;
width: 74px;
height: 128px;
background-size: 100% 100%;
position: absolute;
right: 23%;
top: 311px;
opacity: 0;
}
.cover-box .red-hand1{
animation:redHand1 1.5s infinite ease-in 2.5s forwards;
-webkit-animation:redHand1 1.5s infinite ease-in 2.5s forwards
.cover-box .red-hand1 {
animation: redHand1 1.5s infinite ease-in 2.5s forwards;
-webkit-animation: redHand1 1.5s infinite ease-in 2.5s forwards;
}
.cover-box .icon-coin1 {
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 36px;
height: 40px;
background-size: 100% 100%;
position: absolute;
top: 237px;
left: 56%;
opacity: 0;
animation: iconCoin 2.5s infinite ease-in 4.8s forwards;
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 36px;
height: 40px;
background-size: 100% 100%;
position: absolute;
top: 237px;
left: 56%;
opacity: 0;
animation: iconCoin 2.5s infinite ease-in 4.8s forwards;
}
.cover-box .icon-coin2 {
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 66px;
height: 70px;
background-size: 100% 100%;
position: absolute;
top: 237px;
left: 66%;
opacity: 0;
animation: iconCoin2 2.5s infinite ease-in 5.5s forwards;
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 66px;
height: 70px;
background-size: 100% 100%;
position: absolute;
top: 237px;
left: 66%;
opacity: 0;
animation: iconCoin2 2.5s infinite ease-in 5.5s forwards;
}
.cover-box .icon-coin3 {
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 56px;
height: 60px;
background-size: 100% 100%;
position: absolute;
top: 222px;
left: 28%;
background: url(../../../static/image/shuqian/money03.png) no-repeat;
width: 56px;
height: 60px;
background-size: 100% 100%;
position: absolute;
top: 222px;
left: 28%;
opacity: 0;
animation: iconCoin3 2.5s infinite ease-in 6s forwards;
}
@keyframes iconCoin {
0.1% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
animation: iconCoin3 2.5s infinite ease-in 6s forwards;
}
@keyframes iconCoin{
0.1%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(220px)}
transform: translateY(220px);
}
}
@keyframes iconCoin2{
0.1%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(400px)}
@keyframes iconCoin2 {
0.1% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(400px);
}
}
@keyframes iconCoin3{
0.1%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(360px)}
@keyframes iconCoin3 {
0.1% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(360px);
}
}
.game-coverTextDiv {
position: absolute;
width: 100%;
top: 66px;
position: absolute;
width: 100%;
top: 66px;
}
.game-coverTitle {
background: url(../../../static/image/shuqian/game-title-titBs.png) no-repeat;
background-size: 100% 100%;
text-align: center;
width: 674px;
height: 235px;
margin: 0 auto;
font-size: 62px;
color: #fff;
position: relative;
}
.game-coverTitle {
background: url(../../../static/image/shuqian/game-title-titBs.png) no-repeat;
background-size: 100% 100%;
text-align: center;
width: 674px;
height: 235px;
margin: 0 auto;
font-size: 62px;
color: #fff;
position: relative;
}
.game-coverTitle{
animation:titleBox .5s 1 ease-in-out forwards
}
@keyframes titleBox{
0.1%{opacity:1;transform:scale(0.2)}
50%{opacity:1;transform:scale(1.1)}
100%{opacity:1;transform:scale(1)}
animation: titleBox 0.5s 1 ease-in-out forwards;
}
@keyframes titleBox {
0.1% {
opacity: 1;
transform: scale(0.2);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.game-coverTitle .game-coverTitleSpan {
/* -webkit-text-stroke: 3px #9d2200; */
-webkit-background-clip: text;
font-weight: bold;
text-shadow: 4.1px 4px 0 #9d2200;
letter-spacing: 7px;
position: absolute;
width: 100%;
height: 180px;
top: 72px;
display: block;
/* -webkit-text-stroke: 3px #9d2200; */
-webkit-background-clip: text;
font-weight: bold;
text-shadow: 4.1px 4px 0 #9d2200;
letter-spacing: 7px;
position: absolute;
width: 100%;
height: 180px;
top: 72px;
display: block;
}
.game-coverTitle .game-coverTitleSpan2 {
font-weight: bold;
letter-spacing: 7px;
position: absolute;
display: block;
width: 100%;
height: 90px;
top: 72px;
-webkit-text-stroke: 2px #581800;
background-image: linear-gradient(to bottom,#ffed95,#ffed95,#ff5503);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
letter-spacing: 7px;
position: absolute;
display: block;
width: 100%;
height: 90px;
top: 72px;
-webkit-text-stroke: 2px #581800;
background-image: linear-gradient(to bottom, #ffed95, #ffed95, #ff5503);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.game-cover-manCircleDiv {
width: 100%;
height: 642px;
position: relative;
top:0;
overflow: hidden;
width: 100%;
height: 642px;
position: relative;
top: 0;
overflow: hidden;
}
.winnerRipple {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}
.move{
animation:bb 2s infinite ease-in 1s forwards
.move {
animation: bb 2s infinite ease-in 1s forwards;
}
@keyframes bb{
0.1%{opacity:1;transform:scale(0)}
100%{opacity:0;transform:scale(2)}
@keyframes bb {
0.1% {
opacity: 1;
transform: scale(0);
}
100% {
opacity: 0;
transform: scale(2);
}
}
</style>
<template>
<div class="shuchaopiao">
<template v-if="showFirst">
<div class="game-cover-man">
<div class="game-cover-manTop">
<img src="../../../static/image/shuqian/new-back-topbs.png" alt=""/>
</div>
<div class="game-cover-manBottom"></div>
<div class="game-cover-div">
<div class="cover-box">
<div class="circle-light circle-light1"></div>
<div class="ribbon-flag"></div>
<div class="red-lefthand red-hand1"></div>
<div class="red-righthand red-hand1"></div>
<div class="red-build"></div>
<div class="glass-light"></div>
<div class="dai-left red-hand1"></div>
<div class="dai-right red-hand1"></div>
<div class="icon-coin1"></div>
<div class="icon-coin2"></div>
<div class="icon-coin3"></div>
</div>
<div class="game-coverTextDiv">
<div class="game-coverTitle">
<span class="game-coverTitleNav game-coverTitleSpan">疯狂数钞票</span>
<span class="game-coverTitleNav game-coverTitleSpan2">疯狂数钞票</span>
</div>
</div>
</div>
<div class="game-cover-manCircleDiv">
<img class="winnerRipple move" src="../../../static/image/shuqian/winner-quan1.png" alt="">
</div>
<!-- 按钮 -->
<div class="hd-game-btn-container">
<div class="hd-game-btn" @click="getReady()">
<i class="iconfont icon-go"></i>
<span>准备</span>
</div>
<div class="game-cover-man">
<div class="game-cover-manTop">
<img src="../../../static/image/shuqian/new-back-topbs.png" alt />
</div>
<div class="game-cover-manBottom"></div>
<div class="game-cover-div">
<div class="cover-box">
<div class="circle-light circle-light1"></div>
<div class="ribbon-flag"></div>
<div class="red-lefthand red-hand1"></div>
<div class="red-righthand red-hand1"></div>
<div class="red-build"></div>
<div class="glass-light"></div>
<div class="dai-left red-hand1"></div>
<div class="dai-right red-hand1"></div>
<div class="icon-coin1"></div>
<div class="icon-coin2"></div>
<div class="icon-coin3"></div>
</div>
<div class="game-coverTextDiv">
<div class="game-coverTitle">
<span class="game-coverTitleNav game-coverTitleSpan">疯狂数钞票</span>
<span class="game-coverTitleNav game-coverTitleSpan2">疯狂数钞票</span>
</div>
</div>
</div>
<div class="game-cover-manCircleDiv">
<img class="winnerRipple move" src="../../../static/image/shuqian/winner-quan1.png" alt />
</div>
<!-- 按钮 -->
<div class="hd-game-btn-container">
<div class="hd-game-btn" @click="getReady()">
<i class="iconfont icon-go"></i>
<span>准备</span>
</div>
</div>
</div>
</template>
<template v-else>
<div class="shuMoney" ref="shuMoney">
<!-- 顶部灯笼 -->
<div class="shuMoney-disk">
<p class="shuMoney-diskImg"></p>
</div>
<!-- 门帘 -->
<div class="shuMoney-curtain"></div>
<!-- 飘钱 -->
<div class="leafContainer" id="leafContainer">
</div>
<!-- 准备人员名单 -->
<div class="Number_prompt" v-if="showPeople">
<div class="Number_prompt_div">
<span class="Numberpro_number">
<span class="Numberpro_left">游戏已进入</span>
<span class="game_join_total">1</span>
<span class="Numberpro_right">人</span>
</span>
</div>
<div class="prompt_imgdiv">
<div class="prompt_img">
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt="">
</span>
</div>
</div>
</div>
<!-- 倒计时 -->
<div class="shu-start-tooltip-box" v-if="showCount">
<div class="shu-num-box">{{totalTime}}</div>
</div>
<!-- 烟花 -->
<div class="fireworks">
<div class="fireworks_left"></div>
<div class="fireworks_right"></div>
<div class="shuMoney" ref="shuMoney">
<!-- 顶部灯笼 -->
<div class="shuMoney-disk">
<p class="shuMoney-diskImg"></p>
</div>
<!-- 门帘 -->
<div class="shuMoney-curtain"></div>
<!-- 飘钱 -->
<div class="leafContainer" id="leafContainer"></div>
<!-- 准备人员名单 -->
<div class="Number_prompt" v-if="showPeople">
<div class="Number_prompt_div">
<span class="Numberpro_number">
<span class="Numberpro_left">游戏已进入</span>
<span class="game_join_total">1</span>
<span class="Numberpro_right">人</span>
</span>
</div>
<div class="prompt_imgdiv">
<div class="prompt_img">
<span class="waiting-box">
<!-- roomPeoples -->
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
<span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt />
</span>
</div>
<!-- 游戏开始后倒计时 -->
<div class="number-ani-box" ref="countBox" v-if="showThrityCount">
<img class="img-num imgNumberImg" src='../../../static/image/shuqian/3.png'/>
<img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/>
</div>
</div>
<!-- 倒计时 -->
<div class="shu-start-tooltip-box" v-if="showCount">
<div class="shu-num-box">{{totalTime}}</div>
</div>
<!-- 烟花 -->
<div class="fireworks">
<div class="fireworks_left"></div>
<div class="fireworks_right"></div>
</div>
<!-- 游戏开始后倒计时 -->
<div class="number-ani-box" ref="countBox" v-if="showThrityCount">
<img class="img-num imgNumberImg" src="../../../static/image/shuqian/3.png" />
<img class="img-num imgNumberImg2" src="../../../static/image/shuqian/0.png" />
</div>
<div class="shu-rank-list" v-if="showMoney">
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt />
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-list" v-if="showMoney">
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/>
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/>
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/>
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt />
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<!-- 按钮 -->
<div class="hd-game-btn-container" v-show="isShowBtn">
<div class="hd-game-btn" @click="StartGame()">
<i class="iconfont icon-go"></i>
<span>开始</span>
</div>
<div class="hd-game-btn" style="display:none;">
<i class="iconfont icon-lajitong"></i>
<span>重置</span>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
<div class="shu-rank-item">
<div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt />
<span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
</div>
<div class="shu-rank-item-head"></div>
<div class="shu-rank-item-body"></div>
<div class="shu-rank-item-footer"></div>
</div>
</div>
<!-- 按钮 -->
<div class="hd-game-btn-container" v-show="isShowBtn">
<div class="hd-game-btn" @click="StartGame()">
<i class="iconfont icon-go"></i>
<span>开始</span>
</div>
<div class="hd-game-btn" style="display:none;">
<i class="iconfont icon-lajitong"></i>
<span>重置</span>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
export default {
data () {
data() {
return {
NUMBER_OF_LEAVES: 18,
showPeople: false,
......@@ -964,123 +1052,168 @@ export default {
showFirst: true,
// 显示人和钱
showMoney: false,
isShowBtn: true
}
isShowBtn: true,
code: "Money",
roomPeoples:[]
};
},
mounted () {
mounted() {
// this.$PROXY
// .invoke("SendBarrage", "0.0 让我康康是谁在说我坏话？")
// .done(msg => {
// console.log(msg);
// });
this.bindCallBack();
this.initStatus();
},
methods: {
initStatus() {
let that=this
try {
this.$PROXY.invoke("GetMenuStatus", this.code).done(m => {
if (m == 1) {
that.readyGo()
}
});
} catch (error) {
setTimeout(() => {
that.initStatus()
}, 4000);
}
},
// 点击准备
getReady () {
this.showFirst = false
this.showPeople = true
this.$nextTick(function () {
this.init()
})
getReady() {
this.$PROXY.invoke("ReadyGame", this.code).done(m => {});
},
bindCallBack() {
let that = this;
this.$PROXY.on("getChangeMenu", data => {
console.log(data);
if (data.code == that.code) {
if (data.status == 1) {
that.readyGo()
}
}
});
},
readyGo() {
let that=this
this.showFirst = false;
this.showPeople = true;
this.$nextTick(function() {
this.init();
});
this.$PROXY.invoke("GetRoomAllUser", this.code).done(m => {
that.roomPeoples=m
});
},
// 飘钱方法开始
init () {
var a = document.getElementById('leafContainer')
init() {
var a = document.getElementById("leafContainer");
for (var b = 0; b < this.NUMBER_OF_LEAVES; b++) {
a.append(this.createALeaf())
a.append(this.createALeaf());
}
},
randomInteger (a, b) {
return a + Math.floor(Math.random() * (b - a))
randomInteger(a, b) {
return a + Math.floor(Math.random() * (b - a));
},
randomFloat (a, b) {
return a + Math.random() * (b - a)
randomFloat(a, b) {
return a + Math.random() * (b - a);
},
pixelValue (a) {
return a + '%'
pixelValue(a) {
return a + "%";
},
durationValue (a) {
return a + 's'
durationValue(a) {
return a + "s";
},
createALeaf () {
var d = document.createElement('div')
var g = document.createElement('img')
createALeaf() {
var d = document.createElement("div");
var g = document.createElement("img");
g.src =
'../../../static/image/shuqian/realLeaf' +
"../../../static/image/shuqian/realLeaf" +
this.randomInteger(1, 5) +
'.png'
d.style.top = '-15%'
d.style.left = this.pixelValue(this.randomInteger(0, 100))
".png";
d.style.top = "-15%";
d.style.left = this.pixelValue(this.randomInteger(0, 100));
var e =
Math.random() < 0.5 ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip'
d.style.webkitAnimationName = 'fade, drop'
g.style.webkitAnimationName = e
var a = this.durationValue(this.randomFloat(5, 11))
var f = this.durationValue(this.randomFloat(4, 8))
d.style.webkitAnimationDuration = a + ', ' + a
var c = this.durationValue(this.randomFloat(0, 5))
d.style.webkitAnimationDelay = c + ', ' + c
g.style.webkitAnimationDuration = f
d.append(g)
return d
Math.random() < 0.5 ? "clockwiseSpin" : "counterclockwiseSpinAndFlip";
d.style.webkitAnimationName = "fade, drop";
g.style.webkitAnimationName = e;
var a = this.durationValue(this.randomFloat(5, 11));
var f = this.durationValue(this.randomFloat(4, 8));
d.style.webkitAnimationDuration = a + ", " + a;
var c = this.durationValue(this.randomFloat(0, 5));
d.style.webkitAnimationDelay = c + ", " + c;
g.style.webkitAnimationDuration = f;
d.append(g);
return d;
},
// 飘钱方法结束
// 开始游戏
StartGame () {
this.showPeople = false
this.showCount = true
this.isShowBtn = false
this.countDown()
StartGame() {
this.showPeople = false;
this.showCount = true;
this.isShowBtn = false;
this.countDown();
},
// 321倒计时
countDown () {
countDown() {
let clock = window.setInterval(() => {
this.totalTime--
this.totalTime--;
if (this.totalTime === 0) {
window.clearInterval(clock)
this.showCount = false
this.totalTime = 3
this.showThrityCount = true
this.showMoney = true
this.countDown30()
window.clearInterval(clock);
this.showCount = false;
this.totalTime = 3;
this.showThrityCount = true;
this.showMoney = true;
this.countDown30();
}
}, 1000)
}, 1000);
},
// 30秒倒计时
countDown30 () {
countDown30() {
let clock = window.setInterval(() => {
this.totalTime2--
let num = this.totalTime2.toString()
this.totalTime2--;
let num = this.totalTime2.toString();
if (this.totalTime2 < 10) {
num = 0 + '' + num
num = 0 + "" + num;
}
let imgPath1 = num.split('')[0]
let imgPath2 = num.split('')[1]
let imgPath1 = num.split("")[0];
let imgPath2 = num.split("")[1];
let countHtml = `<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
<img class="img-num imgNumberImg2" src='../../../static/image/shuqian/${imgPath2}.png'/>`
this.$refs.countBox.innerHTML = countHtml
<img class="img-num imgNumberImg2" src='../../../static/image/shuqian/${imgPath2}.png'/>`;
this.$refs.countBox.innerHTML = countHtml;
if (this.totalTime2 === -1) {
window.clearInterval(clock)
this.isShowBtn = true
this.showThrityCount = false
this.totalTime2 = 30
window.clearInterval(clock);
this.isShowBtn = true;
this.showThrityCount = false;
this.totalTime2 = 30;
}
}, 1000)
}, 1000);
},
// 生成随机数
getRandom (d, a) {
var b = a - d
var c = Math.random() * b + d
return parseInt(c, 10)
getRandom(d, a) {
var b = a - d;
var c = Math.random() * b + d;
return parseInt(c, 10);
},
// 生成圈圈
getCircle () {
var circle = document.createElement('img')
circle.setAttribute('class', 'winnerRipple')
circle.src = '../../../static/image/shuqian/winner-quan' + this.getRandom(1, 5) + '.png'
circle.style.scale = 0
circle.style.opacity = 1
circle.style.transform = 'opacity:0'
circle.style.transform = 'scale(2,2)'
circle.style.transition = 'all 2.5s'
circle.style.transform = 'easing:linear'
this.$refs.Circle.append(circle)
getCircle() {
var circle = document.createElement("img");
circle.setAttribute("class", "winnerRipple");
circle.src =
"../../../static/image/shuqian/winner-quan" +
this.getRandom(1, 5) +
".png";
circle.style.scale = 0;
circle.style.opacity = 1;
circle.style.transform = "opacity:0";
circle.style.transform = "scale(2,2)";
circle.style.transition = "all 2.5s";
circle.style.transform = "easing:linear";
this.$refs.Circle.append(circle);
}
}
}
};
</script>
src/main.js
View file @ 8f799d33
......@@ -8,24 +8,26 @@ import 'element-ui/lib/theme-chalk/index.css'
import socketio from 'socket.io-client'
import MsgBus from './assets/js/msgBus'
import { vueBaberrage } from 'vue-baberrage'
import plugin from './plugin/index'
import 'signalr'
Vue.prototype.MsgBus = MsgBus
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(vueBaberrage)
Vue.use(plugin)
Vue.prototype.$socketio = socketio
/* 路由发生变化修改页面title */
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
/* eslint-disable no-new */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
el: '#app',
router,
components: { App },
template: '<App/>'
})
\ No newline at end of file
src/plugin/index.js 0 → 100644
View file @ 8f799d33
import getHubProxy from './signalr'
export default {
install(Vue, options) {
Vue.prototype.$PROXY = getHubProxy();
}
};
\ No newline at end of file
src/plugin/signalr.js 0 → 100644
View file @ 8f799d33
const HUBNAME = 'annualLeaveHub';
let PROXY = null;
let HUB = null;
const HUB_API = 'http://localhost:7838/signalr';
// 建立连接
export function startConnection() {
HUB = $.hubConnection(HUB_API, {
qs: `i=888888&n=罗超&p=${encodeURIComponent("http://imgfile.oytour.com/New/Upload/User/20191018150051176.png")}`
})
let PROXY = HUB.createHubProxy(HUBNAME)
HUB.start().done((connection) => {
console.log('Now connected, connection ID=' + connection.id)
}).fail(() => {
console.log('Could not connect');
})
HUB.error(function(error) {
console.log('SignalR error: ' + error)
})
HUB.connectionSlow(function() {
console.log('We are currently experiencing difficulties with the connection.')
});
HUB.disconnected(function() {
console.log('disconnected')
});
return PROXY
}
// 手动创建proxy
export default function getHubProxy() {
if (!PROXY) {
PROXY = startConnection();
}
// // 注册客户端方法
// clientMethodSets.map((item)=>{
// proxy.on(item.name,item.method)
// })
return PROXY
}
\ No newline at end of file
src/store/store.js 0 → 100644
View file @ 8f799d33
import Vue from 'vue'
// import from ''
\ No newline at end of file
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