webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 ab331eccad3296c23f9df34e63c59cc4fff9c076 1 个父辈 fd03cbd2

update

内嵌 并排对比
正在显示 7 个修改的文件 包含 185 行增加 和 18 行删除
@@ -156,7 +156,7 @@ @@ -156,7 +156,7 @@
156 } 156 }
157 .new_video_bottom{ 157 .new_video_bottom{
158 width: 2.8rem; 158 width: 2.8rem;
159 - height: 0.4rem; 159 + /*height: 0.4rem;*/
160 display: flex; 160 display: flex;
161 align-items: center; 161 align-items: center;
162 justify-content: space-between; 162 justify-content: space-between;
@@ -189,7 +189,7 @@ @@ -189,7 +189,7 @@
189 .new_video_big{ 189 .new_video_big{
190 margin-top: 0.25rem; 190 margin-top: 0.25rem;
191 width: 6.86rem; 191 width: 6.86rem;
192 - height: 3.6rem; 192 + /*height: 3.6rem;*/
193 background:rgba(255,255,255,1); 193 background:rgba(255,255,255,1);
194 box-shadow:0 0.01rem 0.06rem 0 rgba(116,116,116,0.14); 194 box-shadow:0 0.01rem 0.06rem 0 rgba(116,116,116,0.14);
195 border-radius: 0.1rem; 195 border-radius: 0.1rem;
@@ -213,7 +213,6 @@ @@ -213,7 +213,6 @@
213 } 213 }
214 .new_video_big_bottom{ 214 .new_video_big_bottom{
215 width: 6rem; 215 width: 6rem;
216 - /*height: 0.4rem;*/  
217 display: flex; 216 display: flex;
218 align-items: center; 217 align-items: center;
219 justify-content: space-between; 218 justify-content: space-between;
@@ -16,9 +16,11 @@ @@ -16,9 +16,11 @@
16 opacity: 0.9; 16 opacity: 0.9;
17 position: fixed; 17 position: fixed;
18 top: 1.69rem; 18 top: 1.69rem;
  19 + /*top: 0;*/
19 z-index: 999; 20 z-index: 999;
20 display: flex; 21 display: flex;
21 align-items: center; 22 align-items: center;
  23 + overflow-y: hidden;
22 } 24 }
23 .pop{ 25 .pop{
24 position: absolute; 26 position: absolute;
@@ -42,3 +44,51 @@ @@ -42,3 +44,51 @@
42 padding: 0.42rem; 44 padding: 0.42rem;
43 } 45 }
44 46
  47 +.mask_2{
  48 + opacity: 1;
  49 +}
  50 +/*视频播放*/
  51 +.mask_video{
  52 + width: 6rem;
  53 + /*height: 4rem;*/
  54 + background: #000000;
  55 + position: absolute;
  56 + top: 3rem;
  57 +}
  58 +.mask_video_top{
  59 + height: 0.5rem;
  60 + line-height: 0.5rem;
  61 + font-size: 0.3rem;
  62 + color: #000;
  63 + text-align: center;
  64 + position: relative;
  65 + background-color: #007aff;
  66 +}
  67 +.mask_video_bottom{
  68 + width: 6rem;
  69 + /*height: 3.5rem;*/
  70 + display: flex;
  71 +}
  72 +.mask_video_bottom video{
  73 + width: 100%;
  74 + height: 100%;
  75 +}
  76 +/*菜单*/
  77 +.menu_item{
  78 + width: 1.8rem;
  79 + display: flex;
  80 + flex-flow: column;
  81 + font-size: 0.24rem;
  82 + font-weight: bold;
  83 + background-color: orangered;
  84 + position: absolute;
  85 + top: 0.8rem;
  86 + z-index: 999;
  87 +}
  88 +.menu_item p{
  89 + position: relative;
  90 + line-height: 0.5rem;
  91 + text-align: center;
  92 + border-bottom: 1px solid #F7F7F7;
  93 + margin: 0 0.2rem;
  94 +}
@@ -124,7 +124,7 @@ @@ -124,7 +124,7 @@
124 background:rgba(255,255,255,1); 124 background:rgba(255,255,255,1);
125 box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14); 125 box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14);
126 border-radius: 0.06rem; 126 border-radius: 0.06rem;
127 - margin-left: 0.1rem; 127 + margin-left: 0.12rem;
128 } 128 }
129 .item_pic{ 129 .item_pic{
130 width: 2rem; 130 width: 2rem;
@@ -296,6 +296,7 @@ @@ -296,6 +296,7 @@
296 height: 100%; 296 height: 100%;
297 border: none; 297 border: none;
298 outline: none; 298 outline: none;
  299 + resize: none;
299 box-sizing: border-box; 300 box-sizing: border-box;
300 padding: 0.2rem 0.2rem; 301 padding: 0.2rem 0.2rem;
301 } 302 }
@@ -326,7 +327,8 @@ @@ -326,7 +327,8 @@
326 height: 0.8rem; 327 height: 0.8rem;
327 display: flex; 328 display: flex;
328 justify-content: space-around; 329 justify-content: space-around;
329 - background-color: #e5e5e5; 330 + background-color: #fff;
  331 + box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08);
