fe / yohobuywap-node · Commits

Go to a project

Authored by 陈轩
Commit 224ca91399335415e408669b014524a0f9602be2 2 parents d698fe51 2f8f61d0

Merge remote-tracking branch 'origin/feature/live' into feature/live

Inline Side-by-side
Showing 3 changed files with 151 additions and 146 deletions
... ... @@ -46,6 +46,10 @@ const _getBestList = () => {
cache: false
}).then(result => {
let list = result && result.data || [];
if (result && result.data && result.data.length !== 2) {
result.data = [];
}
for (let item of list) {
switch (item.living) {
... ... @@ -64,6 +68,7 @@ const _getBestList = () => {
// 格式化时间
item.starting_time = _formatTime(item.starting_time * 1000, true);
}
return result && result.data || [];
});
};
... ...
... ... @@ -15,11 +15,11 @@
{{! 精选房间}}
{{#if best}}
<div class="live-rec">
<div class="liverec">
{{#best}}
<div class="rec-child">
<div class="liverec_child">
<a href='http://m.yohobuy.com/activity/live/{{room_id}}?openby:yohobuy={"action":"go.videolive", "params":{"type":"{{living}}","room":"{{room_id}}","bgpic":"{{pic}}"}}'>
<img class="rec-pic" src="{{image pic 320 320}}" alt="直播预览">
<img class="liverec_pic" src="{{image pic 320 320}}" alt="直播预览">
{{#if now_living}}
<p class="living">直播</p>
{{else if pre_living}}
... ... @@ -28,11 +28,11 @@
<p class="living">回放</p>
{{/if}}
</a>
<div class="rec-info">
<img class="rec-head" src="{{image master_pic 120 120}}" 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 class="liverec_info">
<img class="liverec_head" src="{{image master_pic 120 120}}" alt="头像">
<div class="liverec_pannel">
<p class="liverec_name">{{master_name}} <span class="name-tag">{{master_meta}}</span></p>
<p class="liverec_tag">{{title}}</p>
</div>
</div>
... ... @@ -43,7 +43,7 @@
{{! 直播中房间}}
{{#living}}
<div class="live-living">
<div class="liveliving">
<h2 class="title">直播中</h2>
<header>
<img class="main-head" src="{{image master_pic 120 120}}" alt="头像">
... ... @@ -90,7 +90,7 @@
{{! 精彩回看}}
{{#record}}
<div class="live-living">
<div class="liveliving">
<h2 class="title">精彩回看</h2>
<header>
<img class="main-head" src="{{image master_pic 120 120}}" alt="头像">
... ...
... ... @@ -5,113 +5,113 @@ $red: #d0021b;
$gray: #b0b0b0;
$border: #e0e0e0;
.live-rec {
.liverec {
margin-top: 30px;
height: 423px;
width: 640px;
border-top: 1px solid $border;
.rec-child {
&_child {
position: relative;
height: 100%;
width: 50%;
float: left;
border-right: 1px solid $border;
overflow: hidden;
}
img {
height: 320px;
width: 320px;
background: gray;
}
&_pic {
height: 320px;
width: 320px;
background: gray;
}
.pre-living {
position: absolute;
top: 30px;
left: 30px;
height: 35px;
padding: 0 10px;
border: 2px solid $white;
border-radius: 20px;
color: $white;
font-size: 22px;
text-align: center;
line-height: 1.5;
}
.pre-living {
position: absolute;
top: 30px;
left: 30px;
height: 35px;
padding: 0 10px;
border: 2px solid $white;
border-radius: 20px;
color: $white;
font-size: 22px;
text-align: center;
line-height: 1.5;
}
.living {
position: absolute;
top: 30px;
left: 30px;
height: 35px;
width: 70px;
background: $red;
border-radius: 15px;
color: $white;
font-size: 22px;
text-align: center;
line-height: 1.5;
}
.living {
position: absolute;
top: 30px;
left: 30px;
height: 35px;
width: 70px;
background: $red;
border-radius: 15px;
color: $white;
font-size: 22px;
text-align: center;
line-height: 1.5;
}
.rec-info {
position: relative;
height: 102px;
width: 320px;
border-top: 1px solid $border;
border-bottom: 1px solid $border;
.rec-head {
position: absolute;
top: 20px;
left: 30px;
height: 60px;
width: 60px;
border-radius: 50%;
}
.rec-pannel {
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: 17.9px;
background: $black;
margin-left: 10px;
border-radius: 20px;
color: $white;
text-align: center;
line-height: 1.5;
}
.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: 1;
}
}
}
&_info {
position: relative;
height: 102px;
width: 320px;
border-top: 1px solid $border;
border-bottom: 1px solid $border;
}
&_head {
position: absolute;
top: 20px;
left: 30px;
height: 60px;
width: 60px;
border-radius: 50%;
}
&_pannel {
position: absolute;
top: 20px;
left: 110px;
}
&_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: 17.9px;
background: $black;
margin-left: 10px;
border-radius: 20px;
color: $white;
text-align: center;
line-height: 1.5;
}
&_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: 1;
}
}
.live-living {
.liveliving {
.title {
width: 640px;
height: 80px;
... ... @@ -128,33 +128,33 @@ $border: #e0e0e0;
width: 640px;
border-top: 1px solid $border;
border-bottom: 1px solid $border;
}
.main-head {
position: absolute;
top: 20px;
left: 30px;
height: 60px;
width: 60px;
border-radius: 50%;
.main-head {
position: absolute;
top: 20px;
left: 30px;
height: 60px;
width: 60px;
border-radius: 50%;
}
.header-info {
position: absolute;
top: 20px;
left: 110px;
.main-name {
font-size: 26px;
color: $black;
margin-bottom: 14px;
line-height: 26px;
}
.header-info {
position: absolute;
top: 20px;
left: 110px;
.main-name {
font-size: 26px;
color: $black;
margin-bottom: 14px;
line-height: 26px;
}
.main-tag {
font-size: 20px;
color: $gray;
line-height: 20px;
}
.main-tag {
font-size: 20px;
color: $gray;
line-height: 20px;
}
}
... ... @@ -216,30 +216,30 @@ $border: #e0e0e0;
background: rgba(4, 4, 4, 0.5);
border-radius: 20px;
line-height: 40px;
}
.people-icon {
margin-top: 10px;
margin-left: 17px;
display: inline-block;
height: 18px;
width: 16px;
background: url("/activity/people.png") no-repeat center center;
}
.eye-icon {
margin-top: 10px;
margin-left: 15px;
display: inline-block;
height: 17px;
width: 23px;
background: url("/activity/eye.png") no-repeat center center;
}
.people-sum {
display: inline-block;
font-size: 22px;
color: $white;
}
.people-icon {
margin-top: 10px;
margin-left: 17px;
display: inline-block;
height: 18px;
width: 16px;
background: url("/activity/people.png") no-repeat center center;
}
.eye-icon {
margin-top: 10px;
margin-left: 15px;
display: inline-block;
height: 17px;
width: 23px;
background: url("/activity/eye.png") no-repeat center center;
}
.people-sum {
display: inline-block;
font-size: 22px;
color: $white;
}
}
}
... ...