2025-08-15 16:37:41 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="page-content user">
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<div class="left-wrap">
|
|
|
|
|
|
<div class="user-wrap box-style">
|
|
|
|
|
|
<!-- <img class="bg" src="@imgs/user/bg.webp" /> -->
|
|
|
|
|
|
<img
|
|
|
|
|
|
class="avatar"
|
|
|
|
|
|
:src="userInfo.avatar != '' ? userInfo.avatar : '/src/assets/img/user/avatar.webp'"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<h2 class="name">{{ userInfo.name }}</h2>
|
|
|
|
|
|
<p class="des">SN:{{ userInfo.sn }}</p>
|
|
|
|
|
|
<div class="outer-info">
|
|
|
|
|
|
<!-- <div class="info-row">
|
|
|
|
|
|
<span class="info-label">昵 称：</span>
|
|
|
|
|
|
<span class="info-value">{{ userInfo.phone }}</span>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<span class="info-label">电 话：</span>
|
|
|
|
|
|
<span class="info-value">{{ userInfo.phone }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<span class="info-label">邮 箱：</span>
|
|
|
|
|
|
<span class="info-value">{{ userInfo.email }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<span class="info-label">公 司：</span>
|
|
|
|
|
|
<span class="info-value">{{ userInfo.corp_name }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="info-row">
|
|
|
|
|
|
<span class="info-label">国 家：</span>
|
|
|
|
|
|
<span class="info-value">{{ userInfo.country_txt }}</span>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right-wrap">
|
|
|
|
|
|
<div class="info box-style">
|
|
|
|
|
|
<h1 class="title"><span class="border" style="margin-right: 5px"></span>基本信息</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<ElForm
|
|
|
|
|
|
:model="form"
|
|
|
|
|
|
class="form"
|
|
|
|
|
|
ref="ruleFormRef"
|
|
|
|
|
|
label-width="86px"
|
|
|
|
|
|
label-position="left"
|
|
|
|
|
|
>
|
|
|
|
|
|
<ElFormItem label="头像" prop="avatar">
|
|
|
|
|
|
<el-upload
|
|
|
|
|
|
class="qrcode-upload"
|
|
|
|
|
|
:action="actionImageUplode"
|
|
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
|
:on-success="handleUploadavatar"
|
|
|
|
|
|
:disabled="!isEdit"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="qrcode-upload-box">
|
|
|
|
|
|
<img
|
|
|
|
|
|
class="avatar"
|
|
|
|
|
|
:src="
|
|
|
|
|
|
imageUrlavatar != '' ? imageUrlavatar : '/src/assets/img/user/avatar.webp'
|
|
|
|
|
|
"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
<ElRow>
|
|
|
|
|
|
<ElFormItem label="昵称" prop="name">
|
|
|
|
|
|
<el-input v-model="form.name" :disabled="!isEdit" />
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
<ElFormItem label="性别" prop="sex" class="right-input">
|
|
|
|
|
|
<ElSelect v-model="form.sex" placeholder="未知" :disabled="!isEdit">
|
|
|
|
|
|
<ElOption
|
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
|
:key="item.value"
|
|
|
|
|
|
:label="item.label"
|
|
|
|
|
|
:value="item.value"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</ElSelect>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
</ElRow>
|
|
|
|
|
|
|
|
|
|
|
|
<ElRow>
|
|
|
|
|
|
<ElFormItem label="联系方式" prop="phone">
|
|
|
|
|
|
<ElInput v-model="form.phone" disabled />
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
<ElFormItem label="公司" prop="company" class="right-input">
|
|
|
|
|
|
<ElInput v-model="form.corp_name" disabled />
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
<!-- <ElFormItem label="职务" prop="position" class="right-input">
|
|
|
|
|
|
<ElInput v-model="form.position" :disabled="!isEdit" />
|
|
|
|
|
|
</ElFormItem> -->
|
|
|
|
|
|
</ElRow>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <ElRow>
|
|
|
|
|
|
<ElFormItem label="公司" prop="company">
|
|
|
|
|
|
<ElInput v-model="form.corp_name" disabled />
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
<ElFormItem label="国家" prop="address" class="right-input">
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
v-model="form.country_id"
|
|
|
|
|
|
filterable
|
|
|
|
|
|
placeholder="请选择国家"
|
|
|
|
|
|
:disabled="!isEdit"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="item in countryOptions"
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
:label="item.cn_addr"
|
|
|
|
|
|
:value="item.id"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
</ElRow> -->
|
|
|
|
|
|
<ElRow>
|
|
|
|
|
|
<ElFormItem label="邮箱" prop="email">
|
|
|
|
|
|
<ElInput v-model="form.email" :disabled="!isEdit" />
|
|
|
|
|
|
</ElFormItem>
|
2025-09-18 10:57:17 +08:00
|
|
|
|
<ElFormItem label="签名" prop="signature" class="right-input">
|
|
|
|
|
|
<template v-if="form.sign_img">
|
|
|
|
|
|
<img :src="sign_img_url" class="signature-img" />
|
|
|
|
|
|
<el-button
|
|
|
|
|
|
v-if="isEdit"
|
|
|
|
|
|
style="margin-left: 12px"
|
|
|
|
|
|
@click="showReSignQR = !showReSignQR"
|
|
|
|
|
|
>
|
|
|
|
|
|
重新签名
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-if="isEdit && showReSignQR"
|
|
|
|
|
|
class="signature-qrcode"
|
|
|
|
|
|
style="margin-top: 20px; margin-left: 20px"
|
|
|
|
|
|
>
|
|
|
|
|
|
<qrcode-vue
|
|
|
|
|
|
:value="qrcodeUrl"
|
|
|
|
|
|
:size="200"
|
|
|
|
|
|
level="M"
|
|
|
|
|
|
render-as="svg"
|
|
|
|
|
|
:include-margin="true"
|
|
|
|
|
|
background="#ffffff"
|
|
|
|
|
|
foreground="#000000"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<div class="qrcode-tip">手机扫码重新签名</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template v-else>
|
|
|
|
|
|
<div class="signature-qrcode">
|
|
|
|
|
|
<qrcode-vue
|
|
|
|
|
|
:value="qrcodeUrl"
|
|
|
|
|
|
:size="200"
|
|
|
|
|
|
level="M"
|
|
|
|
|
|
render-as="svg"
|
|
|
|
|
|
:include-margin="true"
|
|
|
|
|
|
background="#ffffff"
|
|
|
|
|
|
foreground="#000000"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<div class="qrcode-tip">手机扫码进行签名</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<!-- <el-button @click="handleSignature" type="primary">签名</el-button> -->
|
|
|
|
|
|
<el-input type="hidden" v-model="form.signature" />
|
|
|
|
|
|
</ElFormItem>
|
2025-08-15 16:37:41 +08:00
|
|
|
|
</ElRow>
|
|
|
|
|
|
<!-- <ElRow>
|
|
|
|
|
|
<ElFormItem
|
|
|
|
|
|
label="二维码"
|
|
|
|
|
|
prop="socialize"
|
|
|
|
|
|
:class="isEdit ? 'qrcode-radio-group' : ''"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-radio-group v-model="form.socialize" v-if="isEdit">
|
|
|
|
|
|
<el-radio label="微信">微信</el-radio>
|
|
|
|
|
|
<el-radio label="WhatsApp">WhatsApp</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
<template v-else>
|
|
|
|
|
|
<img
|
|
|
|
|
|
v-if="form.socialize_pic_full"
|
|
|
|
|
|
:src="form.socialize_pic_full"
|
|
|
|
|
|
class="qrcode-img"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span v-else class="qrcode-upload-text">暂无二维码</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
<ElFormItem v-if="isEdit" label="上传二维码" prop="address" class="right-input">
|
|
|
|
|
|
<el-upload
|
|
|
|
|
|
class="qrcode-upload"
|
|
|
|
|
|
:action="actionImageUplode"
|
|
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
|
:on-success="handleUploadavatarqrcode"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="qrcode-upload-box">
|
|
|
|
|
|
<img
|
|
|
|
|
|
v-if="form.socialize_pic_full"
|
|
|
|
|
|
:src="socialize_pic_full"
|
|
|
|
|
|
class="qrcode-img"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span v-else class="qrcode-upload-text">
|
|
|
|
|
|
<img :src="imageUrls" class="qrcode-img" />
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
</ElRow> -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="el-form-item-right">
|
|
|
|
|
|
<ElButton type="primary" style="width: 90px" v-ripple @click="edit">
|
|
|
|
|
|
<i v-if="!isEdit" class="iconfont-sys"> </i>
|
|
|
|
|
|
{{ isEdit ? '保存' : '编辑' }}
|
|
|
|
|
|
</ElButton>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</ElForm>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="info box-style" style="margin-top: 20px">
|
|
|
|
|
|
<h1 class="title">更改密码</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<ElForm :model="pwdForm" class="form" label-width="86px" label-position="left">
|
|
|
|
|
|
<ElFormItem label="当前密码" prop="password">
|
|
|
|
|
|
<ElInput
|
|
|
|
|
|
v-model="pwdForm.password"
|
|
|
|
|
|
type="password"
|
|
|
|
|
|
:disabled="!isEditPwd"
|
|
|
|
|
|
show-password
|
|
|
|
|
|
/>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
|
|
|
|
|
|
<ElFormItem label="新密码" prop="password_new">
|
|
|
|
|
|
<ElInput
|
|
|
|
|
|
v-model="pwdForm.password_new"
|
|
|
|
|
|
type="password"
|
|
|
|
|
|
:disabled="!isEditPwd"
|
|
|
|
|
|
show-password
|
|
|
|
|
|
/>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
|
|
|
|
|
|
<ElFormItem label="确认新密码" prop="confirmPassword">
|
|
|
|
|
|
<ElInput
|
|
|
|
|
|
v-model="pwdForm.confirmPassword"
|
|
|
|
|
|
type="password"
|
|
|
|
|
|
:disabled="!isEditPwd"
|
|
|
|
|
|
show-password
|
|
|
|
|
|
/>
|
|
|
|
|
|
</ElFormItem>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="el-form-item-right">
|
|
|
|
|
|
<ElButton type="primary" style="width: 90px" v-ripple @click="editPwd">
|
|
|
|
|
|
<i v-if="!isEditPwd" class="iconfont-sys"> </i>
|
|
|
|
|
|
{{ isEditPwd ? '保存' : '编辑' }}
|
|
|
|
|
|
</ElButton>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</ElForm>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { ElForm, FormInstance } from 'element-plus'
|
|
|
|
|
|
// import imageUrl from '@/assets/img/crm/upimg.png'
|
|
|
|
|
|
import { CrmService } from '@/api/crmApi'
|
|
|
|
|
|
import { UserService } from '@/api/usersApi'
|
|
|
|
|
|
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
|
|
|
|
|
import { useUserStore } from '@/store/modules/user'
|
2025-09-18 10:57:17 +08:00
|
|
|
|
import { computed } from 'vue'
|
|
|
|
|
|
import QrcodeVue from 'qrcode.vue'
|
2025-08-15 16:37:41 +08:00
|
|
|
|
const { uploadHeaders } = useUploadHeaders()
|
|
|
|
|
|
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
2025-09-18 10:57:17 +08:00
|
|
|
|
defineOptions({ name: 'AdminUserCenter' })
|
2025-08-15 16:37:41 +08:00
|
|
|
|
// 定义客户详情类型
|
|
|
|
|
|
interface CustomerInfo {
|
|
|
|
|
|
[key: string]: any
|
|
|
|
|
|
}
|
|
|
|
|
|
// const imageUrls = ref(imageUrl)
|
|
|
|
|
|
const imageUrlavatar = ref('')
|
2025-09-18 10:57:17 +08:00
|
|
|
|
const sign_img_url = ref('')
|
2025-08-15 16:37:41 +08:00
|
|
|
|
// const socialize_pic_full = ref('')
|
|
|
|
|
|
// const countryOptions = ref<any>()
|
|
|
|
|
|
const form = ref<CustomerInfo>({})
|
|
|
|
|
|
//获取公司 getCompanyList
|
|
|
|
|
|
// const companyList = ref<any>()
|
|
|
|
|
|
//国家
|
|
|
|
|
|
// const getarea = async () => {
|
|
|
|
|
|
// try {
|
|
|
|
|
|
// // 这里调用获取品牌列表的接口
|
|
|
|
|
|
// const res = await CrmService.getCountry()
|
|
|
|
|
|
// countryOptions.value = res||[]
|
|
|
|
|
|
// } catch (error) { countryOptions.value = [] }
|
|
|
|
|
|
// }
|
2025-09-18 10:57:17 +08:00
|
|
|
|
// const { getUserInfo } = useUserStore()
|
2025-08-15 16:37:41 +08:00
|
|
|
|
const userInfo = ref<CustomerInfo>({})
|
|
|
|
|
|
const getuserInfo = async () => {
|
2025-09-18 10:57:17 +08:00
|
|
|
|
const data = await UserService.getUserInfo()
|
|
|
|
|
|
userInfo.value = data.user
|
|
|
|
|
|
form.value = data.user
|
|
|
|
|
|
imageUrlavatar.value = data.user.avatar
|
|
|
|
|
|
// socialize_pic_full.value = data.socialize_pic_full
|
|
|
|
|
|
sign_img_url.value = data.user.sign_img_url
|
|
|
|
|
|
// userInfo.value = getUserInfo.user
|
|
|
|
|
|
// form.value = getUserInfo.user
|
|
|
|
|
|
// imageUrlavatar.value = getUserInfo.user.avatar
|
|
|
|
|
|
// sign_img_url.value = getUserInfo.user.sign_img_url
|
2025-08-15 16:37:41 +08:00
|
|
|
|
// socialize_pic_full.value = data.socialize_pic_full
|
|
|
|
|
|
}
|
|
|
|
|
|
const isEdit = ref(false)
|
2025-09-18 10:57:17 +08:00
|
|
|
|
const showReSignQR = ref(false)
|
2025-08-15 16:37:41 +08:00
|
|
|
|
const isEditPwd = ref(false)
|
|
|
|
|
|
const pwdForm = reactive({
|
|
|
|
|
|
password: '',
|
|
|
|
|
|
password_new: '',
|
|
|
|
|
|
confirmPassword: ''
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const ruleFormRef = ref<FormInstance>()
|
|
|
|
|
|
|
|
|
|
|
|
const options = [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: '',
|
|
|
|
|
|
label: '未知'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2025-09-18 10:57:17 +08:00
|
|
|
|
value: 1,
|
2025-08-15 16:37:41 +08:00
|
|
|
|
label: '男'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2025-09-18 10:57:17 +08:00
|
|
|
|
value: 2,
|
2025-08-15 16:37:41 +08:00
|
|
|
|
label: '女'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
|
// await getarea()
|
|
|
|
|
|
await getuserInfo()
|
|
|
|
|
|
})
|
2025-09-18 10:57:17 +08:00
|
|
|
|
const qrcodeUrl = computed(() => {
|
|
|
|
|
|
const userStore = useUserStore() as any
|
|
|
|
|
|
const userId = form.value?.id || userInfo.value?.id || ''
|
|
|
|
|
|
const base = location.origin
|
|
|
|
|
|
const params = new URLSearchParams({ userId: String(userId) })
|
|
|
|
|
|
|
|
|
|
|
|
// 只保留必要的参数，减少URL长度
|
|
|
|
|
|
if (userStore?.accessToken) params.append('token', userStore.accessToken)
|
|
|
|
|
|
if (userStore?.companyabbr) params.append('corp', userStore.companyabbr)
|
|
|
|
|
|
if (userStore?.companyid) params.append('corpid', userStore.companyid)
|
|
|
|
|
|
if (userStore?.systemsabbr) params.append('sys', userStore.systemsabbr)
|
|
|
|
|
|
if (userStore?.systemsid) params.append('sysid', userStore.systemsid)
|
|
|
|
|
|
if (userStore?.loginType) params.append('type', userStore.loginType)
|
|
|
|
|
|
if (userStore?.language) params.append('lang', userStore.language)
|
|
|
|
|
|
|
|
|
|
|
|
return `${base}/auth/signature/mobile?${params.toString()}`
|
|
|
|
|
|
})
|
2025-08-15 16:37:41 +08:00
|
|
|
|
const edit = async () => {
|
|
|
|
|
|
if (isEdit.value) {
|
2025-09-18 10:57:17 +08:00
|
|
|
|
const payload: any = { ...(form.value as any) }
|
|
|
|
|
|
delete payload.sign_img_url
|
|
|
|
|
|
const res = await UserService.editUserInfo(payload)
|
2025-08-15 16:37:41 +08:00
|
|
|
|
ElMessage.success(res?.message || '操作成功')
|
|
|
|
|
|
getuserInfo()
|
|
|
|
|
|
}
|
|
|
|
|
|
isEdit.value = !isEdit.value
|
2025-09-18 10:57:17 +08:00
|
|
|
|
if (isEdit.value === false) {
|
|
|
|
|
|
showReSignQR.value = false
|
|
|
|
|
|
}
|
2025-08-15 16:37:41 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const editPwd = async () => {
|
|
|
|
|
|
if (isEditPwd.value) {
|
|
|
|
|
|
// 判断新密码和确认密码是否一致
|
|
|
|
|
|
if (pwdForm.password_new !== pwdForm.confirmPassword) {
|
|
|
|
|
|
ElMessage.error('新密码和确认密码不一致')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
const res = await CrmService.savePassword(pwdForm)
|
|
|
|
|
|
ElMessage.success(res?.message || '操作成功')
|
|
|
|
|
|
}
|
|
|
|
|
|
isEditPwd.value = !isEditPwd.value
|
|
|
|
|
|
}
|
|
|
|
|
|
//头像上传
|
|
|
|
|
|
function handleUploadavatar(response: any) {
|
|
|
|
|
|
// 假设返回图片地址字段为 response.url 或 response.data.url
|
|
|
|
|
|
imageUrlavatar.value = response.url || (response.data && response.data.file_url) || ''
|
|
|
|
|
|
// 如需同步到 form.picture
|
|
|
|
|
|
form.value.avatar = response.url || (response.data && response.data.file_name) || ''
|
|
|
|
|
|
}
|
|
|
|
|
|
//二维码上传
|
|
|
|
|
|
// function handleUploadavatarqrcode(response: any) {
|
|
|
|
|
|
// // 假设返回图片地址字段为 response.url 或 response.data.url
|
|
|
|
|
|
// socialize_pic_full.value = response.url || (response.data && response.data.file_url) || ''
|
|
|
|
|
|
// imageUrls.value = response.url || (response.data && response.data.file_url) || ''
|
|
|
|
|
|
// // 如需同步到 form.picture
|
|
|
|
|
|
// form.value.socialize_pic = response.url || (response.data && response.data.file_name) || ''
|
|
|
|
|
|
// }
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.user {
|
|
|
|
|
|
.icon {
|
|
|
|
|
|
width: 1.4em;
|
|
|
|
|
|
height: 1.4em;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
vertical-align: -0.15em;
|
|
|
|
|
|
fill: currentcolor;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2025-09-18 10:57:17 +08:00
|
|
|
|
:deep(.qrcode-radio-group .el-form-item__content) {
|
2025-08-15 16:37:41 +08:00
|
|
|
|
height: 40px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.avatar {
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
}
|
2025-09-18 10:57:17 +08:00
|
|
|
|
.qrcode-img {
|
2025-08-15 16:37:41 +08:00
|
|
|
|
width: 80px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.page-content {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
|
border: none !important;
|
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
|
|
|
|
|
|
$box-radius: calc(var(--custom-radius) + 4px);
|
|
|
|
|
|
|
|
|
|
|
|
.box-style {
|
|
|
|
|
|
border: 1px solid var(--art-border-color);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
.left-wrap {
|
|
|
|
|
|
width: 350px;
|
|
|
|
|
|
margin-right: 25px;
|
|
|
|
|
|
|
|
|
|
|
|
.user-wrap {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
height: 400px;
|
|
|
|
|
|
padding: 35px 30px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
// background: var(--art-main-bg-color);
|
2025-09-18 10:57:17 +08:00
|
|
|
|
background: linear-gradient(180deg, #e9f0ff 0%, #ffffff 67.9%);
|
2025-08-15 16:37:41 +08:00
|
|
|
|
|
|
|
|
|
|
border-radius: $box-radius;
|
|
|
|
|
|
.avatar {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
// margin-top: 120px;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
border: 2px solid #fff;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.des {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.outer-info {
|
|
|
|
|
|
// width: 260px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info-row {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info-label {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 100px;
|
|
|
|
|
|
color: #222;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info-value {
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.lables {
|
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
|
padding: 3px 6px;
|
|
|
|
|
|
margin: 0 10px 10px 0;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
background: var(--art-main-bg-color);
|
|
|
|
|
|
border: 1px solid var(--art-border-color);
|
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.gallery {
|
|
|
|
|
|
margin-top: 25px;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-wrap {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
border-radius: $box-radius;
|
|
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
|
background: var(--art-main-bg-color);
|
|
|
|
|
|
border-radius: $box-radius;
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
padding: 15px 25px;
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: var(--art-text-gray-800);
|
|
|
|
|
|
// border-bottom: 1px solid var(--art-border-color);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.form {
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 30px 25px;
|
|
|
|
|
|
|
|
|
|
|
|
> .el-row {
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
|
width: calc(50% - 10px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-input,
|
|
|
|
|
|
.el-select {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-input {
|
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.el-form-item-right {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: end;
|
|
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
|
|
width: 110px !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: $device-ipad-vertical) {
|
|
|
|
|
|
.page-content {
|
|
|
|
|
|
.content {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
|
|
|
|
|
|
.left-wrap {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-wrap {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-09-18 10:57:17 +08:00
|
|
|
|
.signature-img {
|
|
|
|
|
|
width: 160px;
|
|
|
|
|
|
}
|
2025-08-15 16:37:41 +08:00
|
|
|
|
</style>
|