330 border-radius: 0.04rem; 332 border-radius: 0.04rem;
331 position: absolute; 333 position: absolute;
332 right: 0; 334 right: 0;
@@ -338,6 +340,7 @@ @@ -338,6 +340,7 @@
338 align-items: center; 340 align-items: center;
339 justify-content: space-around; 341 justify-content: space-around;
340 font-size: 0.16rem; 342 font-size: 0.16rem;
  343 + position: relative;
341 } 344 }
342 345
343 /*评论*/ 346 /*评论*/
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
10 <link rel="stylesheet" type="text/css" href="css/index.css"> 10 <link rel="stylesheet" type="text/css" href="css/index.css">
11 <link rel="stylesheet" type="text/css" href="css/index_2.css"> 11 <link rel="stylesheet" type="text/css" href="css/index_2.css">
12 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_u8m5zjdi1u.css"> 12 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_bamhpf0xfl8.css">
13 <script src="js/base.js"></script> 13 <script src="js/base.js"></script>
14 <script src="js/jquery.min.js"></script> 14 <script src="js/jquery.min.js"></script>
15 <link rel="stylesheet" href="css/swiper.css"> 15 <link rel="stylesheet" href="css/swiper.css">
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 } 22 }
23 .icon-bofangshipin{ 23 .icon-bofangshipin{
24 font-size: 0.38rem; 24 font-size: 0.38rem;
25 - 25 + line-height: 1.4;
26 } 26 }
27 .swiper-container { 27 .swiper-container {
28 width: 100%; 28 width: 100%;
@@ -63,6 +63,19 @@ @@ -63,6 +63,19 @@
63 top: 0; 63 top: 0;
64 right: 0; 64 right: 0;
65 } 65 }
  66 + .icon-guanbi{
  67 + position: absolute;
  68 + height: 0.5rem;
  69 + line-height: 0.5rem;
  70 + top: 0;
  71 + right: 0.2rem;
  72 + }
  73 + .icon-shangsanjiao{
  74 + position: absolute;
  75 + top: -0.2rem;
  76 + left: -0.2rem;
  77 + color: orangered;
  78 + }
66 </style> 79 </style>
67 </head> 80 </head>
68 <script src="js/swiper.js"></script> 81 <script src="js/swiper.js"></script>
@@ -78,7 +91,18 @@ @@ -78,7 +91,18 @@
78 中 91 中
79 </div> 92 </div>
80 <!--菜单图标--> 93 <!--菜单图标-->
81 - <div class="iconfont icon-caidan"></div> 94 + <div class="iconfont icon-caidan">
  95 + <!--菜单列表-->
  96 + <div class="menu_item" style="display: none;">
  97 +
  98 + <p class="index_jump">主页
  99 + <span class="iconfont icon-shangsanjiao"></span>
  100 + </p >
  101 + <p class="rwxq_jump">人物详情</p>
  102 + <p class="grzy_jump">个人主页</p>
  103 + <p class="spxq_jump">视频详情</p>
  104 + </div>
  105 + </div>
