console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>中医在线直播</title>
<link rel="stylesheet" href="http://tester.tcmmooc.com/assets/v2/bootstrap/css/bootstrap.css?2.0.1">
<style>
*{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color: #fff;
font:16px/1 Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
color: #333;
}
h2,h3,h4,ul{
margin:0;
}
img{
display: block;
width: 100%;
}
input:focus,
button:focus{
outline: none;
}
ul,li{
list-style: none;
}
.clearfix:before,
.clearfix:after{
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.prism-player {
background-color: #343434;
position: relative;
}
.live-box{
width: 1140px;
margin:0 auto;
}
.live-viewers{
line-height: 80px;
font-size: 24px;
font-weight: normal;
}
.live-viewers span{
color: #53b584;
font-weight: bold;
font-size: 28px;
vertical-align: top;
display: inline-block;
margin:0 3px;
}
.live-video-box{
background-color: #343434;
height: 585px;
}
.live-describe-left{
float: left;
width: 894px;
}
.live-describe-left h2{
font-size: 24px;
line-height: 66px;
padding-left:10px;
border-bottom:1px solid #e7e7e7;
padding-top:10px;
}
.live-describe-left div{
padding: 20px 10px;
font-size: 16px;
line-height: 24px;
}
.live-describe-right{
float: right;
width: 170px;
text-align: center;
margin-right: 20px;
}
.live-describe-right h2{
font-size: 18px;
padding:35px 0 17px;
}
.live-describe-right p{
font-size: 14px;
line-height: 1.4;
}
.live-describe-right .img{
width: 132px;
margin:0 auto 17px;
}
.live-video-player{
float: left;
width: 820px;
height: 585px;
background-color: #f00;
}
.live-video-rt{
float: right;
width: 320px;
height: 585px;
position: relative;
color: #fff;
}
.live-talk-num{
line-height: 56px;
font-size: 18px;
padding-left:10px;
}
.live-talk-num span{
font-size: 24px;
color: #53b584;
vertical-align: top;
margin:0 3px;
}
.live-talk-entry{
padding:19px 10px 0;
}
.live-talk-entry input{
line-height: 30px;
height: 30px;
width: 222px;
float: left;
padding:0 10px;
font-size: 14px;
border:0;
box-shadow: none;
color: #333;
}
.live-talk-entry button{
width: 74px;
height: 30px;
line-height: 30px;
background-color: #53b584;
text-align: center;
font-size: 16px;
border:0;
float: right;
cursor:pointer;
color: #fff;
}
.live-talk-main{
background-color:#434343;
height: 462px;
padding:0 10px;
overflow:hidden;
}
.live-roll{
height: 492px;
overflow-y: scroll;
overflow-x: hidden;
width: 385px;
padding-right: 40px;
padding-top:10px;
scroll-behavior:smooth;
position: relative;
margin-top: -30px;
}
.live-talk-list{
width: 300px;
margin-top:30px;
}
.live-talk-list li{
position: relative;
word-wrap: break-word;
word-break: normal;
overflow: hidden;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-webkit-user-select: none;
}
.live-talk-toux{
position: absolute;
top:0;
width: 30px;
height: 30px;
border-radius: 50%;
}
.live-talk-text h3{
font-size: 12px;
font-weight: normal;
margin-bottom: 5px;
color: rgba(255,255,255,.5);
}
.live-talk-text h3 span{
margin-right: 10px;
}
.live-talk-text h3 i{
font-style: normal;
}
.live-talk-writing{
position: relative;
word-wrap: break-word;
word-break: normal;
width: 100%;
}
.live-talk-writing p{
display: inline-block;
line-height: 18px;
padding:12px;
font-size: 14px;
word-wrap: break-word;
word-break: break-all;
}
.left .live-talk-writing p{
float: left;
background-color: #4d4d4d;
border-radius: 0 4px 4px 4px;
}
.right .live-talk-writing p{
float: right;
background-color: #4d886a;
border-radius: 4px 0 4px 4px;
}
.left .live-talk-toux{
left:0;
}
.right .live-talk-toux{
right:0;
left:auto;
z-index: 9;
}
.left .live-talk-text{
padding: 5px 62px 8px 40px;
}
.right .live-talk-text{
padding: 5px 40px 8px 62px;
}
.right .live-talk-text h3{
text-align: right;
}
</style>
</head>
<body>
<div class="live-box">
<h3 class="live-viewers">在线观看<span>234324</span>人</h3>
<div class="live-video-box clearfix">
<div class="live-video-player">放播放器的位置</div>
<div class="live-video-rt">
<h3 class="live-talk-num">在线讨论<span>2388</span>人</h3>
<div class="live-talk-main">
<div id="talkList" class="live-roll">
<ul id="list" class="live-talk-list">
<li class="left">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/08-25/211235306bfe537937.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？</p>
</div>
</div>
</li>
<li class="left">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/08-25/211235306bfe537937.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？</p>
</div>
</div>
</li>
<li class="right">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/02-12/09481828d9b3572356.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？会议看着人挺多的啊，还挺热闹的。</p>
</div>
</div>
</li>
<li class="right">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/02-12/09481828d9b3572356.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？</p>
</div>
</div>
</li>
<li class="left">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/08-25/211235306bfe537937.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？</p>
</div>
</div>
</li>
<li class="right">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/02-12/09481828d9b3572356.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？会议看着人挺多的啊，还挺热闹的。</p>
</div>
</div>
</li>
<li class="right">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/02-12/09481828d9b3572356.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？</p>
</div>
</div>
</li>
<li class="left">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/08-25/211235306bfe537937.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？</p>
</div>
</div>
</li>
<li class="right">
<img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/02-12/09481828d9b3572356.jpg" alt="小康康">
<div class="live-talk-text">
<h3><span>小康康</span><i>1小时前</i></h3>
<div class="live-talk-writing clearfix">
<p>有人在吗？会议看着人挺多的啊，还挺热闹的。</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="live-talk-entry clearfix">
<input id="talkInput" type="text" placeholder="输入弹幕">
<button id="talkBtn">发表</button>
</div>
</div>
</div>
<div class="live-describe clearfix">
<div class="live-describe-left">
<h2>刘国轩老师炁针实战班——疼痛的三维疗法！</h2>
<div>中华中医药学会副秘书长谢钟在致辞中介绍，中华中医药学会是我国成立最早、目前全国最大的中医药科技社团，而中医在线是中医传承教育与学术直播的重要平台之一。“学会将中医在线作为‘新媒体战略合作伙伴’，通过‘基石行动’的开展，希望探索出一种新形势下中医药人才、特别是基层中医药人才培养的新模式、新机制，为他们提供能够最大程度地满足其需求的在线学习模式，使基层医师的中医药知识和诊疗能力得到提升。同时还将通过互联网技术为大众及时提供科学、实用的中医药健康教育知识，提升公众健康素养，助力健康中国建设。”</div>
</div>
<div class="live-describe-right">
<h2>扫码用手机继续观看</h2>
<div class="img"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599480521074&di=33c76b114ae8ffd1d801cbfb56b55671&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F37%2F17%2F96573c3f71ecd2f.jpg" alt=""></div>
<p>用微信扫码在手机上继续观看，扫码后可分享给好友</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
var oTalk_sub = document.getElementById('talkBtn');
var oWords = document.getElementById('talkList');
var olist=document.getElementById('list');
oWords.scrollTop = oWords.scrollHeight;
$("#talkInput").keydown(function(e){
if(e.keyCode == 13){
$("#talkBtn").click();
}
});
$("#talkBtn").click(function(){
var txtVal=$("#talkInput").val();
if(txtVal==''){
return false;
}
var sTalk = '<li class="right"><img class="live-talk-toux" src="http://image.tcmmooc.com/default/2016/02-12/09481828d9b3572356.jpg" alt="小康康"><div class="live-talk-text"><h3><span>小康康</span><i>1小时前</i></h3><div class="live-talk-writing clearfix"><p>'+txtVal+'</p></div></div></li>'
olist.innerHTML = olist.innerHTML + sTalk;
oWords.scrollTop = oWords.scrollHeight;
$("#talkInput").val("");
})
</script>
</body>
</html>