| @@ -13,7 +13,29 @@ | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div id="videocar" class="lr"> | |||
| <el-carousel :interval="5000" arrow="always" height="470px"> | |||
| <template v-for="(item, index) in hotList.left" > | |||
| <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'"> | |||
| <div class="lr videocar"> | |||
| <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"> | |||
| </div> | |||
| <div id="hottxt" class="lr"> | |||
| <div class="txtcontent"> | |||
| <div class="title"> | |||
| <img src="@/assets/tt.png"> | |||
| {{ hotList.right[index].title }} | |||
| </div> | |||
| <p class="content">{{ hotList.right[index].content }}</p> | |||
| </div> | |||
| <div class="btn"> | |||
| <el-button plain class="more" size="small">MORE</el-button> | |||
| </div> | |||
| </div> | |||
| </el-carousel-item> | |||
| </template> | |||
| </el-carousel> | |||
| <!-- <div id="videocar" class="lr"> | |||
| <el-carousel :interval="5000" arrow="always" height="470px"> | |||
| <template v-for="(item, index) in hotList.left" > | |||
| <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'"> | |||
| @@ -22,8 +44,8 @@ | |||
| </el-carousel-item> | |||
| </template> | |||
| </el-carousel> | |||
| </div> | |||
| <div id="hottxt" class="lr"> | |||
| </div> --> | |||
| <!-- <div id="hottxt" class="lr"> | |||
| <el-carousel :interval="5000" height="470px"> | |||
| <el-carousel-item v-for="item in hotList.right" :key="item.title"> | |||
| <div class="txtcontent"> | |||
| @@ -38,7 +60,7 @@ | |||
| </div> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| </div> | |||
| </div> --> | |||
| </div> | |||
| <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/> | |||
| </div> | |||
| @@ -260,10 +282,15 @@ export default { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .videocar { | |||
| position: relative; | |||
| .play { | |||
| position: absolute; | |||
| margin: 0 auto; | |||
| top: 50%; | |||
| margin-left: 45%; | |||
| margin-top: -50px; | |||
| } | |||
| } | |||
| @@ -277,6 +304,11 @@ export default { | |||
| background-position: 140% -165px; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 140% 130%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| width: 50%; | |||
| padding: 0 40px; | |||
| :deep .el-carousel__indicators--horizontal { | |||
| left: 90%; | |||
| } | |||
| @@ -285,15 +317,10 @@ export default { | |||
| border-radius: 50%; | |||
| height: 5px; | |||
| } | |||
| .el-carousel__item { | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| width: 90%; | |||
| padding: 0 40px; | |||
| .txtcontent { | |||
| height: 50% !important; | |||
| width:100%; | |||
| padding-top: 20px; | |||
| .title { | |||
| height: 26px; | |||
| @@ -333,7 +360,6 @@ export default { | |||
| color: #00F6BD; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .bottom { | |||