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
  1 +var liveModel = require("../models/live");
  2 +
1 exports.index = (req, res, next) => { 3 exports.index = (req, res, next) => {
2 - res.render('entry', {});  
3 - next();  
4 -}; 4 + liveModel.getAllList().then(result => {
  5 + res.render('entry', {
  6 + best: result[0].data,
  7 + living: result[1].data,
  8 + pre: result[2].data,
  9 + record: result[3].data
  10 + });
  11 + }).catch(next);
  12 +};
  1 +var api = global.yoho.ServiceAPI;
  2 +
  3 +//返回所有数据
  4 +const getAllList = () => {
  5 + return Promise.all([_getBestList(), _getLivingList(), _getPrelivingList(), _getRecordList()]);
  6 +}
  7 +//获取精选视频
  8 +const _getBestList = () => {
  9 + return api.get('v1/living/best', {}, true);
  10 +}
  11 +//获取直播中所有视频
  12 +const _getLivingList = () => {
  13 + return api.get('v1/living/listing', {}, true);
  14 +}
  15 +//获取直播预告列表
  16 +const _getPrelivingList = () => {
  17 + return api.get('v1/living/starting', {}, true);
  18 +}
  19 +//获取回看列表
  20 +const _getRecordList = () => {
  21 + return api.get('v1/living/replaying', {}, true);
  22 +}
  23 +module.exports = {
  24 + getAllList
  25 +}
