feat: 引入 AppHeader 组件，将表格重构为 Naive UI 的 n-data-table，并优化页面布局和交互。
This commit is contained in:
Wei_佳
parent
3ccbaef170
commit
1b56856995
99
web1/src/components/AppHeader.vue
Normal file
99
web1/src/components/AppHeader.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="app-header">
|
||||
<div class="logo-section" @click="handleLogoClick">
|
||||
<img src="@/assets/images/logo.png" alt="logo" class="logo" />
|
||||
</div>
|
||||
<div class="user-section">
|
||||
<div class="user-avatar" @click="handleUserClick">
|
||||
<img src="@/assets/img/icon_user.png" alt="User" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function handleLogoClick() {
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
function handleUserClick() {
|
||||
router.push('/user-center')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-header {
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
height: 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-section:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-header {
|
||||
padding: 15px 20px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,6 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<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" @click="handleUserCenter">
|
||||
<img src="@/assets/img/icon_user.png" alt="User" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppHeader />
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="glass-card">
|
||||
@ -32,15 +23,12 @@
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function handleStartEvaluation() {
|
||||
router.push('/valuation/list')
|
||||
}
|
||||
|
||||
function handleUserCenter() {
|
||||
router.push('/user-center')
|
||||
router.push('/pages')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -58,43 +46,6 @@ function handleUserCenter() {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="pages">
|
||||
<div class="left">
|
||||
<AppHeader class="page-header" />
|
||||
<!-- 左侧边栏 - 已隐藏 -->
|
||||
<!-- <div class="left">
|
||||
<img style="width: 198px; height: 32px; margin: 20px;" src="@/assets/images/logo.png" alt="" @click="navToLogin">
|
||||
<div style="margin-left: 20px;">
|
||||
<div v-for="(item, index) in historyList" @click="selectTimeBox(item)" :class="{ timeBox: item.id != isSelected, timeBox2: item.id == isSelected}">
|
||||
@ -8,8 +10,7 @@
|
||||
<img v-if="item.id == isSelected" class="delete-icon" src="@/assets/images/delete.png" alt="" @click.stop="deleteValuations(item)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
<div v-if="status=='create'" class="right">
|
||||
<StepProgressBar style="width: 800px; margin: auto; margin-top: 40px;" :steps="steps" :currentStep="currentStep" />
|
||||
<div class="line"></div>
|
||||
@ -22,7 +23,7 @@
|
||||
<div v-if="currentStep==4" class="title-form">非遗资产衍生商品信息</div>
|
||||
</div>
|
||||
<NForm
|
||||
style="margin:auto; margin-top:30px; width:900px; height: calc(100vh - 500px); overflow-y: auto;"
|
||||
class="form-container"
|
||||
ref="modalFormRef"
|
||||
label-placement="top"
|
||||
label-align="top"
|
||||
@ -593,6 +594,7 @@
|
||||
<script lang="ts" setup>
|
||||
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
|
||||
import StepProgressBar from './components/StepProgressBar.vue';
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
import api from '@/api'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useMessage, useDialog } from 'naive-ui'
|
||||
@ -1100,12 +1102,11 @@ const nextStep = () => {
|
||||
}
|
||||
modalFormRef.value?.validate((errors) => {
|
||||
if (!errors) {
|
||||
if(currentStep.value != 4){
|
||||
if(currentStep.value < 4){
|
||||
currentStep.value ++
|
||||
return
|
||||
}
|
||||
if(currentStep.value == 4){
|
||||
submit()
|
||||
}
|
||||
openSubmitConfirm()
|
||||
}
|
||||
else {
|
||||
message.error('请完善表单')
|
||||
@ -1217,6 +1218,15 @@ const retry = () => {
|
||||
status.value = 'create'
|
||||
}
|
||||
const dialog = useDialog()
|
||||
const openSubmitConfirm = () => {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '提交后将消耗评估次数，确认提交？',
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => submit(),
|
||||
})
|
||||
}
|
||||
const deleteValuations = (item) => {
|
||||
dialog.warning({
|
||||
title: '确认删除',
|
||||
@ -1347,20 +1357,34 @@ onMounted(async () => {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #F8F8F8;
|
||||
.left {
|
||||
/* 左侧边栏样式 - 已隐藏 */
|
||||
/* .left {
|
||||
width: 270px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
} */
|
||||
.right {
|
||||
flex: 1;
|
||||
margin: 40px;
|
||||
height: 100%;
|
||||
margin: 20px auto;
|
||||
max-width: 1200px;
|
||||
width: 95%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
.page-header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.delete-icon{
|
||||
float: right;
|
||||
transform: translate(0,2px);
|
||||
@ -1403,6 +1427,12 @@ onMounted(async () => {
|
||||
background: #EEEEEE;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.form-container{
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
width: 900px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.form-item{
|
||||
display: inline-block;
|
||||
width: 330px;
|
||||
@ -1512,4 +1542,4 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -12,42 +12,14 @@
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%">公司名称</th>
|
||||
<th style="width: 35%">税号</th>
|
||||
<th style="width: 25%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="invoice in invoiceList" :key="invoice.id">
|
||||
<td>{{ invoice.name }}</td>
|
||||
<td>{{ invoice.taxId || '123456789012345678' }}</td>
|
||||
<td>
|
||||
<div class="action-group">
|
||||
<div class="action-btn edit" @click="handleEditInvoice(invoice)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 4H4C3.44772 4 3 4.44772 3 5V20C3 20.5523 3.44772 21 4 21H19C19.5523 21 20 20.5523 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="action-btn delete" @click="handleDeleteInvoice(invoice)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="invoiceList.length === 0">
|
||||
<td colspan="3" class="empty-text">暂无抬头信息...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="invoiceList"
|
||||
:row-key="rowKey"
|
||||
:pagination="false"
|
||||
striped
|
||||
size="medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InvoiceModal
|
||||
@ -59,7 +31,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { h, ref } from 'vue'
|
||||
import { NButton, NDataTable, NSpace } from 'naive-ui'
|
||||
import InvoiceModal from './InvoiceModal.vue'
|
||||
|
||||
const props = defineProps({
|
||||
@ -101,6 +74,64 @@ function handleModalSubmit(data) {
|
||||
}
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '公司名称',
|
||||
key: 'name',
|
||||
minWidth: 220,
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row) => row.name || '-'
|
||||
},
|
||||
{
|
||||
title: '税号',
|
||||
key: 'taxId',
|
||||
minWidth: 200,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row) => row.taxId || '123456789012345678'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row) =>
|
||||
h(
|
||||
NSpace,
|
||||
{ size: 12, justify: 'center' },
|
||||
{
|
||||
default: () => [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => handleEditInvoice(row)
|
||||
},
|
||||
{ default: () => '编辑' }
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
type: 'error',
|
||||
size: 'small',
|
||||
onClick: () => handleDeleteInvoice(row)
|
||||
},
|
||||
{ default: () => '删除' }
|
||||
)
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
const rowKey = (row) => row.id ?? row.name ?? row.taxId
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -163,60 +194,4 @@ function handleModalSubmit(data) {
|
||||
.table-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-table th {
|
||||
text-align: left;
|
||||
padding: 12px 24px;
|
||||
background: #F5F7FA;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.custom-table td {
|
||||
padding: 16px 24px;
|
||||
color: #606266;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.custom-table tr:hover td {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-btn.edit {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.action-btn.delete {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,89 +1,148 @@
|
||||
<template>
|
||||
<div class="content-section">
|
||||
<n-card :bordered="false" class="valuation-card">
|
||||
<div class="section-header">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">估值记录</div>
|
||||
<div class="title-block">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">估值记录</div>
|
||||
</div>
|
||||
<!-- <n-button quaternary type="primary" size="small" @click="fetchHistory">
|
||||
刷新
|
||||
</n-button> -->
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%">资产名称</th>
|
||||
<th style="width: 25%">时间</th>
|
||||
<th style="width: 35%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in assetList" :key="item.id">
|
||||
<td>{{ item.name || '未知资产' }}</td>
|
||||
<td>{{ formatDate(item.created_at) }}</td>
|
||||
<td>
|
||||
<div class="action-group">
|
||||
<div class="action-btn" @click="handleDownloadReport(item)">
|
||||
<img src="@/assets/icon/报告.png" alt="报告" class="action-icon" />
|
||||
<span>下载报告</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="handleDownloadCertificate(item)">
|
||||
<img src="@/assets/icon/证书.png" alt="证书" class="action-icon" />
|
||||
<span>下载证书</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="assetList.length === 0">
|
||||
<td colspan="3" class="empty-text">暂无估值记录...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-data-table
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:row-key="rowKey"
|
||||
:pagination="false"
|
||||
striped
|
||||
size="medium"
|
||||
/>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
import { h, onMounted, ref } from 'vue'
|
||||
import { NButton, NSpace } from 'naive-ui'
|
||||
import api from '@/api'
|
||||
|
||||
const props = defineProps({
|
||||
assetList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
// 格式化日期
|
||||
const loading = ref(false)
|
||||
const tableData = ref([...props.assetList])
|
||||
|
||||
function handleDownloadReport(item) {
|
||||
window.$message?.info('下载报告功能开发中')
|
||||
}
|
||||
|
||||
function handleDownloadCertificate(item) {
|
||||
window.$message?.info('下载证书功能开发中')
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
return dateStr.slice(0, 10) + ' ' + dateStr.slice(11, 16)
|
||||
return `${dateStr.slice(0, 10)} ${dateStr.slice(11, 16)}`
|
||||
}
|
||||
|
||||
// 下载报告
|
||||
function handleDownloadReport(item) {
|
||||
$message.info('下载报告功能开发中')
|
||||
const columns = [
|
||||
{
|
||||
title: '资产名称',
|
||||
key: 'asset_name',
|
||||
minWidth: 200,
|
||||
ellipsis: true,
|
||||
render: (row) => row.asset_name || row.name || '未知资产',
|
||||
},
|
||||
{
|
||||
title: '评估时间',
|
||||
key: 'created_at',
|
||||
minWidth: 180,
|
||||
render: (row) => formatDate(row.created_at),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
align: 'right',
|
||||
width: 220,
|
||||
render: (row) =>
|
||||
h(
|
||||
NSpace,
|
||||
{ size: 8 },
|
||||
{
|
||||
default: () => [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => handleDownloadReport(row),
|
||||
},
|
||||
{ default: () => '下载报告' }
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => handleDownloadCertificate(row),
|
||||
},
|
||||
{ default: () => '下载证书' }
|
||||
),
|
||||
],
|
||||
}
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const rowKey = (row) => row.id ?? row.asset_name ?? row.name
|
||||
|
||||
async function fetchHistory() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.getHistoryList({ page: 1, page_size: 50 })
|
||||
const list = res?.data?.results ?? res?.data ?? res?.results ?? []
|
||||
tableData.value = Array.isArray(list) ? list : []
|
||||
} catch (error) {
|
||||
console.error('加载估值记录失败:', error)
|
||||
tableData.value = props.assetList
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 下载证书
|
||||
function handleDownloadCertificate(item) {
|
||||
$message.info('下载证书功能开发中')
|
||||
}
|
||||
onMounted(fetchHistory)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
.valuation-card {
|
||||
min-height: calc(100vh - 40px);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #A30113;
|
||||
background: #a30113;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@ -93,62 +152,7 @@ function handleDownloadCertificate(item) {
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-table th {
|
||||
text-align: left;
|
||||
padding: 12px 24px;
|
||||
background: #F5F7FA;
|
||||
color: #909399;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.custom-table td {
|
||||
padding: 16px 24px;
|
||||
color: #606266;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.custom-table tr:hover td {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 40px 0;
|
||||
.empty-block {
|
||||
padding: 24px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
<template>
|
||||
<div class="user-center-container">
|
||||
<!-- 头部 -->
|
||||
<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>
|
||||
<AppHeader />
|
||||
|
||||
<!-- 主体内容容器 -->
|
||||
<div class="main-container">
|
||||
@ -48,6 +39,7 @@
|
||||
import { ref, onMounted, h, watch, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import api from '@/api'
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
import UserSidebar from './components/UserSidebar.vue'
|
||||
|
||||
const router = useRouter()
|
||||
@ -181,7 +173,8 @@ async function loadData() {
|
||||
valuationCount.value = res.results.length
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error)
|
||||
console.error('加载估值记录失败:', error)
|
||||
$message.error('加载估值记录失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
|
||||
@ -198,38 +191,6 @@ onMounted(() => {
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user