yizhizan-h5/package/jobIntention/completeMsg.vue

<template>
  <view class="company">
    <nav-bar title="完善信息" color="#000"></nav-bar>
    <view class="company-content">
      <view class="company-title">完善你的招聘名片</view>
      <view class="company-desc">求职者更愿意主动联系名片信息完整的HR</view>
      <!-- 头像上传区域 -->
      <view class="form-label">头像</view>
      <view class="avatar-section">
        <view class="avatar-upload" @click="chooseAvatar">
          <view class="avatar-preview">
            <image
              v-if="avatar"
              :src="avatar"
              class="avatar-image"
              mode="aspectFill"
            ></image>
            <image
              v-else
              src="@/static/images/jobApplicant/touxiang.svg"
              mode="scaleToFill"
              class="user-img"
            />
          </view>
          <view class="upload-view">上传头像</view>
        </view>
      </view>
      <!-- 姓名 -->
      <view class="form-item">
        <view class="form-label">填写职务</view>
        <u-input
          placeholder="真实的职务，更能赢得牛人的信任"
          v-model="name"
          :border="false"
          class="form-input"
        ></u-input>
      </view>
      <view class="form-item">
        <view class="form-label">求职者视角中的效果</view>
        <view class="form-border">
          <view class="form-border-top">
            <view class="form-border-title">亚马逊店铺运营</view>
            <view class="form-border-money">24-36K·16薪</view>
          </view>
          <view class="form-border-desc">演示公司100-499人</view>
          <view class="form-border-img-name">
            <view class="people-img">
              <image
                src="@/static/images/jobApplicant/touxiang.svg"
                mode="scaleToFill"
                class="user-img"
              />
            </view>
            <view class="people-name">孙先生 招聘者</view>
          </view>
        </view>
      </view>
      <view class="bottom-btn">开始招聘</view>
    </view>
  </view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      avatar: "",
      name: "",
    };
  },
  components: {
    navBar,
  },
  methods: {
    goUploadImg() {
      uni.navigateTo({ url: "/package/jobIntention/companyImg" });
    },
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          this.avatar = res.tempFilePaths[0];
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.company {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  font-family: DM Sans;
  .company-content {
    flex: 1;
    padding: 40rpx;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .company-title {
      color: #333;
      font-size: 40rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
    }
    .form-label {
      color: #1f2c37;
      font-family: DM Sans;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 44rpx;
      padding-top: 30rpx;
      padding-bottom: 27rpx;
      box-sizing: border-box;
    }
    .avatar-section {
      display: flex;
    }

    .avatar-upload {
      display: flex;
      align-items: center;
    }

    .avatar-preview {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
    }

    .avatar-image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .upload-view {
      color: #016bf6;
      font-family: DM Sans;
      font-size: 20rpx;
      font-weight: 500;
      line-height: 48rpx;
    }
    .form-item {
      padding-bottom: 24rpx;
      box-sizing: border-box;
      .job-txt {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 20rpx;
        margin-left: 16rpx;
      }
      .form-border {
        box-sizing: border-box;
        border: 1rpx solid rgba(227, 231, 236, 1);
        border-radius: 12rpx;
        background: rgba(253, 253, 253, 1);
        padding: 36rpx;
        box-sizing: border-box;
        .form-border-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .form-border-title {
            color: rgba(23, 23, 37, 1);
            font-family: DM Sans;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 48rpx;
          }
          .form-border-money {
            color: #016bf6;
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 700;
            line-height: 40rpx;
          }
        }
        .form-border-desc {
          color: rgba(156, 164, 171, 1);
          font-family: DM Sans;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 40rpx;
          padding: 6rpx 0;
          box-sizing: border-box;
        }
        .form-border-img-name {
          display: flex;
          align-items: center;
          gap: 8rpx;
          .people-img {
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
          .people-name {
            color: rgba(156, 164, 171, 1);
            font-family: DM Sans;
            font-size: 16rpx;
            font-weight: 400;
          }
        }
      }
    }

    .form-item:last-child {
      border-bottom: none;
    }

    .form-label {
      color: #1f2c37;
      font-family: DM Sans;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 44rpx;
      padding-top: 30rpx;
      padding-bottom: 27rpx;
      box-sizing: border-box;
    }

    .form-input {
      flex: 1;
      box-sizing: border-box;
      border: 2rpx solid #9ea1a8;
      border-radius: 100rpx;
      background: rgba(255, 255, 255, 1);
      padding: 0rpx 24rpx !important;
    }
  }
  .bottom-btn {
    border-radius: 999px;
    background: rgba(255, 102, 0, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
  }
}
::v-deep .u-input {
  text-align: left !important;
}
</style>