From af2a4e822df8a2bd3476f16085e99e52ca010cf3 Mon Sep 17 00:00:00 2001
From: liulujian <liulujian@liantu.tech>
Date: Fri, 3 Apr 2026 16:25:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=20NewNav=20=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

从 home2/index.vue 抽取顶部导航栏为独立组件，支持：
- Logo 区域和菜单栏（首页、碳证中心、服务中心等）
- 服务中心下拉菜单（碳服务市场、碳需求市场、碳金融市场、碳数据市场）
- 右侧操作区（工作台、登录/注册、用户头像下拉）
- 登录状态判断和用户信息获取逻辑
- hover 显示下拉菜单

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../pages/index/components/new-nav/index.vue  | 264 ++++++++++++++++++
 1 file changed, 264 insertions(+)
 create mode 100644 txw-mhzc-web/src/pages/index/components/new-nav/index.vue

diff --git a/txw-mhzc-web/src/pages/index/components/new-nav/index.vue b/txw-mhzc-web/src/pages/index/components/new-nav/index.vue
new file mode 100644
index 0000000..949f52d
--- /dev/null
+++ b/txw-mhzc-web/src/pages/index/components/new-nav/index.vue
@@ -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> &nbsp;&nbsp;首页</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>