<template>
  <view class="container-main">
    <view class="form">
      <view class="form-item firm-name">
        <view class="form-lable">
          <text style="margin-right: 10rpx; font-size: 34rpx; color: #eb5b47"
            >*</text
          >
          <text class="lable-text">公司名称</text>
        </view>
        <view class="form-value">
          <u-input
            v-model="value"
            type="text"
            :border="false"
            placeholder-style="color:#C4CCD8;font-size:30rpx"
            :custom-style="customStyle"
            placeholder="请输入公司名称"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-lable">
          <text style="margin-right: 10rpx; font-size: 34rpx; color: #eb5b47"
            >*</text
          >
          <text class="lable-text">填报人</text>
        </view>
        <view class="form-value">
          <u-input
            v-model="value"
            type="text"
            :border="false"
            placeholder-style="color:#C4CCD8;font-size:30rpx"
            placeholder="请输入填报人姓名"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-lable">
          <text style="margin-right: 10rpx; font-size: 34rpx; color: #eb5b47"
            >*</text
          >
          <text class="lable-text">联系电话</text>
        </view>
        <view class="form-value">
          <u-input
            v-model="value"
            type="text"
            :border="false"
            placeholder-style="color:#C4CCD8;font-size:30rpx"
            placeholder="请输入联系电话"
          />
        </view>
      </view>
      <view class="form-item item-textarea">
        <view class="form-lable">
          <text class="lable-text">建议意见</text>
        </view>
        <view class="form-value">
          <u-input
            v-model="value"
            type="textarea"
            height="150"
            placeholder-style="color:#C4CCD8;font-size:30rpx"
            :custom-style="customStyle"
            :border="false"
            placeholder="请输入建议意见"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customStyle: {
        paddingLeft: "20rpx",
        paddingTop: "20rpx",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
uni-page-body,
page {
  background: rgba(245, 247, 250, 1);
}
.form {
  box-sizing: border-box;
  padding: 20rpx;
}
.form-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 25rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;

  .form-lable {
    min-width: 180rpx;
  }

  .lable-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #34373b;
  }

  .form-value {
    flex: 1;
  }
}

.item-textarea,
.firm-name {
  align-items: flex-start;
  flex-direction: column;

  .form-value {
    width: 100%;
  }
}
</style>
