yueyixin
/
foreign-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

余额

This commit is contained in:
杨 2026-06-12 17:02:27 +08:00
parent 5e4329dc5b
commit 5f45eac946
2 changed files with 393 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/agent/user/index.vue
View File

@ -555,7 +555,7 @@ const handleSubmit = async () => {
// 调用接口 // 调用接口
try { try {
await editCustomerApi({ ...params, point_diffs_json: JSON.stringify(marginRatioJSON) }) await editCustomerApi({ ...params, point_diffs_json: JSON.stringify(marginRatioJSON), base_ts:null })
dialogVisible.value = false dialogVisible.value = false
await getCustomerList(userId.value) await getCustomerList(userId.value)
} catch (err) { } catch (err) {
@ -567,7 +567,7 @@ const handleSubmit = async () => {
try { try {
await editCustomerApi({ await editCustomerApi({
...params, ...params,
fee_handling_percent: commissionRatioForm.value.commissionRatio, fee_handling_percent: commissionRatioForm.value.commissionRatio, base_ts:null
}) })
dialogVisible.value = false dialogVisible.value = false
await getCustomerList(userId.value) await getCustomerList(userId.value)

383
src/views/dashboard/components/view/index.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<div class="personal-center"> <div class="personal-center">
<!-- 顶部区域：快速开始 + 常用功能 -->
<div class="top-section">
<!-- 如何开始 --> <!-- 如何开始 -->
<section class="section getting-started"> <section class="section getting-started">
<h2 class="section-title"> <h2 class="section-title">
<el-icon><MagicStick /></el-icon> <el-icon><MagicStick /></el-icon>
如何开始 快速开始
</h2> </h2>
<div class="progress-steps"> <div class="progress-steps">
<div <div
@ -42,7 +44,7 @@
class="action-card" class="action-card"
> >
<div class="card-icon" :style="{ background: action.bgColor }"> <div class="card-icon" :style="{ background: action.bgColor }">
<el-icon :size="32" :color="action.iconColor"> <el-icon :size="28" :color="action.iconColor">
<component :is="action.icon" /> <component :is="action.icon" />
</el-icon> </el-icon>
</div> </div>
@ -56,6 +58,37 @@
</router-link> </router-link>
</div> </div>
</section> </section>
</div>
<!-- 中部区域：用户信息 + 钱包 -->
<div class="middle-section">
<!-- 用户信息面板 -->
<section class="section user-info-panel">
<div class="info-panel">
<div class="section-title">
<el-icon><User /></el-icon>
<span>当前用户</span>
</div>
<div class="panel-content">
<div class="user-info">
<div class="user-avatar">
<el-icon :size="32"><UserFilled /></el-icon>
</div>
<div class="user-details">
<span class="user-name">{{ userStore.userInfo?.username || '-' }}</span>
</div>
</div>
<div class="info-row">
<span class="info-label">用户ID</span>
<span class="info-value">{{ userStore.userInfo?.id || '-' }}</span>
</div>
<div class="info-row">
<span class="info-label">最后登录</span>
<span class="info-value">{{ userStore.userInfo?.last_login || '-' }}</span>
</div>
</div>
</div>
</section>
<!-- 我的钱包 --> <!-- 我的钱包 -->
<section class="section my-wallet"> <section class="section my-wallet">
@ -67,7 +100,7 @@
<div class="wallet-card" @click="handleWalletClick"> <div class="wallet-card" @click="handleWalletClick">
<div class="wallet-main"> <div class="wallet-main">
<div class="balance-section"> <div class="balance-section">
<div class="balance-label">总金额</div> <div class="balance-label">总金额 (USD)</div>
<div class="balance-value"> <div class="balance-value">
<AnimatedNumber :value="walletCapital.amount_total || 0" :decimals="2" /> <AnimatedNumber :value="walletCapital.amount_total || 0" :decimals="2" />
</div> </div>
@ -108,12 +141,14 @@
</div> </div>
</section> </section>
</div>
<!-- 个人账户 --> <!-- 个人账户 -->
<section class="section my-accounts"> <section class="section my-accounts">
<h2 class="section-title"> <h2 class="section-title">
<el-icon><User /></el-icon> <el-icon><User /></el-icon>
个人账户 个人账户
<el-button type="primary" @click="handleAddSubAccount" v-auth="'user_createAccount'"> <el-button type="primary" size="small" @click="handleAddSubAccount" v-auth="'user_createAccount'">
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
添加子账户 添加子账户
</el-button> </el-button>
@ -138,10 +173,10 @@
/> />
</div> </div>
<div class="account-actions"> <div class="account-actions">
<el-icon size="20" @click.stop="handleEdit(item.account_name, item.account_id)"> <el-icon size="18" @click.stop="handleEdit(item.account_name, item.account_id)">
<EditPen /> <EditPen />
</el-icon> </el-icon>
<el-icon size="20" @click.stop="handleSetting(item.account_id)"> <el-icon size="18" @click.stop="handleSetting(item.account_id)">
<Setting /> <Setting />
</el-icon> </el-icon>
</div> </div>
@ -176,16 +211,15 @@
<h2 class="section-title"> <h2 class="section-title">
<el-icon><Share /></el-icon> <el-icon><Share /></el-icon>
推广中心 推广中心
<span class="promotion-time">统计起始时间: {{ promotionStats.startTime }}</span>
</h2> </h2>
<div class="promotion-content"> <div class="promotion-content">
<div class="promotion-link"> <div class="promotion-link">
<h4>推广链接</h4> <h4>推广链接</h4>
<div class="link-box"> <div class="link-box">
<input type="text" :value="copyText" readonly class="link-input" /> <input type="text" :value="copyText" readonly class="link-input" />
<el-button type="primary" @click="handleCopyUrl" class="copy-btn"> <el-button type="primary" size="small" @click="handleCopyUrl" class="copy-btn">
<el-icon><DocumentCopy /></el-icon> <el-icon><DocumentCopy /></el-icon>
复制链接 复制
</el-button> </el-button>
</div> </div>
</div> </div>
@ -198,7 +232,6 @@
</div> </div>
</div> </div>
</section> </section>
<!-- 添加/编辑子账户弹窗 --> <!-- 添加/编辑子账户弹窗 -->
<AgentDialog <AgentDialog
:visible="dialogVisible" :visible="dialogVisible"
@ -255,7 +288,8 @@ import {
DocumentCopy, DocumentCopy,
MagicStick, MagicStick,
CircleCheckFilled, CircleCheckFilled,
TrendCharts TrendCharts,
UserFilled
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import AgentDialog from '@/components/common/Dialog.vue' import AgentDialog from '@/components/common/Dialog.vue'
import AgentForm from '@/components/common/Form.vue' import AgentForm from '@/components/common/Form.vue'
@ -598,11 +632,26 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
min-height: 100%; min-height: 100%;
} }
// 顶部区域布局
.top-section {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 20px;
margin-bottom: 20px;
}
// 中部区域布局
.middle-section {
display: grid;
grid-template-columns: 0.8fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.section { .section {
background: #ffffff; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 24px; padding: 20px;
margin-bottom: 20px;
box-shadow: $shadow-light; box-shadow: $shadow-light;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
@ -612,10 +661,10 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
.section-title { .section-title {
font-size: 18px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: $text-primary; color: $text-primary;
margin-bottom: 24px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@ -624,8 +673,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
color: $primary-color; color: $primary-color;
} }
.wallet-badge, .wallet-badge {
.promotion-time {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
color: $text-tertiary; color: $text-tertiary;
@ -635,10 +683,6 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
margin-left: auto; margin-left: auto;
} }
.promotion-time {
font-size: 13px;
}
.el-button { .el-button {
margin-left: auto; margin-left: auto;
} }
@ -648,9 +692,9 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.getting-started { .getting-started {
.progress-steps { .progress-steps {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: center; justify-content: space-between;
padding: 20px 0; padding: 12px 0;
} }
.step-item { .step-item {
@ -658,7 +702,6 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
align-items: center; align-items: center;
position: relative; position: relative;
flex: 1; flex: 1;
max-width: 200px;
justify-content: center; justify-content: center;
&:last-child { &:last-child {
@ -669,22 +712,22 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
.step-icon { .step-icon {
width: 48px; width: 40px;
height: 48px; height: 40px;
border-radius: 50%; border-radius: 50%;
background: $bg-light; background: $bg-light;
border: 2px solid $border-color; border: 2px solid $border-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $text-tertiary; color: $text-tertiary;
transition: all 0.3s ease; transition: all 0.3s ease;
z-index: 2; z-index: 2;
.el-icon { .el-icon {
font-size: 24px; font-size: 20px;
color: #ffffff; color: #ffffff;
} }
} }
@ -692,11 +735,11 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.step-info { .step-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 12px; margin-left: 10px;
} }
.step-title { .step-title {
font-size: 15px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $text-primary; color: $text-primary;
text-decoration: none; text-decoration: none;
@ -708,18 +751,18 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
.step-desc { .step-desc {
font-size: 12px; font-size: 11px;
color: $text-tertiary; color: $text-tertiary;
margin-top: 4px; margin-top: 2px;
} }
.step-connector { .step-connector {
flex: 1; flex: 0.5;
height: 2px; height: 2px;
background: $border-color; background: $border-color;
margin: 0 16px; margin: 0 12px;
position: relative; position: relative;
margin-top: -24px; margin-top: -20px;
} }
.connector-line { .connector-line {
@ -764,22 +807,22 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.action-cards { .action-cards {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px; gap: 12px;
} }
.action-card { .action-card {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 24px; padding: 16px;
background: #ffffff; background: #ffffff;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 12px; border-radius: 10px;
text-decoration: none; text-decoration: none;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
transform: translateY(-4px); transform: translateY(-2px);
box-shadow: $shadow-hover; box-shadow: $shadow-hover;
border-color: $primary-color; border-color: $primary-color;
@ -791,9 +834,9 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
.card-icon { .card-icon {
width: 64px; width: 48px;
height: 64px; height: 48px;
border-radius: 16px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -802,17 +845,17 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.card-content { .card-content {
flex: 1; flex: 1;
margin-left: 16px; margin-left: 12px;
h3 { h3 {
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0 0 4px 0; margin: 0 0 2px 0;
} }
p { p {
font-size: 13px; font-size: 12px;
color: $text-tertiary; color: $text-tertiary;
margin: 0; margin: 0;
} }
@ -823,7 +866,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
transition: all 0.3s ease; transition: all 0.3s ease;
.el-icon { .el-icon {
font-size: 20px; font-size: 18px;
} }
} }
} }
@ -833,8 +876,8 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.wallet-card { .wallet-card {
background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%); background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
border: 1px solid rgba(22, 93, 255, 0.1); border: 1px solid rgba(22, 93, 255, 0.1);
border-radius: 12px; border-radius: 10px;
padding: 32px; padding: 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
@ -851,17 +894,17 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
.balance-section { .balance-section {
margin-bottom: 24px; margin-bottom: 16px;
} }
.balance-label { .balance-label {
font-size: 14px; font-size: 13px;
color: $text-tertiary; color: $text-tertiary;
margin-bottom: 8px; margin-bottom: 6px;
} }
.balance-value { .balance-value {
font-size: 42px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: $primary-color; color: $primary-color;
letter-spacing: -1px; letter-spacing: -1px;
@ -873,7 +916,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.balance-detail { .balance-detail {
display: flex; display: flex;
gap: 40px; gap: 32px;
} }
.detail-item { .detail-item {
@ -881,13 +924,13 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
flex-direction: column; flex-direction: column;
.label { .label {
font-size: 13px; font-size: 12px;
color: $text-tertiary; color: $text-tertiary;
margin-bottom: 4px; margin-bottom: 4px;
} }
.value { .value {
font-size: 20px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: $text-primary; color: $text-primary;
} }
@ -895,25 +938,25 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.wallet-actions { .wallet-actions {
display: flex; display: flex;
gap: 12px; gap: 10px;
} }
.action-btn { .action-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 10px 20px; padding: 8px 16px;
background: #ffffff; background: #ffffff;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 8px; border-radius: 6px;
color: $text-primary; color: $text-primary;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 13px;
font-weight: 500; font-weight: 500;
transition: all 0.3s ease; transition: all 0.3s ease;
.el-icon { .el-icon {
font-size: 16px; font-size: 14px;
} }
&:hover { &:hover {
@ -926,22 +969,23 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
// 个人账户 - 横向卡片网格 // 个人账户 - 横向卡片网格
.my-accounts { .my-accounts {
margin-bottom: 20px;
.account-grid { .account-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px; gap: 16px;
} }
.account-card { .account-card {
background: #ffffff; background: #ffffff;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 12px; border-radius: 10px;
padding: 20px; padding: 16px;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
transform: translateY(-4px); transform: translateY(-2px);
box-shadow: $shadow-hover; box-shadow: $shadow-hover;
border-color: $primary-color; border-color: $primary-color;
} }
@ -951,27 +995,27 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 12px;
padding-bottom: 12px; padding-bottom: 10px;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
} }
.account-name { .account-name {
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $text-primary; color: $text-primary;
.el-input { .el-input {
width: 150px; width: 120px;
} }
} }
.account-actions { .account-actions {
display: flex; display: flex;
gap: 8px; gap: 6px;
.el-icon { .el-icon {
font-size: 16px; font-size: 14px;
color: $text-tertiary; color: $text-tertiary;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
@ -986,16 +1030,16 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
.account-number { .account-number {
font-size: 13px; font-size: 12px;
color: $text-tertiary; color: $text-tertiary;
margin-bottom: 16px; margin-bottom: 12px;
font-family: 'Monaco', 'Menlo', monospace; font-family: 'Monaco', 'Menlo', monospace;
} }
.account-stats { .account-stats {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 12px; gap: 8px;
} }
.stat-item { .stat-item {
@ -1006,33 +1050,33 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
.stat-label { .stat-label {
font-size: 12px; font-size: 11px;
color: $text-tertiary; color: $text-tertiary;
margin-bottom: 4px; margin-bottom: 2px;
} }
.stat-value { .stat-value {
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $text-primary; color: $text-primary;
} }
.account-loss { .account-loss {
margin-top: 16px; margin-top: 12px;
padding: 12px; padding: 10px;
background: rgba(255, 77, 79, 0.05); background: rgba(255, 77, 79, 0.05);
border-radius: 8px; border-radius: 6px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.loss-label { .loss-label {
font-size: 13px; font-size: 12px;
color: $danger-color; color: $danger-color;
} }
.loss-value { .loss-value {
font-size: 18px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: $danger-color; color: $danger-color;
} }
@ -1041,32 +1085,33 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
// 推广中心 - 左右布局 // 推广中心 - 左右布局
.promotion { .promotion {
margin-bottom: 20px;
.promotion-content { .promotion-content {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; flex-direction: column;
gap: 24px; gap: 16px;
} }
.promotion-link, .promotion-link,
.promotion-qrcode { .promotion-qrcode {
h4 { h4 {
font-size: 14px; font-size: 13px;
color: $text-secondary; color: $text-secondary;
margin: 0 0 12px 0; margin: 0 0 10px 0;
font-weight: 500; font-weight: 500;
} }
} }
.link-box { .link-box {
display: flex; display: flex;
gap: 12px; gap: 10px;
.link-input { .link-input {
flex: 1; flex: 1;
padding: 12px 16px; padding: 10px 14px;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 8px; border-radius: 6px;
font-size: 14px; font-size: 13px;
color: $text-primary; color: $text-primary;
background: $bg-light; background: $bg-light;
outline: none; outline: none;
@ -1080,24 +1125,24 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 4px;
} }
} }
.qrcode-card { .qrcode-card {
background: $bg-light; background: $bg-light;
border-radius: 12px; border-radius: 10px;
padding: 24px; padding: 20px;
text-align: center; text-align: center;
canvas { canvas {
display: block; display: block;
margin: 0 auto 12px; margin: 0 auto 10px;
} }
p { p {
margin: 0; margin: 0;
font-size: 13px; font-size: 12px;
color: $text-tertiary; color: $text-tertiary;
} }
} }
@ -1111,10 +1156,28 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
// 响应式适配 // 响应式适配
@media (max-width: 1400px) {
.top-section {
grid-template-columns: 1fr 1fr;
}
.middle-section {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.top-section {
grid-template-columns: 1fr;
}
.middle-section {
grid-template-columns: 1fr;
}
.quick-actions { .quick-actions {
.action-cards { .action-cards {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
} }
} }
} }
@ -1126,19 +1189,24 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.section { .section {
padding: 16px; padding: 16px;
margin-bottom: 16px; }
.top-section,
.middle-section {
grid-template-columns: 1fr;
gap: 16px;
} }
.getting-started { .getting-started {
.progress-steps { .progress-steps {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 20px; gap: 16px;
} }
.step-item { .step-item {
max-width: 100%;
width: 100%; width: 100%;
max-width: 280px;
justify-content: flex-start; justify-content: flex-start;
padding-left: 20px; padding-left: 20px;
} }
@ -1157,16 +1225,16 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
.my-wallet { .my-wallet {
.wallet-card { .wallet-card {
flex-direction: column; flex-direction: column;
gap: 20px; gap: 16px;
} }
.balance-value { .balance-value {
font-size: 32px; font-size: 28px;
} }
.balance-detail { .balance-detail {
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 16px;
} }
.wallet-actions { .wallet-actions {
@ -1175,16 +1243,109 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
} }
} }
.promotion {
.promotion-content {
grid-template-columns: 1fr;
}
}
.my-accounts { .my-accounts {
.account-grid { .account-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
.user-info-panel {
.info-panel {
height: 100%;
}
}
}
// 用户信息面板样式
.user-info-panel {
.info-panel {
height: 100%;
display: flex;
flex-direction: column;
}
.panel-header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid $border-color;
.el-icon {
font-size: 18px;
color: $primary-color;
}
span {
font-size: 14px;
font-weight: 600;
color: $text-primary;
}
}
.panel-content {
flex:1;
display: flex;
flex-direction: column;
justify-content: center;
.user-info {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.user-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%);
display: flex;
align-items: center;
justify-content: center;
.el-icon {
color: $primary-color;
}
}
.user-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-name {
font-size: 16px;
font-weight: 600;
color: $text-primary;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid $bg-light;
&:last-child {
border-bottom: none;
}
}
.info-label {
font-size: 13px;
color: $text-tertiary;
}
.info-value {
font-size: 13px;
color: $text-primary;
font-weight: 500;
}
}
} }
</style> </style>