feat: 移动端适配

txw-mhzc-web/src/pages/index/components/nav/index2.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 顶部菜单栏 -->
   <div class="nav-box">
-    <div class="logo-box">
+    <div class="logo-box" @click="goHome">
       <img src="@/pages/index/assets/logo-name.png">
     </div>
     <div class="menu-box">
@@ -20,9 +20,9 @@
       </div>
 
     </div>
-    <div>
+    <div class="option-wrapper">
       <div v-if="loginFlag" class="option-box">
-        <div class="gzt">
+        <div class="gzt" @click="goyhzx">
           <img src="@/pages/index/assets/home-gzt-icon.png" />
           <span> 工作台</span>
         </div>
@@ -31,15 +31,61 @@
         <div style="cursor: pointer;" @click="logoutHandler">退出登录</div>
       </div>
       <div v-else class="option-box">
-        <div class="gzt">
+        <!-- <div class="gzt">
           <img src="@/pages/index/assets/home-gzt-icon.png" />
           <span> 工作台</span>
-        </div>
+        </div> -->
         <div style="margin-left:20px; cursor: pointer;">激活</div>
         <div>|</div>
         <div style="cursor: pointer;" @click="gologin">登录</div>
       </div>
     </div>
+    <!-- 移动端汉堡菜单按钮 -->
+    <div class="hamburger-btn" @click="toggleMobileMenu">
+      <div :class="['hamburger-icon', { active: mobileMenuOpen }]">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+    <!-- 移动端菜单 -->
+    <div :class="['mobile-menu', { open: mobileMenuOpen }]">
+      <div class="mobile-menu-overlay" @click="toggleMobileMenu"></div>
+      <div class="mobile-menu-content">
+        <div class="mobile-menu-header">
+          <img src="@/pages/index/assets/logo-name.png">
+          <div class="close-btn" @click="toggleMobileMenu">×</div>
+        </div>
+        <div class="mobile-menu-list">
+          <div v-for="(menu, index) in menuOptions" :key="index">
+            <!-- 有子菜单的项 -->
+            <t-dropdown v-if="menu.child" trigger="click" :options="menu.child" @click="handleMobileDropdownClick">
+              <div class="mobile-menu-item" :class="{'active': curPage == menu.name}">
+                <img v-if="menu.icon" :src="menu.icon" width="20px" height="20px">
+                <span>{{ menu.title }}</span>
+                <img class="arrow" src="@/pages/index/assets/home-arrow-right.png" width="16px" height="16px">
+              </div>
+            </t-dropdown>
+            <!-- 无子菜单的项 -->
+            <div v-else class="mobile-menu-item" :class="{'active': curPage == menu.name, 'disable': menu.disable}" @click="gotoIfreamPage(menu)">
+              <img v-if="menu.icon" :src="menu.icon" width="20px" height="20px">
+              <span>{{ menu.title }}</span>
+              <img class="arrow" src="@/pages/index/assets/home-arrow-right.png" width="16px" height="16px">
+            </div>
+          </div>
+        </div>
+        <div class="mobile-menu-footer">
+          <div v-if="loginFlag" class="mobile-auth-btns">
+            <div class="mobile-auth-btn" @click="goyhzx">用户中心</div>
+            <div class="mobile-auth-btn logout" @click="logoutHandler">退出登录</div>
+          </div>
+          <div v-else class="mobile-auth-btns">
+            <div class="mobile-auth-btn activate">激活</div>
+            <div class="mobile-auth-btn login" @click="gologin">登录</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -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;
+  }
+}
 </style>

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) => {

txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue

@@ -24,7 +24,11 @@
       <div class="content-area">
         <!-- 左侧筛选栏 -->
         <aside class="filter-sidebar">
-          <div class="filter-sidebar-content">
+          <div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
+            <span class="toggle-text">筛选</span>
+            <span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
+          </div>
+          <div :class="['filter-sidebar-content', { collapsed: filterCollapsed }]">
             <!-- 内容搜索 -->
             <div class="filter-section">
               <div class="filter-title">内容搜索</div>
@@ -257,6 +261,8 @@ export default {
       rzVisible: false,
       // 发布成功弹窗
       publishSuccessVisible: false,
+      // 移动端筛选折叠状态
+      filterCollapsed: true,
     };
   },
   mounted() {
@@ -563,6 +569,53 @@ export default {
   flex-shrink: 0;
 }
 
+// 移动端筛选栏折叠
+.filter-toggle {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .filter-toggle {
+    display: flex;
+    padding: 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 8px;
+    justify-content: space-between;
+    align-items: center;
+
+    .toggle-text {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .toggle-icon {
+      font-size: 18px;
+      color: #666;
+      transition: transform 0.3s;
+    }
+
+    &.collapsed .toggle-icon {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .filter-sidebar-content {
+    max-height: 1000px;
+    padding: 20px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+  }
+
+  .filter-sidebar-content.collapsed {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .filter-sidebar-content {
   padding: 20px;
   background: #fff;
@@ -902,8 +955,124 @@ export default {
 }
 
 @media (max-width: 768px) {
+  .fwsc-main {
+    padding: 12px;
+  }
+
+  .secondary-nav-content {
+    flex-direction: column;
+    padding: 12px 16px;
+    gap: 12px;
+  }
+
+  .nav-tabs {
+    width: 100%;
+    padding-bottom: 4px;
+    overflow-x: auto;
+    gap: 4px;
+  }
+
+  .nav-tab {
+    padding: 10px 12px;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .publish-btn {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .content-area {
+    flex-direction: column;
+  }
+
+  .filter-sidebar {
+    position: relative;
+    top: 0;
+    width: 100%;
+  }
+
+  .card-list {
+    width: 100%;
+  }
+
+  .list-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .service-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
   .service-card {
     width: 100%;
   }
+
+  .card-header {
+    padding: 12px;
+  }
+
+  .card-content {
+    padding: 12px;
+  }
+
+  .card-footer {
+    padding: 12px;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .card-actions {
+    width: 100%;
+  }
+
+  .pagination-box {
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .fwsc-main {
+    padding: 8px;
+  }
+
+  .secondary-nav-content {
+    padding: 8px 12px;
+  }
+
+  .nav-tab {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .publish-btn {
+    padding: 8px;
+    font-size: 13px;
+  }
+
+  .filter-sidebar-content {
+    padding: 12px;
+  }
+
+  .list-title-box .list-title {
+    font-size: 18px;
+  }
+
+  .card-title-main {
+    font-size: 14px;
+  }
+
+  .card-desc {
+    height: 60px;
+    font-size: 13px;
+  }
+
+  .price-value {
+    font-size: 18px;
+  }
 }
 </style>

txw-mhzc-web/src/pages/index/views/fwsc/index.vue

@@ -54,21 +54,21 @@
             <h3 class="service-card-title">碳金融市场</h3>
             <p class="service-card-desc">打通"碳"与"钱"的通道。提供碳质押、碳回购、绿色信贷及碳基金对接服务。</p>
             <div class="service-card-buttons">
-              <t-button theme="primary" variant="outline" @click.stop="goToPage('/fwsc/jrsc')">查看金融产品</t-button>
+              <t-button theme="primary" variant="outline" @click.stop="goToPage('/tjrsc')">查看金融产品</t-button>
-              <t-button theme="primary" @click.stop="goToPage('/view/mhzc/yhzx')">金融机构入驻</t-button>
+              <t-button theme="primary" @click.stop="goToPage('/tjrsc')">金融机构入驻</t-button>
             </div>
           </div>
 
           <!-- 碳数据市场 -->
-          <div class="service-card" @click="goToPage('/fwsc/sjsc')">
+          <div class="service-card" @click="goToPage('/tsjsc')">
             <div class="service-card-icon">
               <span style="font-size: 48px">📊</span>
             </div>
             <h3 class="service-card-title">碳数据市场</h3>
             <p class="service-card-desc">合规高效的碳数据流转平台。包括公共数据、社会性数据、因子库等多类数据库。</p>
             <div class="service-card-buttons">
-              <t-button theme="primary" variant="outline" @click.stop="goToPage('/fwsc/sjsc')">进入交易大厅</t-button>
+              <t-button theme="primary" variant="outline" @click.stop="goToPage('/tsjsc')">进入交易大厅</t-button>
-              <t-button theme="primary" @click.stop="goToPage('/view/mhzc/yhzx')">我要出售</t-button>
+              <t-button theme="primary" @click.stop="goToPage('/tsjsc')">我要出售</t-button>
             </div>
           </div>
         </div>
@@ -249,4 +249,126 @@ export default {
     flex: 1;
   }
 }
+
+@media (max-width: 1200px) {
+  .services-section {
+    padding: 40px 100px;
+  }
+}
+
+@media (max-width: 900px) {
+  .services-section {
+    padding: 30px 40px;
+  }
+
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .service-card {
+    padding: 24px;
+  }
+}
+
+@media (max-width: 768px) {
+  .breadcrumb-box {
+    height: 40px;
+    padding: 0 16px;
+  }
+
+  .banner-section {
+    height: 200px;
+  }
+
+  .banner-title {
+    font-size: 32px;
+    line-height: 44px;
+  }
+
+  .banner-subtitle {
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .services-section {
+    padding: 20px 16px;
+  }
+
+  .services-grid {
+    gap: 16px;
+  }
+
+  .service-card {
+    padding: 20px;
+  }
+
+  .service-card-icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+
+    span {
+      font-size: 36px;
+    }
+  }
+
+  .service-card-title {
+    margin-bottom: 8px;
+    font-size: 20px;
+  }
+
+  .service-card-desc {
+    margin-bottom: 16px;
+    font-size: 13px;
+  }
+
+  .service-card-buttons {
+    flex-direction: column;
+    gap: 8px;
+
+    .t-button {
+      width: 100%;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .breadcrumb-box {
+    font-size: 12px;
+  }
+
+  .banner-section {
+    height: 160px;
+  }
+
+  .banner-title {
+    font-size: 24px;
+    line-height: 36px;
+  }
+
+  .banner-subtitle {
+    font-size: 12px;
+  }
+
+  .services-section {
+    padding: 16px 12px;
+  }
+
+  .service-card {
+    padding: 16px;
+  }
+
+  .service-card-icon {
+    width: 40px;
+    height: 40px;
+
+    span {
+      font-size: 28px;
+    }
+  }
+
+  .service-card-title {
+    font-size: 18px;
+  }
+}
 </style>

txw-mhzc-web/src/pages/index/views/fwsc/jrsc.vue

@@ -25,7 +25,11 @@
       <div class="content-wrapper">
         <!-- 左侧筛选栏 -->
         <aside class="filter-sidebar">
-          <div class="filter-sidebar-content">
+          <div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
+            <span class="toggle-text">筛选</span>
+            <span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
+          </div>
+          <div :class="['filter-sidebar-content', { collapsed: filterCollapsed }]">
             <!-- 内容搜索 -->
             <div class="filter-section">
               <div class="filter-title">关键词搜索</div>
@@ -384,6 +388,8 @@ export default {
       currentProductUuid: '',
       // 用户信息
       yhxx: {},
+      // 移动端筛选折叠状态
+      filterCollapsed: true,
     };
   },
   computed: {
@@ -713,6 +719,53 @@ export default {
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }
 
+// 移动端筛选栏折叠
+.filter-toggle {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .filter-toggle {
+    display: flex;
+    padding: 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 8px;
+    justify-content: space-between;
+    align-items: center;
+
+    .toggle-text {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .toggle-icon {
+      font-size: 18px;
+      color: #666;
+      transition: transform 0.3s;
+    }
+
+    &.collapsed .toggle-icon {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .filter-sidebar-content {
+    max-height: 1000px;
+    padding: 20px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+  }
+
+  .filter-sidebar-content.collapsed {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .filter-section {
   padding-bottom: 20px;
   margin-bottom: 20px;
@@ -1361,14 +1414,116 @@ export default {
 }
 
 @media (max-width: 768px) {
+  .jrsc-main {
+    padding: 12px;
+  }
+
+  .secondary-nav-content {
+    flex-direction: column;
+    padding: 12px 16px;
+    gap: 12px;
+  }
+
+  .nav-tabs {
+    width: 100%;
+    padding-bottom: 4px;
+    overflow-x: auto;
+    gap: 4px;
+  }
+
+  .nav-tab {
+    padding: 10px 12px;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .publish-btn {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .content-wrapper {
+    flex-direction: column;
+  }
+
   .filter-sidebar {
     position: relative;
     top: 0;
     width: 100%;
   }
 
-  .content-wrapper {
+  .filter-sidebar-content {
+    padding: 12px;
+  }
+
+  .product-list {
+    width: 100%;
+  }
+
+  .list-header {
     flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .product-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .product-card {
+    padding: 16px;
+  }
+
+  .product-info {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .info-divider {
+    display: none;
+  }
+
+  .info-item {
+    justify-content: flex-start;
+  }
+
+  .card-actions {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .pagination-box {
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .jrsc-main {
+    padding: 8px;
+  }
+
+  .secondary-nav-content {
+    padding: 8px 12px;
+  }
+
+  .nav-tab {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .publish-btn {
+    padding: 8px;
+    font-size: 13px;
+  }
+
+  .list-title-box .list-title {
+    font-size: 18px;
+  }
+
+  .product-name {
+    padding: 10px;
+    font-size: 14px;
   }
 }
 </style>

txw-mhzc-web/src/pages/index/views/fwsc/sjlbc.vue

@@ -11,7 +11,11 @@
     <div class="content-wrapper">
       <!-- 左侧筛选栏 -->
       <div class="filter-sidebar">
-        <div class="filter-box">
+        <div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
+          <span class="toggle-text">筛选</span>
+          <span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
+        </div>
+        <div :class="['filter-box', { collapsed: filterCollapsed }]">
           <!-- 价格区间 -->
           <div class="filter-section">
             <div class="filter-title">价格区间</div>
@@ -220,6 +224,8 @@ export default {
           downloads: '18',
         },
       ],
+      // 移动端筛选折叠状态
+      filterCollapsed: true,
     };
   },
   computed: {
@@ -305,6 +311,55 @@ export default {
   border-radius: 8px;
 }
 
+// 移动端筛选栏折叠
+.filter-toggle {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .filter-toggle {
+    display: flex;
+    padding: 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 8px;
+    justify-content: space-between;
+    align-items: center;
+
+    .toggle-text {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .toggle-icon {
+      font-size: 18px;
+      color: #666;
+      transition: transform 0.3s;
+    }
+
+    &.collapsed .toggle-icon {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .filter-box {
+    position: relative;
+    top: 0;
+    max-height: 1000px;
+    padding: 16px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+  }
+
+  .filter-box.collapsed {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .filter-section {
   margin-bottom: 20px;
 }
@@ -584,4 +639,96 @@ export default {
     }
   }
 }
+
+@media (max-width: 768px) {
+  .content-wrapper {
+    flex-direction: column;
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .filter-sidebar {
+    width: 100%;
+  }
+
+  .filter-box {
+    position: relative;
+    top: 0;
+    padding: 12px;
+  }
+
+  .price-range {
+    flex-wrap: wrap;
+  }
+
+  .price-input {
+    width: 100%;
+  }
+
+  .price-min,
+  .price-max {
+    width: calc(50% - 3px);
+  }
+
+  .filter-buttons {
+    flex-direction: row;
+  }
+
+  .data-list {
+    overflow-x: auto;
+  }
+
+  .table-header {
+    min-width: 800px;
+  }
+
+  .table-body {
+    min-width: 800px;
+  }
+
+  .pagination {
+    padding: 16px 0;
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 480px) {
+  .content-wrapper {
+    padding: 8px;
+    gap: 8px;
+  }
+
+  .filter-box {
+    padding: 8px;
+  }
+
+  .filter-title {
+    margin-bottom: 8px;
+    font-size: 13px;
+  }
+
+  .filter-buttons .btn-reset,
+  .filter-buttons .btn-confirm {
+    height: 32px;
+    font-size: 13px;
+  }
+
+  .table-header {
+    min-width: 700px;
+  }
+
+  .table-body {
+    min-width: 700px;
+  }
+
+  .th {
+    padding: 0 8px;
+    font-size: 12px;
+  }
+
+  .td {
+    padding: 0 8px;
+    font-size: 12px;
+  }
+}
 </style>

txw-mhzc-web/src/pages/index/views/fwsc/sjsc.vue

@@ -24,7 +24,12 @@
     <div class="page-body">
         <!-- 左侧筛选栏 -->
         <div class="sidebar">
-          <div class="sidebar-title">数据类型</div>
+          <div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
+            <span class="toggle-text">筛选</span>
+            <span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
+          </div>
+          <div :class="['sidebar-content', { collapsed: filterCollapsed }]">
+            <div class="sidebar-title">数据类型</div>
           <div class="filter-list">
             <div
               v-for="item in dataTypeList"
@@ -37,6 +42,7 @@
               {{ item.label }}
             </div>
           </div>
+          </div>
         </div>
 
         <!-- 右侧数据库卡片列表 -->
@@ -148,7 +154,9 @@ export default {
           tags: ['公益数据'],
           price: '免费'
         }
-      ]
+      ],
+      // 移动端筛选折叠状态
+      filterCollapsed: true,
     };
   },
   computed: {
@@ -299,12 +307,62 @@ export default {
   width: 220px;
   height: fit-content;
   min-width: 220px;
-  padding: 20px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }
 
+.sidebar-content {
+  padding: 20px;
+}
+
+// 移动端筛选栏折叠
+.filter-toggle {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .filter-toggle {
+    display: flex;
+    padding: 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 8px;
+    justify-content: space-between;
+    align-items: center;
+
+    .toggle-text {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .toggle-icon {
+      font-size: 18px;
+      color: #666;
+      transition: transform 0.3s;
+    }
+
+    &.collapsed .toggle-icon {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .sidebar-content {
+    max-height: 1000px;
+    padding: 20px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+  }
+
+  .sidebar-content.collapsed {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .sidebar-title {
   display: flex;
   margin-bottom: 12px;
@@ -491,4 +549,103 @@ export default {
     background: #fff3e0;
   }
 }
+
+@media (max-width: 768px) {
+  .page-body {
+    flex-direction: column;
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .secondary-nav-content {
+    flex-direction: column;
+    padding: 12px 16px;
+    gap: 12px;
+  }
+
+  .nav-tabs {
+    width: 100%;
+    padding-bottom: 4px;
+    overflow-x: auto;
+    gap: 4px;
+  }
+
+  .nav-tab {
+    padding: 10px 12px;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .publish-btn {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .sidebar {
+    position: relative;
+    top: 0;
+    width: 100%;
+    min-width: auto;
+  }
+
+  .content-area {
+    width: 100%;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .card-footer {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .card-footer .t-button {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .page-body {
+    padding: 8px;
+  }
+
+  .secondary-nav-content {
+    padding: 8px 12px;
+  }
+
+  .nav-tab {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .publish-btn {
+    padding: 8px;
+    font-size: 13px;
+  }
+
+  .sidebar {
+    padding: 12px;
+  }
+
+  .sidebar-title {
+    font-size: 13px;
+  }
+
+  .database-card {
+    padding: 16px;
+  }
+
+  .card-title {
+    font-size: 16px;
+  }
+
+  .card-desc {
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+}
 </style>

txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue

@@ -24,7 +24,11 @@
       <div class="content-area">
         <!-- 左侧筛选栏 -->
         <aside class="filter-sidebar">
-          <div class="filter-sidebar-content">
+          <div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
+            <span class="toggle-text">筛选</span>
+            <span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
+          </div>
+          <div :class="['filter-sidebar-content', { collapsed: filterCollapsed }]">
             <!-- 内容搜索 -->
             <div class="filter-section">
               <div class="filter-title">内容搜索</div>
@@ -246,6 +250,8 @@ export default {
       rzVisible: false,
       // 发布成功弹窗
       publishSuccessVisible: false,
+      // 移动端筛选折叠状态
+      filterCollapsed: true,
     };
   },
   mounted() {
@@ -524,6 +530,53 @@ export default {
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }
 
+// 移动端筛选栏折叠
+.filter-toggle {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .filter-toggle {
+    display: flex;
+    padding: 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 8px;
+    justify-content: space-between;
+    align-items: center;
+
+    .toggle-text {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .toggle-icon {
+      font-size: 18px;
+      color: #666;
+      transition: transform 0.3s;
+    }
+
+    &.collapsed .toggle-icon {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .filter-sidebar-content {
+    max-height: 1000px;
+    padding: 20px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+  }
+
+  .filter-sidebar-content.collapsed {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .filter-section {
   padding-bottom: 20px;
   margin-bottom: 20px;
@@ -857,4 +910,122 @@ export default {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 768px) {
+  .xqsc-main {
+    padding: 12px;
+  }
+
+  .secondary-nav-content {
+    flex-direction: column;
+    padding: 12px 16px;
+    gap: 12px;
+  }
+
+  .nav-tabs {
+    width: 100%;
+    padding-bottom: 4px;
+    overflow-x: auto;
+    gap: 4px;
+  }
+
+  .nav-tab {
+    padding: 10px 12px;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .publish-btn {
+    width: 100%;
+    padding: 10px;
+  }
+
+  .content-area {
+    flex-direction: column;
+  }
+
+  .filter-sidebar {
+    position: relative;
+    top: 0;
+    width: 100%;
+  }
+
+  .filter-sidebar-content {
+    padding: 12px;
+  }
+
+  .demand-list {
+    width: 100%;
+  }
+
+  .list-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .demand-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .demand-card {
+    padding: 16px;
+  }
+
+  .card-footer {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .card-actions {
+    width: 100%;
+  }
+
+  .card-actions .t-button {
+    width: 100%;
+  }
+
+  .pagination-box {
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .xqsc-main {
+    padding: 8px;
+  }
+
+  .secondary-nav-content {
+    padding: 8px 12px;
+  }
+
+  .nav-tab {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .publish-btn {
+    padding: 8px;
+    font-size: 13px;
+  }
+
+  .list-title-box .list-title {
+    font-size: 18px;
+  }
+
+  .demand-title {
+    font-size: 16px;
+  }
+
+  .card-desc {
+    height: 60px;
+    font-size: 13px;
+  }
+
+  .budget-value {
+    font-size: 18px;
+  }
+}
 </style>

txw-mhzc-web/src/pages/index/views/home2/index.vue

@@ -54,34 +54,34 @@
           <div class="option-item-box green">
             <div class="option-item-box-title">碳数字身份证</div>
             <div class="option-btn-box ">
-              <div class="btn">办证指南</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['办证指南'])">办证指南</div>
-              <div class="btn">碳证查询</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['碳证查询'])">碳证查询</div>
             </div>
             <div class="option-btn-box">
-              <div class="btn">碳证核验</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['碳证核验'])">碳证核验</div>
-              <div class="btn">碳证核验</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['碳证核验'])">碳证核验</div>
             </div>
           </div>
           <div class="option-item-box blue">
             <div class="option-item-box-title">国家可信碳链</div>
             <div class="option-btn-box">
-              <div class="btn">上链指南</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['上链指南'])">上链指南</div>
-              <div class="btn">上链标准</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['上链标准'])">上链标准</div>
             </div>
             <div class="option-btn-box">
-              <div class="btn">上链工具</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
-              <div class="btn">碳证中心</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['碳证中心'])">碳证中心</div>
             </div>
           </div>
           <div class="option-item-box cyan">
             <div class="option-item-box-title">绿色服务</div>
             <div class="option-btn-box">
-              <div class="btn">服务市场</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['服务市场'])">服务市场</div>
-              <div class="btn">需求市场</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['需求市场'])">需求市场</div>
             </div>
             <div class="option-btn-box">
-              <div class="btn">数据市场</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['数据市场'])">数据市场</div>
-              <div class="btn">数据市场</div>
+              <div class="btn" @click="handleNavigate(buttonLinks['数据市场'])">数据市场</div>
             </div>
           </div>
         </div>
@@ -250,13 +250,55 @@ import Footer from '@/pages/index/components/footer/index.vue';
 export default {
   data() {
     return {
-      inputValue: ""
+      inputValue: "",
-    }
+      // 按钮跳转配置
+      buttonLinks: {
+        // 碳数字身份证
+        '办证指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
+        '碳证查询': '/yhzx/qyrenzheng',
+        '碳证核验': '/yhzx/qyrenzheng',
+        // 国家可信碳链
+        '上链指南': 'https://www.kdocs.cn/l/xxx1',
+        '上链标准': 'https://www.kdocs.cn/l/xxx2',
+        '上链工具': 'https://www.kdocs.cn/l/xxx3',
+        '碳证中心': '/yhzx/qyrenzheng',
+        // 绿色服务
+        '服务市场': '/tfwsc',
+        '需求市场': '/txqsc',
+        '数据市场': '/tsjsc',
+      },
+    };
   },
   components: {
     Footer,
   },
-}
+  methods: {
+    // 封装跳转方法
+    handleNavigate(link) {
+      if (!link) return;
+      // 判断是外部链接还是内部链接
+      if (link.startsWith('http://') || link.startsWith('https://')) {
+        // 外部链接，打开新窗口
+        window.open(link, '_blank');
+      } else {
+        // 内部链接，当前窗口跳转
+        this.$router.push(link);
+      }
+    },
+    // 快捷搜索
+    handleSearch() {
+      if (this.inputValue) {
+        console.log('搜索:', this.inputValue);
+        // TODO: 实现搜索功能
+      }
+    },
+    // 处理热门搜索点击
+    handleHotSearch(keyword) {
+      this.inputValue = keyword;
+      this.handleSearch();
+    },
+  },
+};
 </script>
 
 <style  scoped>
@@ -947,19 +989,196 @@ export default {
 }
 
 @media (max-width: 767px) {
-  .nav-box {
+  /* 容器调整 */
-    grid-template-columns: 1fr;
-  }
-
   .container {
-    margin-top: 192px;
+    margin-top: 0;
   }
 
-  /* .option-box {
+  /* 顶部区域 */
-    display: none !important;
+  .top-box {
+    min-height: auto;
+    padding-bottom: 20px;
+  }
+
+  .top-title {
+    margin-top: 60px;
+  }
+
+  .top-title img {
+    height: auto;
+    max-width: 80%;
+  }
+
+  .top-title-desc {
+    padding: 0 20px;
+    margin-top: 20px;
+    font-size: 16px;
+  }
+
+  .top-search-box {
+    padding: 0 16px;
+    margin-top: 20px;
+  }
+
+  .search-box {
+    flex-direction: column;
+    padding: 12px;
+    gap: 10px;
+  }
+
+  .search-box input {
+    width: 100%;
+    max-width: none;
+    padding: 10px;
+    text-align: center;
+  }
+
+  .search-btn {
+    width: 100%;
+    height: 44px;
+  }
+
+  .top-search-hot {
+    padding: 10px 16px;
+    font-size: 12px;
+  }
+
+  /* 选项卡片区域 */
+  .top-options-box {
+    display: flex;
+    flex-direction: column;
+    padding: 0 16px;
+    margin-top: 40px;
+    gap: 16px;
+  }
+
+  .option-item-box {
+    padding: 16px;
+  }
+
+  .option-item-box-title {
+    margin-top: 12px;
+    font-size: 20px;
+  }
+
+  .option-btn-box {
+    padding: 8px 6px;
+    gap: 8px;
+  }
+
+  .option-btn-box .btn {
+    height: 40px;
+    font-size: 14px;
+    line-height: 40px;
+  }
+
+  /* 核心驱动区域 */
+  .center-box {
+    padding: 30px 16px;
+  }
+
+  .center-box-title {
+    font-size: 24px;
+  }
+
+  .center-box .content-box {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .center-box .item .name1 {
+    font-size: 16px;
+  }
+
+  .center-box .item .name2 {
+    font-size: 20px;
+  }
+
+  .center-box .item .name3 {
+    font-size: 14px;
+  }
+
+  /* 三栏区域 */
+  .gxnl-qych-hydt-box {
+    display: flex;
+    flex-direction: column;
+    padding: 20px 16px;
+    gap: 16px;
+  }
+
+  .gxnl-qych-hydt-box > div {
+    height: auto;
+    min-height: 300px;
+    background-size: cover !important;
+  }
+
+  .gxnl-qych-hydt-box .name1 {
+    font-size: 22px;
+    line-height: 40px;
+  }
+
+  .gxnl-qych-hydt-box .name2 {
+    margin-bottom: 16px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .gxnl-box .item {
+    height: 50px;
+    padding: 12px;
+    grid-template-columns: 48px 1fr 24px;
+  }
+
+  .gxnl-box .item .text {
+    padding-left: 12px;
+    font-size: 14px;
+  }
+
+  /* 底部区域 */
+  .bottom-box {
+    height: auto;
+    min-height: 300px;
+    padding: 40px 16px;
+  }
+
+  .bottom-box .content {
+    width: 100%;
+    height: auto;
+    padding: 24px;
+  }
+
+  .bottom-box-content-title {
+    font-size: 24px;
+    line-height: 40px;
+  }
+
+  .bottom-box .content .desc {
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .bottom-box .content .btn {
+    width: 100%;
+    height: 48px;
+    font-size: 16px;
+    line-height: 48px;
+  }
+}
+
+/* 平板适配 */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .top-options-box {
+    grid-template-columns: repeat(3, 1fr);
+    padding: 0 5%;
+  }
+
+  .gxnl-qych-hydt-box {
+    padding: 3% 5%;
+    gap: 20px;
+  }
+
+  .gxnl-qych-hydt-box > div {
+    height: 450px;
   }
-  .menu-box {
-    display: none !important;
-  } */
 }
 </style>

txw-mhzc-web/src/pages/index/views/main.vue

@@ -49,13 +49,11 @@ export default {
   },
   methods: {
     gotoPage(name) {
-    //   this.$router.push({
+      this.$router.push({ name })
-    //     name: name
-    //   })
 
     //   this.$router.replace({ name: name, force: true })
 
-    window.location.href = name
+    // window.location.href = name
     },
 
     gotoIfreamPage(iframeUrl) {