实战17-NavBar+Vip布局

NavBar.ets

import { PADDING } from '../../constants/size'
import rvp from '../../utils/resposive/rvIndex'

@Component
export default struct NavBar {
  @StorageProp('topHeight') topHeight: number = 0;

  build() {
    Row() {
      Row({ space: rvp(6) }) {
        Text('请选择地址').fontSize(rvp(12)).fontColor($r('app.color.white'))
        Image($r('app.media.arrow_down')).width(rvp(6)).height(rvp(6)).fillColor($r('app.color.white'))
      }

      Row({ space: rvp(28) }) {
        Column({ space: rvp(1) }) {
          Image($r('app.media.message')).width(rvp(20)).height(rvp(20)).fillColor($r('app.color.white'))
          Text('消息').fontSize(rvp(10)).fontColor($r('app.color.white')).margin({ bottom: rvp(3) })
        }

        Column({ space: rvp(1) }) {
          Image($r('app.media.customer')).width(rvp(20)).height(rvp(20)).fillColor($r('app.color.white'))
          Text('客服').fontSize(rvp(10)).fontColor($r('app.color.white'))
        }
      }
    }
    .width('100%')
    .height(rvp(44))
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({ left: rvp(PADDING), right: rvp(PADDING) })
    .margin({ top: this.topHeight })
  }
}

 

Vip.ets

import rvp from '../../utils/resposive/rvIndex'

@Component
export default struct Vip {
  @StorageProp('topHeight') topHeight: number = 0

  build() {
    Stack() {
      Image($r('app.media.vip_bg')).width(rvp(328)).height('100%').objectFit(ImageFit.Fill)
      Column({ space: rvp(14) }) {
        Row() {
          Image($r('app.media.crown')).width(rvp(18)).height(rvp(18)).objectFit(ImageFit.Fill)
          Text('开通谷粒卡享特权')
            .fontSize(rvp(16))
            .fontColor($r('app.color.white'))
            .margin({ left: rvp(8), right: rvp(52) })
          Image($r('app.media.vip')).width(rvp(42)).height(rvp(19)).objectFit(ImageFit.Fill)
        }

        Row({ space: rvp(32) }) {
          Column({ space: rvp(6) }) {
            Text('余额').fontColor($r('app.color.white')).fontSize(rvp(12))
            Text() {
              Span('0').fontSize(rvp(16)).fontWeight(700)
              Span('元').fontSize(rvp(10))
            }.fontColor($r('app.color.white'))
          }

          Column({ space: rvp(6) }) {
            Text('优惠卷').fontColor($r('app.color.white')).fontSize(rvp(12))
            Text() {
              Span('4').fontSize(rvp(16)).fontWeight(700)
              Span('张').fontSize(rvp(10))
            }.fontColor($r('app.color.white'))
          }

          Column({ space: rvp(6) }) {
            Text('会员特价').fontColor($r('app.color.white')).fontSize(rvp(12))
            Text() {
              Span('7').fontSize(rvp(16)).fontWeight(700)
              Span('项').fontSize(rvp(10))
            }.fontColor($r('app.color.white'))
          }

          Column({ space: rvp(6) }) {
            Text('会员福利').fontColor($r('app.color.white')).fontSize(rvp(12))
            Text() {
              Span('21').fontSize(rvp(16)).fontWeight(700)
              Span('个').fontSize(rvp(10))
            }.fontColor($r('app.color.white'))
          }
        }
      }.height('100%').justifyContent(FlexAlign.Center)
    }.width('100%').margin({ top: rvp(49) + this.topHeight }).height(rvp(99))
  }
}

 

import ScrollContainer from '../components/ScrollContainer/Index'
import { PADDING } from '../constants/size'
import Bg from '../views/Service/Bg'
import NavBar from '../views/Service/NavBar'
import Vip from '../views/Service/Vip'

@Component
export default struct Service {
  @Builder
  navBuilder() {
    NavBar()
  }

  @Builder
  contentBuild() {
    Stack() {
      Bg()
      Column() {
        Vip()
      }.width('100%').padding({
        left: PADDING,
        right: PADDING
      })
    }.width('100%').alignContent(Alignment.TopStart).backgroundColor($r('app.color.bg_gray_second'))
  }

  build() {

    ScrollContainer({
      navBuilder: this.navBuilder, contentBuilder: () => {
        this.contentBuild()
      }
    })
  }
}