product_wx/pages/subPackages/resourceReservation_manage/detail.vue

<template>
    <div class="resourceDetail">
      <ul class="detailUl">
        <li class="detailLi">
          <span class="liName">当前企业</span>
          <span class="liInfo">无锡XXXXX有限公司</span>
        </li>
        <li class="detailLi">
          <span class="liName">位置</span>
          <span class="liInfo">XXXXXXXXXXXXXXXXX</span>
        </li>
        <li class="detailLi">
          <span class="liName">容纳人数</span>
          <span class="liInfo">120</span>
        </li>
        <li class="detailLi">
          <span class="liName">配套</span>
          <span class="liInfo">XXXX</span>
        </li>
        <li class="detailLi">
          <span class="liName">说明</span>
          <span class="liInfo">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName">
            <span class="callName">预约电话：</span>
            <span class="callNumber">0510-680**808</span>
          </span>
          <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon">
        </li>
      </ul>
      <div class="timeBox">
        <div>日期</div>
        <div style="margin-left: 110rpx">2024/05/21 — 2024/05/22</div>
      </div>
      <div class="bottomTableBody">
        <div class="ModelBox">
          <div class="modelT">
            <div class="model model1"></div>
            空置
          </div>
          <div class="modelT">
            <div class="model model2"></div>
            已占用
          </div>
          <div class="modelT">
            <div class="model model3"></div>
            冻结中
          </div>
        </div>
        <div class="table_Xuan">
          <div class="firstColBox">
            <div class="tableHead">
              <div class="tableFirstCol" style="background: rgba(245, 247, 250, 1)">日期/时间段</div>
            </div>
            <div class="tableRow" v-for="item in timeList">
              <div class="tableFirstCol">{{item.date}}</div>
            </div>
          </div>
          <div class="colBox">
            <div class="tableHead">
              <div v-for="timeItem in timeList[0].time" class="tableCol" style="background: rgba(245, 247, 250, 1)">{{timeItem.timeInterval}}</div>
            </div>
            <div class="tableRow" v-for="item in timeList">
              <div v-for="timeItem in item.time" class="tableCol" :class="timeItem.type===1?'ppBg':timeItem.type===2?'orBg':''"></div>
            </div>
          </div>
        </div>
      </div>
      <button class="toYy" @tap="toAdd">去预约</button>
    </div>
</template>

<script>
export default {
  name: "detail",
  data(){
    return{
       timeList:[
         {date:'5/21',time:[{timeInterval:'9:00~12:00',type:1},{timeInterval:'13:00~18:00',type:0},]},
         {date:'5/22',time:[{timeInterval:'9:00~12:00',type:0},{timeInterval:'13:00~18:00',type:2},]},
       ]
    }
  },
  methods:{
    toAdd(){
       uni.navigateTo({
         url:'/pages/subPackages/resourceReservation_manage/add'
       })
    }
  }
}
</script>

<style lang="scss">
.resourceDetail{
  .detailUl{
    margin-top: 20rpx;
    background: white;
    padding: 24rpx 32rpx;
    .liName{
      font-size: 32rpx;
      color: rgba(51, 51, 51, 1);
      white-space: nowrap;
      .callNumber{
        color: rgba(24, 23, 42, 1);
        font-size: 36rpx;
        font-weight: 600;
      }
      .callName{
        color: rgba(102, 102, 102, 1);
        font-size: 28rpx;
      }
    }
    .phoneIcon{
      width: 64rpx;
      height: 64rpx;
    }
    .detailLi{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #E6E6E6;
      .liInfo{
        display: inline-block;
        text-align: right;
        max-width: 428rpx;
        color: rgba(102, 102, 102, 1);
        font-size: 32rpx;
        line-height: 38rpx;
        overflow: hidden;
        word-wrap: break-word;
      }
    }
  }
  .timeBox{
    background: white;
    padding: 32rpx;
    display: flex;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    margin: 24rpx 0;
  }
  .bottomTableBody{
    padding: 36rpx 24rpx;
    background: white;
    .ModelBox{
      display: flex;
      justify-content: center;
      font-size: 28rpx;
      .modelT{
        display: flex;
        margin: 0 30rpx;
        align-items: center;
      }
      .model{
        width: 28rpx;
        height: 28rpx;
        margin-right: 16rpx;
      }
      .model1{
        border: 2rpx solid rgba(233, 233, 233, 1);
      }
      .model2{
        background: rgba(142, 139, 228, 1);
      }
      .model3{
        background: rgba(255, 182, 102, 1);
      }
    }
    .table_Xuan{
      position: relative;
      width: 702rpx;
      margin-top: 22rpx;
      display: flex;
      align-items: center;
      .firstColBox{
        display: flex;
        flex-direction: column;
      }
      .colBox{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-x: scroll;
        width: 512rpx;
      }
      .tableHead{
        display: flex;
        font-size: 28rpx;
      }
      .tableRow{
        display: flex;
      }
      .tableFirstCol{
        z-index: 1;
        min-width: 192rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: rgba(102, 102, 102, 1);
        border: 1px solid lightgray;
        background: white;
      }
      .tableCol{
        position: relative;
        z-index: 0;
        min-width: 250rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid lightgray;
      }
      .ppBg{
        background: rgba(142, 139, 228, 1);
      }
      .orBg{
        background: rgba(255, 182, 102, 1);
      }
    }
  }
  .toYy{
    width: 654rpx;
    height: 96rpx;
    background: rgba(3, 101, 249, 1);
    margin: 64rpx 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: white;
  }
}

</style>