| @@ -17,7 +17,7 @@ | |||
| <img src="@/assets/tt.png"> | |||
| {{ hotList.right[index].title }} | |||
| </div> | |||
| <p class="content">{{ hotList.right[index].content }}</p> | |||
| <p class="content" v-html="hotList.right[index].content"></p> | |||
| </div> | |||
| <div class="btn"> | |||
| <el-button plain class="more" size="small" @click="routerToCar">MORE</el-button> | |||
| @@ -124,11 +124,11 @@ export default { | |||
| const { data: { message, data } } = await carNewsHotList() | |||
| if (message === 'success') { | |||
| for (const iter of data.list) { | |||
| const { image, video, title, subTitle } = iter.news | |||
| const { image, video, title, detail } = iter.news | |||
| this.hotList.left.push(video) | |||
| this.hotList.right.push({ | |||
| title: title, | |||
| content: subTitle, | |||
| content: detail, | |||
| png: image | |||
| }) | |||
| } | |||
| @@ -219,23 +219,24 @@ export default { | |||
| #hot, #daliay { | |||
| width: 100%; | |||
| background: #E3E5EA; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| // display: flex; | |||
| // align-items: center; | |||
| // justify-content: center; | |||
| padding: 25px 0; | |||
| .content { | |||
| width: 1200px; | |||
| margin: 0 auto; | |||
| // height: 90%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| // display: flex; | |||
| // flex-direction: column; | |||
| // justify-content: space-between; | |||
| .top, .bottom { | |||
| width: 100%; | |||
| } | |||
| .top { | |||
| // min-height: 470px; | |||
| // background: black; | |||
| display: flex; | |||
| // display: flex; | |||
| // padding-bottom: 30px; | |||
| :deep .el-carousel__button { | |||
| width: 5px; | |||
| @@ -243,7 +244,8 @@ export default { | |||
| height: 5px; | |||
| } | |||
| .lr { | |||
| width: 50%; | |||
| // width: 50%; | |||
| width: 650px; | |||
| height: 100%; | |||
| video { | |||
| width: 100%; | |||
| @@ -275,13 +277,13 @@ export default { | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| width: 50%; | |||
| width: 550px; | |||
| padding: 0 40px; | |||
| :deep .el-carousel__indicators--horizontal { | |||
| left: 90%; | |||
| } | |||
| .txtcontent { | |||
| height: 50% !important; | |||
| // height: 50% !important; | |||
| width:100%; | |||
| padding-top: 20px; | |||
| @@ -293,6 +295,7 @@ export default { | |||
| width: 100%; | |||
| display: flex; | |||
| text-align: left; | |||
| margin-top: 30px; | |||
| img { | |||
| width: 60px; | |||
| height: 28px; | |||
| @@ -304,25 +307,29 @@ export default { | |||
| } | |||
| p { | |||
| text-align: left; | |||
| width: 85%; | |||
| width: auto; | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| line-height: 30px; | |||
| color: #ffffff83; | |||
| margin-top: 25px; | |||
| word-wrap: break-word; | |||
| } | |||
| } | |||
| .btn { | |||
| height: 20%; | |||
| // height: 20%; | |||
| width:100%; | |||
| position: relative; | |||
| text-align: left; | |||
| .more { | |||
| position: absolute; | |||
| left: 0px; | |||
| // position: absolute; | |||
| // left: 0px; | |||
| background: none !important; | |||
| border: 1px solid #00F6BD; | |||
| opacity: 0.8; | |||
| border-radius: 4px; | |||
| color: #00F6BD; | |||
| margin-top: 30px; | |||
| } | |||
| } | |||
| } | |||
| @@ -335,6 +342,11 @@ export default { | |||
| } | |||
| } | |||
| } | |||
| #hot :deep .el-carousel__indicators--horizontal { | |||
| right: 50px; | |||
| left: auto; | |||
| bottom: 20px; | |||
| } | |||
| #daliay { | |||
| background: #F2F4F8; | |||
| padding-top: 60px; | |||
| @@ -376,7 +388,7 @@ export default { | |||
| line-height: 30px; | |||
| width: 100%; | |||
| text-align: left; | |||
| margin-top: 10px; | |||
| margin-top: 30px; | |||
| } | |||
| } | |||
| .btn { | |||