更新时间：2023-02-09 GMT+08:00
app-preview-ticketImage组件
HTML
<div [style]="item.style" class="ticketImage">
<div class="ticketImage_List">
<div
// ngFor为循环指令
*ngFor="let listItem of item.content.divList1.list; index as i1"
(click)="events(listItem.img)"
class="ticketImage_List_item"
[ngClass]="{ ticketImage_List_item_two: item.content.divList1.list.length === 2 }"
>
<img [src]="listItem.img.src" alt="" srcset="" />
<span [innerHTML]="listItem.text.textValue"></span>
</div>
</div>
<div class="ticketImage_TextList">
<div *ngFor="let listItem2 of item.content.divList2.list; index as i2" class="ticketImage_TextList_item">
// innerHTML会把代码片段插入到当前节点中
<div class="ticketImage_TextList_item_title" [innerHTML]="listItem2.textUp.textValue"></div>
<div class="ticketImage_TextList_item_content" [innerHTML]="listItem2.textDown.textValue"></div>
</div>
</div>
<div class="ticketImage_longText">
<div *ngFor="let listItem3 of item.content.divList3.list; index as i3" class="ticketImage_longText_item">
<div class="ticketImage_longText_item_title" [innerHTML]="listItem3.textUp.textValue | html"></div>
<div class="ticketImage_longText_item_content" [innerHTML]="listItem3.textDown.textValue"></div>
</div>
</div>
<div class="ticketImage_tip" [innerHTML]="item.content.divTip.text.textValue"></div>
</div>
CSS
.ticketImage {
padding: 0 23px !important;
box-sizing: border-box;
position: absolute;
.ticketImage_List {
display: flex;
text-align: center;
justify-content: center;
margin-bottom: 18px;
&_item {
width: 60px;
margin-right: 15px;
&:last-child {
margin-right: 0;
}
img {
width: 38px;
height: 38px;
}
span {
display: block;
color: #666666;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&_item_two {
width: 120px;
display: flex;
align-items: center;
margin-top: 10px;
margin-bottom: 10px;
img {
margin-right: 8px;
}
}
}
.ticketImage_TextList {
display: flex;
flex-wrap: wrap;
margin-bottom: 6px;
&_item {
width: 33.33%;
text-align: left;
margin-bottom: 6px;
&:nth-child(3n - 1) {
text-align: center;
}
&:nth-child(3n) {
text-align: right;
}
&_title {
color: #a9a9a9;
font-size: 12px;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 16px;
}
&_content {
color: #1d1d1d;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 19px;
}
}
}
.ticketImage_longText {
margin-bottom: 12px;
&_item {
margin-bottom: 6px;
&_title {
color: #a9a9a9;
font-size: 12px;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
height: 16px;
white-space: nowrap;
}
&_content {
color: #1d1d1d;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 19px;
}
}
}
.ticketImage_tip {
height: 42px;
overflow-y: auto;
color: #a9a9a9;
font-size: 14px;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background-color: #fff;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
&::-webkit-scrollbar-thumb {
background-color: #e6d9d9;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
}
}
JavaScript
// 点击事件
events(val) {
this.PreviewService.emit(val.event);
}
父主题： 子组件代码示例
