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