案例一：B站视频简介页面

代码：

build() {Column(){Column(){Stack(){Image($r("app.media.genimpact")).width(200).height(125).borderRadius({topLeft:5,topRight:5})Row(){Image($r("app.media.bz_play")).height(24).fillColor(Color.White).padding(3)Text("288万").fontColor(Color.White).fontSize(15).padding(3)Image($r("app.media.bz_msg")).height(24).fillColor(Color.White).padding(5)Text("6666").fontColor(Color.White).fontSize(15).padding(1)Text("2:31").margin({left:20}).fontColor(Color.White).fontSize(15)}.position({x:5,y:100})Text("原神？启动！原来你也玩原神~").position({x:5,y:125}).fontSize(14).padding(6)Row(){Text("21万点赞").fontSize(12).backgroundColor("#fef0ef").fontColor("#e66c43").margin({left:10})Image($r("app.media.bz_more")).height(20).fillColor("#c1c1c1").margin({right:10})}.position({x:5,y:175}).justifyContent(FlexAlign.SpaceBetween).width("100%")}}.width(200).height(200).margin({top:10}).backgroundColor(Color.White).borderRadius(5)}.width("100%").height("100%").backgroundColor(Color.Pink)}

案例二：美团购买界面

代码：
 

@Entry
@Component
struct Index {
@State buy:number=0
@State buycount:number=0
@State flag:number=1
@State price:number=9.8
@State color:string="#7e7e7e";
@State tempstring:string="无优惠"build() {Column() {Stack(){Row() {Image($r("app.media.genshi")).width(120).borderRadius(5)Column(){Text("原神可莉，纳西妲海报,美团特价买三8折").fontSize(12)Text(`含${this.buycount}折扣商品`).width("100%").fontSize(10).margin({top:5}).margin({bottom:15})Row(){Text(`￥${this.price}`).width(40).fontColor("#ff4000")Text(){Span("￥")Span("12.3")}.width(50).decoration({type:TextDecorationType.LineThrough}).fontSize(10).margin({top:5})Text("-").margin({left:30}).width(20).textAlign(TextAlign.Center).border({width:1,}).borderRadius({topLeft:5,bottomLeft:5}).borderColor("#e1e1e1").onClick(()=>{if(this.buy>0){this.buy--;}if(this.buy>=3){this.flag=0.8;this.buycount=this.buy;}else{this.flag=1;this.buycount=0;}})Text(`${this.buy}`).width(30).textAlign(TextAlign.Center).borderWidth({top:1,bottom:1}).borderColor("#e1e1e1")Text("+").width(20).textAlign(TextAlign.Center).border({width:1}).borderRadius({topRight:5,bottomRight:5}).borderColor("#e1e1e1")}.width("100%").onClick(()=>{this.buy++;if(this.buy>=3){this.flag=0.8;this.buycount=this.buy;}else{this.flag=1;this.buycount=0;}})}.position({x:130,y:0}).width(200)}.width("100%")Row(){Column(){Text(){Span(`已选${this.buy}件，`)Span("合计")Span(`￥${(this.buy*this.flag*this.price).toFixed(2)}`).fontColor("#ff4000").fontSize(20)}.margin({bottom:10}).width(200)Text(`共减￥${(this.buy*(1-this.flag)*this.price).toFixed(2)}`).margin({left:50}).fontColor("#ff4000").fontSize(18).decoration({type:TextDecorationType.LineThrough,color:Color.Red})}.width(230)Button("结算商品").backgroundColor(Color.Orange).width(100)}.width("100%").position({y:650}).height(90)}.width("100%")}.width("100%").padding(20)}}