|
|
@@ -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 {
|
|
|
|