yizhizan-h5/pages/my/businessLicense.vue

<template>
  <view class="switch-roles">
    <view class="roles-content">
      <view class="content">
        <view class="title">Hi，欢迎加入亿职赞</view>
        <view class="desc">填写招聘信息，开启搞笑招聘方式</view>
        <view class="title-second">公司营业执照名称</view>
        <view class="input-box">
          <u-input
            placeholder="请输入您所属公司营业执照上的公司名称"
            v-model="phoneNumber"
            clearable
            class="custom-input"
            maxlength="46"
          >
            <template #prefix>
              <u-icon name="phone" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
        </view>
        <view class="desc-txt">
          <view class="desc-txt-item">注意事项：</view>
          <view class="desc-txt-item">1.请输入您所述公司营业执照上的公司名称</view>
          <view class="desc-txt-item"
            >2.公司名称将用于后续企业认证环节，请确保准确性</view
          >
        </view>
        <image src="@/static/images/my/join-yzz.svg" mode="scaleToFill" />
      </view>
    </view>
    <view class="next-btn" @click="goPeopleNumber">下一步</view>
  </view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {};
  },
  components: {
    navBar,
  },
  methods: {
    goBusinessLicense() {
      uni.navigateTo({ url: "/pages/my/businessLicense" });
    },
    goPeopleNumber(){
        uni.navigateTo({ url: '/pages/my/peopleNumber' })
    }
  },
};
</script>
<style lang="scss" scoped>
.input-box{
    width: 100%;
    padding: 16rpx 0 32rpx 0;
    box-sizing: border-box;
}
::v-deep .u-input {
  text-align: left !important;
}
.custom-input {
    width: 100%;
  box-sizing: border-box;
  border: 2rpx solid rgba(158, 161, 168, 1);
  border-radius: 100rpx;
  background: rgba(255, 255, 255, 1);
  padding: 0rpx 24rpx !important;
}
.switch-roles {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 60rpx;
  padding-top: 80rpx;
  display: flex;
  flex-direction: column;
  .roles-content {
    width: 100%;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    .content {
      padding-top: 60rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        width: 100%;
        color: rgba(29, 33, 41, 1);
        font-family: DM Sans;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 44rpx;
        text-align: left;
      }
      .desc {
        width: 100%;
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 32rpx;
        text-align: left;
        padding: 22rpx 0;
        box-sizing: border-box;
      }
      .title-second {
        width: 100%;
        color: #1f2c37;
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 44rpx;
        text-align: left;
      }
      .desc-txt {
        width: 100%;
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 32rpx;
        text-align: left;
        .desc-txt-item {
          margin-top: 8rpx;
        }
      }
      image {
        margin-top: 106rpx;
        width: 550rpx;
        height: 550rpx;
      }
    }
  }
  .next-btn {
    border-radius: 999px;
    background: rgba(255, 102, 0, 1);
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>