Commit 3f3326b9 authored by 华国豪's avatar 华国豪 🙄
parents 35d40ea0 c1b2c738
......@@ -54,24 +54,89 @@
</div>
</div>
</div>
<!-- 中奖弹窗-->
<div class="rank_mask" 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>121212</span>
</div>
<div class="all_Receive">
<span>立即领取</span>
</div>
<div class="all_Close"></div>
</div>
</div>
<!-- 老鼠活动进行中-->
<div class="rank_mask" id="activity">
<div class="zhezao"></div>
<div class="activity_box">
<span class="activity_title">打老鼠活动正在进行</span>
<div class="activity_Receive" onclick="JumpActivity('mouse')">
<span>立即参与</span>
</div>
<div class="activity_Close"></div>
</div>
</div>
<!-- 数钞票活动进行中-->
<div class="rank_mask" id="activity2">
<div class="zhezao"></div>
<div class="activity_box2">
<span class="activity_title">数钞票活动正在进行</span>
<div class="activity_Receive" onclick="JumpActivity('money')">
<span>立即参与</span>
</div>
<div class="activity_Close2"></div>
</div>
</div>
<!-- 我的奖品-->
<div class="rank_mask" id="prize">
<div class="zhezao"></div>
<div class="prize_box">
<img id="barcode" />
<div class="prize_Close"></div>
</div>
</div>
</div>
</body>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script src="./js/JsBarcode.all.min.js"></script>
<script>
var href='GT_activities.html?customerId=1951&EmName=张建国&imgUrl=http://imgfile.oytour.com/New/Upload/User/20191018150051176.png&GiftCode=21312312323';
var param = href.split('?')[1].split("&");
var customerId = param[0].split('=')[1];
var EmName = param[1].split('=')[1];
var imgUrl = param[2].split('=')[1];
var GiftCode = param[3].split('=')[1];
var activity ={
customerId:customerId,
EmName:EmName,
imgUrl:imgUrl,
}
localStorage.activity = JSON.stringify(activity)
var MenusList=[];
$("input").on("blur",function(){
window.scroll(0,0);//失焦后强制让页面归位
});
var conn = $.hubConnection("http://192.168.2.66:7838/signalr", {
qs: `i=1951&n=张建国&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}`
qs: `i=${customerId}&n=${EmName}&p=${encodeURIComponent(imgUrl)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
......@@ -99,21 +164,46 @@
//年会首页菜单
proxy.on("getMenus", function (data){
console.log(data)
MenusList = data
$(".menu_view").remove()
var html="";
$.each(data, function(i,v) {
html+='<div class="menu_view" onclick="menu_btn('+data[i].Id+')">\n' +
' <img src="../../images/aM/menu@2x.png" alt="">\n' +
' <img src="../../images/aM/menu.png" alt="">\n' +
// ' <img src="http://imgfile.oytour.com/New" '+data[i].Id+' alt="">\n' +
' <p>'+data[i].MName+'</p>\n' +
' <img src="../../images/aM/hourglass.png" class="hourglass"/>\n' +
' </div>'
});
$(".menu").append(html);
});
//节目单
proxy.on('getPrograms',function (data) {
proxy.on("getChangeMenu", function(data) {
console.log(data)
if(data.code == 'Mouse'){
if(data.status ==1 ){
$('#activity').css('display','flex')
renderHourglass(data.code,'block')
}else if(data.status ==-1 || data.status ==-1 ){
renderHourglass(data.code,'none')
}
}
if (data.code == "Money") {
if(data.status ==1 ){
$('#activity2').css('display','flex')
renderHourglass(data.code,'block')
}else if(data.status ==-1 || data.status ==-1 ){
renderHourglass(data.code,'none')
}
}
})
//节目单
proxy.on('getPrograms',function (data) {
programguides(data)
});
......@@ -122,13 +212,34 @@
$(".rNumber").html(data)
})
}
function renderHourglass(code,type){
var key = 0
for(var i=0;i<MenusList.length ; i++){
if(MenusList[i].Code == code){
key = i
}
}
if(type== 'block'){
$('.menu_view:eq('+key+') .hourglass').css('display','block')
}else {
$('.menu_view:eq('+key+') .hourglass').css('display','none')
}
}
function menu_btn(id) {
if(id == 1){
window.location.href = './HitMouse.html'
window.location.href = `./HitMouse.html`
}
if(id == 2){
window.location.href = './money.html'
}
if(id == 4){
window.location.href = './vote.html'
}
if(id ==5 ){ //我的礼品
$('#prize').css('display','flex')
}
}
......@@ -149,7 +260,7 @@
var html_l="";
var html_c="";
var html_r="";
$.each(rightList, function(i,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
$.each(rightList, function(i,v) {
if(i==0){
html_l+='<div class="right_box" style="margin-top:0 ">\n' +
' <p class="time">'+rightList[i].StartTime+'</p>\n' +
......@@ -170,7 +281,7 @@
});
$(".c_right").append(html_l);
$.each(data, function(i,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
$.each(data, function(i,v) {
html_c+=' <div class="c_xian">\n' +
' <div class="yuan"></div>\n' +
' <div class="yuan_x"></div>\n' +
......@@ -178,7 +289,7 @@
});
$(".c_center").append(html_c);
$.each(leftList, function(i,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
$.each(leftList, function(i,v) {
html_r+='<div class="letf_box" style="margin-top: 0.75rem">\n' +
' <div class="time">\n' +
' <p>'+leftList[i].StartTime+'</p>\n' +
......@@ -191,6 +302,39 @@
});
$(".c_left").append(html_r);
}
$('.all_Close').click(function () {
$('#notice').css('display','none')
})
$('.activity_Close').click(function () {
$('#activity').css('display','none')
})
$('.activity_Close2').click(function () {
$('#activity2').css('display','none')
})
$('.prize_Close').click(function () {
$('#prize').css('display','none')
})
//条形码生成
var barcode = document.getElementById('barcode'),
str = GiftCode,
options = {
format: "CODE128",
displayValue: false,
fontSize: 18,
height: 100
};
JsBarcode(barcode, str, options); //原生
// $('#barcode').JsBarcode(str, options); //jQuery
function JumpActivity(type) {//活动进行时的跳转
if(type == 'mouse'){
window.location.href = `./HitMouse.html`
}
if(type == 'money'){
window.location.href = './money.html'
}
}
</script>
</html>
......@@ -14,7 +14,7 @@
<body>
<div class="Box">
<!-- <div class="bbb" style="position: fixed;font-size: 0.15rem">测试</div>-->
<!-- 头部一块-->
<div class="top">
<div class="top_title">
......@@ -93,17 +93,17 @@
<p>游戏即将开始</p>
</div>
<div class="status2">
<p>抱歉!游戏正在进行中</p>
<p>你来晚了,游戏已经开始了</p>
</div>
<div class="status3">
<p>游戏已结束</p>
</div>
<div class="circleCount">3</div>
<div class="circleCount">ready</div>
<audio id="audio" src="img/game_running.mp3" autoplay="autoplay">
您的浏览器不支持audio标签
</audio>
<audio id="audio2" src="img/ready321go.mp3" autoplay="autoplay">
<audio id="audio2" src="img/ready321go.mp3">
您的浏览器不支持audio标签
</audio>
......@@ -115,9 +115,8 @@
<p>排行榜</p>
</div>
<div class="rank_y">
<p>你的排名 第</p>
<p class="o_ranking">1</p>
<p></p>
<p>你的排名 </p>
<p class="o_ranking"></p>
</div>
<div class="rank_i">
......@@ -141,9 +140,6 @@
</div>
<div class="all_Close"></div>
</div>
</div>
</div>
......@@ -156,17 +152,17 @@
<script>
var activity = JSON.parse(localStorage.activity);
var status=0; //活动状态
var laoshudata = [];//老鼠数据
var audio=document.getElementById("audio");
var audio2=document.getElementById("audio2");
audio.play();
// audio.play();
audio.loop=true;
var conn = $.hubConnection("http://192.168.2.66:7838/signalr", {
qs: `i=1755&n=大力哥&p=${encodeURIComponent(
"https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1037708644,3701745237&fm=58"
)}`
qs: `i=${activity.customerId}&n=${activity.EmName}&p=${encodeURIComponent(activity.imgUrl)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
......@@ -204,6 +200,7 @@
$('.status3').css({'display':'none'});
}
if(data.status==-1){
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
$('.status2').css({'display':'none'});
......@@ -226,9 +223,14 @@
function ownranking() {
proxy.invoke("GetUserRank", 'Mouse').done(data => {
console.log(data)
$('.o_ranking').html(data)
if(data != -1){
$('.o_ranking').html('第'+data+'名')
}else {
$('.o_ranking').html('未上榜')
}
//显示统计窗口
$('#rank_mask').css('display','block');
});
}
......@@ -238,6 +240,7 @@
console.log(data)
laoshudata = JSON.parse(data.data)
console.log(laoshudata)
if(data.status==0){
$('.status').css({'display':'flex'});
$('.status1').css({'display':'none'});
......@@ -267,10 +270,14 @@
})
proxy.on('notifyMouseGamerResult',function (data) {
getRankList(data)
ownranking() //获取自己排名
})
}
$('.bbb').click(function () {
StartGame()
})
// sort 是顺序,score分数,type -1鼠,2猪,location位置(出现在第几个洞),interval时间(与下一个间隔时间单位:毫秒)
var key = 0
var timer1;
......@@ -283,7 +290,7 @@
for (var i=0 ;i<laoshudata.length; i++){
laoshudata[i].noclick =0; //0 为未点击 1为点击过
}
timer1 = setInterval(increase ,laoshudata[key].Interval+300)
timer1 = setInterval(increase ,laoshudata[key].Interval+300)
}
function increase() {
......@@ -293,16 +300,14 @@
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/mouse.png" alt="" class="zoon">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
//为老鼠的时候加100分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').click(function () {
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score + 500;
$('.score').html(score + '分')
sendScore(score)
$('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
$('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score"> +500 </p>');
$('.hole-container .hole:eq('+wz+') .mouse').append('<p class="show_score">+500</p>');
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
$('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
......@@ -321,12 +326,13 @@
}
if(laoshudata[key].Type == 2){
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="" class="zoon>');
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="" class="zoon">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
$('.hole-container .hole:eq('+wz+') .mouse .zoon').click(function () {
if(laoshudata[key].noclick == 0){
score=score- 100;
$('.score').html(score+ '分')
//为老鼠的时候加100分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score - 100;
$('.score').html(score + '分')
sendScore(score)
$('.hole-container .hole:eq(' + wz + ') .mouse .zoon').remove()
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/dadao.png" alt="" class="yan">');
......@@ -334,11 +340,15 @@
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse .yan').remove();
$('.hole-container .hole:eq('+wz+') .mouse .show_score').remove();
},300)
laoshudata[key].noclick=1
}
})
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.65rem"},600);
//等动画消失之后删除元素
setTimeout(function () {
$('.hole-container .hole:eq('+wz+') .mouse').empty();
},1200)
......@@ -349,11 +359,16 @@
}
key++
}
var Count_key = 0
function StartGame() {
audio2.play()
Count=3;
Count=5;
Count2=30;
Count_key = 0;//初始为0
$('.circleCount').html('ready');
var Count_c=['ready','3','2','1','go']
$('.circleCount').css('display','block');
$('.status').css({'display':'none'});
$('.status1').css({'display':'none'});
......@@ -361,7 +376,8 @@
$('.status3').css({'display':'none'});
var clock = window.setInterval(function(){
Count--;
$('.circleCount').html(Count);
Count_key++
$('.circleCount').html(Count_c[Count_key]);
if(Count==0){
$('.circleCount').css('display','none');
$('.status').css({'display':'none'});
......@@ -384,8 +400,8 @@
window.clearInterval(clock);
window.clearInterval(timer1); //清除老鼠
sendScore(score)
ownranking() //获取自己排名
// ownranking() //获取自己排名
$('#rank_mask').css('display','block');
}
}, 1000)
}
......@@ -395,7 +411,7 @@
$.each(data, function(i,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
html+='<div class="rank_item">\n' +
' <div class="rank_itemL">\n' +
' <div class="rank_num">'+data[i].r+'</div>\n' +
' <div class="rank_num">'+(i+1)+'</div>\n' +
' <p>'+data[i].n+'</p>\n' +
' </div>\n' +
' <div class="rank_itemR">\n' +
......@@ -406,6 +422,7 @@
});
$(".rank_i").append(html);
};
$('.Close').click(function () {
$('#rank_mask').css('display','none')
})
......@@ -418,6 +435,7 @@
$('.return').click(function () {
//返回首页
window.history.back()
})
......
......@@ -9,10 +9,25 @@
<meta name="x5-fullscreen" content="true">
<meta name="360-fullscreen" content="true">
<link rel="stylesheet" href="css/money.css" type="text/css" />
<title>疯狂数钞票</title>
</head>
<body style="height: 100%;overflow: hidden;width: 100%;position: fixed;">
<audio src="video/welcom_money.mp3" autoplay></audio>
<a id="goali" href="alipays://platformapi/startapp" target="_blank" style="position: absolute;z-index: -1;">GO</a>
<div class="money_count">
<div class="useropera">
<div class="content-opt-title">
<button type="button" class="home" id="back_ico"></button>
<span class="title">疯狂数钞票</span>
<button type="button" class="rank" id="rankBtn"></button>
</div>
</div>
<div class="score">分数:<span id="my_score">0</span></div>
<div class="timer">
倒计时:<span id="time">0</span>
<img class="ico" src="img/money/timer.png"/>
</div>
<div class="reg_bag" style='background-image: url("img/money/red_bag.png")'></div>
<div class="money_box">
<img src="img/money/money.png" alt=""/>
......@@ -24,12 +39,12 @@
<!-- <input type="button" value="开始" id="Start" style="z-index:9999;position: fixed;top:0;">
<input type="button" value="重置" id="reset" style="z-index:9999;position: fixed;top:0;left:40px;"> -->
<div class="time">
<!-- <div class="time">
<div class="time-txt">倒计时</div>
<span>
<span id="time">0</span>秒
</span>
</div>
</div> -->
<div class="tipsDiv">保存体力,等待开始</div>
<div class="circleCount">3</div>
</div>
......@@ -37,11 +52,11 @@
<div class="arrow"></div>
<div class="hand"></div>
</div>
<div class="opt">
<!-- <div class="opt">
<div class="back_ico" id="back_ico"></div>
<div class="rank_ico" id="rankBtn"></div>
</div>
<div class="rank_mask">
</div> -->
<div class="rank_mask" id="smm">
<div style="height:3rem"></div>
<div class="close" id="closeBtn"></div>
<div class="rank_list_box">
......@@ -59,21 +74,42 @@
</div>
</div>
</div>
<div class="rank_mask rank_mask2" id="notice" style="display: flex;">
<div class="zhezao"></div>
<div class="notice_box">
<img src="../../images/aM/all_d.png" alt="" class="notice_top">
<span>恭喜你获得支付宝口令红包</span>
<input class="notice_content" id="tokenReadPackage" readonly="readonly" value="哈哈哈哈" />
<button class="all_Receive" id="getAliPay" data-clipboard-action="copy" data-clipboard-target="#tokenReadPackage">
复制并领取
</button>
<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>
<script src="js/clipboard.min.js"></script>
<script>
let conn;
let proxy;
let status=0;
let clock=null;
let isWinning=false;
// clipboard.on('success', function(e) {
// console.log(e);
// });
// clipboard.on('error', function(e) {
// console.log(e);
// });
function getMyRank(){
proxy.invoke('GetUserRank','Money').done(r=>{
if(r!=-1){
proxy.invoke('GetUserRank','Money','1951_Money').done(r=>{
if(r.r!=-1){
$('#myTop').html(r);
}else{
$('#myTop').html('未上榜');
}
$('#my_score').html(r.s);
})
}
function GetStatus(){
......@@ -127,12 +163,16 @@
}
function winning(){
proxy.on("notifyWinning",function(d){
alert("恭喜你中奖了:"+d);
//alert("恭喜你中奖了:"+d);
$('#notice').css('display','flex');
$('#tokenReadPackage').val(d);
$("#smm").css('display','none');
})
}
this.initConnection()
$(function () {
var clipboard = new Clipboard('.all_Receive');
var music=document.getElementById('music');
var money_en = $("body");
//传递后台的分数
......@@ -166,22 +206,36 @@
$('.close').click(function(){
$('.rank_mask').css('display','none');
});
$('#getAliPay').click(function(){
setTimeout(function(){
$('#goali')[0].click();
},500);
});
//点击查看排行榜
$('#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=>{
});
}
$("#rankBox").html("");
$("#my_score").html("0");
}else if(data.status==-1){
window.clearInterval(clock);
clock=null;
......@@ -190,6 +244,7 @@
$('.rank_mask').css('display','block');
$('.play_tips').css('display','none');
$('.tipsDiv').text('游戏已经结束咯');
$('.tipsDiv').css('display','block');
}
}
})
......@@ -203,6 +258,13 @@
$('.tipsDiv').css('display','block');
$('.play_tips').css('display','none');
var clockReady = window.setInterval(function(){
if(Count==5){
$('.circleCount').html("Ready");
}else if(Count==1){
$('.circleCount').html("GO");
}else{
$('.circleCount').html(Count-1);
}
Count--;
$('.circleCount').html(Count);
if(Count==0){
......@@ -275,6 +337,7 @@
i+=100;
proxy.invoke("SetGameScore","Money", 100).done(msg => {
// dosomething
$("#my_score").html(msg)
});
//$(".money_add span").html("¥"+i)
......
......@@ -73,6 +73,7 @@ p{
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
}
.menu_view img{
width: 0.22rem;
......@@ -82,6 +83,20 @@ p{
color: #F2E47C;
font-size: 0.12rem;
}
.hourglass{
display: none;
position: absolute;
right: 0;
top:-0.08rem;
animation: rotate 3s linear infinite;
}
@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
.barrage{
width: 92%;
height: 0.3rem;
......@@ -211,3 +226,155 @@ p{
justify-content: flex-end;
}
.rank_mask{
position: absolute;
left: 0;
top:0;
width: 100%;height: 100%;
display: none;
align-items: center;
justify-content: center;
}
.zhezao{
width: 100%;height: 100%;
position: absolute;
left: 0;
top: 0;
background: #111111;
opacity: 0.5;
}
.notice_box{
width: 2.8rem;
height: 2.6rem;
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: 0.63rem;
height: 0.63rem;
margin-top: 0.28rem;
}
.notice_box span{
color: #893630;
font-size: 0.15rem;
margin-top: 0.2rem;
}
.notice_content{
width: 2.2rem;
height: 0.4rem;
border-radius: 0.08rem;
border: 1px solid #C8532B;
background: white;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.14rem;
}
.notice_content span{
width: 2rem;
text-overflow:ellipsis;
overflow: hidden;
margin-top: 0;
white-space:nowrap;
}
.all_Receive{
width: 1.5rem;
height: 0.27rem;
background: #F9CB3B;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.18rem;
border-radius: 0.135rem;
}
.all_Receive span{
color: #893630;
font-size: 0.13rem;
margin-top: 0;
}
.all_Close{
position: absolute;
left: 50%;
bottom: -0.5rem;
margin-left: -0.17rem;
width: 0.34rem;
height: 0.34rem;
background-image: url('../../../images/aM/close.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.activity_box{
width: 3.48rem;
height: 3.25rem;
background-image: url('../../../images/aM/activity_mouse.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.activity_title{
color: #893630;
font-size: 0.12rem;
margin-top: 2.32rem;
}
.activity_Receive{
width: 1.5rem;
height: 0.27rem;
background: #F9CB3B;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
border-radius: 0.135rem;
}
.activity_Receive span{
color: #893630;
font-size: 0.13rem;
margin-top: 0;
}
.activity_Close,.activity_Close2,.prize_Close{
position: absolute;
left: 50%;
bottom: -0.5rem;
margin-left: -0.17rem;
width: 0.34rem;
height: 0.34rem;
background-image: url('../../../images/aM/close.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.activity_box2{
width: 3.48rem;
height: 3.25rem;
background-image: url('../../../images/aM/activity_money.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.prize_box{
width: 100%;
height: 2rem;
background: white;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
......@@ -227,14 +227,13 @@ li{
left:50%;
margin-left:-0.25rem;
color:#fdbe23;
font-size:0.3rem;
font-size:0.18rem;
border-radius:50%;
text-align: center;
line-height: 0.5rem;
border:0.05rem solid #fdbe23;
display: none;
animation: numberAni 1s infinite ease;
display:none;
}
@keyframes numberAni {
1% {
......
This diff is collapsed.
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
}
p{
margin: 0;
}
.Box{
width: 100%;
height: 100%;
background-image: url('../../../images/aM/AM_bg2@2x.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.content{
width:90% ;
height: 50%;
margin-top: 1.8rem;
display: flex;
flex-direction: column;
align-items: center;
}
.programName{
font-size: 0.23rem;
color: #FDD54B;
}
.department{
font-size: 0.15rem;
color: #FDD54B;
margin-top: 0.2rem;
}
.personnel{
font-size: 0.15rem;
color: #FDD54B;
margin-top: 0.2rem;
text-align: center;
line-height: 0.25rem;
width: 80%;
}
.progressBar{
width: 2.8rem;
height: 0.35rem;
background-image: url('../../../images/aM/progressBar.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: 0.3rem;
overflow: hidden;
padding: 0.05rem;
}
.progressBar_box{
width: 100%;
height: 0.35rem;
border-radius: 0.15rem;
overflow: hidden;
}
.progressBar_c{
width: 1%;
height: 0.35rem;
background: repeating-linear-gradient(55deg,#BA4C0B 26%,#E99A35 9%,#FDF48B 26%,#D19719 30%)
}
.votes{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 0.12rem;
}
.votes span{
font-size: 0.1rem;
color: #FDD54B;
}
.votes span:nth-child(2){
font-size: 0.14rem;
margin:0 0.05rem
}
.vote_s{
width: 75%;
height: 0.5rem;
position: absolute;
left: 12.5%;
bottom: 10%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.giveUp{
width: 1rem;
height: 100%;
}
.confirm{
width: 1.4rem;
height: 100%;
}
.popup{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
}
.popup .bg{
width: 100%;
height: 100%;
background: #111111;
opacity: 0.5;
}
.popup_bg{
width: 2.8rem;
height: 1.8rem;
display: flex;
flex-direction: column;
align-items: center;
background-image: url('../../../images/aM/votes_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 50%;
top: 2rem;
margin-left: -1.4rem;
}
.popup_bg img{
width: 0.63rem;
height: 0.63rem;
margin-top: 0.28rem;
}
.popup_bg span{
margin-top: 0.2rem;
font-size: 0.15rem;
color: #893630;
}
.close{
position: absolute;
left: 50%;
bottom: -0.5rem;
margin-left: -0.17rem;
width: 0.34rem;
height: 0.34rem;
background-image: url('../../../images/aM/close.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
html/annualMeeting/img/money/gold.png

7.19 KB | W: | H:

html/annualMeeting/img/money/gold.png

14.8 KB | W: | H:

html/annualMeeting/img/money/gold.png
html/annualMeeting/img/money/gold.png
html/annualMeeting/img/money/gold.png
html/annualMeeting/img/money/gold.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>节目投票</title>
<script type="text/javascript" src="../../js/autosize2.js"></script>
<link rel="stylesheet" href="css/vote.css">
</head>
<body>
<div class="Box">
<div class="content">
<span class="programName">《年会庆典》节目投票</span>
<span class="department">成都印象销售部</span>
<span class="personnel">参与人员:李瀚文 张若筠 杨紫 杨幂 邓伦 许凯 张榕容 易烊千玺 李现</span>
<div class="progressBar">
<div class="progressBar_box">
<div class="progressBar_c"></div>
</div>
</div>
<div class="votes">
<span>当前爱心能量值</span>
<span>123</span>
<span></span>
</div>
</div>
<div class="vote_s">
<img src="../../images/aM/giveUp.png" alt="" class="giveUp" onclick="vote(1)">
<img src="../../images/aM/confirmvote.png" alt="" class="confirm" onclick="vote(2)">
</div>
<div class="popup">
<div class="bg"></div>
<div class="popup_bg">
<img src="" alt="">
<span></span>
<div class="close"></div>
</div>
</div>
</div>
</body>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script>
var activity = JSON.parse(localStorage.activity);
var conn = $.hubConnection("http://192.168.2.66:7838/signalr", {
qs: `i=${activity.customerId}&n=${activity.EmName}&p=${encodeURIComponent(activity.imgUrl)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
sendMsg()
}).fail(data => {});
getMsg()
function sendMsg() {
}
function getMsg() {
//节目单
proxy.on('getPrograms', function (data) {
console.log(data)
});
}
function vote(type) {
if(type==1){ // 1位放弃投票 2 为确定投票
$('.popup').css('display','block')
$('.popup_bg img').attr('src','../../images/aM/fangqi.png')
$('.popup_bg span').html('放弃投票成功')
}else {
$('.popup').css('display','block')
$('.popup_bg img').attr('src','../../images/aM/toupiao.png')
$('.popup_bg span').html('恭喜你!投票成功')
}
}
//投票进度条比例
var Votes = 100;
var Percentage = (Votes/250)*100;
$('.progressBar_c').css('width',Percentage+'%')
$('.close').click(function () {
$('.popup').css('display','none')
})
</script>
</html>
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