fe / yohobuywap-node · Commits

Go to a project

Authored by zzzzzzz
Commit 2cfe982d215ce15dba77c78b0dfe96a6ab72e7d1 1 parent e337ae9f

直播中，回看

Inline Side-by-side
Showing 2 changed files with 139 additions and 17 deletions
... ... @@ -4,22 +4,40 @@
<img class="rec-pic" src="" alt="直播预览">
<p class="living">直播</p>
<div class="rec-info">
<img class="head" src="/activity/head.png" alt="头像">
<p class="name">Hybird <span class="name-tag">直播红人</span></p>
<p class="tag">Hybird living show</p>
<img class="rec-head" src="" alt="头像">
<p class="rec-name">Hybird <span class="name-tag">直播红人</span></p>
<p class="rec-tag">Hybird living show</p>
</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="head" src="/activity/head.png" alt="头像">
<p class="name">Fuckkkkkkl <span class="name-tag">潮流大人</span></p>
<p class="tag">啊是的噶德国 living show</p>
<img class="rec-head" src="" alt="头像">
<p class="rec-name">Fuckkkkkkl <span class="name-tag">潮流大人</span></p>
<p class="rec-tag">啊是的噶德国 living show</p>
</div>
</div>
</div>
<div class="live-main">
</div>
<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">哈哈哈哈哈哈哈哈哈哈</p>
<div class="main-people">
<span class="people-icon"></span>
<p class="people-sum">50000人观看</p>
</div>
</section>
</div>
<div class="live-list"></div>
</div>
\ No newline at end of file
... ...
... ... @@ -30,13 +30,13 @@
position: absolute;
top: 25px;
left: 25px;
height: 35px;
width: 70px;
height: 30px;
width: 60px;
background: url("/activity/living-status.png") no-repeat center center;
color: #fff;
font-size: 19px;
text-align: center;
line-height: 35px;
line-height: 30px;
}
.rec-info {
... ... @@ -44,7 +44,7 @@
height: 85px;
width: 320px;
.head {
.rec-head {
position: absolute;
top: 17px;
left: 25px;
... ... @@ -53,7 +53,7 @@
border-radius: 50%;
}
.name {
.rec-name {
position: absolute;
top: 17px;
left: 94px;
... ... @@ -64,16 +64,16 @@
.name-tag {
display: inline-block;
height: 26px;
width: 86px;
font-size: 17px;
height: 22px;
width: 73px;
font-size: 15px;
background: url("/activity/name-tag.png") no-repeat;
color: #fff;
text-align: center;
line-height: 26px;
line-height: 22px;
}
.tag {
.rec-tag {
position: absolute;
bottom: 17px;
left: 94px;
... ... @@ -84,3 +84,107 @@
}
}
}
.live-main {
.title {
width: 640px;
height: 68px;
text-align: center;
line-height: 68px;
color: #444;
font-size: 27px;
}
header {
position: relative;
height: 85px;
width: 640px;
.main-head {
position: absolute;
top: 17px;
left: 25px;
height: 51px;
width: 51px;
border-radius: 50%;
}
.header-info {
position: absolute;
top: 17px;
left: 94px;
line-height: 100%;
.main-name {
font-size: 22px;
color: #444;
margin-bottom: 12px;
}
.main-tag {
font-size: 17px;
color: #b0b0b0;
}
}
}
section {
position: relative;
height: 640px;
width: 640px;
.main-bg {
height: 100%;
width: 100%;
}
.main-living {
position: absolute;
top: 25px;
left: 25px;
height: 30px;
width: 60px;
background: url("/activity/living-status.png") no-repeat center center;
color: #fff;
font-size: 19px;
text-align: center;
line-height: 30px;
}
.main-intro {
position: absolute;
bottom: 64px;
left: 25px;
font-size: 24px;
color: #fff;
}
.main-people {
position: absolute;
bottom: 20px;
left: 25px;
height: 35px;
width: 160px;
font-size: 19px;
background: url("/activity/main-people.png") no-repeat center center;
line-height: 35px;
.people-icon {
position: absolute;
top: 8px;
left: 17px;
display: inline-block;
height: 18px;
width: 16px;
background: url("/activity/people.png") no-repeat center center;
}
.people-sum {
position: absolute;
left: 40px;
font-size: 19px;
color: #fff;
}
}
}
}
... ...