要实现如下图效果：

仔细分析效果，整体分为三个区域，分别是1、2、3，如图所示

我们整体分析，区域1是观察到的是图片，自然是Image组件，区域2有个背景，左边是Image，水平方向是Text，3区域最具有迷惑性，第一次估计会让设计师给图片，Image组件搞定，要是设计师不给图片能不能实现呢？那就是需要自己画了，这里使用的是Text来画，使用了position和zIndex实现层叠效果.fontStyle(FontStyle.Italic)实现倾斜效果，VIP其实是文字，.fontSize(14)字体大小是14，字体的粗细是.fontWeight(777)，文字居中对其.textAlign(TextAlign.Center)，

.borderRadius({
  topLeft:10,
  bottomRight:10
})左顶和右边底部的圆角，

border({
width:2,color:'#fbe7a3' }) 一圈线 

完整代码如下：

@Entry
@Component
struct Index {
  build() {
    Column(){
      Column(){

        Text('VIP').position({
          x:0,
          y:0
        }).zIndex(66)
          .fontColor('#fbe7a3')
          .width(40)
          .height(20)
          .borderRadius({
            topLeft:10,
            bottomRight:10
          }).border({
          width:2,color:'#fbe7a3' })
          .fontStyle(FontStyle.Italic)
          .fontSize(14)
          .fontWeight(777)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Orange)

        Image($r('app.media.position_moco')).width('100%').height(210).borderRadius(10)

        Row(){
          Image($r('app.media.position_earphone')).width(20).padding(4)
            .backgroundColor('#55b7f4')
            .borderRadius(10)
            .fillColor(Color.White)

          Text('飞狗MOCO').fontWeight(700)
            .margin({
              left:6,
            })

        }.height(30).width('100%').backgroundColor(Color.Orange)

      }.width(160)
      .height(240)
      .backgroundColor(Color.White)

  }.width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
}
}

总结：鸿蒙的层叠效果是position和zIndex一起使用才出现的，圆角是borderRadius，border是边框，VIP效果是文字实现、有文字大小，字体大小文字颜色综合调整实现，Image使用fillColor来实现颜色的更改，界面是目前写界面最简单的界面的了