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
*.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
......@@ -37,7 +37,7 @@
z-index: 1;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in
-webkit-animation-timing-function: linear, ease-in;
}
#leafContainer > div > img {
......@@ -47,66 +47,58 @@
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%
-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)
0% {
-webkit-transform: scale(-1, 1) rotate(50deg);
}
100%
{
-webkit-transform: scale(-1, 1) rotate(-50deg)
100% {
-webkit-transform: scale(-1, 1) rotate(-50deg);
}
}
.shuchaopiao .Number_prompt{
.shuchaopiao .Number_prompt {
width: 100%;
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;
position: absolute;
z-index: 700;
top: 35%;
}
.shuchaopiao .Number_prompt_div{
margin-top:120px;
.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;
......@@ -127,7 +119,8 @@
.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;
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;
}
......@@ -142,7 +135,7 @@
height: 52px;
}
.shuchaopiao .prompt_img {
width: 790px;
width: 900px;
margin: 20px auto 0 auto;
position: relative;
height: 70px;
......@@ -165,10 +158,10 @@
border-radius: 50%;
margin-top: 5px;
}
.shuchaopiao .hd-game-btn-container{
.shuchaopiao .hd-game-btn-container {
position: absolute;
bottom: 5px;
right: .5%;
right: 0.5%;
z-index: 1000;
width: 160px;
height: 80px;
......@@ -185,8 +178,9 @@
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;
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;
......@@ -203,11 +197,11 @@
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;
......@@ -232,43 +226,45 @@
font-size: 150px;
line-height: 150px;
height: 150px;
font-family: "Arial",cursive;
font-family: "Arial", cursive;
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;
-webkit-text-fill-color: currentColor;
animation: dTime 1s infinite ease;
transform: scale(2,2);
margin-top:175px;
transform: scale(2, 2);
margin-top: 175px;
}
@keyframes dTime {
1% {
transform: scale(2);
opacity: 1
opacity: 1;
}
90% {
transform: scale(1);
opacity: 0
opacity: 0;
}
100% {
transform: scale(2);
opacity: 0
opacity: 0;
}
}
.shuchaopiao .fireworks {
width: 100%;
height: 100%;
position: relative
position: relative;
}
.shuchaopiao .fireworks_left{
.shuchaopiao .fireworks_left {
top: 38%;
left: 25%;
}
.shuchaopiao .fireworks_right {
top: 28%;
right: 23%
right: 23%;
}
.shuchaopiao .fireworks_left, .shuchaopiao .fireworks_right {
.shuchaopiao .fireworks_left,
.shuchaopiao .fireworks_right {
width: 200px;
height: 200px;
background: url(../../../static/image/shuqian/fk.png) no-repeat center;
......@@ -277,99 +273,77 @@
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 {
......@@ -378,14 +352,15 @@
left: 50%;
width: 35px;
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%);
transition-duration: 10s;
-moz-transition-duration: 10s;
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
}
.shuchaopiao .shu-rank-list{
.shuchaopiao .shu-rank-list {
position: absolute;
bottom: 90px;
width: 100%;
......@@ -398,11 +373,11 @@
display: inline-block;
z-index: 2;
}
.shuchaopiao .shu-rank-item-head{
.shuchaopiao .shu-rank-item-head {
background: url(../../../static/image/shuqian/shu033.png);
height: 22px;
}
.shuchaopiao .shu-rank-item-body{
.shuchaopiao .shu-rank-item-body {
background: url(../../../static/image/shuqian/shu022.png);
}
.shuchaopiao .shu-rank-item-footer {
......@@ -441,14 +416,16 @@
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;
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-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;
......@@ -484,44 +461,45 @@
border-radius: 50%;
animation: numberAni 1s infinite ease;
background: url(../../../static/image/shuqian/number-ani-boxBs.png);
background-size: 100% 100%
background-size: 100% 100%;
}
.shuchaopiao .number-ani-box .imgNumberImg {
position: absolute;
left: 100px;
top: 175px;
width: 178px
width: 178px;
}
.shuchaopiao .number-ani-box .imgNumberImg2 {
position: absolute;
right: 110px;
top: 175px;
width: 178px
width: 178px;
}
@keyframes numberAni {
1% {
transform: scale(3);
opacity: 1
opacity: 1;
}
90% {
transform: scale(1);
opacity: 0
opacity: 0;
}
100% {
transform: scale(3);
opacity: 0
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;
.game-cover-man {
background: url(../../../static/image/shuqian/new-back-top3.jpg) no-repeat
center;
background-size: cover;
position: absolute;
left: 0;
......@@ -529,17 +507,17 @@
width: 100%;
height: 100%;
}
.game-cover-manTop{
.game-cover-manTop {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.game-cover-manTop img{
width:100%;
.game-cover-manTop img {
width: 100%;
}
.game-cover-manBottom{
.game-cover-manBottom {
background: url(../../../static/image/shuqian/game-title-bottom.png) no-repeat;
background-size: 100% 100%;
position: absolute;
......@@ -548,7 +526,7 @@
width: 100%;
height: 100%;
}
.game-cover-div{
.game-cover-div {
text-align: center;
position: fixed;
top: 26%;
......@@ -580,13 +558,19 @@
top: 210px;
opacity: 0;
}
.circle-light1{
animation:circleRoate1 5s infinite ease-in 3s forwards;
-webkit-animation:circleRoate1 5s infinite ease-in 3s forwards;
.circle-light1 {
animation: circleRoate1 5s infinite ease-in 3s forwards;
-webkit-animation: circleRoate1 5s infinite ease-in 3s forwards;
}
@keyframes circleRoate1{
0.1%{opacity:.6;transform:rotate(0)}
100%{opacity:.6;transform:rotate(360deg)}
@keyframes circleRoate1 {
0.1% {
opacity: 0.6;
transform: rotate(0);
}
100% {
opacity: 0.6;
transform: rotate(360deg);
}
}
.cover-box .ribbon-flag {
background: url(../../../static/image/shuqian/flag.png) no-repeat;
......@@ -600,11 +584,23 @@
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)}
@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-lefthand {
background: url(../../../static/image/shuqian/hand01.png) no-repeat;
......@@ -616,19 +612,37 @@
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
.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 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;
......@@ -652,11 +666,23 @@
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)}
@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);
}
}
.cover-box .glass-light {
background: url(../../../static/image/shuqian/sun-light.png) no-repeat;
......@@ -669,9 +695,15 @@
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)}
@keyframes glassLight {
0.1% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(60px);
}
}
.cover-box .dai-left {
background: url(../../../static/image/shuqian/money01.png) no-repeat;
......@@ -693,9 +725,9 @@
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;
......@@ -730,17 +762,35 @@
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)}
@keyframes iconCoin {
0.1% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
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;
......@@ -758,13 +808,22 @@
color: #fff;
position: relative;
}
.game-coverTitle{
animation:titleBox .5s 1 ease-in-out forwards
.game-coverTitle {
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)}
@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; */
......@@ -787,7 +846,7 @@
height: 90px;
top: 72px;
-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-text-fill-color: transparent;
}
......@@ -795,7 +854,7 @@
width: 100%;
height: 642px;
position: relative;
top:0;
top: 0;
overflow: hidden;
}
.winnerRipple {
......@@ -805,12 +864,18 @@
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>
......@@ -819,7 +884,7 @@
<template v-if="showFirst">
<div class="game-cover-man">
<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 class="game-cover-manBottom"></div>
<div class="game-cover-div">
......@@ -844,7 +909,7 @@
</div>
</div>
<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 class="hd-game-btn-container">
......@@ -864,9 +929,7 @@
<!-- 门帘 -->
<div class="shuMoney-curtain"></div>
<!-- 飘钱 -->
<div class="leafContainer" id="leafContainer">
</div>
<div class="leafContainer" id="leafContainer"></div>
<!-- 准备人员名单 -->
<div class="Number_prompt" v-if="showPeople">
<div class="Number_prompt_div">
......@@ -879,7 +942,32 @@
<div class="prompt_imgdiv">
<div class="prompt_img">
<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>
</div>
</div>
......@@ -895,13 +983,13 @@
</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'/>
<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=""/>
<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>
......@@ -912,7 +1000,7 @@
</div>
<div class="shu-rank-item">
<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="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
......@@ -923,7 +1011,7 @@
</div>
<div class="shu-rank-item">
<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="shu-rank-item-score">14400</span>
<p class="shu-rank-item-name">mr.z</p>
......@@ -951,7 +1039,7 @@
<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()
}
}, 1000)
window.clearInterval(clock);
this.showCount = false;
this.totalTime = 3;
this.showThrityCount = true;
this.showMoney = true;
this.countDown30();
}
}, 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,11 +8,13 @@ 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 */
......@@ -21,8 +23,8 @@ router.beforeEach((to, from, next) => {
document.title = to.meta.title
}
next()
})
/* eslint-disable no-new */
})
/* eslint-disable no-new */
new Vue({
el: '#app',
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