flat: 页面初始化

This commit is contained in:
史典卓
2024-11-18 16:33:37 +08:00
parent cf8fc80b20
commit ad4eb162a5
83 changed files with 8250 additions and 89 deletions

View File

@@ -0,0 +1,206 @@
<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>