<template>
    <view class="switch-roles">
      <view class="roles-content">
        <view class="content">
          <view class="title">公司全称</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/changePosition' })
      }
    },
  };
  </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>
  