yizhizan-h5/pages/my/jobApplicant/workProgress.vue

<template>
  <view class="welcome-page">
    <view class="welcome-content">
      <view class="swiper-content">
        <view class="bg-img">
          <image src="@/static/images/jobApplicant/BG.svg" mode="aspectFill" />
        </view>
        <view class="swiper-img">
          <image
            src="@/static/images/jobApplicant/nvqiangren.svg"
            mode="scaleToFill"
            class="bro-img"
          />
        </view>
        <view class="swiper-txt">
          <view class="content-title">请补充最近的工作经验</view>
          <view class="content-desc"
            >动动手指，根据过往履历补充相关信息 <br />
            亿职赞将会更好地为您提供对口职位</view
          >
          <u-button
            type="primary"
            @click="goWorkRecord"
            :customStyle="{
              marginTop: '134rpx',
              height: '90rpx',
              fontSize: '32rpx',
              borderRadius: '100rpx',
            }"
            >Go</u-button
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goWorkRecord(){
        uni.navigateTo({ url: '/pages/my/jobApplicant/workRecord' })
    }
  },
};
</script>
<style scoped lang="scss">
.welcome-page {
  background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  .bg-img {
    position: absolute;
    z-index: -1;
    top: 26rpx;
    left: -240rpx;
    width: 1680rpx;
    height: 1570rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .welcome-content {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 2;
  }
  .swiper-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    .swiper-img {
      flex: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .bro-img {
        width: 620rpx;
        height: 824rpx;
      }
      .address-img {
        width: 714rpx;
        height: 298rpx;
      }
      .people-img {
        width: 586rpx;
        height: 586rpx;
      }
    }
    .swiper-txt {
      flex-shrink: 0;
      background: #fff;
      border-top-left-radius: 48rpx;
      border-top-right-radius: 48rpx;
      width: 100%;
      height: 620rpx;
      padding: 56rpx 40rpx;
      padding-bottom: 60rpx;
      box-sizing: border-box;

      .content-title {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 68rpx;
        font-weight: 700;
        line-height: 88rpx;
        letter-spacing: 0%;
        text-align: center;
      }
      .content-desc {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 34rpx;
        font-weight: 500;
        line-height: 48rpx;
        letter-spacing: 0px;
        text-align: center;
        margin-top: 24rpx;
      }
    }
  }
}
</style>