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