82 </div> 106 </div>
83 <!--中--> 107 <!--中-->
84 <div class="top_t_middle"> 108 <div class="top_t_middle">
@@ -132,7 +156,7 @@ @@ -132,7 +156,7 @@
132 </div> 156 </div>
133 <!--最新小视频窗口--> 157 <!--最新小视频窗口-->
134 <div class="new_video_item"> 158 <div class="new_video_item">
135 - <div class="new_video"> 159 + <div class="new_video video_player">
136 <div class="new_video_top"> 160 <div class="new_video_top">
137 <img src="images/peke.png"> 161 <img src="images/peke.png">
138 </div> 162 </div>
@@ -149,7 +173,7 @@ @@ -149,7 +173,7 @@
149 </div> 173 </div>
150 </div> 174 </div>
151 </div> 175 </div>
152 - <div class="new_video"> 176 + <div class="new_video video_player">
153 <div class="new_video_top"> 177 <div class="new_video_top">
154 <img src="images/peke.png"> 178 <img src="images/peke.png">
155 </div> 179 </div>
@@ -168,7 +192,7 @@ @@ -168,7 +192,7 @@
168 </div> 192 </div>
169 </div> 193 </div>
170 <!--最新打视频窗口--> 194 <!--最新打视频窗口-->
171 - <div class="new_video_big"> 195 + <div class="new_video_big video_player">
172 <div class="new_video_big_pic"> 196 <div class="new_video_big_pic">
173 <img src="images/peke.png"> 197 <img src="images/peke.png">
174 </div> 198 </div>
@@ -319,6 +343,8 @@ @@ -319,6 +343,8 @@
319 </div> 343 </div>
320 </div> 344 </div>
321 345
  346 +
  347 +
322 <!--动态层--> 348 <!--动态层-->
323 <div class="mask" style="display: none;" > 349 <div class="mask" style="display: none;" >
324 <div class="pop"> 350 <div class="pop">
@@ -332,11 +358,63 @@ @@ -332,11 +358,63 @@
332 百科 358 百科
333 </div> 359 </div>
334 </div> 360 </div>
335 - <!--1111--> 361 + </div>
  362 +
  363 + <!--视频播放层-->
  364 + <div class="mask mask_2" style="display: none">
  365 + <div class="mask_video">
  366 + <div class="mask_video_top">视频
  367 + <!--关闭-->
  368 + <div class="iconfont icon-guanbi"></div>
  369 + </div>
  370 + <div class="mask_video_bottom">
  371 + <video src="video/Bugatti_1.mp4" controls="controls" webkit-playsinline="true" playsinline="true" x5-playsinline="true" id="video_1">
  372 +
  373 + </video>
  374 + </div>
  375 + </div>
336 </div> 376 </div>
337 </div> 377 </div>
338 </body> 378 </body>
339 <script> 379 <script>
  380 + //点击打开菜单
  381 + $('.icon-caidan').click(function () {
  382 + $('.menu_item').slideToggle();
  383 + })
  384 +
  385 + //地址跳转
  386 + $('.index_jump').click(function () {
  387 + window.location.href = 'index_2.html'
  388 + })
  389 + $('.rwxq_jump').click(function () {
  390 + window.location.href = 'rwxq.html'
  391 + })
  392 + $('.grzy_jump').click(function () {
  393 + window.location.href = 'grzy.html'
  394 + })
  395 + $('.spxq_jump').click(function () {
  396 + window.location.href = 'grzy.html'
  397 + })
  398 +
  399 + //点击打开视频
  400 + $('.video_player').click(function () {
  401 + $('.mask_2').css("display","flex");
  402 +
  403 + })
  404 +
  405 + // 点击关闭视频
  406 + $('.icon-guanbi').click(function () {
  407 + $('.mask_2').css("display","none")
  408 + var video = document.getElementById('video_1');
  409 + video.pause()
  410 + })
  411 +
  412 + //点击图片进入视频详情
  413 + $('.pic_box').click(function () {
  414 + window.location.href = "spxq.html"
  415 + })
  416 +
  417 +
