当前位置：首页 > article >正文

实战19-详情页UI4等分

article 2025/2/1 1:48:49

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

@Component
export default struct SearchFilter {
  build() {
    Row() {
      Row({ space: rvp(6) }) {
        Text("位置").fontSize(rvp(14)).fontColor('#333333')
        Image($r('app.media.arrow_down_3'))
          .width(rvp(6))
          .height(rvp(3))
      }

      Row({ space: rvp(6) }) {
        Text("支付方式").fontSize(rvp(14)).fontColor('#333333')
        Image($r('app.media.arrow_down_3'))
          .width(rvp(6))
          .height(rvp(3))
      }

      Row({ space: rvp(6) }) {
        Text("租金").fontSize(rvp(14)).fontColor('#333333')
        Image($r('app.media.arrow_down_3'))
          .width(rvp(6))
          .height(rvp(3))
      }

      Row({ space: rvp(6) }) {
        Text("排序").fontSize(rvp(14)).fontColor('#333333')
        Image($r('app.media.arrow_down_3'))
          .width(rvp(6))
          .height(rvp(3))
      }

    }
    .backgroundColor('#80ababab')
    .width('100%')
    .height(rvp(44))
    .padding({ left: PADDING, right: PADDING })
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

import NavBar from '../../components/NavBar/Index'
import SearchFilter from '../../views/RentRoomList/SearchFilter'

@Entry
@Component
struct RentRoomList {
  @StorageProp('topHeight') topHeight: number = 0

  build() {
    Column() {
      NavBar({ title: '房源推荐' })
      SearchFilter()
    }
    .height('100%')
    .width('100%')
    .padding({ top: this.topHeight })
  }
}