| @@ -29,10 +29,11 @@ | |||||
| <div id="daliay"> | <div id="daliay"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="top"> | <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"> | <el-carousel-item v-for="(item, index) in carvideoList" :key="index"> | ||||
| <div class="carvideo"> | <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> | </div> | ||||
| <a>{{ item.title }}</a> | <a>{{ item.title }}</a> | ||||
| </el-carousel-item> | </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; | height: 100% !important; | ||||
| } | } | ||||
| } | } | ||||
| :deep.el-carousel__mask { | |||||
| background-color: #00000000 !important; | |||||
| } | |||||
| :deep .el-carousel__indicators--outside, .el-carousel__indicators--horizontal { | :deep .el-carousel__indicators--outside, .el-carousel__indicators--horizontal { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| .el-carousel__mask { | |||||
| :deep .el-carousel__mask { | |||||
| background-color: #00000000 !important; | 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 { | .el-carousel__item { | ||||
| display: flex; | display: flex; | ||||
| @@ -390,12 +415,20 @@ export default { | |||||
| // justify-content: center; | // justify-content: center; | ||||
| align-items: center; | align-items: center; | ||||
| .carvideo { | .carvideo { | ||||
| width: 700px; | |||||
| height: 70%; | |||||
| border-radius: 20px; | |||||
| width: 660px; | |||||
| height: 90%; | |||||
| position: relative; | |||||
| .play { | |||||
| position: absolute; | |||||
| margin: 0 auto; | |||||
| top: 50%; | |||||
| margin-left: 45%; | |||||
| margin-top: -50px; | |||||
| } | |||||
| video { | video { | ||||
| width: 100%; | width: 100%; | ||||
| height: 100%; | height: 100%; | ||||
| border-radius: 20%; | |||||
| } | } | ||||
| } | } | ||||
| a { | a { | ||||