You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.6 KiB
87 lines
2.6 KiB
<template> |
|
<cs-page title="编辑个人信息"> |
|
<view class="container"> |
|
<!-- 我的头像 --> |
|
<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center"> |
|
<text class="wd-font-800">我的头像</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<u-avatar src="/static/images/avatar.jpg"></u-avatar> |
|
<u-icon name="arrow-right"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 真实姓名 --> |
|
<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center"> |
|
<text class="wd-font-800">真实姓名</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<input class="wd-text-right" type="text" placeholder-class="txt" placeholder="请输入" v-model="form.realName" /> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 用户性别 --> |
|
<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center"> |
|
<text class="wd-font-800">用户性别</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 手机号码 --> |
|
<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center"> |
|
<text class="wd-font-800">手机号码</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<input class="wd-text-right" type="number" placeholder-class="txt" placeholder="请输入" v-model="form.mobile" /> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<!-- 所属部门 --> |
|
<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center"> |
|
<text class="wd-font-800">所属部门</text> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon> |
|
</view> |
|
</view> |
|
<button class="button">提交</button> |
|
</view> |
|
</cs-page> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
form: { |
|
avatar: undefined, |
|
realName: undefined, |
|
mobile: undefined, |
|
department: undefined |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.container { |
|
height: 100%; |
|
padding: 10px; |
|
position: relative; |
|
.section { |
|
border-radius: $cs-border-radius; |
|
background: #fff; |
|
box-shadow: 0 0 4px 2px $cs-shadow-color; |
|
margin-bottom: $cs-gap; |
|
padding: 24px; |
|
} |
|
.button { |
|
background-color: $uni-color-primary; |
|
color: #fff; |
|
border-radius: 30px; |
|
position: fixed; |
|
bottom: 30px; |
|
right: 10px; |
|
left: 10px; |
|
height: 40px; |
|
line-height: 40px; |
|
box-sizing: border-box; |
|
} |
|
} |
|
</style>
|
|
|