Skip to content

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

优化全局配置

parent 2cae4af9
Show 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
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
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 {
...@@ -47,66 +47,58 @@ ...@@ -47,66 +47,58 @@
-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{ .shuchaopiao .Number_prompt {
width: 100%; width: 100%;
height: 310px; height: 310px;
background: url(../../../static/image/shuqian/Number_prompt6.png) no-repeat 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;
...@@ -127,7 +119,8 @@ ...@@ -127,7 +119,8 @@
.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,
0 0 75px #ba4b0d;
font-weight: bold; font-weight: bold;
-webkit-text-fill-color: currentColor; -webkit-text-fill-color: currentColor;
} }
...@@ -142,7 +135,7 @@ ...@@ -142,7 +135,7 @@
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;
...@@ -165,10 +158,10 @@ ...@@ -165,10 +158,10 @@
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;
...@@ -185,8 +178,9 @@ ...@@ -185,8 +178,9 @@
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)
url(../../../static/image/shuqian/g_game_btn_bg2.png) left no-repeat;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: #f4d4b0; color: #f4d4b0;
...@@ -203,11 +197,11 @@ ...@@ -203,11 +197,11 @@
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;
...@@ -232,43 +226,45 @@ ...@@ -232,43 +226,45 @@
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,
0 0 75px #ba4b0d;
font-weight: bold; font-weight: bold;
-webkit-text-fill-color: currentColor; -webkit-text-fill-color: currentColor;
animation: dTime 1s infinite ease; animation: dTime 1s infinite ease;
transform: scale(2,2); transform: scale(2, 2);
margin-top:175px; 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,
.shuchaopiao .fireworks_right {
width: 200px; width: 200px;
height: 200px; height: 200px;
background: url(../../../static/image/shuqian/fk.png) no-repeat center; background: url(../../../static/image/shuqian/fk.png) no-repeat center;
...@@ -277,99 +273,77 @@ ...@@ -277,99 +273,77 @@
position: absolute; 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 {
...@@ -378,14 +352,15 @@ ...@@ -378,14 +352,15 @@
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
center/cover;
transform: translate(-50%); transform: translate(-50%);
transition-duration: 10s; transition-duration: 10s;
-moz-transition-duration: 10s; -moz-transition-duration: 10s;
-webkit-transition-duration: 10s; -webkit-transition-duration: 10s;
-o-transition-duration: 10s; -o-transition-duration: 10s;
} }
.shuchaopiao .shu-rank-list{ .shuchaopiao .shu-rank-list {
position: absolute; position: absolute;
bottom: 90px; bottom: 90px;
width: 100%; width: 100%;
...@@ -398,11 +373,11 @@ ...@@ -398,11 +373,11 @@
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 {
...@@ -441,14 +416,16 @@ ...@@ -441,14 +416,16 @@
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,
#8d2201 0 -2px 0;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
...@@ -484,44 +461,45 @@ ...@@ -484,44 +461,45 @@
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
center;
background-size: cover; background-size: cover;
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -529,17 +507,17 @@ ...@@ -529,17 +507,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.game-cover-manTop{ .game-cover-manTop {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
} }
.game-cover-manTop img{ .game-cover-manTop img {
width:100%; width: 100%;
} }
.game-cover-manBottom{ .game-cover-manBottom {
background: url(../../../static/image/shuqian/game-title-bottom.png) no-repeat; background: url(../../../static/image/shuqian/game-title-bottom.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
...@@ -548,7 +526,7 @@ ...@@ -548,7 +526,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.game-cover-div{ .game-cover-div {
text-align: center; text-align: center;
position: fixed; position: fixed;
top: 26%; top: 26%;
...@@ -580,13 +558,19 @@ ...@@ -580,13 +558,19 @@
top: 210px; top: 210px;
opacity: 0; opacity: 0;
} }
.circle-light1{ .circle-light1 {
animation:circleRoate1 5s infinite ease-in 3s forwards; animation: circleRoate1 5s infinite ease-in 3s forwards;
-webkit-animation:circleRoate1 5s infinite ease-in 3s forwards; -webkit-animation: circleRoate1 5s infinite ease-in 3s forwards;
} }
@keyframes circleRoate1{ @keyframes circleRoate1 {
0.1%{opacity:.6;transform:rotate(0)} 0.1% {
100%{opacity:.6;transform:rotate(360deg)} opacity: 0.6;
transform: rotate(0);
}
100% {
opacity: 0.6;
transform: rotate(360deg);
}
} }
.cover-box .ribbon-flag { .cover-box .ribbon-flag {
background: url(../../../static/image/shuqian/flag.png) no-repeat; background: url(../../../static/image/shuqian/flag.png) no-repeat;
...@@ -600,11 +584,23 @@ ...@@ -600,11 +584,23 @@
opacity: 0; opacity: 0;
animation: carFlag 1s 1 ease-in-out 1s forwards; animation: carFlag 1s 1 ease-in-out 1s forwards;
} }
@keyframes carFlag{ @keyframes carFlag {
0.1%{opacity:0;transform:translateY(120px)} 0.1% {
33%{opacity:1;transform:translateY(0)} opacity: 0;
66%{opacity:1;transform:translateY(20px)} transform: translateY(120px);
100%{opacity:1;transform:translateY(0)} }
33% {
opacity: 1;
transform: translateY(0);
}
66% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
} }
.cover-box .red-lefthand { .cover-box .red-lefthand {
background: url(../../../static/image/shuqian/hand01.png) no-repeat; background: url(../../../static/image/shuqian/hand01.png) no-repeat;
...@@ -616,19 +612,37 @@ ...@@ -616,19 +612,37 @@
top: 461px; top: 461px;
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;
} }
@keyframes redHand1{ @keyframes redHand1 {
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);
}
} }
@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;
...@@ -652,11 +666,23 @@ ...@@ -652,11 +666,23 @@
opacity: 0; opacity: 0;
animation: buildCloud 2s 1 ease-in-out 1.4s forwards; animation: buildCloud 2s 1 ease-in-out 1.4s forwards;
} }
@keyframes buildCloud{ @keyframes buildCloud {
0.1%{opacity:0;transform:scale(0.2)} 0.1% {
33%{opacity:1;transform:scale(1.1)} opacity: 0;
66%{opacity:1;transform:scale(0.9)} transform: scale(0.2);
100%{opacity:1;transform:scale(1)} }
33% {
opacity: 1;
transform: scale(1.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;
...@@ -669,9 +695,15 @@ ...@@ -669,9 +695,15 @@
opacity: 0; opacity: 0;
animation: glassLight 1s 1 linear 3.4s forwards; animation: glassLight 1s 1 linear 3.4s forwards;
} }
@keyframes glassLight{ @keyframes glassLight {
0.1%{opacity:1;transform:translateX(0)} 0.1% {
100%{opacity:0;transform:translateX(60px)} 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;
...@@ -693,9 +725,9 @@ ...@@ -693,9 +725,9 @@
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;
...@@ -730,17 +762,35 @@ ...@@ -730,17 +762,35 @@
opacity: 0; opacity: 0;
animation: iconCoin3 2.5s infinite ease-in 6s forwards; animation: iconCoin3 2.5s infinite ease-in 6s forwards;
} }
@keyframes iconCoin{ @keyframes iconCoin {
0.1%{opacity:1;transform:translateY(0)} 0.1% {
100%{opacity:0;transform:translateY(220px)} 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;
...@@ -758,13 +808,22 @@ ...@@ -758,13 +808,22 @@
color: #fff; color: #fff;
position: relative; position: relative;
} }
.game-coverTitle{ .game-coverTitle {
animation:titleBox .5s 1 ease-in-out forwards animation: titleBox 0.5s 1 ease-in-out forwards;
} }
@keyframes titleBox{ @keyframes titleBox {
0.1%{opacity:1;transform:scale(0.2)} 0.1% {
50%{opacity:1;transform:scale(1.1)} opacity: 1;
100%{opacity:1;transform:scale(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; */
...@@ -787,7 +846,7 @@ ...@@ -787,7 +846,7 @@
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;
} }
...@@ -795,7 +854,7 @@ ...@@ -795,7 +854,7 @@
width: 100%; width: 100%;
height: 642px; height: 642px;
position: relative; position: relative;
top:0; top: 0;
overflow: hidden; overflow: hidden;
} }
.winnerRipple { .winnerRipple {
...@@ -805,12 +864,18 @@ ...@@ -805,12 +864,18 @@
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>
...@@ -819,7 +884,7 @@ ...@@ -819,7 +884,7 @@
<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">
...@@ -844,7 +909,7 @@ ...@@ -844,7 +909,7 @@
</div> </div>
</div> </div>
<div class="game-cover-manCircleDiv"> <div class="game-cover-manCircleDiv">
<img class="winnerRipple move" src="../../../static/image/shuqian/winner-quan1.png" alt=""> <img class="winnerRipple move" src="../../../static/image/shuqian/winner-quan1.png" alt />
</div> </div>
<!-- 按钮 --> <!-- 按钮 -->
<div class="hd-game-btn-container"> <div class="hd-game-btn-container">
...@@ -864,9 +929,7 @@ ...@@ -864,9 +929,7 @@
<!-- 门帘 --> <!-- 门帘 -->
<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" v-if="showPeople">
<div class="Number_prompt_div"> <div class="Number_prompt_div">
...@@ -879,7 +942,32 @@ ...@@ -879,7 +942,32 @@
<div class="prompt_imgdiv"> <div class="prompt_imgdiv">
<div class="prompt_img"> <div class="prompt_img">
<span class="waiting-box"> <span class="waiting-box">
<img src="../../../static/image/shuqian/lantern.png" alt=""> <!-- 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> </span>
</div> </div>
</div> </div>
...@@ -895,13 +983,13 @@ ...@@ -895,13 +983,13 @@
</div> </div>
<!-- 游戏开始后倒计时 --> <!-- 游戏开始后倒计时 -->
<div class="number-ani-box" ref="countBox" v-if="showThrityCount"> <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 imgNumberImg" src="../../../static/image/shuqian/3.png" />
<img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/> <img class="img-num imgNumberImg2" src="../../../static/image/shuqian/0.png" />
</div> </div>
<div class="shu-rank-list" v-if="showMoney"> <div class="shu-rank-list" v-if="showMoney">
<div class="shu-rank-item"> <div class="shu-rank-item">
<div class="shu-rank-item-info"> <div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/> <img src="../../../static/image/shuqian/132.jpg" alt />
<span class="ranking">1</span> <span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span> <span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p> <p class="shu-rank-item-name">mr.z</p>
...@@ -912,7 +1000,7 @@ ...@@ -912,7 +1000,7 @@
</div> </div>
<div class="shu-rank-item"> <div class="shu-rank-item">
<div class="shu-rank-item-info"> <div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/> <img src="../../../static/image/shuqian/132.jpg" alt />
<span class="ranking">1</span> <span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span> <span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p> <p class="shu-rank-item-name">mr.z</p>
...@@ -923,7 +1011,7 @@ ...@@ -923,7 +1011,7 @@
</div> </div>
<div class="shu-rank-item"> <div class="shu-rank-item">
<div class="shu-rank-item-info"> <div class="shu-rank-item-info">
<img src="../../../static/image/shuqian/132.jpg" alt=""/> <img src="../../../static/image/shuqian/132.jpg" alt />
<span class="ranking">1</span> <span class="ranking">1</span>
<span class="shu-rank-item-score">14400</span> <span class="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p> <p class="shu-rank-item-name">mr.z</p>
...@@ -951,7 +1039,7 @@ ...@@ -951,7 +1039,7 @@
<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,11 +8,13 @@ import 'element-ui/lib/theme-chalk/index.css' ...@@ -8,11 +8,13 @@ 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 */
...@@ -21,8 +23,8 @@ router.beforeEach((to, from, next) => { ...@@ -21,8 +23,8 @@ router.beforeEach((to, from, next) => {
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,
......
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