bug

5iux · Nov 17, 2020 · c910279 · c910279 · vercel · Nov 17, 2020
1 parent 47074c1
commit c910279
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -36,6 +36,14 @@
 </head>
 
 <body>
+    <!--视频头部背景-->
+    <div class="banner-video">
+        <!--视频来自阿里云首页，有需要请自行更换-->
+        <video autoplay loop muted>
+            <source src="https://acd-assets.alicdn.com/20201111/3840-banner.mp4" type="video/mp4"></video>
+        <!---source src="https://cdn.jsdelivr.net/gh/5iux/uploads/pic/3840-banner.mp4" type="video/mp4"></video-->
+    </div>
+
     <!--topbar开始-->
     <style>
         .navbar-toggler svg{ width: 24px; height: 24px; }
@@ -85,14 +93,7 @@
         </div>
     </nav>
     <!--topbar结束-->
-    <div class="container" style="margin-top: 100px; position: relative;">
-        <!--视频头部背景-->
-        <div class="banner-video">
-            <!--视频来自阿里云首页，有需要请自行更换-->
-            <video width="100%" autoplay loop muted>
-                <source src="https://acd-assets.alicdn.com/20201111/3840-banner.mp4" type="video/mp4"></video>
-                <!---source src="https://cdn.jsdelivr.net/gh/5iux/uploads/pic/3840-banner.mp4" type="video/mp4"></video-->
-        </div>
+    <div class="container" style="margin-top: 100px; position: relative; z-index: 100;">
         <!--搜索开始-->
         <div id="search" class="s-search">
             <div id="search-list" class="hide-type-list">

diff --git a/style.css b/style.css
@@ -45,11 +45,14 @@ svg.icon { width: 14px; height: 14px; margin: 0 5px 0 8px; vertical-align: -0.15
 .mylist li.title .icon{color: #fff;}
 .banner-video {
     position: absolute;
-    width: 1920px;
+    width: 100%;
     height: 270px; overflow: hidden;
-    left: 50%;
-    margin-left: -960px;
-    margin-top: -160px;
+    left: 0; top:0;
+}
+.banner-video video{
+    position: absolute;
+    width: 1920px;
+    left:50%; margin-left: -960px;
 }
 
 @media screen and (min-width:1200px){
@@ -60,7 +63,8 @@ svg.icon { width: 14px; height: 14px; margin: 0 5px 0 8px; vertical-align: -0.15
     #he-plugin-simple{ overflow: hidden ; }
 }
 @media screen and (max-width:767px){
-    .banner-video {display: none;}
+    .banner-video{ height: 210px;}
+    .banner-video video{ width: 760px; margin-left: -380px; margin-top: 60px;}
     #search{margin:25px auto 15px}
     .s-type-list label{padding:5px 0}
     .search-type{overflow:hidden}