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

<template>
  <view class="guide-page">
    <view class="guide-item">
      <view class="guide-img">
        <image
          src="@/static/images/jobApplicant/woyaozhaogongzuo.svg"
          mode="aspectFix"
        />
      </view>
      <view class="guide-btn">我要找工作</view>
    </view>
    <view class="guide-item">
      <view class="guide-img">
        <image
          src="@/static/images/jobApplicant/woyaozhaoren.svg"
          mode="aspectFix"
        />
      </view>
      <view class="guide-btn">我要找工作</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">
.guide-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;
  padding: 120rpx 76rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 36rpx;
  .guide-item {
    width: 100%;
    height: 100%;
    border-radius: 28rpx;
    background: rgba(255, 255, 255, 0.851);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 56rpx;
    box-sizing: border-box;
    gap: 72rpx;
    .guide-img {
      width: 364rpx;
      height: 364rpx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .guide-btn {
      border-radius: 100rpx;
      background: rgba(255, 255, 255, 1);
      color: #016bf6;
      font-family: DM Sans;
      font-size: 32rpx;
      font-weight: 400;
      line-height: 48rpx;
      letter-spacing: 0%;
      text-align: center;
      width: 100%;
      padding: 16rpx;
      box-sizing: border-box;
    }
  }
}
</style>