<template>
|
<div class="user-center flex-align-center">
|
<div class="user-center-container">
|
<div class="user-tabs">
|
<div class="tabs-title flex-align-center">{{ t('commons.user_center') }}</div>
|
<el-divider />
|
<div class="list-item_primary active">
|
{{ t('user.change_password') }}
|
</div>
|
</div>
|
<div class="user-info">
|
<div class="base-info">
|
<div class="info-title flex-align-center">
|
<span class="title">
|
{{ t('user.change_password') }}
|
</span>
|
</div>
|
<update-pwd />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import UpdatePwd from './UpdatePwd.vue'
|
import { useI18n } from '@/hooks/web/useI18n'
|
const { t } = useI18n()
|
</script>
|
<style lang="less" scoped>
|
.user-center {
|
width: 100%;
|
flex-direction: column;
|
padding-top: 24px;
|
.user-center-container {
|
display: flex;
|
font-style: normal;
|
}
|
|
.user-tabs {
|
width: 200px;
|
height: 201px;
|
border-radius: 4px;
|
background: #fff;
|
padding: 16px;
|
.list-item_primary {
|
padding: 9px 8px;
|
}
|
|
.ed-divider {
|
margin: 4px 0;
|
border-color: rgba(31, 35, 41, 0.15);
|
}
|
|
.tabs-title {
|
padding-left: 8px;
|
color: #8d9199;
|
font-size: 14px;
|
font-style: normal;
|
font-weight: 500;
|
line-height: 22px;
|
height: 40px;
|
}
|
}
|
.user-info {
|
margin-left: 16px;
|
width: 864px;
|
height: 326px;
|
|
.base-info {
|
& + .base-info {
|
margin-top: 12px;
|
.bind-info {
|
margin-top: 16px;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
padding: 16px 24px 16px 24px;
|
border-radius: 4px;
|
border: 1px solid #dee0e3;
|
.bind {
|
font-size: 48px;
|
margin-right: 12px;
|
}
|
|
.info {
|
font-style: normal;
|
font-weight: 400;
|
width: 80%;
|
|
.name {
|
color: #1f2329;
|
font-size: 16px;
|
line-height: 24px;
|
font-weight: 500;
|
width: 100%;
|
}
|
|
.tip {
|
color: #646a73;
|
font-size: 14px;
|
line-height: 22px;
|
max-width: 600px;
|
white-space: pre-wrap;
|
}
|
}
|
|
.delete {
|
margin-left: auto;
|
}
|
}
|
}
|
padding: 20px 24px 24px 24px;
|
border-radius: 4px;
|
background: #fff;
|
.role {
|
& + .role {
|
margin-left: 4px;
|
}
|
display: inline-flex;
|
height: 20px;
|
padding: 0 6px;
|
align-items: center;
|
font-size: 12px;
|
color: var(--ed-color-primary-dark-2, #2b5fd9);
|
border-radius: 2px;
|
background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
|
}
|
.info-title {
|
.ed-button {
|
margin-left: auto;
|
}
|
|
.title {
|
color: #1f2329;
|
font-size: 16px;
|
font-weight: 500;
|
line-height: 24px;
|
}
|
}
|
}
|
}
|
.base-info-item {
|
margin-top: 16px;
|
font-size: 14px;
|
font-weight: 400;
|
line-height: 22px;
|
width: 100%;
|
.label {
|
color: #646a73;
|
}
|
.value {
|
margin-top: 4px;
|
color: #1f2329;
|
}
|
}
|
.mr12 {
|
margin-top: 12px;
|
}
|
}
|
</style>
|
<style lang="less">
|
.qr-code-dialog {
|
font-style: normal;
|
.ed-dialog__body {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.qr-code-img {
|
margin-top: 16px;
|
display: inline-block;
|
padding: 8px 12px;
|
img {
|
width: 184px;
|
height: 184px;
|
}
|
border-radius: 8px;
|
border: 1px solid #bbbfc4;
|
}
|
|
.refresh-login {
|
margin: 0 auto;
|
margin-top: 9px;
|
color: #646a73;
|
font-size: 14px;
|
font-weight: 400;
|
line-height: 22px;
|
|
.ed-icon {
|
margin-left: 4px;
|
}
|
}
|
}
|
</style>
|
