207 lines
5.7 KiB
Vue
207 lines
5.7 KiB
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>
|