app-preview-eCommerce组件

HTML

<div class="ECommerce">
 <swiper [autoplay]="false" [loop]="true" *ngIf="item.content.imageList.visibility === 'visible'">
// ngFor为循环指令
<swiperSlide *ngFor="let item of item.content.imageList.listItem">
<div class="swiperImg">
<img [src]="item.image.src" />
</div>
</ swiperSlide >
</swiper>
<video
controls
*ngIf="item.content.video.visibility === 'visible'"
[src]="item.content.video.src"
[poster]="item.content.video.cover"
></video>
<div class="price">
<span
class="price_symbol"
*ngIf="
item.content.divTextArea1.currencyText ? item.content.divTextArea1.currencyText.visibility === 'visible' : true
"
>
{{ item.content.divTextArea1.currencyText ? item.content.divTextArea1.currencyText.textValue : '¥' }}
</span>
<span class="price_real">{{ item.content.divTextArea1.text1.textValue }}</span>
<span class="price_favorable">{{ item.content.divTextArea1.text2.textValue }}</span>
</div>
<div class="divTitle">
{{ item.content.divTextArea2.textTitle.textValue }}
</div>
<div class="divContent">
{{ item.content.divTextArea2.textContent.textValue }}
</div>
<div class="divButton">
<div [class]="{ divButton_left: true, oneButton: item.content.divButton.length === 1 }">
{{ item.content.divButton[0].textValue }}
</div>
<div class="divButton_right" *ngIf="item.content.divButton[1]">
{{ item.content.divButton[1].textValue }}
</div>
</div>
</div>

CSS

.ECommerce .divButton {
display: flex;
justify-content: space-around;
}
.ECommerce .divButton .oneButton {
width: 280px;
background-color: #e3413a;
}
.ECommerce .divButton_left,
.ECommerce .divButton_right {
width: 140px;
height: 36px;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 16px;
border-radius: 40px;
}
.ECommerce .divButton_left {
background-color: #ef9c38;
}
.ECommerce .divButton_right {
background-color: #e3413a;
}
.ECommerce .divContent {
font-size: 13px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-bottom: 20px;
height: 50px;
}
.ECommerce .divContent,
.ECommerce .divTitle {
padding-left: 24px;
padding-right: 24px;
margin-top: 8px;
margin-bottom: 8px;
overflow: hidden;
}
.ECommerce .divTitle {
font-weight: 700;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ECommerce .price {
color: #e3413a;
margin-top: 20px;
padding-left: 24px;
box-sizing: border-box;
white-space: nowrap;
}
.ECommerce .price .price_symbol {
font-size: 14px;
}
.ECommerce .price .price_real {
font-size: 20px;
font-weight: 700;
}
.ECommerce .price .price_favorable {
background-color: #e3413a;
color: #fff;
border-radius: 2px;
display: inline-block;
padding: 1px 4px;
box-sizing: border-box;
transform: translateY(3px);
margin-left: 4px;
font-size: 14px;
letter-spacing: 1px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ECommerce video {
width: 342px;
height: 336px;
}
.swiperImg {
img {
width: 342px;
height: 342px;
display: block;
margin: 0 auto;
}
}

JavaScript

无。