| @@ -15,9 +15,10 @@ | |||||
| <div class="top"> | <div class="top"> | ||||
| <div id="videocar" class="lr"> | <div id="videocar" class="lr"> | ||||
| <el-carousel :interval="5000" arrow="always" height="470px"> | <el-carousel :interval="5000" arrow="always" height="470px"> | ||||
| <template v-for="item in hotList.left" > | |||||
| <template v-for="(item, index) in hotList.left" > | |||||
| <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'"> | <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'"> | ||||
| <video :src="item" /> | |||||
| <video :id="'video'+index" :src="item" @click="videoPlayer(`video${index}`, `play${index}`)"/> | |||||
| <img class="play" src="@/assets/play.png" @click="videoPlayer(`video${index}`, `play${index}`)" :id="'play'+index"> | |||||
| </el-carousel-item> | </el-carousel-item> | ||||
| </template> | </template> | ||||
| </el-carousel> | </el-carousel> | ||||
| @@ -160,6 +161,17 @@ export default { | |||||
| if (message === 'success') { | if (message === 'success') { | ||||
| this.display = display | this.display = display | ||||
| } | } | ||||
| }, | |||||
| 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' | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -223,7 +235,19 @@ export default { | |||||
| .lr { | .lr { | ||||
| width: 50%; | width: 50%; | ||||
| height: 100%; | height: 100%; | ||||
| position: relative; | |||||
| video { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| .play { | |||||
| position: absolute; | |||||
| margin: 0 auto; | |||||
| top: 50%; | |||||
| margin-top: -50px; | |||||
| } | |||||
| } | } | ||||
| .el-carousel { | .el-carousel { | ||||
| width: 100% !important; | width: 100% !important; | ||||
| } | } | ||||
| @@ -352,11 +376,9 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .yyzrbimg { | .yyzrbimg { | ||||
| // background-image: url('../../assets/yyzrb.png'); | |||||
| // background-size: 100% 100%; | |||||
| width: 50% !important; | width: 50% !important; | ||||
| img{ | img{ | ||||
| width: 600px; | |||||
| width: 580px; | |||||
| height: 438px; | height: 438px; | ||||
| } | } | ||||
| } | } | ||||