product_wx/pages/subPackages/housingResources/index.vue

<template>
    <div class="housingResources">
      <van-tabs :active="active" @change="onChange">
        <van-tab title="房源查询" :name="0">
           <houseList />
        </van-tab>
        <van-tab title="我的预定" :name="1">
          <myReservation />
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
import houseList from "./components/houseList.vue";
import myReservation from "./components/myReservation.vue";
export default {
  name: "index",
  components:{
    houseList,
    myReservation
  },
  data(){
    return{
      active:0
    }
  },
  methods:{
    onChange(){
      this.active = e.detail.name;
    }
  }
}
</script>

<style lang="scss">
    .housingResources{
      .van-checkbox-group{
        display: flex;
        flex-wrap: wrap;
        .van-checkbox{
          margin-right: 24rpx;
        }
        .van-checkbox__label {
          padding-left: 6rpx;
          font-size: 28rpx;
          color: rgba(102, 102, 102, 1);
        }
        .van-checkbox__icon{
          width: 30rpx;
          height: 30rpx;
        }
        .van-icon, .van-icon:before {
          font-size: 24rpx;
        }
        .van-checkbox__icon--checked {
          background: rgba(3, 101, 249, 1);
        }
      }
    }

    .myReservation{
      margin-top: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 100rpx;
      .historyItem{
        width: 686rpx;
        padding: 24rpx 0;
        background: white;
        box-sizing: border-box;
        position: relative;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        .tags{
          width: 160rpx;
          height: 56rpx;
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          background-size: 100%;
          box-sizing: border-box;
        }
        .dqrTag{
          background: url('https://www.idea-co-sf.com/gardenProduct/image/bj05.png') no-repeat;
          color: rgba(226, 81, 0, 1);
        }
        .yslTag{
          background: url('https://www.idea-co-sf.com/gardenProduct/image/bj06.png') no-repeat;
          color: rgba(3, 101, 249, 1);
        }
        .historyItemTitle{
          padding: 8rpx 32rpx;
          width: 480rpx;
          color: rgba(34, 34, 34, 1);
          font-size: 32rpx;
          line-height: 40rpx;
          font-weight: 500;
        }
        .historyItemInfo{
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
          padding: 10rpx 32rpx;
        }
        .historyItemBottom{
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding: 28rpx 32rpx 0 32rpx;
          border-top: 1px solid rgba(232, 237, 245, 1);
          margin-top: 22rpx;
          .btn{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            width: 160rpx;
            height: 60rpx;
            border-radius: 32rpx;
            border: 2rpx solid rgba(255, 107, 24, 1);
            color:rgba(255, 107, 24, 1);
            &::after{
              border: none;
            }
          }
          .zcBtn{
            background: linear-gradient( 316deg, #84AAFF 0%, #0365F9 100%);
            color: white;
            border: none;
            margin-left: 32rpx;
          }
          .yslBtn{
            border: none;
            background: rgba(236, 239, 243, 1);
            color: rgba(136, 136, 136, 1);
          }
        }
      }
    }
</style>