文档首页/ 云消息服务 KooMessage/ 开发指南/ 子组件开发/ 子组件代码示例/ app-preview-ticketImage组件
更新时间：2023-02-09 GMT+08:00
查看PDF
分享

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);
}
父主题： 子组件代码示例

相关文档