From adbbcc321dc64984f6d5f84acdd3a5dffed849aa Mon Sep 17 00:00:00 2001 From: liulujian Date: Mon, 6 Apr 2026 13:50:17 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=9C=8D=E5=8A=A1=E5=B8=82?= =?UTF-8?q?=E5=9C=BA=E3=80=81=E9=9C=80=E6=B1=82=E5=B8=82=E5=9C=BA=E7=BE=8E?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/index/views/fwsc/fwsc.vue | 205 +++++++++++++-- .../src/pages/index/views/fwsc/sjsc.vue | 118 +++++++-- .../src/pages/index/views/fwsc/xqsc.vue | 239 +++++++++++++++--- 3 files changed, 486 insertions(+), 76 deletions(-) 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..7433a89 100644 --- a/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue +++ b/txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue @@ -62,11 +62,22 @@
-
+
+
+ 🛠️ + 碳服务市场 +
+
+ 共 {{ page.total }} 条服务 +
+
+ +
+
@@ -107,6 +118,7 @@
+
@@ -475,6 +487,7 @@ export default { } .nav-tab { + position: relative; padding: 12px 20px; font-size: 14px; color: #666; @@ -484,28 +497,55 @@ export default { border-bottom: 2px solid transparent; transition: all 0.3s; + &::after { + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: linear-gradient(90deg, #009a29, #48C666); + border-radius: 1px; + content: ''; + transform: translateX(-50%); + transition: all 0.3s ease; + } + &:hover { color: #009a29; + + &::after { + width: 60%; + } } &.active { color: #009a29; - border-bottom-color: #009a29; + + &::after { + width: 100%; + } } } .publish-btn { - padding: 8px 20px; + padding: 8px 24px; font-size: 14px; + font-weight: 500; color: #fff; cursor: pointer; - background: #009a29; + background: linear-gradient(135deg, #009a29 0%, #48C666 100%); border: none; - border-radius: 4px; - transition: background 0.3s; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25); + transition: all 0.3s ease; &:hover { - background: #007a1f; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35); + } + + &:active { + transform: translateY(0); } } @@ -526,22 +566,38 @@ export default { .filter-sidebar-content { padding: 20px; background: #fff; - border-radius: 8px; + border-radius: 12px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .filter-section { + padding-bottom: 20px; margin-bottom: 20px; + border-bottom: 1px dashed #e0e0e0; &:last-child { + padding-bottom: 0; margin-bottom: 0; + border-bottom: none; } } .filter-title { - margin-bottom: 8px; + display: flex; + margin-bottom: 12px; font-size: 14px; - font-weight: 500; + font-weight: 600; color: #333; + align-items: center; + gap: 6px; + + &::before { + width: 4px; + height: 14px; + background: linear-gradient(180deg, #009a29, #48C666); + border-radius: 2px; + content: ''; + } } .filter-options { @@ -570,24 +626,102 @@ export default { // 右侧卡片列表 .card-list { flex: 1; + min-width: 0; +} + +.list-header { display: flex; - flex-wrap: wrap; + padding: 0 8px; + margin-bottom: 20px; + justify-content: space-between; + align-items: center; +} + +.list-title-box { + display: flex; + align-items: center; + gap: 10px; + + .list-icon { + font-size: 24px; + } + + .list-title { + font-size: 22px; + font-weight: 600; + color: #333; + background: linear-gradient(135deg, #333 0%, #009a29 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +.list-right { + display: flex; + align-items: center; +} + +.list-count { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + color: #999; + + .count-dot { + width: 8px; + height: 8px; + background: linear-gradient(135deg, #009a29, #48C666); + border-radius: 50%; + animation: pulse 2s infinite; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.service-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); gap: 20px; } .service-card { + position: relative; display: flex; flex-direction: column; - width: calc((100% - 20px) / 2); overflow: hidden; background: #fff; border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - transition: transform 0.3s, box-shadow 0.3s; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); + transition: all 0.3s ease; + + &::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, #009a29, #48C666); + content: ''; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s ease; + } &:hover { transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15); + + &::before { + transform: scaleX(1); + } } } @@ -705,12 +839,37 @@ export default { // 空状态 .empty-state { display: flex; - width: 100%; - min-height: 300px; - font-size: 14px; - color: #999; + flex-direction: column; align-items: center; justify-content: center; + width: 100%; + min-height: 300px; + padding: 40px; + background: #fff; + border-radius: 12px; + animation: fadeIn 0.5s ease; + + .empty-icon { + margin-bottom: 16px; + font-size: 48px; + color: #d0d0d0; + } + + p { + font-size: 14px; + color: #999; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } // 分页 diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue index d1cb524..a1afc62 100644 --- a/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue +++ b/txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue @@ -33,6 +33,7 @@ :class="{ active: selectedType === item.value }" @click="handleTypeChange(item.value)" > + {{ selectedType === item.value ? '✓' : '' }} {{ item.label }}
@@ -229,6 +230,7 @@ export default { } .nav-tab { + position: relative; padding: 12px 20px; font-size: 14px; color: #666; @@ -238,28 +240,55 @@ export default { border-bottom: 2px solid transparent; transition: all 0.3s; + &::after { + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: linear-gradient(90deg, #009a29, #48C666); + border-radius: 1px; + content: ''; + transform: translateX(-50%); + transition: all 0.3s ease; + } + &:hover { color: #009a29; + + &::after { + width: 60%; + } } &.active { color: #009a29; - border-bottom-color: #009a29; + + &::after { + width: 100%; + } } } .publish-btn { - padding: 8px 20px; + padding: 8px 24px; font-size: 14px; + font-weight: 500; color: #fff; cursor: pointer; - background: #009a29; + background: linear-gradient(135deg, #009a29 0%, #48C666 100%); border: none; - border-radius: 4px; - transition: background 0.3s; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25); + transition: all 0.3s ease; &:hover { - background: #007a1f; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35); + } + + &:active { + transform: translateY(0); } } @@ -272,17 +301,26 @@ export default { min-width: 220px; padding: 20px; background: #fff; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + border-radius: 12px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .sidebar-title { - padding-bottom: 12px; - margin-bottom: 16px; - font-size: 16px; + display: flex; + margin-bottom: 12px; + font-size: 14px; font-weight: 600; color: #333; - border-bottom: 1px solid #eee; + align-items: center; + gap: 6px; + + &::before { + width: 4px; + height: 14px; + background: linear-gradient(180deg, #009a29, #48C666); + border-radius: 2px; + content: ''; + } } .filter-list { @@ -292,25 +330,41 @@ export default { } .filter-item { - padding: 10px 16px; + display: flex; + padding: 10px 12px; font-size: 14px; color: #666; cursor: pointer; + background: #f5f5f5; border-radius: 6px; transition: all 0.3s; + align-items: center; + gap: 8px; + + .check-icon { + display: flex; + width: 18px; + height: 18px; + font-size: 12px; + color: #fff; + background: #ccc; + border-radius: 4px; + transition: all 0.3s; + align-items: center; + justify-content: center; + } &:hover { color: #009a29; - background: #f0f9f0; + background: #e8f5e9; } &.active { - color: #fff; - background: #009a29; + color: #009a29; + background: #e8f5e9; - &:hover { - color: #fff; - background: #007a1f; + .check-icon { + background: #009a29; } } } @@ -329,17 +383,35 @@ export default { } .database-card { + position: relative; display: flex; flex-direction: column; padding: 24px; background: #fff; border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - transition: all 0.3s; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); + transition: all 0.3s ease; + + &::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, #009a29, #48C666); + content: ''; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s ease; + } &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(0, 154, 41, 0.12); + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15); + + &::before { + transform: scaleX(1); + } } } diff --git a/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue b/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue index a62f4c2..730612d 100644 --- a/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue +++ b/txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue @@ -29,12 +29,12 @@
内容搜索
+
+ 查询 + 重置 +
-
- 查询 - 重置 -
@@ -63,11 +63,22 @@
- 碳需求市场 - 共 {{ page.total }} 条需求 +
+ 📋 + 碳需求市场 +
+
+ 共 {{ page.total }} 条需求 +
-
+ +
+ +

加载中...

+
+ +
-
-

暂无需求信息

+
+
📋
+

暂无需求信息

+

敬请期待更多优质需求上线

@@ -428,6 +441,7 @@ export default { } .nav-tab { + position: relative; padding: 12px 20px; font-size: 14px; color: #666; @@ -437,28 +451,55 @@ export default { border-bottom: 2px solid transparent; transition: all 0.3s; + &::after { + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: linear-gradient(90deg, #009a29, #48C666); + border-radius: 1px; + content: ''; + transform: translateX(-50%); + transition: all 0.3s ease; + } + &:hover { color: #009a29; + + &::after { + width: 60%; + } } &.active { color: #009a29; - border-bottom-color: #009a29; + + &::after { + width: 100%; + } } } .publish-btn { - padding: 8px 20px; + padding: 8px 24px; font-size: 14px; + font-weight: 500; color: #fff; cursor: pointer; - background: #009a29; + background: linear-gradient(135deg, #009a29 0%, #48C666 100%); border: none; - border-radius: 4px; - transition: background 0.3s; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 154, 41, 0.25); + transition: all 0.3s ease; &:hover { - background: #007a1f; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 154, 41, 0.35); + } + + &:active { + transform: translateY(0); } } @@ -479,22 +520,38 @@ export default { .filter-sidebar-content { padding: 20px; background: #fff; - border-radius: 8px; + border-radius: 12px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .filter-section { + padding-bottom: 20px; margin-bottom: 20px; + border-bottom: 1px dashed #e0e0e0; &:last-child { + padding-bottom: 0; margin-bottom: 0; + border-bottom: none; } } .filter-title { - margin-bottom: 8px; + display: flex; + margin-bottom: 12px; font-size: 14px; - font-weight: 500; + font-weight: 600; color: #333; + align-items: center; + gap: 6px; + + &::before { + width: 4px; + height: 14px; + background: linear-gradient(180deg, #009a29, #48C666); + border-radius: 2px; + content: ''; + } } .filter-options { @@ -524,20 +581,58 @@ export default { .list-header { display: flex; padding: 0 8px; - margin-bottom: 16px; + margin-bottom: 20px; justify-content: space-between; align-items: center; } -.list-title { - font-size: 20px; - font-weight: 600; - color: #333; +.list-title-box { + display: flex; + align-items: center; + gap: 10px; + + .list-icon { + font-size: 24px; + } + + .list-title { + font-size: 22px; + font-weight: 600; + color: #333; + background: linear-gradient(135deg, #333 0%, #009a29 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +.list-right { + display: flex; + align-items: center; } .list-count { + display: flex; + align-items: center; + gap: 8px; font-size: 14px; color: #999; + + .count-dot { + width: 8px; + height: 8px; + background: linear-gradient(135deg, #009a29, #48C666); + border-radius: 50%; + animation: pulse 2s infinite; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } } // 需求卡片网格 @@ -548,17 +643,35 @@ export default { } .demand-card { + position: relative; display: flex; flex-direction: column; padding: 20px; background: #fff; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - transition: transform 0.3s, box-shadow 0.3s; + border-radius: 12px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); + transition: all 0.3s ease; + + &::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, #009a29, #48C666); + content: ''; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s ease; + } &:hover { transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 24px rgba(0, 154, 41, 0.15); + + &::before { + transform: scaleX(1); + } } } @@ -643,11 +756,77 @@ export default { // 空状态 .empty-state { display: flex; - min-height: 300px; - font-size: 14px; - color: #999; + flex-direction: column; align-items: center; justify-content: center; + min-height: 400px; + padding: 40px; + background: #fff; + border-radius: 12px; + animation: fadeIn 0.5s ease; + + .empty-illustration { + margin-bottom: 20px; + font-size: 64px; + } + + .empty-text { + margin: 0 0 8px; + font-size: 18px; + font-weight: 600; + color: #333; + } + + .empty-hint { + margin: 0; + font-size: 14px; + color: #999; + } +} + +// 加载状态 +.loading-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 400px; + padding: 40px; + background: #fff; + border-radius: 12px; + + .loading-spinner { + width: 48px; + height: 48px; + margin-bottom: 16px; + border: 4px solid #e8f5e9; + border-top-color: #009a29; + border-radius: 50%; + animation: spin 1s linear infinite; + } + + p { + margin: 0; + font-size: 14px; + color: #999; + } +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } // 分页 From 6961b3c8049f388c357b0ec1c283ef002a2b89d9 Mon Sep 17 00:00:00 2001 From: liulujian Date: Mon, 6 Apr 2026 14:45:39 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- txw-mhzc-web/src/pages/index/assets/logo.png | Bin 0 -> 3013 bytes .../src/pages/index/components/nav/index2.vue | 325 +++++++++++++++++- txw-mhzc-web/src/pages/index/router/index.js | 4 + .../src/pages/index/views/fwsc/fwsc.vue | 171 ++++++++- .../src/pages/index/views/fwsc/index.vue | 132 ++++++- .../src/pages/index/views/fwsc/jrsc.vue | 159 ++++++++- .../src/pages/index/views/fwsc/sjlbc.vue | 149 +++++++- .../src/pages/index/views/fwsc/sjsc.vue | 163 ++++++++- .../src/pages/index/views/fwsc/xqsc.vue | 173 +++++++++- .../src/pages/index/views/home2/index.vue | 269 +++++++++++++-- txw-mhzc-web/src/pages/index/views/main.vue | 6 +- 11 files changed, 1497 insertions(+), 54 deletions(-) create mode 100644 txw-mhzc-web/src/pages/index/assets/logo.png 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 0000000000000000000000000000000000000000..6004308258eae1d814024dbea8bc52c894876800 GIT binary patch literal 3013 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
-
+
@@ -20,9 +20,9 @@
-
+
-
+
工作台
@@ -31,15 +31,61 @@
退出登录
-
+
激活
|
登录
+ +
+
+ + + +
+
+ +
+
+
+
+ +
×
+
+
+
+ + +
+ + {{ menu.title }} + +
+ + +
+ + {{ menu.title }} + +
+
+
+
+
+
用户中心
+
退出登录
+
+
+
激活
+ +
+
+
+
@@ -56,6 +102,7 @@ export default { return { curPage: "home", loginFlag: false, //是否已完成登录 + mobileMenuOpen: false, //移动端菜单是否展开 // 路由路径到菜单名的映射 routeToMenuMap: { '/home': 'home', @@ -65,6 +112,9 @@ export default { '/tjrsc': 'fwsc', '/tsjsc': 'fwsc', '/yhzx': 'yhzx', + '/gxnlpt': 'gxnlpt', + '/qych': 'qych', + '/hyzt': 'hyzt', '/login': 'login', }, @@ -126,7 +176,7 @@ export default { name: 'tbgtg', title: '碳报告托管：', value: 'tgbcz', - content: '碳报告存证', + content: '碳报告托管', divider: true, needLogin: true, clientId: 'client_id_tfwzx', @@ -153,7 +203,8 @@ export default { content: '碳金融市场', divider: true, parentName: 'fwsc', - }, { + }, + { name: 'txqsc', title: '碳需求市场', value: 'txqsc', @@ -172,19 +223,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 }, ] }; @@ -227,6 +278,26 @@ 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; @@ -282,6 +353,8 @@ export default { } this.curPage = menu.name; + // 关闭移动端菜单 + this.closeMobileMenu(); let iframeUrl = menu.iframeUrl; if (iframeUrl) { //调用login.js内的authorize方法（如果需要的话） @@ -317,12 +390,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`; }, @@ -374,6 +449,7 @@ export default { }, async logoutHandler() { + this.closeMobileMenu(); const res = await logout(); const resVO = res.data; if (resVO.dcdz) { @@ -416,6 +492,11 @@ export default { } .logo-box { text-align: center; + cursor: pointer; +} + +.option-wrapper { + display: block; } .option-box { @@ -437,6 +518,7 @@ export default { display: flex; padding: 10px; text-align: center; + cursor: pointer; background: rgba(255, 255, 255, 0.3); border-radius: 6px; justify-content: space-around; @@ -473,4 +555,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 91a1a53..07e490a 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 7433a89..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 @@