product_wx/pages/subPackages/todo/resourceReview.vue

<template>
    <div class="resourceReview">
      <ul class="detailUl">
        <li class="topBox">
          <div class="topTitle">会议室详情</div>
        </li>
        <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" style="border-bottom: none">
          <span class="liName">说明</span>
          <span class="liInfo">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
        </li>
      </ul>
      <div class="resourceAddDetail">
        <ul class="predetermineUl">
          <li class="topBox">
            <div class="topTitle" style="padding: 48rpx 0 24rpx 0">预约详情</div>
            <div class="choosTimeBox">
              <span class="msg">使用时间</span>
              <input placeholder="请选择日期" class="choosIpt" disabled>
              <input placeholder="请选择时间段" class="choosIpt" disabled>
            </div>
          </li>
          <li class="detailLi">
            <span class="liName">主题</span>
            <span >
               <input class="liInfo" placeholder="" v-model="theme" disabled>
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">容纳人数</span>
            <span >
               <input class="liInfo" placeholder="请填写整数">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">联系人</span>
            <span >
               <input class="liInfo" placeholder="请填写">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">联系电话</span>
            <span >
               <input class="liInfo" placeholder="请填写">
          </span>
          </li>
          <li class="detailLi2" style="border-bottom: none">
            <div class="titleBox" >
              <span class="liName">备注</span>
            </div>
            <van-field
                :value="postData.constant"
                autosize
                type="textarea"
                placeholder="请输入"
                class="myField"
                maxlength="2000"
                show-word-limit
            />
          </li>
        </ul>
        <ul class="predetermineUl">
          <li class="detailLi">
            <span class="liName">预约单位</span>
            <span >
               <input class="liInfo" placeholder="" v-model="unit">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">容纳人数</span>
            <span >
               <input class="liInfo" placeholder="请填写整数">
          </span>
          </li>
          <li class="detailLi">
            <span class="liName">预约人</span>
            <span >
               <input class="liInfo" placeholder="请填写" value="吴凯旋">
          </span>
          </li>
          <li class="detailLi" style="border-bottom: none">
            <span class="liName">预约时间</span>
            <span >
               <input class="liInfo" placeholder="请填写" value="YYYYY-MM-DD  HH:MM ">
          </span>
          </li>
        </ul>
        <ul class="detailUl">
          <li class="topBox">
            <div class="topTitle">审核信息</div>
          </li>
          <li class="detailLi2">
            <van-radio-group :value="radio" @change="onChange">
              <van-radio name="1">通过</van-radio>
              <van-radio name="2" style="margin-left: 48rpx">取消</van-radio>
            </van-radio-group>
            <van-field
                :value="postData.constant"
                autosize
                type="textarea"
                placeholder="请输入取消原因（必填）"
                class="myField"
                maxlength="200"
                show-word-limit
            />
          </li>
          <li class="detailLi">
            <span class="liName">办理人</span>
            <span class="liInfo">自动带出</span>
          </li>
          <li class="detailLi" style="border-bottom: none">
            <span class="liName">办理时间</span>
            <span class="liInfo">自动带出提交时间（年月日时分秒)</span>
          </li>
        </ul>
        <div class="buttonBox" >
          <button class="btn zcBtn">暂存</button>
          <button class="btn tjBtn">提交</button>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "resoureceReview",
  data() {
    return{
      theme:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      unit:'XXXXXXXXXXXXXX',
      postData: {},
      radio: '1'
    }
  },
  methods:{
    onChange(){

    }
  }
}
</script>

<style lang="scss">
    .resourceReview{
      .detailUl{
        margin-top: 20rpx;
        background: white;
        padding: 24rpx 32rpx;
        .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;
          }
          .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;
            }
          }
        }
      }
      .topBox{
        background: white;
        margin: 24rpx 0;
        .topTitle{
          color: rgba(34, 34, 34, 1);
          font-size: 36rpx;
          font-weight: 600;
        }
        .choosTimeBox{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .msg{
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            white-space: nowrap;
          }
          .choosIpt{
            width: 260rpx;
            height: 96rpx;
            padding-left: 50rpx;
            background: rgba(245, 247, 250, 1);
            box-sizing: border-box;
          }
        }
      }
      .resourceAddDetail{
        .predetermineUl{
          margin: 24rpx 0;
          background: white;
          box-sizing: border-box;
          padding: 0 32rpx;
          .predetermineLi{
            padding: 32rpx 0;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            display: flex;
            justify-content: space-between;
          }
          .predetermineLi2{
            padding: 32rpx 0;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            display: flex;
            flex-direction: column;
          }
          .liName{
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
          }
          .liIpt{
            color: rgba(102, 102, 102, 1);
            font-size: 32rpx;
            text-align: right;
          }
          .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: 488rpx;
              width: 488rpx;
              color: rgba(102, 102, 102, 1);
              font-size: 32rpx;
              line-height: 38rpx;
              .radio{
                margin-left: 64rpx;
              }
            }
          }
        }
        .detailLi2{
          display: flex;
          flex-direction: column;
          padding: 32rpx 0;
          border-bottom: 2rpx solid #E6E6E6;
          .detailLi2BoxTop{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 12rpx 0;
            .checkItem{
              width: 128rpx;
              height: 64rpx;
              font-size: 28rpx;
              color: #666666;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #F5F7FA;
              border-radius: 8rpx;
              margin: 12rpx 0;
            }
            .checked{
              background: #0365F9;
              color: white;
            }
          }
          .van-radio-group{
            display: flex;
          }
        }
        .van-cell {
          background: #F5F7FA !important;
          border-radius: 8rpx;
          font-size: 28rpx;
          margin-top: 16rpx;
        }
        .buttonBox{
          display: flex;
          justify-content: center;
          .btn{
            width: 240rpx;
            height: 80rpx;
            display: flex;
            border-radius: 8rpx;
            align-items: center;
            justify-content: center;
            margin: 48rpx 16rpx 150rpx 16rpx;
            color: white;
            letter-spacing: 2rpx;
            text-indent: 2rpx;
          }
          .zcBtn{
            background: #FE8643;
          }
          .tjBtn{
            background: #0365F9;
          }
        }
      }
    }
</style>