携程-口碑榜

口碑榜页面共计 六 个区域：banner区域、选择城市和目的地、商业选项菜单、热门项目选项、热门榜标题文字、热门景点列表

1、banner 区域

banner区域内容共计四部分：口碑榜 Logo、推荐榜单、评分规则、底部线条
注意：底部线条压在榜单图片上面，需要定位实现（position）

1.1 区域部分

实现思路：设置尺寸，添加背景图
banner - 区域布局

Column(){}.width('100%').height(264).backgroundImage('/images/banner.png')

1.2 口碑榜 Logo

实现思路：添加 Image 图片组件，并调整位置：margin、定位均可
banner - 口碑榜 Logo

// logo
Image('/images/log.png').width(200).offset({y: 70})

1.3 推荐榜单

水平滑动的榜单图片列表： List > ListItem > Column > Image
banner - 推荐榜单

// 推荐榜单
List() {ListItem() {Column() {Image('/images/rank.png').width('34%')}}ListItem() {Column() {Image('/images/hot.png').width('34%')}}ListItem() {Column() {Image('/images/scenery.png').width('34%')}}ListItem() {Column() {Image('/images/ski.png').width('34%')}}
}.listDirection(Axis.Horizontal).position({y: 160}).height(82).scrollBar(BarState.Off)

1.4 评分规则

实现思路：Text 组件，添加宽、高、半透明背景色、圆角边框等效果，并定位到区域最后侧

1. 定位 X 轴偏移为 100%，translate 向左移动自身宽度尺寸的 100%
   banner - 评分规则

// 评选规则
Text('评选规则').position({x: '100%', y: '42%'}).translate({x: '-100%'}).fontColor('#F6DFC8').fontSize(10).width(54).height(20).backgroundColor('rgba(255, 224, 208, 0.3)').borderRadius({ topLeft: 10, bottomLeft: 10}).textAlign(TextAlign.Center)

1.5 底部 Line

实现思路：添加 Image 组件，并定位到 banner 区域 最底部

1. 定位Y轴偏移 100%，translate 向上移动自身高度尺寸的 100%
   banner - 底部Line

// 底部 line
Image($r('app.media.banner_line')).width('100%').position({x: 0, y: 226})

2、选择城市和目的地

共计 2 部分内容：城市选项 和 目的地选项

2.1 区域布局

实现思路：宽度 100%，主轴对齐方式 SpaceBetween
城市和目的地 - 区域布局

Row(){}.width('100%').justifyContent(FlexAlign.SpaceBetween).margin({top: 24, bottom: 24}).padding({left: 12, right: 12})

2.2 选择城市

实现思路：渐变颜色的 Row 组件包含文本组件 Text 和 图片组件 Image
选择城市

Row({ space: 5}) {Text('北京').fontColor('#5F2B0E').fontSize(16).fontWeight(600)Image($r('app.media.ic_public_arrow_down_0')).width(16).height(16).backgroundColor('#5F2B0E').borderRadius(8).fillColor('#fff')
}.width(163).height(36).linearGradient({direction: GradientDirection.Right,colors: [['rgba(255, 226, 200, 1)', 0.0],['rgba(230, 175, 138, 1)', 0.5] ]}).borderRadius(18).justifyContent(FlexAlign.Center)

2.3 口碑目的地

实现思路：Row 组件包含 文本组件 Text

Row() {Text('口碑目的地').fontColor('#99532E').fontSize(16).fontWeight(500)
}.width(163).height(36).backgroundColor('rgba(248, 213, 184, 0.2)').borderRadius(18).justifyContent(FlexAlign.Center)

3、商业选项菜单

实现思路：Row 组件里面包含四个文本组件

1. 三个白色背景组件外观相同：尺寸、背景色、圆角、阴影、居中对齐、文字大小
2. “景点”文本组件为 渐变背景色，其他效果与白色组件相同
   商业选项菜单

// 区域三：商业选项菜单
Row() {Text('酒店').width(78).height(36).backgroundColor('#fff').borderRadius(4).shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true}).textAlign(TextAlign.Center).fontSize(16).fontWeight(400)Text('景点').width(78).height(36).borderRadius(4).linearGradient({direction: GradientDirection.Right,colors: [['#CC9466', 0.0], ['#B36D3E', 1.0]]}).shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true}).textAlign(TextAlign.Center).fontSize(16).fontWeight(400).fontColor('#fff')Text('夜游').width(78).height(36).backgroundColor('#fff').borderRadius(4).shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true}).textAlign(TextAlign.Center).fontSize(16).fontWeight(400)Text('美食').width(78).height(36).backgroundColor('#fff').borderRadius(4).shadow({ radius: 8, color: 'rgba(47, 27, 14, 0.07)', offsetX:1, offsetY: 1, fill: true}).textAlign(TextAlign.Center).fontSize(16).fontWeight(400)
}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({left: 12, right: 12})

4、热门项目选项

实现思路：一行排列标题和选项

4.1 区域布局

实现思路：宽度 100%，标题和选项之间间距为35

Row({ space: 35}) {}.width('100%').padding({left: 12, right: 12})

