ks-app-employment-service/packageA/pages/myResume/myResume.vue

<template>
    <view class="container">
        <!-- 头部信息 -->
        <view class="header">
            <view class="avatar"></view>
            <view class="info">
                <view class="name-row">
                    <text class="name">用户姓名</text>
                    <!-- <view class="edit-icon"></view> -->
                </view>
                <text class="details">男 23岁</text>
            </view>
        </view>

        <!-- 简历信息 -->
        <view class="resume-info">
            <view class="info-card">
                <view class="card-content">
                    <text class="label">出生年月：</text>
                    <text class="value">2001/01/01</text>
                </view>
                <view class="card-content">
                    <text class="label">学历：</text>
                    <text class="value">2001/01/01</text>
                </view>
                <view class="card-content">
                    <text class="label">政治面貌：</text>
                    <text class="value">2001/01/01</text>
                </view>
                <view class="card-content">
                    <text class="label">联系方式：</text>
                    <text class="value">2001/01/01</text>
                </view>
                <view class="edit-icon">
                    <image class="img" src="../../../static/icon/edit.png"></image>
                </view>
            </view>
        </view>

        <!-- 期望职位 -->
        <view class="resume-info">
            <view class="info-card">
                <view class="card-content">
                    <text class="label">期望职位：</text>
                    <view class="value">
                        <view>销售工程师</view>
                        <view>销售工程师</view>
                        <view>销售工程师</view>
                        <view>销售工程师</view>
                    </view>
                </view>
                <view class="edit-icon">
                    <image class="img" src="../../../static/icon/edit.png"></image>
                </view>
            </view>
        </view>

        <!-- 期望薪资 -->
        <view class="resume-info">
            <view class="info-card">
                <view class="card-content">
                    <text class="label">期望薪资：</text>
                    <view class="value">8-10k</view>
                </view>
                <view class="edit-icon">
                    <image class="img" src="../../../static/icon/edit.png"></image>
                </view>
            </view>
        </view>

        <!-- 期望工作地 -->
        <view class="resume-info">
            <view class="info-card">
                <view class="card-content">
                    <text class="label long">期望工作地：</text>
                    <view class="value">青岛-青岛经济技术开发区</view>
                </view>
                <view class="edit-icon">
                    <image class="img" src="../../../static/icon/edit.png"></image>
                </view>
            </view>
        </view>

        <!-- 上传按钮 -->
        <view class="upload-btn">
            <button class="btn">
                <uni-icons type="cloud-upload" size="30" color="#FFFFFF"></uni-icons>
                上传简历
            </button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
};
</script>

<style lang="stylus" scoped>
.container
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
    display: flex;
    flex-direction: column;
    align-items center

.header
  display flex
  align-items center
  padding  30rpx 60rpx
  width calc(100% - 120rpx)
  border-radius 0 0 20rpx 20rpx
  .avatar
    width 100rpx
    height 100rpx
    background-color #ccc
    border-radius 50%
    margin-right 20rpx
  .info
    display flex
    flex-direction column
    .name-row
      display flex
      align-items center
      .name
        font-size 36rpx
        font-weight bold
        color #fff
      .edit-icon
        width 30rpx
        height 30rpx
        background-color #fff
        border-radius 50%
        margin-left 10rpx
    .details
      font-size 24rpx
      color #dbeafe

.resume-info
    padding: 0 26rpx
    width calc(100% - 52rpx)
    margin-top 20rpx
  .info-card
    display flex
    flex-direction: column
    justify-content space-between
    align-items center
    color #fff
    padding 10rpx 24rpx
    border-radius 12rpx
    margin-bottom 10rpx
    background: #4778EC;
    box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
    border-radius: 17rpx 17rpx 17rpx 17rpx;
    position: relative
    .card-content
        width: 100%
        display flex
        line-height: 58rpx
        margin-top 16rpx
      .label
        width 160rpx
        height: 32rpx
        font-size 28rpx
        color #FFFFFF
        text-align:justify;
        margin-right: 20rpx
      .long
        width 180rpx
        margin-right: 0rpx
      .label:after
        content: '';
        display: inline-block;
        width: 100%;
      .value
        font-size: 28rpx;
        color: #FFFFFF;
    .card-content:first-child
        margin-top 0
    .edit-icon
      position: absolute
      right: 40rpx
      top: 20rpx
      width 40rpx
      height 40rpx
      .img
        width: 100%
        height: 100%

.upload-btn
  margin-top 20rpx
  .btn
    display: flex
    align-items: center
    box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
    height 80rpx
    background-color #22c55e
    color #fff
    font-size 28rpx
    font-weight bold
    border-radius 20rpx
</style>