攜程-口碑榜

口碑榜頁面共計 六 個區域：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%')