Skip to content

S
SURPRISED
Commit 41708676 authored by 罗超's avatar 罗超
Browse files
Options

临时暂存

parent 9dff7650
Hide whitespace changes
Inline Side-by-side
Showing with 502 additions and 305 deletions
html/annualMeeting/Money.html
View file @ 41708676
......@@ -12,6 +12,7 @@
<title>疯狂数钞票</title>
</head>
<body style="height: 100%;overflow: hidden;width: 100%;position: fixed;">
<audio src="video/welcom_money.mp3" autoplay></audio>
<div class="money_count">
<div class="reg_bag" style='background-image: url("img/money/red_bag.png")'></div>
<div class="money_box">
......@@ -41,7 +42,7 @@
<div class="back_ico" id="back_ico"></div>
<div class="rank_ico" id="rankBtn"></div>
</div>
<div class="rank_mask">
<div class="rank_mask" id="smm">
<div style="height:3rem"></div>
<div class="close" id="closeBtn"></div>
<div class="rank_list_box">
......@@ -59,6 +60,20 @@
</div>
</div>
</div>
<div class="rank_mask rank_mask2" id="notice">
<div class="zhezao"></div>
<div class="notice_box">
<img src="../../images/aM/all_d.png" alt="" class="notice_top">
<span>恭喜你获得支付宝口令红包</span>
<div class="notice_content">
<span id="tokenReadPackage"></span>
</div>
<div class="all_Receive">
<span>立即领取</span>
</div>
<div class="all_Close"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
......@@ -67,6 +82,7 @@
let proxy;
let status=0;
let clock=null;
let isWinning=false;
function getMyRank(){
proxy.invoke('GetUserRank','Money').done(r=>{
if(r!=-1){
......@@ -127,7 +143,10 @@
}
function winning(){
proxy.on("notifyWinning",function(d){
alert("恭喜你中奖了："+d);
//alert("恭喜你中奖了："+d);
$('#notice').css('display','flex');
$('#tokenReadPackage').text(d);
$("#smm").css('display','none');
})
}
......@@ -168,20 +187,27 @@
});
//点击查看排行榜
$('#rankBtn').click(function(){
$('.rank_mask').css('display','block');
$('#smm').css('display','block');
});
$('.all_Close').click(function () {
$('#notice').css('display','none')
})
proxy.on("getChangeMenu", function(data) {
if (data.code == "Money") {
if(data.status==2){
StartGame();
}else if(data.status==1){
}else if(data.status==1||data.status==0){
//conn.disconnect();
//initConnection();
$('.play_tips').css('display','block');
$('#notice').css('display','none');
$('#smm').css('display','none');
$('.tipsDiv').text('保存体力，等待开始');
proxy.invoke('JoinGame','Money').done(data=>{
});
if(data.status==1){
proxy.invoke('JoinGame','Money').done(data=>{
});
}
}else if(data.status==-1){
window.clearInterval(clock);
clock=null;
......@@ -190,6 +216,7 @@
$('.rank_mask').css('display','block');
$('.play_tips').css('display','none');
$('.tipsDiv').text('游戏已经结束咯');
$('.tipsDiv').css('display','block');
}
}
})
......
html/annualMeeting/css/money.css
View file @ 41708676
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
margin: 0;
padding: 0
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%
html,
body {
width: 100%;
height: 100%
}
html {
font-size: 62.5%
font-size: 62.5%
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
font-size: 1.4rem
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
font-size: 1.4rem
}
* {
touch-action: pan-y
}
.money_count{
width: 100%;
height: 100%;
background: url(../img/money/money_bg.jpg) no-repeat center;
background-size: 100% auto;
position: relative;
overflow: hidden;
}
.reg_bag{
width: 86%;
height: 100%;
position: absolute;
bottom: -20px;
background: no-repeat center bottom;
background-size: 100% auto;
left: 7%;
touch-action: pan-y
}
.money_count {
width: 100%;
height: 100%;
background: url(../img/money/money_bg.jpg) no-repeat center;
background-size: 100% auto;
position: relative;
overflow: hidden;
}
.reg_bag {
width: 86%;
height: 100%;
position: absolute;
bottom: -20px;
background: no-repeat center bottom;
background-size: 100% auto;
left: 7%;
}
.money_count .money_box {
width: 66%;
height: 100%;
position: relative;
margin: 0 auto;
width: 66%;
height: 100%;
position: relative;
margin: 0 auto;
}
.money_count .mask {
width: 86%;
height: 135px;
position: absolute;
bottom: -20px;
left: 7%;
background: url(../img/money/mask.png) no-repeat center 0;
background-size: 100% auto;
z-index: 501;
pointer-events: none;
width: 86%;
height: 135px;
position: absolute;
bottom: -20px;
left: 7%;
background: url(../img/money/mask.png) no-repeat center 0;
background-size: 100% auto;
z-index: 501;
pointer-events: none;
}
.money_count .gold {
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
background: url(../img/money/gold.png) no-repeat center 0;
background-size: 100% auto;
z-index: 502;
pointer-events: none;
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
background: url(../img/money/gold.png) no-repeat center 0;
background-size: 100% auto;
z-index: 502;
pointer-events: none;
}
.money_count #touchBox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 999;
}
.wait_tips {
position: absolute;
top: 50%;
margin-top: -50px;
color: #fdbe22;
font-size: 2.5rem;
width: 100%;
font-weight: bold;
background: rgba(17,17,17,0.6);
padding: 20px 0;
text-align: center;
z-index: 998;
display:none;
position: absolute;
top: 50%;
margin-top: -50px;
color: #fdbe22;
font-size: 2.5rem;
width: 100%;
font-weight: bold;
background: rgba(17, 17, 17, 0.6);
padding: 20px 0;
text-align: center;
z-index: 998;
display: none;
}
.opt {
position: absolute;
top: 15px;
left: 15px;
z-index: 9999;
font-size: 1.4rem;
position: absolute;
top: 15px;
left: 15px;
z-index: 9999;
font-size: 1.4rem;
}
.opt .back_ico {
width: 50px;
background: url(../img/money/back_ico.png) no-repeat center;
background-size: contain;
display: inline-block;
padding-top: 41px;
font-weight: bold;
color: #fdbe22;
width: 50px;
background: url(../img/money/back_ico.png) no-repeat center;
background-size: contain;
display: inline-block;
padding-top: 41px;
font-weight: bold;
color: #fdbe22;
}
.opt .rank_ico {
width: 50px;
background: url(../img/money/rank_ico.png) no-repeat center;
background-size: contain;
padding-top: 41px;
display: inline-block;
font-weight: bold;
color: #fdbe22;
width: 50px;
background: url(../img/money/rank_ico.png) no-repeat center;
background-size: contain;
padding-top: 41px;
display: inline-block;
font-weight: bold;
color: #fdbe22;
}
.time {
position: absolute;
top: 15px;
right: 20px;
font-weight: bold;
font-size: 2rem;
color: #fff;
position: absolute;
top: 15px;
right: 20px;
font-weight: bold;
font-size: 2rem;
color: #fff;
}
.time div {
display: inline-block;
position: relative;
top: -3px;
display: inline-block;
position: relative;
top: -3px;
}
.time span {
font-size: 3.6rem;
color: #fdbe23;
font-weight: bold;
padding: 0 5px;
font-size: 3.6rem;
color: #fdbe23;
font-weight: bold;
padding: 0 5px;
}
.rank_mask {
position: absolute;
background-color: rgba(0,0,0,.5);
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
position: absolute;
background-color: rgba(0, 0, 0, .5);
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
}
.rank_mask2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
}
.rank_mask .close {
width: 32px;
height: 32px;
background: url(../img/money/rank_close.png) no-repeat center;
position: absolute;
top: 75px;
right: 20px;
background-size: contain;
z-index: 9999;
width: 32px;
height: 32px;
background: url(../img/money/rank_close.png) no-repeat center;
position: absolute;
top: 75px;
right: 20px;
background-size: contain;
z-index: 9999;
}
.rank_mask .rank_list_box {
background: url(../img/money/rank_list_boxBs.png) no-repeat;
background-size: 100% 100%;
width: 89%;
margin: 0 auto;
position: relative;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
margin-top: 20%;
padding: 0 11px 18px;
background: url(../img/money/rank_list_boxBs.png) no-repeat;
background-size: 100% 100%;
width: 89%;
margin: 0 auto;
position: relative;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
margin-top: 20%;
padding: 0 11px 18px;
}
.rank_mask .rank_dec {
width: 100%;
height: 178px;
background: url(../img/money/rank_list_dec.png) no-repeat center;
background-size: contain;
position: absolute;
top: -89px;
left: 0;
width: 100%;
height: 178px;
background: url(../img/money/rank_list_dec.png) no-repeat center;
background-size: contain;
position: absolute;
top: -89px;
left: 0;
}
.rank_list_ranking {
padding-top: 70px;
width: 100%;
margin: 10px auto 0;
padding-top: 70px;
width: 100%;
margin: 10px auto 0;
}
.rank_list_rankingBs {
background: url(../img/money/rankBs.png) no-repeat;
background-size: 100% 100%;
padding-bottom: 14px;
}
.rank_mask .my_rank, .rank_mask .my_money {
font-size: 2rem;
font-weight: bold;
text-align: center;
height: 5.5rem;
background: url(../img/money/rank_myFraction.png) no-repeat bottom center;
background-size: 87%;
background: url(../img/money/rankBs.png) no-repeat;
background-size: 100% 100%;
padding-bottom: 14px;
}
.rank_mask .my_rank,
.rank_mask .my_money {
font-size: 2rem;
font-weight: bold;
text-align: center;
height: 5.5rem;
background: url(../img/money/rank_myFraction.png) no-repeat bottom center;
background-size: 87%;
}
.my_rankTop {
margin: 0 auto;
background-image: -webkit-linear-gradient(bottom,#c58726,#843a06,#211e14);
-webkit-background-clip: text;
-webkit-text-fill-color: #d8a8a800;
margin: 0 auto;
background-image: -webkit-linear-gradient(bottom, #c58726, #843a06, #211e14);
-webkit-background-clip: text;
-webkit-text-fill-color: #d8a8a800;
}
.rank_myTop {
color: #9a5612;
text-shadow: -2px -2px 0 #FFF033;
font-size: 2.4rem;
color: #9a5612;
text-shadow: -2px -2px 0 #FFF033;
font-size: 2.4rem;
}
.rank_mask .rank {
height: 300px;
overflow-y: auto;
padding: 5px 18px;
height: 300px;
overflow-y: auto;
padding: 5px 18px;
}
.play_tips {
position: absolute;
background-color: rgba(0,0,0,.5);
z-index: 999;
top: 0;
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, .5);
z-index: 999;
top: 0;
width: 100%;
height: 100%;
}
.play_tips .arrow {
width: 40%;
height: 100%;
background: url(../img/money/arrow.png) no-repeat center;
background-size: contain;
margin: 30px auto;
width: 40%;
height: 100%;
background: url(../img/money/arrow.png) no-repeat center;
background-size: contain;
margin: 30px auto;
}
.play_tips .hand {
width: 120px;
height: 120px;
background: url(../img/money/hand.png) no-repeat center;
background-size: contain;
position: absolute;
top: 350px;
left: 180px;
-webkit-animation: handSwipe 1.8s ease infinite;
-moz-animation: handSwipe 1.8s ease infinite;
animation: handSwipe 1.8s ease infinite;
width: 120px;
height: 120px;
background: url(../img/money/hand.png) no-repeat center;
background-size: contain;
position: absolute;
top: 350px;
left: 180px;
-webkit-animation: handSwipe 1.8s ease infinite;
-moz-animation: handSwipe 1.8s ease infinite;
animation: handSwipe 1.8s ease infinite;
}
@-webkit-keyframes handSwipe {
0{
top: 400px;
opacity: 1;
}
70%{
top: 250px;x
opacity: 1;
}
100%{
top: 250px;
opacity: 0;
}
0 {
top: 400px;
opacity: 1;
}
70% {
top: 250px;
x opacity: 1;
}
100% {
top: 250px;
opacity: 0;
}
}
@-moz-keyframes handSwipe {
0{
top: 400px;
opacity: 1;
}
70%{
top: 250px;
opacity: 1;
}
100%{
top: 250px;
opacity: 0;
}
0 {
top: 400px;
opacity: 1;
}
70% {
top: 250px;
opacity: 1;
}
100% {
top: 250px;
opacity: 0;
}
}
@keyframes handSwipe {
0{
top: 400px;
opacity: 1;
}
70%
{
top: 250px;
opacity: 1;
}
100%
{
top: 250px;
opacity: 0;
}
}
.money_box img{
position: absolute;
bottom:-25px;
width:100%;
}
.tipsDiv{
position: absolute;
top:50%;
width:100%;
height:5rem;
background:rgba(0,0,0,0.5);
color:#fdbe23;
text-align: center;
line-height: 5rem;
font-size:2.5rem;
}
.circleCount{
position: absolute;
width:5rem;
height:5rem;
top:50%;
left:50%;
margin-left:-2.5rem;
color:#fdbe23;
font-size:3rem;
border-radius:50%;
text-align: center;
line-height: 5rem;
border:0.3rem solid #fdbe23;
display: none;
animation: numberAni 1s infinite ease;
display:none;
0 {
top: 400px;
opacity: 1;
}
70% {
top: 250px;
opacity: 1;
}
100% {
top: 250px;
opacity: 0;
}
}
.money_box img {
position: absolute;
bottom: -25px;
width: 100%;
}
.tipsDiv {
position: absolute;
top: 50%;
width: 100%;
height: 5rem;
background: rgba(0, 0, 0, 0.5);
color: #fdbe23;
text-align: center;
line-height: 5rem;
font-size: 2.5rem;
}
.circleCount {
position: absolute;
width: 5rem;
height: 5rem;
top: 50%;
left: 50%;
margin-left: -2.5rem;
color: #fdbe23;
font-size: 3rem;
border-radius: 50%;
text-align: center;
line-height: 5rem;
border: 0.3rem solid #fdbe23;
display: none;
animation: numberAni 1s infinite ease;
display: none;
}
@keyframes numberAni {
1% {
transform: scale(8);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(8);
opacity: 0
}
1% {
transform: scale(8);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(8);
opacity: 0
}
}
.rank_mask .rank-num.num1 {
background: url(../img/money/new-number1.png) no-repeat center;
background-size: contain;
background: url(../img/money/new-number1.png) no-repeat center;
background-size: contain;
}
.rank_mask .rank-num.num2 {
background: url("../img/mobile_img/rank_num2.png") no-repeat center;
background-size: contain;
background: url("../img/mobile_img/rank_num2.png") no-repeat center;
background-size: contain;
}
.rank_mask .rank-num.num3 {
background: url("../img/mobile_img/rank_num3.png") no-repeat center;
background-size: contain;
background: url("../img/mobile_img/rank_num3.png") no-repeat center;
background-size: contain;
}
.rank_mask .rank-num {
width: 22px;
height: 28px;
float: left;
line-height: 28px;
width: 22px;
height: 28px;
float: left;
line-height: 28px;
}
.rank_mask .my_rank {
padding-top: 18px;
padding-top: 18px;
}
.my_rankTop{
margin: 0 auto;
background-image: -webkit-linear-gradient(bottom,#c58726,#843a06,#211e14);
-webkit-background-clip: text;
-webkit-text-fill-color: #d8a8a800;
.my_rankTop {
margin: 0 auto;
background-image: -webkit-linear-gradient(bottom, #c58726, #843a06, #211e14);
-webkit-background-clip: text;
-webkit-text-fill-color: #d8a8a800;
}
.rank_mask .rank-row span {
display: inline-block;
display: inline-block;
}
.rank_mask .rank-row {
margin-top: 5px;
color: #bb5b15;
font-weight: bold;
margin-top: 5px;
color: #bb5b15;
font-weight: bold;
}
.rank_mask .rank-score {
padding-left: 3px;
width: 58px;
text-align: right;
padding-right: 3px;
border-left: 2px solid #ce7e61;
color: #c56a09;
font-weight: bold;
padding-left: 3px;
width: 58px;
text-align: right;
padding-right: 3px;
border-left: 2px solid #ce7e61;
color: #c56a09;
font-weight: bold;
}
.rank_mask .rank-name {
width: 115px;
text-align: left;
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
position: relative;
top: 3px;
width: 115px;
text-align: left;
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
position: relative;
top: 3px;
}
.rank_mask .rank-row img {
width: 28px;
height: 28px;
vertical-align: middle;
border-radius: 50%;
position: relative;
top: -1px;
margin-left: 15px;
width: 28px;
height: 28px;
vertical-align: middle;
border-radius: 50%;
position: relative;
top: -1px;
margin-left: 15px;
}
.notice_box {
width: 23.33rem;
height: 21rem;
background-image: url('../../../images/aM/all_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.notice_top {
width: 5.25rem;
height: 5.25rem;
margin-top: 2.33rem;
}
.notice_box span {
color: #893630;
font-size: 1.5rem;
margin-top: 1.2rem;
}
.notice_content {
width: calc(100% - 5rem);
height: 2.5rem;
border-radius: 0.66rem;
border: 1px solid #C8532B;
background: white;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1.66rem;
}
.notice_content span {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
margin-top: 0;
white-space: nowrap;
font-size: 1.2rem;
text-align: center;
}
.all_Receive {
width: 12.5rem;
height: 2.5rem;
background: #F9CB3B;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1.2rem;
border-radius: 1.35rem;
}
.all_Receive span {
color: #893630;
font-size: 1.1rem;
margin-top: 0;
}
.all_Close {
position: absolute;
left: 50%;
bottom: -4rem;
margin-left: -1.7rem;
width: 2.83rem;
height: 2.83rem;
background-image: url('../../../images/aM/close.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
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