feat: 添加返回导航功能
- 个人中心页面添加返回首页按钮 - 抬头管理添加页面添加返回按钮 - 优化页面导航流程,提升用户体验
This commit is contained in:
parent
ee580ff22c
commit
0eff495f75
@ -35,6 +35,14 @@
|
||||
<!-- 右侧表单区 -->
|
||||
<div class="content-area">
|
||||
<div class="content-section">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-button" @click="handleBack">
|
||||
<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>
|
||||
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
@ -246,6 +254,11 @@ const menuList = ref([
|
||||
}
|
||||
])
|
||||
|
||||
// 返回
|
||||
function handleBack() {
|
||||
router.push('/user-center')
|
||||
}
|
||||
|
||||
// 菜单点击
|
||||
function handleMenuClick(menu) {
|
||||
if (menu.id === 'invoice') return
|
||||
@ -263,9 +276,9 @@ async function handleSubmit() {
|
||||
// await api.addInvoiceHeader(formData.value)
|
||||
|
||||
$message.success('保存成功')
|
||||
// 返回上一页
|
||||
// 返回个人中心
|
||||
setTimeout(() => {
|
||||
router.back()
|
||||
router.push('/user-center')
|
||||
}, 500)
|
||||
} catch (error) {
|
||||
$message.error('保存失败,请重试')
|
||||
@ -393,6 +406,35 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: #F5F7FA;
|
||||
color: #A30113;
|
||||
}
|
||||
|
||||
.back-button svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.back-button:hover svg {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.invoice-form {
|
||||
|
||||
@ -34,6 +34,14 @@
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<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>
|
||||
|
||||
<!-- 估值记录 -->
|
||||
<div v-if="currentMenu === 'history'" class="content-section">
|
||||
<div class="asset-grid">
|
||||
@ -306,6 +314,11 @@ function handleDownloadCertificate(item) {
|
||||
$message.info('下载证书功能开发中')
|
||||
}
|
||||
|
||||
// 返回首页
|
||||
function handleBackToHome() {
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
// 菜单点击
|
||||
function handleMenuClick(menu) {
|
||||
currentMenu.value = menu.id
|
||||
@ -437,6 +450,37 @@ onMounted(() => {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: #F5F7FA;
|
||||
color: #A30113;
|
||||
}
|
||||
|
||||
.back-button svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.back-button:hover svg {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.content-section {
|
||||
@ -445,6 +489,7 @@ onMounted(() => {
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 40px);
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/* 估值记录 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user