diff --git a/txw-mhzc-web/src/pages/index/assets/logo.png b/txw-mhzc-web/src/pages/index/assets/logo.png new file mode 100644 index 0000000..6004308 Binary files /dev/null and b/txw-mhzc-web/src/pages/index/assets/logo.png differ diff --git a/txw-mhzc-web/src/pages/index/components/nav/index2.vue b/txw-mhzc-web/src/pages/index/components/nav/index2.vue index 5313a5a..d431618 100644 --- a/txw-mhzc-web/src/pages/index/components/nav/index2.vue +++ b/txw-mhzc-web/src/pages/index/components/nav/index2.vue @@ -1,7 +1,7 @@ @@ -56,6 +102,21 @@ export default { return { curPage: "home", loginFlag: false, //是否已完成登录 + mobileMenuOpen: false, //移动端菜单是否展开 + // 路由路径到菜单名的映射 + routeToMenuMap: { + '/home': 'home', + '/fwsc': 'fwsc', + '/tfwsc': 'fwsc', + '/txqsc': 'fwsc', + '/tjrsc': 'fwsc', + '/tsjsc': 'fwsc', + '/yhzx': 'yhzx', + '/gxnlpt': 'gxnlpt', + '/qych': 'qych', + '/hyzt': 'hyzt', + '/login': 'login', + }, menuOptions: [ { @@ -115,7 +176,7 @@ export default { name: 'tbgtg', title: '碳报告托管：', value: 'tgbcz', - content: '碳报告存证', + content: '碳报告托管', divider: true, needLogin: true, clientId: 'client_id_tfwzx', @@ -140,7 +201,9 @@ export default { value: 'tjrsc', content: '碳金融市场', divider: true, - }, { + parentName: 'fwsc', + }, + { name: 'txqsc', title: '碳需求市场', value: 'txqsc', @@ -164,19 +227,19 @@ export default { ] }, { - name: 'gxnl', + name: 'gxnlpt', title: '共性能力', - disable: true + // disable: true }, { name: 'qych', title: '企业出海', - disable: true + // disable: true }, { name: 'hyzt', title: '行业专题', - disable: true + // disable: true }, ] }; @@ -207,6 +270,46 @@ export default { }, beforeUnmount() { }, methods: { + // 切换移动端菜单 + toggleMobileMenu() { + this.mobileMenuOpen = !this.mobileMenuOpen; + document.body.style.overflow = this.mobileMenuOpen ? 'hidden' : ''; + }, + // 关闭移动端菜单 + closeMobileMenu() { + this.mobileMenuOpen = false; + document.body.style.overflow = ''; + }, + // 返回首页 + goHome() { + this.$router.push('/home'); + this.closeMobileMenu(); + }, + // 移动端子菜单点击 + handleMobileDropdownClick(menu) { + this.handleDropdownClick(menu); + this.closeMobileMenu(); + }, + // 根据当前路由更新菜单选中状态 + updateCurPageByRoute() { + const path = this.$route.path; + const routeName = this.$route.name; + + // 优先精确匹配路径 + if (this.routeToMenuMap[path]) { + this.curPage = this.routeToMenuMap[path]; + return; + } + + // 尝试从路径中提取关键部分进行匹配 + if (path.includes('tfwsc') || path.includes('txqsc') || path.includes('tjrsc') || path.includes('tsjsc')) { + this.curPage = 'fwsc'; + return; + } + + // 如果都匹配不到，默认选中首页 + this.curPage = 'home'; + }, //子菜单点击方法 handleDropdownClick(menu) { this.gotoIfreamPage(menu); // 直接把子菜单项传入跳转方法 @@ -236,6 +339,8 @@ export default { } this.curPage = menu.name; + // 关闭移动端菜单 + this.closeMobileMenu(); let iframeUrl = menu.iframeUrl; if (iframeUrl) { //调用login.js内的authorize方法 @@ -270,12 +375,14 @@ export default { } }, gologin() { + this.closeMobileMenu(); this.$router.push("/login") // window.location.href = `/view/mhzc/login`; }, goyhzx() { - this.$router.push("/yhzx") + this.closeMobileMenu(); + this.$router.push("/yhzx/gzt") // window.location.href = `/view/mhzc/yhzx`; }, @@ -327,6 +434,7 @@ export default { }, async logoutHandler() { + this.closeMobileMenu(); const res = await logout(); const resVO = res.data; if (resVO.dcdz) { @@ -369,6 +477,11 @@ export default { } .logo-box { text-align: center; + cursor: pointer; +} + +.option-wrapper { + display: block; } .option-box { @@ -389,6 +502,7 @@ export default { .option-box .gzt { padding: 10px; text-align: center; + cursor: pointer; background: rgba(255, 255, 255, 0.3); display: flex; justify-content: space-around; @@ -426,4 +540,223 @@ export default { .meun-title-disable { cursor: not-allowed !important; } + +/* 汉堡菜单按钮 */ +.hamburger-btn { + display: none; + padding: 10px; + cursor: pointer; +} + +.hamburger-icon { + position: relative; + width: 24px; + height: 18px; +} + +.hamburger-icon span { + position: absolute; + left: 0; + width: 100%; + height: 2px; + background: #fff; + transition: all 0.3s ease; +} + +.hamburger-icon span:nth-child(1) { + top: 0; +} + +.hamburger-icon span:nth-child(2) { + top: 8px; +} + +.hamburger-icon span:nth-child(3) { + top: 16px; +} + +.hamburger-icon.active span:nth-child(1) { + top: 8px; + transform: rotate(45deg); +} + +.hamburger-icon.active span:nth-child(2) { + opacity: 0; +} + +.hamburger-icon.active span:nth-child(3) { + top: 8px; + transform: rotate(-45deg); +} + +/* 移动端菜单 */ +.mobile-menu { + position: fixed; + top: 0; + right: 0; + z-index: 10000; + width: 100%; + height: 100%; + visibility: hidden; + transition: visibility 0.3s ease; +} + +.mobile-menu.open { + visibility: visible; +} + +.mobile-menu-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); +} + +.mobile-menu-content { + position: absolute; + top: 0; + right: 0; + display: flex; + width: 280px; + height: 100%; + max-width: 80%; + background: #fff; + transform: translateX(100%); + transition: transform 0.3s ease; + flex-direction: column; +} + +.mobile-menu.open .mobile-menu-content { + transform: translateX(0); +} + +.mobile-menu-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + background: #009a29; +} + +.mobile-menu-header img { + height: 32px; +} + +.close-btn { + font-size: 32px; + line-height: 1; + color: #fff; + cursor: pointer; +} + +.mobile-menu-list { + padding: 10px 0; + overflow-y: auto; + flex: 1; +} + +.mobile-menu-item { + display: flex; + align-items: center; + padding: 14px 20px; + font-size: 15px; + color: #333; + cursor: pointer; + border-bottom: 1px solid #f0f0f0; + gap: 10px; +} + +.mobile-menu-item img { + width: 20px; + height: 20px; +} + +.mobile-menu-item .arrow { + margin-left: auto; + opacity: 0.5; +} + +.mobile-menu-item.active { + color: #009a29; + background: #f0f9f0; +} + +.mobile-menu-item.disable { + color: #999; + cursor: not-allowed; +} + +.mobile-menu-footer { + padding: 16px 20px; + background: #fafafa; + border-top: 1px solid #eee; +} + +.mobile-auth-btns { + display: flex; + gap: 10px; +} + +.mobile-auth-btn { + padding: 10px; + font-size: 14px; + color: #fff; + text-align: center; + cursor: pointer; + background: #009a29; + border-radius: 6px; + flex: 1; +} + +.mobile-auth-btn.activate { + color: #333; + background: #f0f0f0; +} + +.mobile-auth-btn.logout { + color: #666; + background: #fff; + border: 1px solid #ddd; +} + +/* 移动端适配 */ +@media (max-width: 768px) { + .nav-box { + height: 64px; + grid-template-columns: 1fr auto auto; + padding: 0 16px; + } + + .menu-box { + display: none; + } + + .option-wrapper { + display: none; + } + + .hamburger-btn { + display: block; + } + + .logo-box { + text-align: left; + } + + .logo-box img { + height: 28px; + } +} + +@media (max-width: 480px) { + .nav-box { + padding: 0 12px; + } + + .logo-box img { + height: 24px; + } +} diff --git a/txw-mhzc-web/src/pages/index/router/index.js b/txw-mhzc-web/src/pages/index/router/index.js index 30afdda..72f0295 100644 --- a/txw-mhzc-web/src/pages/index/router/index.js +++ b/txw-mhzc-web/src/pages/index/router/index.js @@ -56,6 +56,10 @@ const router = new VueRouter({ mode: 'history', base: `${window.STATIC_ENV_CONFIG.ROUTER_PREFIX}/`, routes: [mainRoutes], + scrollBehavior(to, from, savedPosition) { + // 每次切换路由时滚动到顶部 + return { x: 0, y: 0 }; + }, }); router.beforeEach((to, from, next) => { diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue index ed01f48..8d62e7e 100644 --- a/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue +++ b/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue @@ -24,7 +24,11 @@