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.
88 lines
2.6 KiB
88 lines
2.6 KiB
2 months ago
|
<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>
|