首页banner添加视频

dev_2022-04-07
yujialong 3 years ago
parent 34d93e1f29
commit bf93450b76
  1. BIN
      src/assets/video/sky.mp4
  2. 2
      src/layouts/home/index.vue
  3. 20
      src/pages/index/list/index.vue

Binary file not shown.

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

@ -1,6 +1,11 @@
<template>
<div class="wrap" :class="{index: !keyword, result: keyword}">
<div class="banner">
<video class="video" ref="video" autoplay muted loop>
<source src="@/assets/video/sky.mp4" type="video/mp4">
您的浏览器不支持 video 标签
</video>
<div class="banner-inner">
<div class="title" v-if="!keyword">准确多元海量数据</div>
<div class="search-wrap">
<div class="search">
@ -16,6 +21,7 @@
</div>
</div>
</div>
</div>
<div class="list-wrap" v-if="keyword">
<div class="tips">
<p class="result"><img src="@/assets/img/index/search.png" alt=""> 搜索结果</p>
@ -567,8 +573,18 @@ export default {
position: relative;
background-color: #F3F6FA;
.banner{
padding: 160px 0;
background: url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
position: relative;
height: 518px;
overflow: hidden;
}
.video {
width: 100%;
}
.banner-inner {
position: absolute;
top: 160px;
left: 50%;
transform: translateX(-50%);
}
.title{
margin-bottom: 37px;

Loading…
Cancel
Save