@Entry
@Component
struct ZhihuComment {
  @State message: string = 'Hello World'

  build() {
    Column() {
      ZhiHuHeader()
      ZhihuItem()
    }
    .width('100%')
  }
}

@Component
struct ZhiHuHeader {
  build() {
    Row(){
      Row() {
        Image($r('app.media.icon'))
          .width(12)
          .height(12)
          .fillColor('#848484')
      }
      .width(24)
      .aspectRatio(1)
      .backgroundColor('#f4f4f4')
      .borderRadius(20)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .margin({
        left:15
      })

      Text('评论回复')
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .fontSize(18)
        .padding({
          right: 39
        })
        .fontWeight(400)

    }
    .width('100%')
    .alignItems(VerticalAlign.Center)
    .border({
      color: '#f4f4f4',
      width: {
        bottom:1
      }
    })
    .height(50)

  }
}

@Component
struct ZhihuItem {
  build() {
    Row() {
      Image($r('app.media.icon'))
        .width(50)
        .height(50)
        .borderRadius(25)

      Column() {
        Text('周杰伦')
          .fontSize(20)
          .fontColor('#333333')
          .fontWeight(400)

        Text('意大利面意大利面意大利面意大利面意大利面意大利面意大利面意大利面意大利面意大利面意大利面意大利面意大利面')
          .fontSize(14)
          .fontColor('#666666')
          .margin({
            top: 10
          })
          .lineHeight(18)
          .maxLines(2)
          .textOverflow({
            overflow: TextOverflow.Ellipsis
          })

        Row() {
          Row() {
            Text('10-21')
              .fontSize(12)
              .fontColor('#999999')
            Text('IP属地北京')
              .fontSize(12)
              .fontColor('#999999')
              .margin({
                left: 5
              })
          }
          .layoutWeight(1)
          Row() {
            Image($r('app.media.icon'))
              .width(20)
              .height(20)
            Text('100')
              .fontColor('#999999')
              .fontSize(12)
              .margin({
                left: 5
              })
          }
        }
          .width('100%')
        .margin({
          top: 20
        })
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)

      .margin({
        left: 15
      })
    }
    .alignItems(VerticalAlign.Top)
    .width('100%')
    .padding({
      left: 15,
      right: 15,
      top: 15
    })
  }
}