实验要求：

制作一个B站视频卡片界面，大致如下图所示（详见附件），要求应用到线性布局、层叠布局等相关课堂知识。背景图、logo及文本内容不限，要求：

1.附上源码。

2.将最终呈现的实验结果的Previewer截图或者模拟器运行截图贴到实验报告中。

3.适当总结。

4.以附件的形式提交实验报告。

代码考：

import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'

@Entry
@Component
struct Index {
  build() {
      Column(){
        //视频卡片
        Column(){
          //1.上面图片区域·（层叠布局）
          Stack({alignContent:Alignment.Bottom}){
            Image($r('app.media.ag'))
              .borderRadius({
                topLeft:20,
                topRight:20
              })
              .height(250)
              .width(400)
            Row(){
              Row({space:5}){
                Image($r('app.media.look'))
                  .width(20)
                  .fillColor(Color.White)
                Text('2.4万')
                  .fontSize(20)
                  .fontColor(Color.White)
              }
              .margin({right:10})
              Row({space:5}){
                Image($r('app.media.point'))
                  .width(20)
                  .fillColor(Color.White)
                Text('108')
                  .fontSize(20)
                  .fontColor(Color.White)
              }
              Blank()

              Text('4.36')
                .fontSize(20)
                .fontColor(Color.White)
            }
            .height(24)
            .padding({left:5,right: 5})
            .width('100%')
            .backgroundColor(Color.Black)
          }
          .width('100%')
          .height(150)

          //2.底部文字区域。
          Column(){
            Blank()
            Blank()
            Text('ATTENTION AGAIN [2025/E07:峰回]')
              .fontSize(15)
              .textOverflow({overflow: TextOverflow.Ellipsis})
              .maxLines(1)
              .padding({right:90})
            Blank()
            Blank()
            Row(){
              Image($r('app.media.guanzhu'))
                .width(20)
                .fillColor(Color.Orange)
              Text('已关注')
                .fontColor(Color.Red)
              Text('AG超玩会官方账号')
                .padding({left:5,right:100})
              Blank()
              Image($r('app.media.shenglue'))
                .width(20)
                .fillColor(Color.White)
            }
          }
          .alignItems(HorizontalAlign.Center)
        }
        .width(360)
        .height(200)
        .backgroundColor(Color.White)
        .borderRadius(20)
        .margin({top:20})
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#ccc')
  }
}

成果展示：

参考资料：https://www.bilibili.com/video/BV14t421W7pA?spm_id_from=333.788.player.switch&vd_source=d3681b5b4ce451013473ad01b0cd70f9&p=45