spxq.html
15.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频详情</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/spxq.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_bamhpf0xfl8.css">
<link rel="stylesheet" href="css/public.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.icon-caidan{
font-size: 0.5rem;
}
.icon-magnifier{
color: #999999;
}
.f_size{
font-weight: normal;
font-size: 0.18rem;
}
.icon-xiugai{
margin-left: 0.15rem;
font-size: 0.3rem;
color: #999999;
display: flex;
font-weight: bold;
align-items: center;
}
.top_dot{
width: 0.08rem;
height: 0.08rem;
background:rgba(166,16,16,1);
border:1px solid rgba(255, 255, 255, 1);
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
}
.color_black{
color: black;
}
.margin_t{
margin-top: 0.1rem;
}
/*底部菜单*/
.font_s{
font-size: 0.4rem;
color: #A61010;
}
.icon-bilibilidonghua{
font-size: 0.8rem;
}
.share_color{
color: #999999;
position: relative;
}
.icon-weibo-copy{
display: flex;
}
.size_icon{
font-size: 0.34rem;
}
.icon-shangsanjiao{
position: absolute;
color: #fff;
/*border:1px solid #f5f5f5;*/
right: 0;
top: -0.2rem;
/*box-shadow: 0 0 0.1rem 0.01rem rgba(0, 0, 0, 0.08);*/
}
.bottom_icon{
font-size: 0.16rem;
}
.icon-weixin{
font-size: 0.4rem;
}
.icon-NGlianshu{
font-size: 0.38rem;
}
.red_color{
color: #A61010;
}
.banner video{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<!--顶部菜单-->
<div class="top_t">
<!--左-->
<div class="top_t_left">
<!--中文字-->
<div class="top_t_left_text">
中
</div>
<!--菜单图标-->
<div class="iconfont icon-caidan">
<!--<div class=""></div>-->
<!--菜单列表-->
<div class="menu_item" style="display: none;">
<!--<p class="index_jump">主页</p >-->
<!--<p class="rwxq_jump">人物详情</p>-->
<!--<p class="grzy_jump">个人主页</p>-->
<!--<p class="spxq_jump">视频详情</p>-->
<a href="index.html">
<div class="menu_item_a">
<div>首页</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>精选</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>动态</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
<a href="">
<div class="menu_item_a">
<div>百科</div>
<div class="menu_item_a_pic">
<img src="images/you@2x.png">
</div>
</div>
</a>
</div>
</div>
</div>
<!--中-->
<div class="top_t_middle">
<img src="images/icon_1.png">
</div>
<!--右-->
<div class="top_t_right">
<!--铃声-->
<div class="iconfont icon-10">
<div class="top_dot"></div>
</div>
<div class="top_t_right_text">
注册/登录
</div>
<!--头像-->
<div class="top_t_right_pic" style="display: none">
<img src="images/1.png">
</div>
</div>
</div>
<!--底部搜索-->
<div class="top_d">
<div class="iconfont icon-magnifier"></div>
<input class="top_d_input" placeholder="搜索音乐/作品/风格">
</div>
</div>
<div class="banner">
<video src="video/Bugatti_1.mp4" controls="controls" poster="images/banner_5.png" x5-playsinline webkit-playsinline playsinline x-webkit-airplay="allow" x5-video-player-type="h5" width={document.documentElement.clientWidth} height={document.documentElement.clientWidth * 9 / 16} style="width: 7.5rem; height: 3.6rem; object-fit: fill;display: block;
position: absolute;top: 0rem;
left: 0;
z-index: 9;">
<!-- <img src="images/banner_5.png">-->
</video>
</div>
<div class="items">
<div class="item">
<div class="item_pic">
<img src="images/banner_1.png">
</div>
<div class="item_text">
少数派的音乐不少数派的音乐不少数派的音乐不
</div>
</div>
<div class="item">
<div class="item_pic">
<img src="images/banner_1.png">
</div>
<div class="item_text">
少数派的音乐不少数派的音乐不少数派的音乐不
</div>
</div>
<div class="item">
<div class="item_pic">
<img src="images/banner_1.png">
</div>
<div class="item_text">
少数派的音乐不少数派的音乐不少数派的音乐不
</div>
</div>
<div class="item">
<div class="item_pic">
<img src="images/banner_1.png">
</div>
<div class="item_text">
少数派的音乐不少数派的音乐不少数派的音乐不
</div>
</div>
<div class="item">
<div class="item_pic">
<img src="images/banner_1.png">
</div>
<div class="item_text">
少数派的音乐不少数派的音乐不少数派的音乐不
</div>
</div>
</div>
<div class="mid">
<!--标题-->
<div class="mid_title">
少一点抱怨，多一点积极
</div>
<!--信息栏-->
<div class="mid_infor">
<div class="mid_infor_left">
<div class="mid_infor_left_pic">
<img src="images/banner_1.png">
</div>
<div class="mid_infor_left_text">
哪里来的猴子
</div>
</div>
<div class="mid_infor_right">
2018年12月31日
</div>
</div>
<!--文章内容-->
<div class="mid_text">
有的人生活光彩夺目，有的人生活布满荆棘。
<br>
<br>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢?
<br>
<br>很多时候，我们更多的是站在自己的一个渺小的角落，思考着我们所处的问题，而忽略了大的环境所能赐予我们的能量。
<br>
<br>生活中，我 们可能基础环境过于薄弱，导致我们的生活经历了辛酸，往往就会羡慕和想要我们所不能及的生活，而忽略了我们所拥有的美好;某些人，会在困苦中涅重生，改变自己被动的困境;而有些人，则更多的是抱怨、是颓废，得到的仅仅只能是越来越困苦的生活，越来越被动的人生，自己也变得失落，迷茫。
<br>
<br>其实我们有没有想过，我们今天的生活，自己再多的抱怨又有什么用呢?抱怨了，生活变好了嘛?是否通过抱怨实现了自己想要的生活呢?答案肯定是没有的，生活还是一成不变的，并不会有所改变，改变的只是个人的心态，永远是生活在悲观之中，所以，为什么还要继续去抱怨呢?
<br>
<br>工作中，我们难免会遇到一些棘手的事情，而不管是大公司还是小公司，不管是什么岗位总会有那么些人，喜欢将烦死了、急死了、麻烦死了等一些词汇挂在嘴边。
<br>
<br>这个对于刚刚参加工作的小白来说很正常，但是要及时
</div>
<!--图片-->
<div class="mid_pic">
<img src="images/text.png">
</div>
<!--文章内容-->
<div class="mid_text">
有的人生活光彩夺目，有的人生活布满荆棘。
<br>
<br>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢?
<br>
<br>很多时候，我们更多的是站在自己的一个渺小的角落，思考着我们所处的问题，而忽略了大的环境所能赐予我们的能量。
<br>
</div>
<!--引用人物-->
<div class="mid_people">
<div class="mid_people_title">
引用人物
</div>
<div class="mid_people_name">
陈其钢 叶小钢
</div>
</div>
<!--引用作品-->
<div class="mid_people">
<div class="mid_people_title">
引用人物
</div>
<div class="mid_people_name">
《中国音乐史》 《History of Arts》 蝶恋花
</div>
</div>
</div>
<div class="share">
<div class="share_items">
<div class="share_item">艺术家姓名</div>
<div class="share_item">长笛</div>
<div class="share_item">音乐风格</div>
<div class="iconfont icon-xinaixin share_color">
<span class="share_size">1235</span>
</div>
<div class="iconfont icon-fenxiang share_color">
<div class="share_box" style="display: none;">
<!--分享内容-->
<div class="share_function">
<div class="share_function_item MicrBlog">
<div class="iconfont icon-weibo-copy size_icon"></div>
<p>微博</p>
</div>
<div class="share_function_item WeChat">
<div class="iconfont icon-weixin size_icon"></div>
<p>微信</p>
</div>
<div class="share_function_item Twitter">
<div class="iconfont icon-tuite size_icon"></div>
<p>推特</p>
</div>
<div class="share_function_item FaceBook">
<div class="iconfont icon-NGlianshu size_icon"></div>
<p>脸书</p>
</div>
</div>
<!--上三角-->
<div class="iconfont icon-shangsanjiao"></div>
</div>
</div>
</div>
</div>
<!--信息栏目-->
<div class="message_text">
<textarea type="text"></textarea>
</div>
<div class="sub_box">
<div></div>
<div class="message_sub">
发送
</div>
</div>
<!--评论-->
<div class="comment">
<div class="comment_title">
评论(1256)
</div>
<div class="comment_item">
<div class="comment_item_left">
<img src="images/1.png">
</div>
<div class="comment_item_right">
<div class="comment_item_right_name">
魔力怪
</div>
<div class="comment_item_right_text">
<p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
<p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>
</div>
<!--时间日期-->
<div class="comment_item_bottom">
<div class="comment_item_bottom_left">
2018年12月31日
</div>
<div class="comment_item_bottom_right">
<div class="comment_item_bottom_right_item">举报</div>
<div class="comment_item_bottom_right_item delect">删除</div>
<div class="iconfont icon-dianzan bottom_icon ">
<span class="num_1">222</span>
</div>
<div class="iconfont icon-xiaoxi bottom_icon"></div>
</div>
</div>
<div class="reply_box">
<!--回复内容-->
<div class="comment_reply">
<div class="comment_item_left pic_small">
<img src="images/1.png">
</div>
<div class="comment_item_right">
<div class="comment_item_right_name">
魔力怪
</div>
<div class="comment_item_right_text">
<p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。
<p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p>
</div>
</div>
</div>
<!--时间日期-->
<div class="comment_item_bottom margin_to">
<div class="comment_item_bottom_left">
2018年12月31日
</div>
<div class="comment_item_bottom_right">
<div class="comment_item_bottom_right_item">举报</div>
<div class="comment_item_bottom_right_item delect">删除</div>
<div class="iconfont icon-dianzan bottom_icon">
<span class="num_1">222</span>
</div>
<div class="iconfont icon-xiaoxi bottom_icon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--删除评论提示-->
<div class="delect_comment" style="display: none;">
<div class="delect_comment_box">
<div class="delect_top">您确定要删除吗?</div>
<div class="delect_bottom">
<div class="delect_bottom_left">确定</div>
<div class="delect_bottom_right">取消</div>
</div>
</div>
</div>
</div>
</body>
<script>
// 菜单
$('.icon-caidan').click(function() {
console.log(11)
$('.menu_item').slideToggle();
// 关闭图片功能 2019.4.8
// if($(this).hasClass("icon-caidan")){
// $(this).addClass("icon-guanbi");
// $(this).removeClass("icon-caidan");
// $("body").css("overflow","hidden");
// }else{
// $(this).removeClass("icon-guanbi");
// $(this).addClass("icon-caidan");
// $("body").css("overflow","auto");
// }
})
$('.icon-fenxiang').click(function() {
$('.share_box').slideToggle();
})
//分享微博
$('.MicrBlog').click(function() {
window.location.href = ''
})
//分享微信
$('.WeChat').click(function() {
window.location.href = ''
})
//分享推特
$('.Twitter').click(function() {
window.location.href = ''
})
//分享脸书
$('.FaceBook').click(function() {
window.location.href = ''
})
// 点击关注
var num = $(".share_size").html();
num = Number(num);
$('.icon-xinaixin').click(function() {
if ($(this).hasClass("red_color")) {
$(this).removeClass("red_color");
num = num - 1
} else {
$(this).addClass("red_color")
num = num + 1
}
$(".share_size").html(num)
})
//评论区点赞
$('.icon-dianzan').click(function() {
var num_1 = $(this).children(".num_1").html();
console.log(num_1)
num_1 = Number(num_1);
if ($(this).hasClass("red_color")) {
$(this).removeClass("red_color");
num_1 = num_1 - 1
} else {
$(this).addClass("red_color")
num_1 = num_1 + 1
}
$(this).children(".num_1").html(num_1)
})
//评论区删除
$('.delect').click(function() {
$('.delect_comment').css('display', 'flex')
})
// $('.delect_bottom_right').on('click', function(e) {
//// alert($(this).index());
// console.log(1)
// });
//取消删除
$('.delect_bottom_right').click(function () {
$('.delect_comment').css('display','none')
})
//确定删除
$('.delect_bottom_left').click(function () {
$('.delect_comment').css('display','none')
})
</script>
</html>