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