340 var swiper = new Swiper('.swiper-container',{ 418 var swiper = new Swiper('.swiper-container',{
341 419
342 loop: true, // 循环模式选项 420 loop: true, // 循环模式选项
@@ -69,13 +69,22 @@ @@ -69,13 +69,22 @@
69 } 69 }
70 .icon-shangsanjiao{ 70 .icon-shangsanjiao{
71 position: absolute; 71 position: absolute;
72 - color: #e5e5e5;  
73 - right: 0;  
74 - top: 0.42rem; 72 + color: #fff;
  73 + right: -0.1rem;
  74 + top: -0.2rem;
75 } 75 }
76 .bottom_icon{ 76 .bottom_icon{
77 font-size: 0.16rem; 77 font-size: 0.16rem;
78 } 78 }
  79 + .icon-weixin{
  80 + font-size: 0.4rem;
  81 + }
  82 + .icon-NGlianshu{
  83 + font-size: 0.38rem;
  84 + }
  85 + .red_color{
  86 + color: #A61010;
  87 + }
79 </style> 88 </style>
80 </head> 89 </head>
81 90
@@ -247,11 +256,14 @@ @@ -247,11 +256,14 @@
247 </div> 256 </div>
248 <div class="iconfont icon-fenxiang share_color"> 257 <div class="iconfont icon-fenxiang share_color">
249 <div class="share_box"> 258 <div class="share_box">
250 - <!--上三角-->  
251 - <div class="iconfont icon-shangsanjiao"></div> 259 +
252 <!--分享内容--> 260 <!--分享内容-->
253 <div class="share_function"> 261 <div class="share_function">
  262 +
  263 +
254 <div class="share_function_item"> 264 <div class="share_function_item">
  265 +
  266 +
255 <div class="iconfont icon-weibo-copy size_icon"></div> 267 <div class="iconfont icon-weibo-copy size_icon"></div>
256 <p>微博</p> 268 <p>微博</p>
257 </div> 269 </div>
@@ -266,6 +278,9 @@ @@ -266,6 +278,9 @@
266 <div class="share_function_item"> 278 <div class="share_function_item">
267 <div class="iconfont icon-NGlianshu size_icon"></div> 279 <div class="iconfont icon-NGlianshu size_icon"></div>
268 <p>脸书</p> 280 <p>脸书</p>
  281 +
  282 + <!--上三角-->
  283 + <!--<div class="iconfont icon-shangsanjiao"></div>-->
269 </div> 284 </div>
270 285
271 </div> 286 </div>
@@ -361,6 +376,21 @@ @@ -361,6 +376,21 @@
361 </div> 376 </div>
362 </body> 377 </body>
363 <script> 378 <script>
  379 + $('.icon-fenxiang').click(function () {
  380 + $('.share_function').slideToggle();
  381 + })
  382 +
  383 + // 点击关注
  384 + $('.icon-xinaixin').click(function () {
  385 + // if ($(this).hasClass("red_color")){
  386 + // $(this).removeClass("red_color").siblings().addClass("red_color")
  387 + // } else
  388 + // {
  389 + // $(this).addClass("red_color").siblings().removeClass('red_color')
  390 + // }
  391 +
  392 +
  393 + })
364 394
365 395
366 </script> 396 </script>
不能预览此文件类型
@@ -344,7 +344,8 @@ @@ -344,7 +344,8 @@
344 <div class="mask_new"> 344 <div class="mask_new">
345 <input class="mask_new_small" type="text" placeholder="手机验证码"> 345 <input class="mask_new_small" type="text" placeholder="手机验证码">
346 </div> 346 </div>
347 - <div class="mask_new_text">获取验证码</div> 347 + <div class="mask_new_text get_code">获取验证码</div>
  348 + <div class="mask_new_text reget" style="display: none;">60秒后重新获取</div>
348 </div> 349 </div>
349 <!--底部按钮--> 350 <!--底部按钮-->
350 <div class="mask_tel_button"> 351 <div class="mask_tel_button">
@@ -485,6 +486,10 @@ @@ -485,6 +486,10 @@
485 $('.mask_new_small').val("") 486 $('.mask_new_small').val("")
486 487
487 }) 488 })
  489 + //获取验证码
  490 + $('.get_code').click(function () {
  491 +
  492 + })
488 493
489 // 设置邮箱 494 // 设置邮箱
490 $('.set_email').click(function () { 495 $('.set_email').click(function () {
@@ -505,5 +510,7 @@ @@ -505,5 +510,7 @@
505 $('.mask_new_input').val('') 510 $('.mask_new_input').val('')
506 }) 511 })
507 512
  513 +
  514 +
508 </script> 515 </script>
509 </html> 516 </html>