-
实现商品卡片案例
Card.png
案例
@Component
export struct GoodsCard {
build() {
Column(){
Column(){
//
// Image($r('app.media.background'))
Image('https://img01.yzcdn.cn/upload_files/2019/04/22/Fs6S3Cuikasgd9xwOzF3NYgff9Te.png')
.width('100%')
.height(160)
.borderRadius({
topLeft: 5,
topRight: 5
})
//
Text('商品标题商品标题商品标题商品标题')
.padding({
top: 12
})
//
Row(){
Text('圆梦人生')
.fontColor('#999')
.fontSize(14)
.layoutWeight(1)
Text('数量:2300')
.fontColor('#999')
.fontSize(14)
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({
top: 20,
left: 10,
right: 10
})
}
.margin({
top: 16
})
.borderRadius(5)
.width(200)
.padding({
bottom: 20
})
.backgroundColor(Color.White)
}.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
}