4.2 热门标题

实现思路：Row > Image + Text

1. Row 组件设置背景图，背景图位置为 底部
   热门标题

// 标题
Row({ space: 3 }) {Image($r('app.media.ic_hot')).width(16).fillColor('#CC9466')Text('近期热门').fontColor('#673915').fontSize(14).fontWeight(600)
}.margin({top: 15, bottom: 15}).backgroundImage('/images/select.png').backgroundImagePosition(Alignment.Bottom)

4.3 选项

实现思路：选项区域宽度为父组件剩余尺寸的所有（layoutWeight），内容对齐方式为 SpaceBetween
选项

// 选项
Row() {Text('必打卡').fontSize(14).fontColor('#6666')Text('滑雪').fontSize(14).fontColor('#6666')Text('亲子').fontSize(14).fontColor('#6666')Text('自然风光').fontSize(14).fontColor('#6666')
}.layoutWeight(1).justifyContent(FlexAlign.SpaceBetween)

5、热门榜标题

代码实现

Text('北京近期热门景点榜').fontSize(24).fontWeight(600).fontColor('#3D1A07').lineHeight(34)

6、热门景点列表

实现思路：List > ListItem

6.1 区域布局

实现思路：可垂直方向滚动的列表 List

List() {ListItem() {}.padding({ left:12,right:12,top:6,bottom:6 })
}.scrollBar(BarState.Off)

6.2 景点内容

6.2.1 景点内容布局

实现思路：Row组件包裹图片区域和文字区域

1. Row 组件：宽度100%、内边距 padding、白色背景色、圆角、阴影、交叉轴对齐方式为顶对齐

Row({ space: 8}){}.width('100%').padding(12).backgroundColor('#fff').borderRadius(5).shadow({ radius: 8, color: 'rgba(0, 0, 0, 0.1)', offsetX: 0, offsetY: 2, fill: true}).alignItems(VerticalAlign.Top)

6.2.2 景点图片区域

实现思路：Row组件 > Image + Text

1. 图片：尺寸、圆角
2. Text：背景图、定位到父组件左上角
   代码实现

// 图片区域
Row() {Image('/images/universal.png').width(88).height(175).borderRadius(5)Text('No.1').width(50).height(28).backgroundImage('/images/no_icon.png').position({x: -4}).textAlign(TextAlign.Center).fontSize(11).fontWeight(700)
}

6.2.3 景点文字 - 布局

实现思路：使用 Column 组件实现垂直排列多行内容

1. 宽度：占用所有父组件剩余宽度
2. 每行间距为 6

Column({ space: 6}){}.layoutWeight(1)

6.2.4 景点文字 - 标题

实现思路：Row > 标题文字 Text + 收藏图标 Image

// 标题
Row() {Text('北京环球度假区').fontSize(16).fontWeight(600).lineHeight(20).fontColor('#000')Image($r('app.media.ic_xihuan')).width(18).fillColor('#444')
}
.width('100%').justifyContent(FlexAlign.SpaceBetween)

6.2.5 景点文字 - 评分

景点文字 - 评分

// 评分
Row({space: 8}) {Row() {Image($r('app.media.ic_huo')).width(10).fillColor('#fff')Text('10').fontSize(12).fontColor('#fff')}.padding(4).borderRadius(4).linearGradient({direction: GradientDirection.Left, colors: [['#FF856E', 0.1], ['#FF902A', 1.0]]})Row({space: 3}) {Text('4.5分').fontSize(12).fontColor('#666')Text('1.8w条点评').fontSize(12).fontColor('#666')}Text('￥308起').fontSize(12).fontColor('#666')
}
.width('100%')
.justifyContent(FlexAlign.Start)

6.2.6 景点文字 - 上榜理由

实现思路：文本 Text 缩进；图片和“上榜理由”定位

// 上榜理由
Row() {Text() {ImageSpan($r('app.media.dianzan')).width(16)Span('上榜理由:').fontSize(13).fontWeight(600).fontColor('#5f2b0e')Span('这个冬天来环球影城，一起沉浸在冬日独有的浪漫，漫步在雪花飞舞的雪天，创造专属于').fontColor('#5f2b0e').fontSize(13)}.maxLines(3).textOverflow({overflow: TextOverflow.Ellipsis})
}.width('100%').height(72).backgroundColor('#fff7f1').padding(8).alignItems(VerticalAlign.Top).borderRadius(4)

6.2.7 景点文字 - 标签

// 标签
Row({ space: 5}) {Text('嗨玩乐园').padding(4).border({width: 1, color: '#99AECA'}).borderRadius(4).fontSize(10).fontColor('#99AECA')Text('游乐园').padding(4).border({width: 1, color: '#99AECA'}).borderRadius(4).fontSize(10).fontColor('#99AECA')
}
.width('100%')

6.2.8 景点文字 - 地址

// 地址
Row({space: 5}) {Image($r('app.media.ic_daohangdizhi')).width(11).fillColor('#999')Text('北京 · 果园环岛/通州区 距您36.7km').fontSize(12).fontColor('#999')
}
.width('100%')