refactor(person): 优化个人信息页面布局和样式
- 调整个人信息表格单元格内内容的垂直居中方式 - 优化用户信息表单布局,调整标签和输入框的宽度比例 - 统一表单样式,增加外边距和对齐方式- 调整手机号修改表单的标签和输入框宽度比例 - 优化表单项样式,添加内边距和对齐方式
This commit is contained in:
@ -2,9 +2,11 @@
|
|||||||
<Container title="个人信息" class="container mt-24px">
|
<Container title="个人信息" class="container mt-24px">
|
||||||
<a-table :columns="columns" :data="data" :pagination="false" class="mt-16px">
|
<a-table :columns="columns" :data="data" :pagination="false" class="mt-16px">
|
||||||
<template #info="{ record }">
|
<template #info="{ record }">
|
||||||
|
<div class="pt-3px pb-3px">
|
||||||
<a-avatar :image-url="record.head_image" :size="32" />
|
<a-avatar :image-url="record.head_image" :size="32" />
|
||||||
{{ record.name }}
|
{{ record.name }}
|
||||||
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
|
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #mobile="{ record }">
|
<template #mobile="{ record }">
|
||||||
{{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
|
{{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
|
||||||
@ -12,7 +14,12 @@
|
|||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
<Modal v-model:visible="infoVisible" title="修改用户信息" @ok="handleSubmitUserInfo">
|
<Modal v-model:visible="infoVisible" title="修改用户信息" @ok="handleSubmitUserInfo">
|
||||||
<a-form :model="userInfoForm">
|
<a-form
|
||||||
|
class="form"
|
||||||
|
:model="userInfoForm"
|
||||||
|
:label-col-props="{ span: 3, offset: 0 }"
|
||||||
|
:wrapper-col-props="{ span: 21, offset: 0 }"
|
||||||
|
>
|
||||||
<a-form-item field="head_image" label="头像">
|
<a-form-item field="head_image" label="头像">
|
||||||
<div class="flex item-center">
|
<div class="flex item-center">
|
||||||
<a-avatar :image-url="userInfoForm.file_url" :size="48" />
|
<a-avatar :image-url="userInfoForm.file_url" :size="48" />
|
||||||
@ -42,8 +49,8 @@
|
|||||||
:model="form"
|
:model="form"
|
||||||
class="form"
|
class="form"
|
||||||
:rules="formRules"
|
:rules="formRules"
|
||||||
:label-col-props="{ span: 6, offset: 0 }"
|
:label-col-props="{ span: 5, offset: 0 }"
|
||||||
:wrapper-col-props="{ span: 18, offset: 0 }"
|
:wrapper-col-props="{ span: 19, offset: 0 }"
|
||||||
label-align="left"
|
label-align="left"
|
||||||
>
|
>
|
||||||
<a-form-item required field="mobile" label="新手机号">
|
<a-form-item required field="mobile" label="新手机号">
|
||||||
@ -241,6 +248,10 @@ function getFileExtension(filename: string): string {
|
|||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.form {
|
.form {
|
||||||
|
margin-top: 13px;
|
||||||
|
:deep(.arco-row) {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
:deep(.arco-form-item-label) {
|
:deep(.arco-form-item-label) {
|
||||||
font-family: Alibaba PuHuiTi, serif;
|
font-family: Alibaba PuHuiTi, serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -253,6 +264,7 @@ function getFileExtension(filename: string): string {
|
|||||||
font-family: Alibaba PuHuiTi, serif;
|
font-family: Alibaba PuHuiTi, serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
padding: 4px 12px;
|
||||||
input::placeholder {
|
input::placeholder {
|
||||||
font-family: Alibaba PuHuiTi, serif;
|
font-family: Alibaba PuHuiTi, serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
Reference in New Issue
Block a user