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