product_wx/pages/subPackages/resourceReservation_manage/add.vue

<template>
    <div class="resourceAdd">
       <div class="topBox">
         <div class="topTitle">资源预约</div>
         <div class="choosTimeBox">
            <span class="msg">使用时间</span>
            <input placeholder="请选择日期" class="choosIpt" disabled>
            <input placeholder="请选择时间段" class="choosIpt" disabled>
         </div>
       </div>
      <ul class="predetermineUl">
        <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">
          <span class="liName">预约时间</span>
          <span >
               <input class="liInfo" placeholder="请填写" value="YYYYY-MM-DD  HH:MM ">
          </span>
        </li>
      </ul>
      <div class="buttonBox">
        <button class="btn zcBtn">暂存</button>
        <button class="btn tjBtn">提交</button>
      </div>
    </div>
</template>

<script>
export default {
  name: "add",
  data(){
    return{
      theme:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      unit:'XXXXXXXXXXXXXX',
      postData: {}
    }
  }
}
</script>

<style lang="scss">
    .resourceAdd{
      .topBox{
        padding: 24rpx 32rpx;
        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;
          }
        }
      }
      .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;
        }
        .van-cell {
          background: #F5F7FA !important;
          border-radius: 8rpx;
          font-size: 28rpx;
          margin-top: 16rpx;
        }
        .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;
            }
          }
        }
      }
      .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>