1 <div class="yoho-live"> 1 <div class="yoho-live">
2 - <div class="live-rec">  
3 - <div class="rec-child">  
4 - <img class="rec-pic" src="" alt="直播预览">  
5 - <p class="living">直播</p>  
6 - <div class="rec-info">  
7 - <img class="rec-head" src="" alt="头像">  
8 - <div class="rec-pannel">  
9 - <p class="rec-name">Hybird <span class="name-tag">直播红人</span></p>  
10 - <p class="rec-tag">Hybird living show</p>  
11 - </div>  
12 - </div>  
13 - </div>  
14 - <div class="rec-child">  
15 - <img class="rec-pic" src="" alt="直播预览">  
16 - <p class="pre-living">预告18:00</p>  
17 - <div class="rec-info">  
18 - <img class="rec-head" src="" alt="头像">  
19 - <div class="rec-pannel">  
20 - <p class="rec-name">哥斯达 <span class="name-tag">潮流大人</span></p>  
21 - <p class="rec-tag">啊是的噶德国 living show</p>  
22 - </div>  
23 - </div>  
24 - </div>  
25 - </div> 2 + <div class="live-rec">
  3 + {{#best}}
  4 + <div class="rec-child">
  5 + <img class="rec-pic" src="{{image pic 320 320}}" alt="直播预览">
  6 + <p class="living">直播</p>
  7 + <!-- <p class="pre-living">预告18:00</p> -->
  8 + <div class="rec-info">
  9 + <img class="rec-head" src="{{image master_pic 60 60}}" alt="头像">
  10 + <div class="rec-pannel">
  11 + <p class="rec-name">{{master_name}} <span class="name-tag">{{master_meta}}</span></p>
  12 + <p class="rec-tag">{{title}}</p>
  13 + </div>
  14 + </div>
  15 + </div>
  16 + {{/best}}
  17 + </div>
26 18
27 - <div class="live-main">  
28 - <h2 class="title">直播中</h2>  
29 - <header>  
30 - <img class="main-head" src="" alt="头像">  
31 - <div class="header-info">  
32 - <p class="main-name">aaaasd</p>  
33 - <p class="main-tag">asdfasfa</p>  
34 - </div>  
35 - </header>  
36 - <section>  
37 - <img class="main-bg" src="" alt="正在直播">  
38 - <p class="main-living">直播</p>  
39 - <p class="main-intro">哈哈哈哈哈哈哈哈哈哈aaaajjjj即可链接；离开家；了卡啊点舒服</p>  
40 - <div class="main-people">  
41 - <span class="people-icon"></span>  
42 - <p class="people-sum">50000人观看</p>  
43 - </div>  
44 - </section>  
45 - </div> 19 + {{#living}}
  20 + <div class="live-main">
  21 + <h2 class="title">直播中</h2>
  22 + <header>
  23 + <img class="main-head" src="{{image master_pic 60 60}}" alt="头像">
  24 + <div class="header-info">
  25 + <p class="main-name">{{master_name}}</p>
  26 + <p class="main-tag">{{master_meta}}</p>
  27 + </div>
  28 + </header>
  29 + <section>
  30 + <img class="main-bg" src="{{image pic 640 640}}" alt="正在直播">
  31 + <p class="main-living">直播</p>
  32 + <p class="main-intro">{{title}}</p>
  33 + <div class="main-people">
  34 + <span class="people-icon"></span>
  35 + <p class="people-sum">{{audience_num}}人观看</p>
  36 + </div>
  37 + </section>
  38 + </div>
  39 + {{/living}}
  40 +
  41 +
  42 + <div class="live-list">
  43 + <h2 class="title">直播预告</h2>
  44 + <ul class="list">
  45 + {{#pre}}
  46 + <li class="pre-list">
  47 + <a href="#">
  48 + <img class="pre-pic" src="{{image pic 150 150}}" alt="直播预览图">
  49 + <p class="pre-icon">预告</p>
  50 + <p class="pre-time">今天16:00</p>
  51 + <div class="pre-pannel">
  52 + <p class="pre-title">{{title}}</p>
  53 + <p class="pre-cast">主播：{{master_name}}</p>
  54 + </div>
  55 + </a>
  56 + </li>
  57 + {{/pre}}
  58 + </ul>
  59 + </div>
46 60
47 - <div class="live-list">  
48 - <h2 class="title">直播预告</h2>  
49 - <ul class="list">  
50 - <li class="pre-list">  
51 - <img class="pre-pic" src="" alt="直播预览图">  
52 - <p class="pre-icon">预告</p>  
53 - <p class="pre-time">今天16:00</p>  
54 - <div class="pre-pannel">  
55 - <p class="pre-title">啦啦啦魔兽世界asdfa很快将很快会离开就会立刻会</p>  
56 - <p class="pre-cast">主播：啦啦啦</p>  
57 - </div>  
58 - </li>  
59 - </ul>  
60 - </div>  
61 -</div>  
  61 +
  62 + {{#record}}
  63 + <div class="live-main">
  64 + <a href="#">
  65 + <h2 class="title">精彩回看</h2>
  66 + <header>
  67 + <img class="main-head" src="{{image master_pic 60 60}}" alt="头像">
  68 + <div class="header-info">
  69 + <p class="main-name">{{master_name}}</p>
  70 + <p class="main-tag">{{master_meta}}</p>
  71 + </div>
  72 + </header>
  73 + <section>
  74 + <div class="record-icon"></div>
  75 + <img class="main-bg" src="{{image pic 640 640}}" alt="精彩回放">
  76 + <p class="main-living">回放</p>
  77 + <p class="main-intro">{{title}}</p>
  78 + <div class="main-people">
  79 + <span class="eye-icon"></span>
  80 + <p class="people-sum">{{audience_num}}人看过</p>
  81 + </div>
  82 + </section>
  83 + </a>
  84 + </div>
  85 + {{/record}}
  86 +</div>

905 Bytes | W: | H:

3.58 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
  1 +$titlebg: #ededed;
  2 +$white: #fff;
  3 +$black: #444;
  4 +$red: #d0021b;
  5 +$gray: #b0b0b0;
  6 +
1 .live-rec { 7 .live-rec {
2 height: 420px; 8 height: 420px;
3 width: 640px; 9 width: 640px;
@@ -11,7 +17,7 @@ @@ -11,7 +17,7 @@
11 img { 17 img {
12 height: 320px; 18 height: 320px;
13 width: 320px; 19 width: 320px;
14 - background: gray; 20 + background: gray;
15 } 21 }
16 22
17 .pre-living { 23 .pre-living {
@@ -20,9 +26,9 @@ @@ -20,9 +26,9 @@
20 left: 30px; 26 left: 30px;
21 height: 35px; 27 height: 35px;
22 width: 123px; 28 width: 123px;
23 - border: 1px solid #fff; 29 + border: 1px solid $white;
24 border-radius: 20px; 30 border-radius: 20px;
25 - color: #fff; 31 + color: $white;
26 font-size: 22px; 32 font-size: 22px;
27 text-align: center; 33 text-align: center;
28 line-height: 35px; 34 line-height: 35px;
@@ -34,9 +40,9 @@ @@ -34,9 +40,9 @@
34 left: 30px; 40 left: 30px;
35 height: 35px; 41 height: 35px;
36 width: 70px; 42 width: 70px;
37 - background: #D0021B; 43 + background: $red;
38 border-radius: 20px; 44 border-radius: 20px;
39 - color: #fff; 45 + color: $white;
40 font-size: 22px; 46 font-size: 22px;
41 text-align: center; 47 text-align: center;
42 line-height: 35px; 48 line-height: 35px;
@@ -57,39 +63,41 @@ @@ -57,39 +63,41 @@
57 } 63 }
58 64
59 .rec-pannel { 65 .rec-pannel {
60 - position: absolute;  
61 - top: 20px;  
62 - left: 110px;  
63 -  
64 - .rec-name {  
65 - margin-bottom: 14px;  
66 - font-size: 26px;  
67 - color: #444;  
68 - line-height: 100%;  
69 - }  
70 -  
71 - .name-tag {  
72 - display: inline-block;  
73 - height: 25px;  
74 - width: 85px;  
75 - font-size: 18px;  
76 - background: #444;  
77 - border-radius: 20px;  
78 - color: #fff;  
79 - text-align: center;  
80 - line-height: 25px;  
81 - }  
82 -  
83 - .rec-tag {  
84 - font-size: 20px;  
85 - color: #444;  
86 - line-height: 100%;  
87 - display: -webkit-box;  
88 - overflow: hidden;  
89 - word-break: break-all;  
90 - -webkit-box-orient: vertical;  
91 - -webkit-line-clamp: 2;  
92 - } 66 + position: absolute;
  67 + top: 20px;
  68 + left: 110px;
  69 +
  70 + .rec-name {
  71 + margin-bottom: 14px;
  72 + font-size: 26px;
  73 + color: $black;
  74 + line-height: 100%;
  75 + }
  76 +
  77 + .name-tag {
  78 + position: absolute;
  79 + top: 0;
  80 + display: inline-block;
  81 + height: 26px;
  82 + width: 86px;
  83 + font-size: 18px;
  84 + background: $black;
  85 + margin-left: 10px;
  86 + border-radius: 20px;
  87 + color: $white;
  88 + text-align: center;
  89 + }
  90 +
  91 + .rec-tag {
  92 + font-size: 20px;
  93 + color: $black;
  94 + line-height: 100%;
  95 + display: -webkit-box;
  96 + overflow: hidden;
  97 + word-break: break-all;
  98 + -webkit-box-orient: vertical;
  99 + -webkit-line-clamp: 2;
  100 + }
93 } 101 }
94 } 102 }
95 } 103 }
@@ -101,7 +109,8 @@ @@ -101,7 +109,8 @@
101 height: 80px; 109 height: 80px;
102 text-align: center; 110 text-align: center;
103 line-height: 80px; 111 line-height: 80px;
104 - color: #444; 112 + color: $black;
  113 + background: $titlebg;
105 font-size: 32px; 114 font-size: 32px;
106 } 115 }
107 116
@@ -126,14 +135,14 @@ @@ -126,14 +135,14 @@
126 135
127 .main-name { 136 .main-name {
128 font-size: 26px; 137 font-size: 26px;
129 - color: #444; 138 + color: $black;
130 margin-bottom: 14px; 139 margin-bottom: 14px;
131 line-height: 26px; 140 line-height: 26px;
132 } 141 }
133 142
134 .main-tag { 143 .main-tag {
135 font-size: 20px; 144 font-size: 20px;
136 - color: #b0b0b0; 145 + color: $gray;
137 line-height: 20px; 146 line-height: 20px;
138 } 147 }
139 } 148 }
@@ -144,6 +153,17 @@ @@ -144,6 +153,17 @@
144 height: 640px; 153 height: 640px;
145 width: 640px; 154 width: 640px;
146 155
  156 + .record-icon {
  157 + position: absolute;
  158 + top: 50%;
  159 + left: 50%;
  160 + height: 100px;
  161 + width: 101px;
  162 + margin-left: -50px;
  163 + margin-top: -50px;
  164 + background: url("/activity/record-icon.png");
  165 + }
  166 +
147 .main-bg { 167 .main-bg {
148 height: 100%; 168 height: 100%;
149 width: 100%; 169 width: 100%;
@@ -155,9 +175,9 @@ @@ -155,9 +175,9 @@
155 left: 30px; 175 left: 30px;
156 height: 35px; 176 height: 35px;
157 width: 70px; 177 width: 70px;
158 - background: #D0021B; 178 + background: $red;
159 border-radius: 20px; 179 border-radius: 20px;
160 - color: #fff; 180 + color: $white;
161 font-size: 22px; 181 font-size: 22px;
162 text-align: center; 182 text-align: center;
163 line-height: 35px; 183 line-height: 35px;
@@ -168,12 +188,12 @@ @@ -168,12 +188,12 @@
168 bottom: 75px; 188 bottom: 75px;
169 left: 30px; 189 left: 30px;
170 font-size: 28px; 190 font-size: 28px;
171 - color: #ccc; 191 + color: $gray;
172 display: -webkit-box; 192 display: -webkit-box;
173 - overflow: hidden;  
174 - word-break: break-all;  
175 - -webkit-box-orient: vertical;  
176 - -webkit-line-clamp: 1; 193 + overflow: hidden;
  194 + word-break: break-all;
  195 + -webkit-box-orient: vertical;
  196 + -webkit-line-clamp: 1;
177 } 197 }
178 198
179 .main-people { 199 .main-people {
@@ -183,14 +203,13 @@ @@ -183,14 +203,13 @@
183 height: 40px; 203 height: 40px;
184 width: 185px; 204 width: 185px;
185 font-size: 19px; 205 font-size: 19px;
186 - background: rgba(4,4,4,0.5); 206 + background: rgba(4, 4, 4, 0.5);
187 border-radius: 20px; 207 border-radius: 20px;
188 line-height: 40px; 208 line-height: 40px;
189 209
190 .people-icon { 210 .people-icon {
191 - position: absolute;  
192 - top: 8px;  
193 - left: 17px; 211 + margin-top: 10px;
  212 + margin-left: 17px;
194 display: inline-block; 213 display: inline-block;
195 height: 18px; 214 height: 18px;
196 width: 16px; 215 width: 16px;
@@ -198,9 +217,8 @@ @@ -198,9 +217,8 @@
198 } 217 }
199 218
200 .eye-icon { 219 .eye-icon {
201 - position: absolute;  
202 - top: 8px;  
203 - left: 13px; 220 + margin-top: 10px;
  221 + margin-left: 15px;
204 display: inline-block; 222 display: inline-block;
205 height: 17px; 223 height: 17px;
206 width: 23px; 224 width: 23px;
@@ -208,10 +226,9 @@ @@ -208,10 +226,9 @@
208 } 226 }
209 227
210 .people-sum { 228 .people-sum {
211 - position: absolute;  
212 - left: 40px; 229 + display: inline-block;
213 font-size: 22px; 230 font-size: 22px;
214 - color: #fff; 231 + color: $white;
215 } 232 }
216 } 233 }
217 } 234 }
@@ -225,14 +242,16 @@ @@ -225,14 +242,16 @@
225 height: 80px; 242 height: 80px;
226 text-align: center; 243 text-align: center;
227 line-height: 80px; 244 line-height: 80px;
228 - color: #444; 245 + color: $black;
  246 + background: $titlebg;
