JiangNingUmale-h5/subViolation/ShengchanJiandu/WorkOrder/postpone.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      title="申请延期"
      :autoBack="true"
      :placeholder="true"
    />
    <view class="basic-data">
      <view class="basic-title">
        <image
          src="/static/images/grid-icon.png"
          class="title-icon"
          mode="aspectFill"
        ></image>
        <text class="title-text">基本信息</text>
      </view>
      <view class="basic-main view-global">
        <view class="item-cell">
          <view class="cell-lable">整改工单编号：</view>
          <view class="cell-value">202309120001</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">整改主体名称：</view>
          <view class="cell-value">南京市XX街道XX路66号XX店</view>
        </view>
        <view class="item-cell">
          <view class="cell-lable">整改截止时间：</view>
          <view class="cell-value">2023-09-12</view>
        </view>
      </view>
      <view class="basic-data">
        <view class="basic-title">
          <image
            src="/static/images/grid-icon.png"
            class="title-icon"
            mode="aspectFill"
          ></image>
          <text class="title-text">延期时长</text>
        </view>
        <view
          class="basic-main view-global"
          style="display: flex; align-items: center"
        >
          <u--input
            placeholder="请输入延期时长"
            border="none"
            :customStyle="{ height: '45rpx' }"
            v-model="value"
          ></u--input>
          <text style="color: #9da2ab; font-size: 28rpx">工作日</text>
        </view>
      </view>
      <view class="basic-data">
        <view class="basic-title">
          <image
            src="/static/images/grid-icon.png"
            class="title-icon"
            mode="aspectFill"
          ></image>
          <text class="title-text">延期原因</text>
        </view>
        <view class="basic-main view-global">
          <u--textarea
            v-model="value1"
            placeholder="请输入内容"
            border="none"
          ></u--textarea>
        </view>
      </view>
    </view>
    <fixed-buttom title="提交"></fixed-buttom>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      value1: "",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.basic-title {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;

  .title-icon {
    height: 25rpx;
    width: 40rpx;
  }

  .title-text {
    margin-left: 25rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #0f1316;
  }
}

.basic-main {
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 25rpx;

  .item-cell {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .cell-lable {
      width: 200rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #9da2ab;
    }

    .cell-value {
      flex: 1;
      font-size: 28rpx;
      font-weight: 400;
      color: #2e2f31;
    }
  }

  & > .item-cell:last-child {
    margin-bottom: 0;
  }
}
</style>