feat: 创建 NewNav 导航组件
从 home2/index.vue 抽取顶部导航栏为独立组件，支持： - Logo 区域和菜单栏（首页、碳证中心、服务中心等） - 服务中心下拉菜单（碳服务市场、碳需求市场、碳金融市场、碳数据市场） - 右侧操作区（工作台、登录/注册、用户头像下拉） - 登录状态判断和用户信息获取逻辑 - hover 显示下拉菜单 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
c56ff9fcd1
commit
af2a4e822d
264
txw-mhzc-web/src/pages/index/components/new-nav/index.vue
Normal file
264
txw-mhzc-web/src/pages/index/components/new-nav/index.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="nav-box">
|
||||
<!-- Logo 区域 -->
|
||||
<div class="logo-box">
|
||||
<img src="@/pages/index/assets/logo-name.png" @click="goHome" style="cursor: pointer;">
|
||||
</div>
|
||||
|
||||
<!-- 菜单栏 -->
|
||||
<div class="menu-box">
|
||||
<!-- 首页 -->
|
||||
<div class="menu-title meun-title-active" @click="goPage('/view/mhzc/home')">
|
||||
<img src="@/pages/index/assets/nav-home.png" width="24px" height="24px">
|
||||
<span> 首页</span>
|
||||
</div>
|
||||
|
||||
<!-- 碳证中心 -->
|
||||
<div class="menu-title" @click="goPage('/view/mhzc/yhzx')">碳证中心</div>
|
||||
|
||||
<!-- 服务中心 - 带下拉 -->
|
||||
<div class="menu-title service-center" @mouseenter="showServiceDropdown = true" @mouseleave="showServiceDropdown = false">
|
||||
<span>服务中心</span>
|
||||
<div class="dropdown-arrow">▼</div>
|
||||
<!-- 下拉菜单 -->
|
||||
<div class="dropdown-menu service-dropdown" v-show="showServiceDropdown">
|
||||
<div class="dropdown-item" @click.stop="goPage('/fwsc/fwsc')">碳服务市场</div>
|
||||
<div class="dropdown-item" @click.stop="goPage('/fwsc/xqsc')">碳需求市场</div>
|
||||
<div class="dropdown-item" @click.stop="goPage('/fwsc/jrsc')">碳金融市场</div>
|
||||
<div class="dropdown-item" @click.stop="goPage('/fwsc/sjsc')">碳数据市场</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 共性能力 -->
|
||||
<div class="menu-title" @click="goPage('/view/gxzx/gxnlpt')">共性能力</div>
|
||||
|
||||
<!-- 企业出海 -->
|
||||
<div class="menu-title" @click="goPage('/view/mhzc/qych')">企业出海</div>
|
||||
|
||||
<!-- 行业专题 -->
|
||||
<div class="menu-title" @click="goPage('/view/mhzc/hyzt')">行业专题</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧操作区 -->
|
||||
<div class="option-box">
|
||||
<!-- 工作台 -->
|
||||
<div class="gzt" @click="goPage('/view/mhzc/yhzx')">
|
||||
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
||||
<span> 工作台</span>
|
||||
</div>
|
||||
|
||||
<!-- 已登录状态 -->
|
||||
<template v-if="isdlwc">
|
||||
<!-- 用户头像下拉 -->
|
||||
<div class="user-avatar-box" @mouseenter="showUserDropdown = true" @mouseleave="showUserDropdown = false">
|
||||
<img class="user-avatar" :src="userAvatar" alt="用户头像">
|
||||
<div class="dropdown-menu user-dropdown" v-show="showUserDropdown">
|
||||
<div class="dropdown-item" @click.stop="goUserCenter">用户中心</div>
|
||||
<div class="dropdown-item" @click.stop="handleLogout">退出登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 未登录状态 -->
|
||||
<template v-else>
|
||||
<div style="margin-left:20px; cursor: pointer;">激活</div>
|
||||
<div>|</div>
|
||||
<div style="cursor: pointer;" @click="goLogin">登录</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NewNav',
|
||||
data() {
|
||||
return {
|
||||
isdlwc: false,
|
||||
showServiceDropdown: false,
|
||||
showUserDropdown: false,
|
||||
userAvatar: 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QNxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NkYxNDI1RjU0MjIwNjgxMTgwODM4RjQyOEIzQ0M4MUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDY1QzI5QzczQUVDMTFFNEIzM0U4Q0I5MkNEOTVGMkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDY1QzI5QzYzQUVDMTFFNEIzM0U4Q0I5MkNEOTVGMkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJDRTc1MDAyMzEyMDY4MTE4MDgzOUE3MjIxRTIwQTNGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZGMTQyNUY1NDIyMDY4MTE4MDgzOEY0MjhCM0NDODFFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwv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'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkLoginStatus()
|
||||
},
|
||||
methods: {
|
||||
// 检查登录状态
|
||||
checkLoginStatus() {
|
||||
const sfdl = window.sessionStorage.getItem('sfdl')
|
||||
if (sfdl) {
|
||||
this.isdlwc = true
|
||||
} else {
|
||||
this.isdlwc = false
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到页面
|
||||
goPage(path) {
|
||||
const sfdl = window.sessionStorage.getItem('sfdl')
|
||||
// 如果未登录且不是访问首页或登录页，则跳转登录
|
||||
if (!sfdl && path !== '/view/mhzc/home' && path !== '/view/mhzc/login') {
|
||||
window.location.href = '/view/mhzc/login'
|
||||
return
|
||||
}
|
||||
window.location.href = path
|
||||
},
|
||||
|
||||
// 跳转首页
|
||||
goHome() {
|
||||
window.location.href = '/view/mhzc/home'
|
||||
},
|
||||
|
||||
// 跳转登录页
|
||||
goLogin() {
|
||||
window.location.href = '/view/mhzc/login'
|
||||
},
|
||||
|
||||
// 跳转用户中心
|
||||
goUserCenter() {
|
||||
window.location.href = '/view/mhzc/yhzx'
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
handleLogout() {
|
||||
sessionStorage.removeItem('sfdl')
|
||||
sessionStorage.removeItem('yhxx')
|
||||
window.location.href = '/view/mhzc/login'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.nav-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
min-width: 1920px;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
background: #009a29;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.option-box {
|
||||
display: flex;
|
||||
width: 25%;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-style: regular;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
leading-trim: none;
|
||||
}
|
||||
|
||||
.option-box .gzt {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 96px;
|
||||
height: 64px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meun-title-active {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%);
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
|
||||
// 服务中心下拉箭头
|
||||
.service-center {
|
||||
.dropdown-arrow {
|
||||
font-size: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单基础样式
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
min-width: 140px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: #e8f5e9;
|
||||
color: #009a29;
|
||||
}
|
||||
|
||||
// 用户头像下拉菜单
|
||||
.user-avatar-box {
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
|
||||
.user-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: none;
|
||||
min-width: 130px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user