首页banner添加视频

src/layouts/home/index.vue

@@ -4,9 +4,7 @@
         <div class="layout">
             <div class="content">
                 <transition name="move" mode="out-in">
-                    <keep-alive>
+                  <router-view class="view"></router-view>
-                        <router-view class="view"></router-view>
-                    </keep-alive>
                 </transition>
                 <el-backtop target=".content"></el-backtop>
                 <v-footer></v-footer>

src/pages/index/list/index.vue

@@ -1,19 +1,25 @@
 <template>
     <div class="wrap" :class="{index: !keyword, result: keyword}">
         <div class="banner">
-            <div class="title" v-if="!keyword">准确，多元，海量数据</div>
+            <video class="video" ref="video" autoplay muted loop>
-            <div class="search-wrap">
+                <source src="@/assets/video/sky.mp4" type="video/mp4">
-                <div class="search">
+                您的浏览器不支持 video 标签。
-                    <input ref="keyword" v-model="keyword" type="text" placeholder="请输入关键词">
+            </video>
-                    <img v-if="keyword" src="../../../assets/img/remove-gray.png" alt="" class="remove" @click="clearKeyword">
+            <div class="banner-inner">
-                    <img class="icon-wrap" src="../../../assets/img/search-gray.png" alt="">
+              <div class="title" v-if="!keyword">准确，多元，海量数据</div>
-                </div>
+              <div class="search-wrap">
-                <div class="hot" v-if="hotData.length">
+                  <div class="search">
-                    <span class="name">热门下载：</span>
+                      <input ref="keyword" v-model="keyword" type="text" placeholder="请输入关键词">
-                    <ul class="list">
+                      <img v-if="keyword" src="../../../assets/img/remove-gray.png" alt="" class="remove" @click="clearKeyword">
-                        <li v-for="(item,index) in hotData" :key="index" @click="toData(item)">{{item.secondName}}</li>
+                      <img class="icon-wrap" src="../../../assets/img/search-gray.png" alt="">
-                    </ul>
+                  </div>
-                </div>
+                  <div class="hot" v-if="hotData.length">
+                      <span class="name">热门下载：</span>
+                      <ul class="list">
+                          <li v-for="(item,index) in hotData" :key="index" @click="toData(item)">{{item.secondName}}</li>
+                      </ul>
+                  </div>
+              </div>
             </div>
         </div>
         <div class="list-wrap" v-if="keyword">
@@ -567,8 +573,18 @@ export default {
     position: relative;
     background-color: #F3F6FA;
     .banner{
-        padding: 160px 0;
+        position: relative;
-        background:  url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
+        height: 518px;
+        overflow: hidden;
+    }
+    .video {
+      width: 100%;
+    }
+    .banner-inner {
+      position: absolute;
+      top: 160px;
+      left: 50%;
+      transform: translateX(-50%);
     }
     .title{
         margin-bottom: 37px;