fe / yohobuywap-node · Commits

Go to a project

Authored by zzzzzzz
Commit 66646bf3a9e1f57dc88f97cdcb296edb01713fa0 1 parent 23755647

基本接口完成，修改样式

Inline Side-by-side
Showing 6 changed files with 212 additions and 134 deletions
var liveModel = require("../models/live");
exports.index = (req, res, next) => {
res.render('entry', {});
next();
};
liveModel.getAllList().then(result => {
res.render('entry', {
best: result[0].data,
living: result[1].data,
pre: result[2].data,
record: result[3].data
});
}).catch(next);
};
\ No newline at end of file
... ...
var api = global.yoho.ServiceAPI;
//返回所有数据
const getAllList = () => {
return Promise.all([_getBestList(), _getLivingList(), _getPrelivingList(), _getRecordList()]);
}
//获取精选视频
const _getBestList = () => {
return api.get('v1/living/best', {}, true);
}
//获取直播中所有视频
const _getLivingList = () => {
return api.get('v1/living/listing', {}, true);
}
//获取直播预告列表
const _getPrelivingList = () => {
return api.get('v1/living/starting', {}, true);
}
//获取回看列表
const _getRecordList = () => {
return api.get('v1/living/replaying', {}, true);
}
module.exports = {
getAllList
}
\ No newline at end of file
... ...
<div class="yoho-live">
<div class="live-rec">
<div class="rec-child">
<img class="rec-pic" src="" alt="直播预览">
<p class="living">直播</p>
<div class="rec-info">
<img class="rec-head" src="" alt="头像">
<div class="rec-pannel">
<p class="rec-name">Hybird <span class="name-tag">直播红人</span></p>
<p class="rec-tag">Hybird living show</p>
</div>
</div>
</div>
<div class="rec-child">
<img class="rec-pic" src="" alt="直播预览">
<p class="pre-living">预告18:00</p>
<div class="rec-info">
<img class="rec-head" src="" alt="头像">
<div class="rec-pannel">
<p class="rec-name">哥斯达 <span class="name-tag">潮流大人</span></p>
<p class="rec-tag">啊是的噶德国 living show</p>
</div>
</div>
</div>
</div>
<div class="live-rec">
{{#best}}
<div class="rec-child">
<img class="rec-pic" src="{{image pic 320 320}}" alt="直播预览">
<p class="living">直播</p>
<!-- <p class="pre-living">预告18:00</p> -->
<div class="rec-info">
<img class="rec-head" src="{{image master_pic 60 60}}" alt="头像">
<div class="rec-pannel">
<p class="rec-name">{{master_name}} <span class="name-tag">{{master_meta}}</span></p>
<p class="rec-tag">{{title}}</p>
</div>
</div>
</div>
{{/best}}
</div>
<div class="live-main">
<h2 class="title">直播中</h2>
<header>
<img class="main-head" src="" alt="头像">
<div class="header-info">
<p class="main-name">aaaasd</p>
<p class="main-tag">asdfasfa</p>
</div>
</header>
<section>
<img class="main-bg" src="" alt="正在直播">
<p class="main-living">直播</p>
<p class="main-intro">哈哈哈哈哈哈哈哈哈哈aaaajjjj即可链接；离开家；了卡啊点舒服</p>
<div class="main-people">
<span class="people-icon"></span>
<p class="people-sum">50000人观看</p>
</div>
</section>
</div>
{{#living}}
<div class="live-main">
<h2 class="title">直播中</h2>
<header>
<img class="main-head" src="{{image master_pic 60 60}}" alt="头像">
<div class="header-info">
<p class="main-name">{{master_name}}</p>
<p class="main-tag">{{master_meta}}</p>
</div>
</header>
<section>
<img class="main-bg" src="{{image pic 640 640}}" alt="正在直播">
<p class="main-living">直播</p>
<p class="main-intro">{{title}}</p>
<div class="main-people">
<span class="people-icon"></span>
<p class="people-sum">{{audience_num}}人观看</p>
</div>
</section>
</div>
{{/living}}
<div class="live-list">
<h2 class="title">直播预告</h2>
<ul class="list">
{{#pre}}
<li class="pre-list">
<a href="#">
<img class="pre-pic" src="{{image pic 150 150}}" alt="直播预览图">
<p class="pre-icon">预告</p>
<p class="pre-time">今天16:00</p>
<div class="pre-pannel">
<p class="pre-title">{{title}}</p>
<p class="pre-cast">主播：{{master_name}}</p>
</div>
</a>
</li>
{{/pre}}
</ul>
</div>
<div class="live-list">
<h2 class="title">直播预告</h2>
<ul class="list">
<li class="pre-list">
<img class="pre-pic" src="" alt="直播预览图">
<p class="pre-icon">预告</p>
<p class="pre-time">今天16:00</p>
<div class="pre-pannel">
<p class="pre-title">啦啦啦魔兽世界asdfa很快将很快会离开就会立刻会</p>
<p class="pre-cast">主播：啦啦啦</p>
</div>
</li>
</ul>
</div>
</div>
\ No newline at end of file
{{#record}}
<div class="live-main">
<a href="#">
<h2 class="title">精彩回看</h2>
<header>
<img class="main-head" src="{{image master_pic 60 60}}" alt="头像">
<div class="header-info">
<p class="main-name">{{master_name}}</p>
<p class="main-tag">{{master_meta}}</p>
</div>
</header>
<section>
<div class="record-icon"></div>
<img class="main-bg" src="{{image pic 640 640}}" alt="精彩回放">
<p class="main-living">回放</p>
<p class="main-intro">{{title}}</p>
<div class="main-people">
<span class="eye-icon"></span>
<p class="people-sum">{{audience_num}}人看过</p>
</div>
</section>
</a>
</div>
{{/record}}
</div>
... ...

905 Bytes | W: | H:

3.58 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
$titlebg: #ededed;
$white: #fff;
$black: #444;
$red: #d0021b;
$gray: #b0b0b0;
.live-rec {
height: 420px;
width: 640px;
... ... @@ -11,7 +17,7 @@
img {
height: 320px;
width: 320px;
background: gray;
background: gray;
}
.pre-living {
... ... @@ -20,9 +26,9 @@
left: 30px;
height: 35px;
width: 123px;
border: 1px solid #fff;
border: 1px solid $white;
border-radius: 20px;
color: #fff;
color: $white;
font-size: 22px;
text-align: center;
line-height: 35px;
... ... @@ -34,9 +40,9 @@
left: 30px;
height: 35px;
width: 70px;
background: #D0021B;
background: $red;
border-radius: 20px;
color: #fff;
color: $white;
font-size: 22px;
text-align: center;
line-height: 35px;
... ... @@ -57,39 +63,41 @@
}
.rec-pannel {
position: absolute;
top: 20px;
left: 110px;
.rec-name {
margin-bottom: 14px;
font-size: 26px;
color: #444;
line-height: 100%;
}
.name-tag {
display: inline-block;
height: 25px;
width: 85px;
font-size: 18px;
background: #444;
border-radius: 20px;
color: #fff;
text-align: center;
line-height: 25px;
}
.rec-tag {
font-size: 20px;
color: #444;
line-height: 100%;
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
position: absolute;
top: 20px;
left: 110px;
.rec-name {
margin-bottom: 14px;
font-size: 26px;
color: $black;
line-height: 100%;
}
.name-tag {
position: absolute;
top: 0;
display: inline-block;
height: 26px;
width: 86px;
font-size: 18px;
background: $black;
margin-left: 10px;
border-radius: 20px;
color: $white;
text-align: center;
}
.rec-tag {
font-size: 20px;
color: $black;
line-height: 100%;
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
}
... ... @@ -101,7 +109,8 @@
height: 80px;
text-align: center;
line-height: 80px;
color: #444;
color: $black;
background: $titlebg;
font-size: 32px;
}
... ... @@ -126,14 +135,14 @@
.main-name {
font-size: 26px;
color: #444;
color: $black;
margin-bottom: 14px;
line-height: 26px;
}
.main-tag {
font-size: 20px;
color: #b0b0b0;
color: $gray;
line-height: 20px;
}
}
... ... @@ -144,6 +153,17 @@
height: 640px;
width: 640px;
.record-icon {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 101px;
margin-left: -50px;
margin-top: -50px;
background: url("/activity/record-icon.png");
}
.main-bg {
height: 100%;
width: 100%;
... ... @@ -155,9 +175,9 @@
left: 30px;
height: 35px;
width: 70px;
background: #D0021B;
background: $red;
border-radius: 20px;
color: #fff;
color: $white;
font-size: 22px;
text-align: center;
line-height: 35px;
... ... @@ -168,12 +188,12 @@
bottom: 75px;
left: 30px;
font-size: 28px;
color: #ccc;
color: $gray;
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.main-people {
... ... @@ -183,14 +203,13 @@
height: 40px;
width: 185px;
font-size: 19px;
background: rgba(4,4,4,0.5);
background: rgba(4, 4, 4, 0.5);
border-radius: 20px;
line-height: 40px;
.people-icon {
position: absolute;
top: 8px;
left: 17px;
margin-top: 10px;
margin-left: 17px;
display: inline-block;
height: 18px;
width: 16px;
... ... @@ -198,9 +217,8 @@
}
.eye-icon {
position: absolute;
top: 8px;
left: 13px;
margin-top: 10px;
margin-left: 15px;
display: inline-block;
height: 17px;
width: 23px;
... ... @@ -208,10 +226,9 @@
}
.people-sum {
position: absolute;
left: 40px;
display: inline-block;
font-size: 22px;
color: #fff;
color: $white;
}
}
}
... ... @@ -225,14 +242,16 @@
height: 80px;
text-align: center;
line-height: 80px;
color: #444;
color: $black;
background: $titlebg;
font-size: 32px;
}
.pre-list {
position: relative;
height: 162px;
height: 190px;
width: 100%;
border-bottom: 1px solid $titlebg;
.pre-pic {
position: absolute;
... ... @@ -248,43 +267,44 @@
left: 220px;
height: 35px;
width: 70px;
border: 1px solid #444;
border: 1px solid $black;
border-radius: 20px;
font-size: 22px;
line-height: 35px;
text-align: center;
color: #444;
color: $black;
}
.pre-time {
position: absolute;
top: 20px;
left: 310px;
color: #444;
color: $black;
font-size: 24px;
line-height: 35px;
line-height: 35px;
}
.pre-pannel {
position: absolute;
top: 77px;
left: 220px;
position: absolute;
top: 77px;
left: 220px;
}
.pre-title {
font-size: 28px;
color: #444;
color: $black;
line-height: 100%;
margin-bottom: 12px;
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.pre-cast {
font-size: 22px;
color: #b0b0b0;
color: $gray;
line-height: 100%;
}
}
... ...