feat: 优化用户中心页面布局和样式，并更新图标资源。
This commit is contained in:
Wei_佳
parent
77af212fc2
commit
3ccbaef170
BIN
web1/src/assets/icon/估值记录.png
Normal file
BIN
web1/src/assets/icon/估值记录.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
web1/src/assets/icon/对公转账.png
Normal file
BIN
web1/src/assets/icon/对公转账.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 729 B |
BIN
web1/src/assets/icon/报告.png
Normal file
BIN
web1/src/assets/icon/报告.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 B |
BIN
web1/src/assets/icon/抬头管理.png
Normal file
BIN
web1/src/assets/icon/抬头管理.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 753 B |
BIN
web1/src/assets/icon/证书.png
Normal file
BIN
web1/src/assets/icon/证书.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 B |
@ -1,112 +1,116 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<!-- 用户信息 -->
|
||||
<div class="sidebar-card">
|
||||
<div class="user-info">
|
||||
<div class="avatar">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="8" r="4" stroke="white" stroke-width="2"/>
|
||||
<path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="avatar-wrapper">
|
||||
<img src="@/assets/img/icon_user.png" alt="User" />
|
||||
</div>
|
||||
<div class="user-phone">{{ userPhone }}</div>
|
||||
<div class="user-count">累计估值次数: {{ valuationCount }}</div>
|
||||
<div class="user-phone">{{ userPhone || '18988880000' }}</div>
|
||||
<div class="valuation-count">剩余评估次数：{{ valuationCount }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<div class="menu-list">
|
||||
<div
|
||||
v-for="menu in menuList"
|
||||
:key="menu.id"
|
||||
<div
|
||||
v-for="menu in menuList"
|
||||
:key="menu.id"
|
||||
class="menu-item"
|
||||
:class="{ active: currentMenu === menu.id }"
|
||||
@click="handleMenuClick(menu)"
|
||||
@click="$emit('menu-click', menu)"
|
||||
>
|
||||
<component :is="menu.icon" class="menu-icon" />
|
||||
<span class="menu-text">{{ menu.label }}</span>
|
||||
<svg v-if="menu.id !== currentMenu" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div class="menu-icon">
|
||||
<img :src="getMenuIcon(menu.id)" :alt="menu.label" />
|
||||
</div>
|
||||
<span class="menu-label">{{ menu.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import iconHistory from '@/assets/icon/估值记录.png'
|
||||
import iconTransfer from '@/assets/icon/对公转账.png'
|
||||
import iconInvoice from '@/assets/icon/抬头管理.png'
|
||||
|
||||
defineProps({
|
||||
userPhone: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
valuationCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
currentMenu: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
userPhone: String,
|
||||
valuationCount: Number,
|
||||
currentMenu: String,
|
||||
menuList: Array
|
||||
})
|
||||
|
||||
const emit = defineEmits(['menu-click'])
|
||||
defineEmits(['menu-click'])
|
||||
|
||||
function handleMenuClick(menu) {
|
||||
emit('menu-click', menu)
|
||||
function getMenuIcon(id) {
|
||||
const iconMap = {
|
||||
'history': iconHistory,
|
||||
'transfer': iconTransfer,
|
||||
'invoice': iconInvoice
|
||||
}
|
||||
return iconMap[id]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
.sidebar-card {
|
||||
width: 280px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16px;
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
.avatar-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(93deg, #880C22 0%, #A30113 100%);
|
||||
margin: 0 auto 12px;
|
||||
background: #f0f0f0;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-count {
|
||||
.valuation-count {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: #606266;
|
||||
@ -117,23 +121,40 @@ function handleMenuClick(menu) {
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background: rgba(163, 1, 19, 0.08);
|
||||
background: #FFF0F0;
|
||||
color: #A30113;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
.menu-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.menu-item.active .menu-icon img {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
.sidebar-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,17 +21,11 @@
|
||||
<td>
|
||||
<div class="action-group">
|
||||
<div class="action-btn" @click="handleDownloadReport(item)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 20H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<img src="@/assets/icon/报告.png" alt="报告" class="action-icon" />
|
||||
<span>下载报告</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="handleDownloadCertificate(item)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3V16M12 16L7 11M12 16L17 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 20H21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<img src="@/assets/icon/证书.png" alt="证书" class="action-icon" />
|
||||
<span>下载证书</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -146,6 +140,12 @@ function handleDownloadCertificate(item) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
|
||||
@ -1,30 +1,45 @@
|
||||
<template>
|
||||
<div class="user-center-container">
|
||||
<!-- 左侧边栏 -->
|
||||
<UserSidebar
|
||||
:user-phone="userPhone"
|
||||
:valuation-count="valuationCount"
|
||||
:current-menu="currentMenu"
|
||||
:menu-list="menuList"
|
||||
@menu-click="handleMenuClick"
|
||||
/>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="content-area">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-button" @click="handleBackToHome">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>返回首页</span>
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<div class="logo-section">
|
||||
<img src="@/assets/images/logo.png" alt="logo" class="logo" />
|
||||
</div>
|
||||
<div class="user-section">
|
||||
<div class="user-avatar">
|
||||
<img src="@/assets/img/icon_user.png" alt="User" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子路由视图 -->
|
||||
<router-view
|
||||
:asset-list="assetList"
|
||||
:invoice-list="invoiceList"
|
||||
@return-home="handleBackToHome"
|
||||
<!-- 主体内容容器 -->
|
||||
<div class="main-container">
|
||||
<!-- 左侧边栏 -->
|
||||
<UserSidebar
|
||||
:user-phone="userPhone"
|
||||
:valuation-count="valuationCount"
|
||||
:current-menu="currentMenu"
|
||||
:menu-list="menuList"
|
||||
@menu-click="handleMenuClick"
|
||||
/>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="content-area">
|
||||
<!-- 返回按钮 (暂时注释) -->
|
||||
<!-- <div class="back-button" @click="handleBackToHome">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>返回首页</span>
|
||||
</div> -->
|
||||
|
||||
<!-- 子路由视图 -->
|
||||
<router-view
|
||||
:asset-list="assetList"
|
||||
:invoice-list="invoiceList"
|
||||
@return-home="handleBackToHome"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -177,23 +192,70 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.user-center-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: #F5F7FA;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.header {
|
||||
padding: 10px 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Main Container Styles */
|
||||
.main-container {
|
||||
width: 1200px;
|
||||
max-width: 95%;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
align-items: flex-start; /* Prevent stretching */
|
||||
}
|
||||
|
||||
/* 右侧内容区 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
min-height: calc(100vh - 100px); /* Adjust based on header + margin */
|
||||
position: relative;
|
||||
overflow: hidden; /* Ensure rounded corners */
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 44px; /* Align with the content card's top padding area */
|
||||
left: 44px; /* Align with the content card's left padding area */
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
@ -204,24 +266,25 @@ onMounted(() => {
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
z-index: 10;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
color: #A30113;
|
||||
}
|
||||
|
||||
.back-button svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.back-button:hover svg {
|
||||
transform: translateX(-4px);
|
||||
@media (max-width: 1200px) {
|
||||
.main-container {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-center-container {
|
||||
.main-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user