Browse Source

edit css

master
chutingting 1 year ago
parent
commit
9086574343
1 changed files with 30 additions and 18 deletions
  1. +30
    -18
      src/views/home/index.vue

+ 30
- 18
src/views/home/index.vue View File

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


Loading…
Cancel
Save