Commit e4ad5827 authored by Mac's avatar Mac

年会首页

parent 7d6a943f
<!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/Amhome.css">
</head>
<body>
<div class="Box">
<!-- 头部嘉宾-->
<div class="top">
<img src="../../images/aM/jiabing@2x.png" alt="">
<p>嘉宾:</p>
<p class="rNumber">0</p>
</div>
<!--节目单-->
<div class="center">
<p class="tilte">节目单</p>
<div class="center_box">
<div class="c_left">
</div>
<div class="c_right" >
</div>
</div>
</div>
<!--底部菜单和发送-->
<div class="bottom">
<div class="b_menu">
<div class="menu">
</div>
</div>
<div class="barrage">
<div class="bar_input">
<input type="text" placeholder="发弹幕参与大屏互动">
</div>
<div class="send_btn" onclick="send()">
<p>发送</p>
</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 type="text/javascript" src="js/JsBarcode.all.min.js"></script>
<script>
var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
qs: `i=1951&n=张建国&p=${encodeURIComponent(
"http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
sendMsg()
}).fail(data => {});
getMsg()
function sendMsg(msg,type) {
if(type ==1){
proxy.invoke("SendBarrage", msg).done(data => {
layer.msg('发送成功');
});
}
}
function send() {
var value = $('.bar_input input').val();
if(value.length==0){
layer.msg('不能为空哦');
return
}
sendMsg(value,1)
}
function getMsg() {
//年会首页菜单
proxy.on("getMenus", function (data){
$(".menu_view").remove()
var html="";
$.each(data, function(i,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
html+='<div class="menu_view" onclick="menu_btn('+data[i].Id+')">\n' +
' <img src="../../images/aM/menu@2x.png" alt="">\n' +
' <p>'+data[i].MName+'</p>\n' +
' </div>'
});
$(".menu").append(html);
});
proxy.on('getPrograms',function (data) {
console.log(data)
programguides(data)
});
//嘉宾数量
proxy.on('updateUsersOnlineCount',function (data) {
$(".rNumber").html(data)
})
}
function menu_btn(id) {
if(id ==5 ){ //我的礼品
}
}
function programguides(data){
$(".right_box").remove()
$(".letf_box").remove()
var leftList = [];
var rightList = [];
for(var i=0;i<data.length ;i++){
if(i%2==0){
rightList.push(data[i])
}else {
leftList.push(data[i])
}
}
var html_l="";
var html_r="";
$.each(rightList, function(i,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
if(i==0){
html_l+='<div class="right_box" style="margin-top:0rem ">\n' +
' <p class="time">'+rightList[i].StartTime+'</p>\n' +
' <div class="c_describe">\n' +
' <p>'+rightList[i].Title+'</p>\n' +
' <p>'+rightList[i].Performer+'</p>\n' +
' </div>\n' +
' <div class="yuan_r"></div>\n' +
' </div>'
}else {
html_l+='<div class="right_box" style="margin-top:0.75rem ">\n' +
' <p class="time">'+rightList[i].StartTime+'</p>\n' +
' <div class="c_describe">\n' +
' <p>'+rightList[i].Title+'</p>\n' +
' <p>'+rightList[i].Performer+'</p>\n' +
' </div>\n' +
' <div class="yuan_r"></div>\n' +
' </div>'
}
});
$(".c_right").append(html_l);
$.each(leftList, function(i,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
html_r+='<div class="letf_box" style="margin-top: 0.75rem">\n' +
' <div class="time">\n' +
' <p>'+leftList[i].StartTime+'</p>\n' +
' </div>\n' +
' <div class="c_describe">\n' +
' <p>'+leftList[i].Title+'</p>\n' +
' <p>'+leftList[i].Performer+'</p>\n' +
' </div>\n' +
' <div class="yuan_l"></div>\n' +
' </div>'
});
$(".c_left").append(html_r);
}
</script>
</html>
<!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>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/mian.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script>
</script>
</html>
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;
}
.top{
width: 100%;
height: 0.5rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.top img{
width: 0.15rem;
height: 0.14rem;
margin-right: 0.05rem;
}
.top p{
color: white;
font-size: 0.12rem;
}
.rNumber{
margin-right:0.1rem ;
}
.bottom{
width: 100%;
height: 0.95rem;
background: #C62825;
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.b_menu{
width: 100%;
height: 0.5rem;
display: flex;
flex-direction: row;
border-bottom:1px solid #E88A36;
}
.menu{
width: 100%;
height: 0.36rem;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 0.08rem;
}
.menu_view{
width: 20%;
height: 0.36rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.menu_view img{
width: 0.22rem;
height: 0.22rem;
}
.menu_view p{
color: #F2E47C;
font-size: 0.12rem;
}
.barrage{
width: 92%;
height: 0.3rem;
margin-top: 0.07rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.bar_input{
width: 2.8rem;
height: 0.3rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: white;
border-radius: 0.15rem;
}
.bar_input input{
width: 2.4rem;
height: 0.22rem;
border:none;
outline:none
}
.send_btn{
width: 0.55rem;
height: 0.30rem;
background-image: url('../../../images/aM/send@2x.png');
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.send_btn{
color: #893630;
font-size: 0.13rem;
}
.center{
width: 90%;
height: 4.41rem;
margin-left: 5%;
margin-top: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
.center .tilte{
color: #FDD54B;
font-size: 0.28rem;
height: 10%;
}
.center_box{
width: 100%;
height: 90%;
display: flex;
flex-direction: row;
overflow-y: auto;
overflow-x:hidden;
}
.c_left,.c_right{
width: 50%;
}
.c_left{
display: flex;
flex-direction: column;
}
.c_right{
}
.time{
color: #FDD54B;
font-size: 0.12rem;
}
.c_describe{
width: 90%;
height:0.45rem;
background: #E88A36;
border-radius: 0.06rem;
margin-top: 5px;
}
.c_describe p{
color: #893630;
font-size: 0.12rem;
margin-left: 0.1rem;
}
.c_describe p:nth-child(1){
padding-top: 0.05rem;
}
.right_box{
width: 100%;
height: 0.75rem;
border-left:1px solid #E88A36;
padding-left: 0.08rem;
position: relative;
}
.yuan_r{
width: 0.08rem;
height: 0.08rem;
border-radius: 0.04rem;
background: #FDD54B;
position: absolute;
left: -0.04rem;
top: 0;
}
.letf_box{
width: 100%;
height: 0.75rem;
border-right:1px solid #E88A36;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.letf_box .time{
width: 90%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.yuan_l{
width: 0.08rem;
height: 0.08rem;
border-radius: 0.04rem;
background: #FDD54B;
position: absolute;
right: -0.04rem;
top: 0;
}
This diff is collapsed.
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