229 font-size: 32px; 247 font-size: 32px;
230 } 248 }
231 249
232 .pre-list { 250 .pre-list {
233 position: relative; 251 position: relative;
234 - height: 162px; 252 + height: 190px;
235 width: 100%; 253 width: 100%;
  254 + border-bottom: 1px solid $titlebg;
236 255
237 .pre-pic { 256 .pre-pic {
238 position: absolute; 257 position: absolute;
@@ -248,43 +267,44 @@ @@ -248,43 +267,44 @@
248 left: 220px; 267 left: 220px;
249 height: 35px; 268 height: 35px;
250 width: 70px; 269 width: 70px;
251 - border: 1px solid #444; 270 + border: 1px solid $black;
252 border-radius: 20px; 271 border-radius: 20px;
253 font-size: 22px; 272 font-size: 22px;
254 line-height: 35px; 273 line-height: 35px;
255 text-align: center; 274 text-align: center;
256 - color: #444; 275 + color: $black;
257 } 276 }
258 277
259 .pre-time { 278 .pre-time {
260 position: absolute; 279 position: absolute;
261 top: 20px; 280 top: 20px;
262 left: 310px; 281 left: 310px;
263 - color: #444; 282 + color: $black;
264 font-size: 24px; 283 font-size: 24px;
265 - line-height: 35px; 284 + line-height: 35px;
266 } 285 }
267 286
268 .pre-pannel { 287 .pre-pannel {
269 - position: absolute;  
270 - top: 77px;  
271 - left: 220px; 288 + position: absolute;
  289 + top: 77px;
  290 + left: 220px;
272 } 291 }
  292 +
273 .pre-title { 293 .pre-title {
274 font-size: 28px; 294 font-size: 28px;
275 - color: #444; 295 + color: $black;
276 line-height: 100%; 296 line-height: 100%;
277 margin-bottom: 12px; 297 margin-bottom: 12px;
278 display: -webkit-box; 298 display: -webkit-box;
279 - overflow: hidden;  
280 - word-break: break-all;  
281 - -webkit-box-orient: vertical;  
282 - -webkit-line-clamp: 2; 299 + overflow: hidden;
  300 + word-break: break-all;
  301 + -webkit-box-orient: vertical;
  302 + -webkit-line-clamp: 2;
283 } 303 }
284 304
285 .pre-cast { 305 .pre-cast {
286 font-size: 22px; 306 font-size: 22px;
287 - color: #b0b0b0; 307 + color: $gray;
288 line-height: 100%; 308 line-height: 100%;
289 } 309 }
290 } 310 }