fe / yohobuywap-node · Commits

Go to a project

Authored by ccbikai
Commit 189fa42558ee295fa307a977b222f4a4c9542854 2 parents 80aa8e8b 5e2cb4a5

Merge branch 'release/live'

Inline Side-by-side
Showing 6 changed files with 55 additions and 46 deletions
... ... @@ -37,8 +37,7 @@ exports.main = (req, res, next) => {
model.fetchInfo(id, isReplay)
.then(result => {
if (!result.data) {
next(result.message);
return;
return next();
}
res.render('live/play', result.data);
})
... ...
... ... @@ -179,7 +179,6 @@ const fetchLiveInfo = (roomID) => {
d.master_pic = helpers.image(d.master_pic, 180, 180);
d.humanTime = _formatTime(d.starting_time * 1000); // 预告 开始时间
d.video_src = d.hls_downstream_address;
d.audience_num = false; // 直播 观众人数 由弹幕获取
// 自定义数据
d.duration = _getHumanDuration(d.live_last_time);
... ...
... ... @@ -37,7 +37,7 @@
<div class="liverec_info">
<img class="liverec_head" src="{{image master_pic 120 120}}" alt="头像">
<div class="liverec_pannel">
<p class="liverec_name">
<p class="liverec_name clearfix">
<span class="name-name">{{master_name}}</span>
<span class="name-tag">{{master_meta}}</span>
</p>
... ...
... ... @@ -73,46 +73,51 @@
{{/canPlay}}
{{！直播已结束}}
<div id="live-state-end" class="live-state is-no-start {{#atEnd}}show{{/atEnd}}" style="background-image: url('{{background_pic}}');">
<div class="live-state__txt">直播已结束</div>
<ul class="live-state-info">
<li class="audience text-center">
<span class="val">{{audience_num}}</span>
<span class="label">总观看人数</span>
</li>
<li class="duration">
<div class="inner pull-right">
<span class="val">{{duration}}</span>
<div id="live-state-end" class="live-state is-no-start {{#atEnd}}show{{/atEnd}}">
<div class="live-state-inner" style="background-image: url('{{background_pic}}');">
<div class="live-state__txt">直播已结束</div>
<ul class="live-state-info">
<li class="audience text-center">
<span class="val">{{audience_num}}</span>
<br>
<span class="label">直播时长</span>
</div>
</li>
<li class="favorite">
<div class="inner pull-left">
<span class="val">{{like_num}}</span>
<br>
<span class="label">点赞数</span>
</div>
</li>
</ul>
<a href="javascript: history.back();" class="live-btn-close">
<i class="iconfont">&#xe623</i>
</a>
<span class="label">总观看人数</span>
</li>
<li class="duration">
<div class="inner pull-right">
<span class="val">{{duration}}</span>
<br>
<span class="label">直播时长</span>
</div>
</li>
<li class="favorite">
<div class="inner pull-left">
<span class="val">{{like_num}}</span>
<br>
<span class="label">点赞数</span>
</div>
</li>
</ul>
<a href="javascript: history.back();" class="live-btn-close">
<i class="iconfont">&#xe623</i>
</a>
</div>
</div>
{{！直播未开始}}
{{#notBegin}}
<div class="live-state is-no-start show" style="background-image: url('{{background_pic}}');">
<div class="live-state__txt">直播未开始</div>
<div class="live-state-info text-center">
<img src="{{master_pic}}" alt="" class="avatar">
<span class="name text-overflow">{{master_name}}</span><br>
<h5 class="title">直播主题: {{title}}</h5>
<p class="begin-time">开始时间: {{humanTime}}</p>
<div class="live-state is-no-start show">
<div class="live-state-inner" style="background-image: url('{{background_pic}}');">
<div class="live-state__txt">直播未开始</div>
<div class="live-state-info text-center">
<img src="{{master_pic}}" alt="" class="avatar">
<span class="name text-overflow">{{master_name}}</span><br>
<h5 class="title">直播主题: {{title}}</h5>
<p class="begin-time">开始时间: {{humanTime}}</p>
</div>
<a href="javascript: history.back();" class="live-btn-close">
<i class="iconfont">&#xe623</i>
</a>
</div>
<a href="javascript: history.back();" class="live-btn-close">
<i class="iconfont">&#xe623</i>
</a>
</div>
{{/notBegin}}
... ...
... ... @@ -12,12 +12,11 @@ $border: #e0e0e0;
}
.liverec {
height: 423px;
width: 640px;
overflow: hidden;
&_child {
position: relative;
height: 100%;
width: 50%;
float: left;
border-right: 1px solid $border;
... ... @@ -69,7 +68,6 @@ $border: #e0e0e0;
}
.liverec_info {
height: 100px;
padding: 20px 10px 20px 30px;
}
... ... @@ -94,23 +92,27 @@ $border: #e0e0e0;
.name-name {
display: inline-block;
height: 26px;
max-width: 85px;
max-width: 105px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.name-tag {
display: inline-block;
float: right;
font-size: 18px;
height: 26px;
max-width: 100%;
line-height: 26px;
padding: 0 8px;
max-width: 90px;
text-align: center;
background: $black;
border-radius: 20px;
color: $white;
vertical-align: top;
white-space: nowrap;
text-overflow: ellipsis;
}
}
... ...
... ... @@ -9,14 +9,18 @@
width: 100%;
max-width: 100%;
min-height: 100vh;
background-size: 100% 100%;
color: white;
overflow: hidden;
overflow: auto;
.live-btn-close {
z-index: 200;
}
}
.live-state-inner {
overflow: hidden;
background-size: 100% 100%;
}
.live-state__txt {
width: 428px;
font-size: 31px;
... ...