| @@ -10,7 +10,7 @@ | |||||
| </div> | </div> | ||||
| <div id="hottxt"> | <div id="hottxt"> | ||||
| <div id="htitle"> | <div id="htitle"> | ||||
| <a class="tle">汽车文章</a> | |||||
| <a class="tle">热点新闻</a> | |||||
| <el-button type="text" @click="routerTo">MORE+</el-button> | <el-button type="text" @click="routerTo">MORE+</el-button> | ||||
| </div> | </div> | ||||
| <div id="hotList"> | <div id="hotList"> | ||||
| @@ -31,7 +31,9 @@ | |||||
| <div class="top"> | <div class="top"> | ||||
| <el-carousel :interval="4000" type="card" height="200px"> | <el-carousel :interval="4000" type="card" height="200px"> | ||||
| <el-carousel-item v-for="(item, index) in carvideoList" :key="index"> | <el-carousel-item v-for="(item, index) in carvideoList" :key="index"> | ||||
| <img :src="item.img"> | |||||
| <div class="carvideo"> | |||||
| <video :src="item.video" /> | |||||
| </div> | |||||
| <a>{{ item.title }}</a> | <a>{{ item.title }}</a> | ||||
| </el-carousel-item> | </el-carousel-item> | ||||
| </el-carousel> | </el-carousel> | ||||
| @@ -44,7 +46,7 @@ | |||||
| <div id="wk"> | <div id="wk"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="htitle"> | <div class="htitle"> | ||||
| <a class="tle">热点新闻</a> | |||||
| <a class="tle">汽车文章</a> | |||||
| <el-button type="text" @click="routerTo">MORE+</el-button> | <el-button type="text" @click="routerTo">MORE+</el-button> | ||||
| </div> | </div> | ||||
| <div id="hotList"> | <div id="hotList"> | ||||
| @@ -153,9 +155,11 @@ export default { | |||||
| const { data: { message, data } } = await videoList() | const { data: { message, data } } = await videoList() | ||||
| if (message === 'success') { | if (message === 'success') { | ||||
| for (const iter of data.list) { | for (const iter of data.list) { | ||||
| console.log(iter) | |||||
| this.carvideoList.push({ | this.carvideoList.push({ | ||||
| title: iter.title, | title: iter.title, | ||||
| img: iter.image | |||||
| img: iter.image, | |||||
| video: iter.link | |||||
| }) | }) | ||||
| } | } | ||||
| } | } | ||||
| @@ -376,15 +380,23 @@ export default { | |||||
| } | } | ||||
| :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 { | |||||
| background-color: #00000000 !important; | |||||
| } | } | ||||
| .el-carousel__item { | .el-carousel__item { | ||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| // justify-content: center; | // justify-content: center; | ||||
| align-items: center; | align-items: center; | ||||
| img { | |||||
| width: 800px; | |||||
| height: 80%; | |||||
| .carvideo { | |||||
| width: 700px; | |||||
| height: 70%; | |||||
| border-radius: 20px; | |||||
| video { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | } | ||||
| a { | a { | ||||
| font-size: 24px; | font-size: 24px; | ||||