This commit is contained in:
杨
parent
5e4329dc5b
commit
5f45eac946
|
|
@ -555,7 +555,7 @@ const handleSubmit = async () => {
|
|||
|
||||
// 调用接口
|
||||
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
|
||||
await getCustomerList(userId.value)
|
||||
} catch (err) {
|
||||
|
|
@ -567,7 +567,7 @@ const handleSubmit = async () => {
|
|||
try {
|
||||
await editCustomerApi({
|
||||
...params,
|
||||
fee_handling_percent: commissionRatioForm.value.commissionRatio,
|
||||
fee_handling_percent: commissionRatioForm.value.commissionRatio, base_ts:null
|
||||
})
|
||||
dialogVisible.value = false
|
||||
await getCustomerList(userId.value)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div class="personal-center">
|
||||
<!-- 顶部区域：快速开始 + 常用功能 -->
|
||||
<div class="top-section">
|
||||
<!-- 如何开始 -->
|
||||
<section class="section getting-started">
|
||||
<h2 class="section-title">
|
||||
<el-icon><MagicStick /></el-icon>
|
||||
如何开始
|
||||
快速开始
|
||||
</h2>
|
||||
<div class="progress-steps">
|
||||
<div
|
||||
|
|
@ -42,7 +44,7 @@
|
|||
class="action-card"
|
||||
>
|
||||
<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" />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
|
@ -56,6 +58,37 @@
|
|||
</router-link>
|
||||
</div>
|
||||
</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">
|
||||
|
|
@ -67,7 +100,7 @@
|
|||
<div class="wallet-card" @click="handleWalletClick">
|
||||
<div class="wallet-main">
|
||||
<div class="balance-section">
|
||||
<div class="balance-label">总金额</div>
|
||||
<div class="balance-label">总金额 (USD)</div>
|
||||
<div class="balance-value">
|
||||
<AnimatedNumber :value="walletCapital.amount_total || 0" :decimals="2" />
|
||||
</div>
|
||||
|
|
@ -108,12 +141,14 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 个人账户 -->
|
||||
<section class="section my-accounts">
|
||||
<h2 class="section-title">
|
||||
<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-button>
|
||||
|
|
@ -138,10 +173,10 @@
|
|||
/>
|
||||
</div>
|
||||
<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 />
|
||||
</el-icon>
|
||||
<el-icon size="20" @click.stop="handleSetting(item.account_id)">
|
||||
<el-icon size="18" @click.stop="handleSetting(item.account_id)">
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
|
@ -176,16 +211,15 @@
|
|||
<h2 class="section-title">
|
||||
<el-icon><Share /></el-icon>
|
||||
推广中心
|
||||
<span class="promotion-time">统计起始时间: {{ promotionStats.startTime }}</span>
|
||||
</h2>
|
||||
<div class="promotion-content">
|
||||
<div class="promotion-link">
|
||||
<h4>推广链接</h4>
|
||||
<div class="link-box">
|
||||
<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-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -198,7 +232,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 添加/编辑子账户弹窗 -->
|
||||
<AgentDialog
|
||||
:visible="dialogVisible"
|
||||
|
|
@ -255,7 +288,8 @@ import {
|
|||
DocumentCopy,
|
||||
MagicStick,
|
||||
CircleCheckFilled,
|
||||
TrendCharts
|
||||
TrendCharts,
|
||||
UserFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
import AgentDialog from '@/components/common/Dialog.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%;
|
||||
}
|
||||
|
||||
// 顶部区域布局
|
||||
.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 {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: $shadow-light;
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
|
|
@ -612,10 +661,10 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
|
@ -624,8 +673,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
color: $primary-color;
|
||||
}
|
||||
|
||||
.wallet-badge,
|
||||
.promotion-time {
|
||||
.wallet-badge {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: $text-tertiary;
|
||||
|
|
@ -635,10 +683,6 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
.promotion-time {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -648,9 +692,9 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
.getting-started {
|
||||
.progress-steps {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
|
|
@ -658,7 +702,6 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
align-items: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
justify-content: center;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -669,22 +712,22 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
}
|
||||
|
||||
.step-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: $bg-light;
|
||||
border: 2px solid $border-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-tertiary;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 2;
|
||||
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -692,11 +735,11 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
.step-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
text-decoration: none;
|
||||
|
|
@ -708,18 +751,18 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: $text-tertiary;
|
||||
margin-top: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.step-connector {
|
||||
flex: 1;
|
||||
flex: 0.5;
|
||||
height: 2px;
|
||||
background: $border-color;
|
||||
margin: 0 16px;
|
||||
margin: 0 12px;
|
||||
position: relative;
|
||||
margin-top: -24px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.connector-line {
|
||||
|
|
@ -764,22 +807,22 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
.action-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 12px;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-hover;
|
||||
border-color: $primary-color;
|
||||
|
||||
|
|
@ -791,9 +834,9 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
}
|
||||
|
||||
.card-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -802,17 +845,17 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
margin-left: 12px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
margin: 0 0 4px 0;
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: $text-tertiary;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -823,7 +866,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
transition: all 0.3s ease;
|
||||
|
||||
.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 {
|
||||
background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
|
||||
border: 1px solid rgba(22, 93, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
border-radius: 10px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
|
@ -851,17 +894,17 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
}
|
||||
|
||||
.balance-section {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.balance-label {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
font-size: 42px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: $primary-color;
|
||||
letter-spacing: -1px;
|
||||
|
|
@ -873,7 +916,7 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
|
||||
.balance-detail {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
|
|
@ -881,13 +924,13 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
flex-direction: column;
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
|
@ -895,25 +938,25 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
|
||||
.wallet-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 20px;
|
||||
padding: 8px 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
color: $text-primary;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -926,22 +969,23 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
|
||||
// 个人账户 - 横向卡片网格
|
||||
.my-accounts {
|
||||
margin-bottom: 20px;
|
||||
.account-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.account-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-hover;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
|
@ -951,27 +995,27 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
|
||||
.el-input {
|
||||
width: 150px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: $text-tertiary;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
|
|
@ -986,16 +1030,16 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
}
|
||||
|
||||
.account-number {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
.account-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
|
|
@ -1006,33 +1050,33 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.account-loss {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 77, 79, 0.05);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.loss-label {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: $danger-color;
|
||||
}
|
||||
|
||||
.loss-value {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: $danger-color;
|
||||
}
|
||||
|
|
@ -1041,32 +1085,33 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
|
||||
// 推广中心 - 左右布局
|
||||
.promotion {
|
||||
margin-bottom: 20px;
|
||||
.promotion-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.promotion-link,
|
||||
.promotion-qrcode {
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.link-box {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
|
||||
.link-input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: $text-primary;
|
||||
background: $bg-light;
|
||||
outline: none;
|
||||
|
|
@ -1080,24 +1125,24 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-card {
|
||||
background: $bg-light;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto 12px;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
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) {
|
||||
.top-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.middle-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
.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 {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.top-section,
|
||||
.middle-section {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
.progress-steps {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
justify-content: flex-start;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
|
@ -1157,16 +1225,16 @@ $shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.12);
|
|||
.my-wallet {
|
||||
.wallet-card {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.balance-detail {
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.account-grid {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue