| @@ -29,10 +29,11 @@ | |||
| <div id="daliay"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <el-carousel :interval="4000" type="card" height="200px"> | |||
| <el-carousel :interval="4000" type="card" height="200px" arrow="always"> | |||
| <el-carousel-item v-for="(item, index) in carvideoList" :key="index"> | |||
| <div class="carvideo"> | |||
| <video :src="item.video" /> | |||
| <video :id="'davideo'+index" :src="item.video" @click="videoPlayer(`davideo${index}`, `daplay${index}`)"/> | |||
| <img class="play" src="@/assets/play.png" @click="videoPlayer(`davideo${index}`, `daplay${index}`)" :id="'daplay'+index"> | |||
| </div> | |||
| <a>{{ item.title }}</a> | |||
| </el-carousel-item> | |||
| @@ -163,6 +164,17 @@ export default { | |||
| }) | |||
| } | |||
| } | |||
| }, | |||
| videoPlayer (value, play) { | |||
| const id = document.getElementById(value) | |||
| const playid = document.getElementById(play) | |||
| if (id.paused) { | |||
| id.play() | |||
| playid.style.display = 'none' | |||
| } else { | |||
| id.pause() | |||
| playid.style.display = 'block' | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @@ -374,15 +386,28 @@ export default { | |||
| height: 100% !important; | |||
| } | |||
| } | |||
| :deep.el-carousel__mask { | |||
| background-color: #00000000 !important; | |||
| } | |||
| :deep .el-carousel__indicators--outside, .el-carousel__indicators--horizontal { | |||
| display: none; | |||
| } | |||
| :deep .el-carousel__mask { | |||
| background-color: #00000000 !important; | |||
| } | |||
| :deep .el-carousel__arrow--left { | |||
| left: 280px; | |||
| } | |||
| :deep .el-carousel__arrow--right { | |||
| right: 280px; | |||
| } | |||
| :deep .el-carousel__arrow { | |||
| width: 40px; | |||
| height: 40px; | |||
| border-radius: 0%; | |||
| background-color: #ffffffcc; | |||
| color:#07CAAF; | |||
| font-size: 20px; | |||
| font-weight: bold; | |||
| border-radius: 3px; | |||
| top: 43%; | |||
| } | |||
| .el-carousel__item { | |||
| display: flex; | |||
| @@ -392,6 +417,14 @@ export default { | |||
| .carvideo { | |||
| width: 660px; | |||
| height: 90%; | |||
| position: relative; | |||
| .play { | |||
| position: absolute; | |||
| margin: 0 auto; | |||
| top: 50%; | |||
| margin-left: 45%; | |||
| margin-top: -50px; | |||
| } | |||
| video { | |||
| width: 100%; | |||
| height: 100%; | |||