更新时间：2023-02-09 GMT+08:00
app-preview-moreGoods组件
HTML
<div :style="item.style" class="moreGoods">
<div class="title">
// innerHTML会把代码片段插入到当前节点中
<span class="title-name" [innerHTML]="item.content.divheader.text1.textValue"></span>
<span
class="title-icon"
(click)="events(item.content.divheader.imageIcon)"
*ngIf="item.content.divheader.imageIcon.visibility === 'visible'"
>
<ti-icon name="angle-right"></ti-icon>
</span>
</div>
<div class="subhead" [innerHTML]="item.content.divheader.text2.textValue"></div>
<div class="content">
<div
class="content-item"
*ngFor="let item of item.content.divItemList; index as index"
(click)="events(item.divTextButton)"
>
<div class="content-item-imgBox">
<img [src]="item.divTextImage.image1.src" alt="" />
</div>
<div class="content-item-good">
<div class="content-item-good-name" [innerHTML]="item.divTextButton.text4.textValue"></div>
<div class="content-item-good-tags">
<span [innerHTML]="item.divTextButton.text5.textValue"></span>
<span
*ngIf="item.divTextButton.text7.textValue"
[innerHTML]="item.divTextButton.text7.textValue"
></span>
</div>
<div class="content-item-good-buttonBox">
<div class="content-item-good-buttonBox-price">
<span
*ngIf="item.divTextButton.text.visibility === 'visible'"
class="content-item-good-buttonBox-price-symbol"
>{{ item.divTextButton.text.textValue }}</span
>
<span
[innerHTML]="item.divTextButton.text6.textValue"
class="content-item-good-buttonBox-price-money"
></span>
</div>
<div
class="content-item-good-buttonBox-button"
[innerHTML]="item.divTextButton.button1.textValue"
></div>
</div>
</div>
</div>
</div>
</div>
CSS
.moreGoods {
height: 100%;
box-sizing: border-box;
background-color: #ffdada;
background-image: url(https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/goodsBg.png);
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
.title {
font-size: 20px;
color: #fff;
text-align: center;
line-height: 36px;
height: 36px;
background-color: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 15px 12px 0;
justify-content: center;
align-items: center;
display: flex;
&-name {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-icon {
color: #ff0d51;
background-color: #fff;
display: inline-block;
border-radius: 20px;
width: 30px;
height: 20px;
line-height: 20px;
font-size: 14px;
margin-left: 6px;
ti-icon {
font-weight: bold;
}
}
}
.subhead {
font-size: 14px;
color: #fff;
text-align: center;
line-height: 24px;
height: 24px;
background-color: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
margin-bottom: 12px;
}
.content {
&-item {
background-color: #fff;
height: 122px;
width: 324px;
margin: 0 auto;
border-radius: 8px;
margin-bottom: 10px;
padding: 8px;
box-sizing: border-box;
display: flex;
&-imgBox {
width: 106px;
height: 106px;
img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
&-good {
flex: 1;
margin-left: 12px;
&-name {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
line-height: 22px;
margin-bottom: 4px;
height: 44px;
}
&-tags {
height: 20px;
overflow-y: auto;
margin-bottom: 8px;
span {
border: 1px solid #fa2a2d;
color: #fa2a2d;
border-radius: 3px;
font-size: 12px;
padding: 0px 3px;
&:first-child {
margin-right: 3px;
}
}
}
&-buttonBox {
display: flex;
justify-content: space-between;
line-height: 30px;
&-price {
font-size: 18px;
color: #fa2a2d;
display: flex;
align-items: center;
&-symbol {
font-size: 15px;
}
&-money {
display: inline-block;
max-width: 98px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
&-button {
width: 80px;
height: 30px;
line-height: 30px;
background-color: #fa2a2d;
border-radius: 30px;
text-align: center;
color: #fff;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
}
}
}
JavaScript
// 点击事件
events(val) {
this.PreviewService.emit(val.event);
}
父主题： 子组件代码示例
