product_wx/pages/subPackages/resourceReservation_manage/components/shareResources.vue

<template>
    <div class="shareResources">
      <div style="width: 82%">
        <van-tabs :active="active" @change="onChange">
          <van-tab title="会议室" :name="0"></van-tab>
          <van-tab title="打印机" :name="1"></van-tab>
          <van-tab title="办公桌" :name="2"></van-tab>
          <van-tab title="其他" :name="3"></van-tab>
        </van-tabs>
      </div>
      <div class="shareListBody">
        <div class="shareItem" v-for="item in 3" @tap="toDetail(item)">
          <img src="https://www.idea-co-sf.com/gardenProduct/image/dyImage.png" class="shareItemImg">
          <div class="shareItemRight">
             <span class="shareItemTitle">党建会议室XXXXXXX</span>
             <span class="shareItemInfo">位置：A栋一楼</span>
            <span class="shareItemInfo">容纳人数：<span style="color: rgba(3, 101, 249, 1)">120人</span></span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "shareResources",
  data(){
    return{
      active:0
    }
  },
  methods:{
    onChange(){

    },
    toDetail(item){
      uni.navigateTo({
        url:'/pages/subPackages/resourceReservation_manage/detail'
      })
    }
  }
}
</script>

<style lang="scss">
    .shareResources{
      margin-top: 24rpx;
      background: white;
      min-height: 1344rpx;
      padding-bottom: 100rpx;
      .shareListBody{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 16rpx;
        .shareItem{
          width: 686rpx;
          height: 224rpx;
          background:rgba(245, 247, 250, 1) ;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding: 32rpx 24rpx;
          border-radius: 16rpx;
          margin-bottom: 24rpx;
          .shareItemImg{
            width: 220rpx;
            height: 160rpx;
          }
          .shareItemRight{
            display: flex;
            flex-direction: column;
            margin-left: 24rpx;
            .shareItemTitle{
              color:rgba(24, 23, 42, 1);
              font-size: 32rpx;
              font-weight: 600;
              margin-bottom: 16rpx;
            }
            .shareItemInfo{
              color:rgba(102, 102, 102, 1);
              font-size: 26rpx;
              line-height: 40rpx;
            }
          }
        }
      }
    }
</style>