feat: 企业工作台界面样式调整

.claude/settings.local.json

@@ -27,7 +27,8 @@
       "Bash(\"/d/Program Files/apache-maven/apache-maven-3.6.3/bin/mvn\" compile -pl txw-mhzc-service-biz -am)",
       "Bash(\"/d/Program Files/apache-maven/apache-maven-3.6.3/bin/mvn\" clean package -pl txw-mhzc-service-biz -am -DskipTests)",
       "Bash(\"/d/Program Files/jdk8/bin/java\" -Xms256m -Xmx512m -Duser.timezone=Asia/Shanghai -jar target/txw-mhzc-service-biz.jar --spring.profiles.active=local)",
-      "Bash(mvn compile *)"
+      "Bash(mvn compile *)",
+      "WebFetch(domain:www.figma.com)"
     ]
   }
 }

txw-mhzc-web/src/pages/index/components/footer/index.vue

@@ -41,7 +41,7 @@
         <div class="footer-column">
           <div class="footer-title">友情链接</div>
           <div class="footer-links">
-            <div class="footer-link-item">上海市企业走出去综合服务平台</div>
+            <a class="footer-link-item" href="https://segg.sh.gov.cn/" target="_blank" rel="noopener">上海市企业走出去综合服务平台</a>
           </div>
         </div>
 
@@ -141,6 +141,7 @@ export default {
   font-size: 14px;
   transition: color 0.3s;
   color: rgba(85, 102, 89, 1);
+  cursor: pointer;
 
   &:hover {
     color: #4caf50;

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

@@ -267,6 +267,17 @@ export default {
     } else {
       this.loginFlag = false;
     }
+
+    // 初始化时根据当前路由更新菜单选中状态
+    this.updateCurPageByRoute();
+  },
+  watch: {
+    $route: {
+      handler() {
+        this.updateCurPageByRoute();
+      },
+      immediate: false,
+    },
   },
   beforeUnmount() { },
   methods: {
@@ -301,6 +312,13 @@ export default {
         return;
       }
 
+      // 处理带query参数的路径（如 /gxnlpt?anchor=content-1）
+      const pathWithoutQuery = path.split('?')[0];
+      if (this.routeToMenuMap[pathWithoutQuery]) {
+        this.curPage = this.routeToMenuMap[pathWithoutQuery];
+        return;
+      }
+
       // 尝试从路径中提取关键部分进行匹配
       if (path.includes('tfwsc') || path.includes('txqsc') || path.includes('tjrsc') || path.includes('tsjsc')) {
         this.curPage = 'fwsc';

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

@@ -6,7 +6,7 @@
         <template>
           <div style="height: 100%" class="htglMenu">
             <t-menu style="width: 220px; background: #fff" v-model="activeMenuId" :collapsed="collapsed" :defaultExpanded="expanded" @change="gotoPage">
-              <div class="title">用户中心</div>
+              <div class="title">企业工作台</div>
               <!-- 循环实现 -->
               <template v-for="item in cdList">
                 <t-menu-item v-if="!item.children" :value="item.id" :title="item.title" :key="item.id">
@@ -83,9 +83,15 @@ export default {
         {
           id: 'gzt',
           title: '工作台',
-          icon: 'user',
+          icon: '',
           name: 'gzt',
         },
+        {
+          id: 'qyzh',
+          title: '企业账号',
+          icon: '',
+          name: '',
+          children: [
             {
               id: 'qyrenzheng',
               title: '企业认证',
@@ -98,6 +104,14 @@ export default {
               icon: 'user',
               name: 'qyruzhu',
             },
+          ],
+        },
+        {
+          id: 'qxgl',
+          title: '供需管理',
+          icon: '',
+          name: '',
+          children: [
             {
               id: 'tfwgj',
               title: '碳服务供给',
@@ -110,18 +124,31 @@ export default {
               icon: 'user',
               name: 'tfwxq',
             },
+          ]
+        },
+        
         {
-          id: 'ggwhgl',
+          id: 'xxzx',
           title: '消息中心',
-          icon: 'user',
+          icon: '',
+          name: '',
+          children: [
+            {
+              id: 'xttz',
+              title: '系统通知',
+              icon: '',
               name: 'ggwhgl',
             },
+          ]
+        },
+        {
+          id: 'tlgl',
+          title: '碳链管理',
+          icon: '',
+          name: '',
+          children: [
+            
             {
-          id: 'lsjy',
-          title: '绿色交易',
-          icon: 'user',
-          name: 'lsjy',
-        }, {
               id: 'zljggl',
               title: '质证结果管理',
               icon: 'user',
@@ -147,6 +174,8 @@ export default {
               name: 'chazhengjilu',
               iframeUrl: "https://ctn-web-pre.lingshu.net/query-record-mgt",
             },
+          ]
+        },
       ],
       ejcdList: [],
       iFrameSrc: '',

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

@@ -6,7 +6,6 @@
           <div class="gxnlpt-tab-box" v-for="(item, index) in GXNLPTtabList" :key="index">
             <t-anchor-item :href="item.href" :title="item.title"></t-anchor-item>
             <img class="icon-img" :src="getIconUrl(item.icon)" alt="" />
-            <!-- <a :href="item.href" target="_self" class="">{{item.title}}</a> -->
           </div>
         </t-anchor>
         <div id="anchor-container">
@@ -33,13 +32,15 @@
               </div>
             </div>
           </div>
-          <div class="bottom-box"></div>
         </div>
       </div>
     </div>
+    <!-- 底部信息区 -->
+    <Footer style="width:100%" />
   </div>
 </template>
 <script>
+import Footer from '@/pages/index/components/footer/index.vue';
 export default {
   data() {
     return {
@@ -173,10 +174,28 @@ export default {
       ],
     };
   },
+  components: {
+    Footer,
+  },
+  mounted() {
+    const anchor = this.$route.query.anchor || this.$route.params.anchor;
+    if (anchor) {
+      this.$nextTick(() => {
+        const el = document.getElementById(anchor);
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      });
+    }
+  },
   methods: {
     handleClick({ e, href, title }) {
       e.preventDefault();
-      console.log('click', href, title);
+      const id = href.replace('#', '');
+      const el = document.getElementById(id);
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
     },
     getIconUrl(iconName) {
       // 使用require动态加载图片
@@ -199,15 +218,11 @@ export default {
   background-image: linear-gradient(180deg, #f2fdf0, #e6f7fd);
 }
 .anchor-container-demo {
-  //   display: flex;
+  display: flex;
+  flex-direction: column;
 }
 #anchor-container {
-  flex-grow: 1;
+  flex: 1;
-  height: 770px;
-  overflow: auto;
-}
-#anchor-container::-webkit-scrollbar {
-  display: none;
 }
 .gxnlpt-main {
   max-width: 1448px;
@@ -326,9 +341,6 @@ export default {
     }
   }
 }
-.bottom-box {
-  height: 380px;
-}
 .anchor-container-box-img-img {
   position: absolute;
   top: 50%;

txw-mhzc-web/src/pages/index/views/gzt/components/AccountShortcuts.vue

@@ -1,27 +1,23 @@
 <template>
   <div class="account-shortcuts">
-    <div class="shortcuts-grid">
+    <div class="shortcuts-row">
       <button
-        v-for="(item, index) in shortcuts"
+        v-for="item in shortcuts"
         :key="item.label"
         class="shortcut-item"
-        :style="{ '--delay': `${index * 0.06}s` }"
         @click="handleClick(item.to)"
       >
-        <div class="item-icon" :style="{ background: item.bgColor, color: item.color }">
+        <div class="item-icon" :style="{ background: item.bgColor }">
-          <component :is="getIconComponent(item.icon)" />
+          <component :is="getIconComponent(item.icon)" :style="{ color: item.color }" />
         </div>
         <span class="item-label">{{ item.label }}</span>
-        <div class="item-arrow">
-          <ArrowRightIcon />
-        </div>
       </button>
     </div>
   </div>
 </template>
 
 <script>
-import { MailIcon, UserIcon, EditIcon, LockOnIcon, ArrowRightIcon } from 'tdesign-icons-vue';
+import { MailIcon, UserIcon, EditIcon, LockOnIcon } from 'tdesign-icons-vue';
 
 const iconMap = {
   mail: MailIcon,
@@ -37,15 +33,13 @@ export default {
     UserIcon,
     EditIcon,
     LockOnIcon,
-    ArrowRightIcon,
   },
   data() {
     return {
       shortcuts: [
-        { label: '消息中心', icon: 'mail', to: '/yhzx/ggwhgl', bgColor: '#FCE4EC', color: '#E91E63' },
+        { label: '我的认证', icon: 'user', to: '/yhzx/qyrenzheng', bgColor: '#E6F8F0', color: '#344F3D' },
-        { label: '我的认证', icon: 'user', to: '/yhzx/qyrenzheng', bgColor: '#E3F2FD', color: '#2196F3' },
+        { label: '账号编辑', icon: 'edit', to: '/yhzx/qyrenzheng', bgColor: '#E6F8F0', color: '#344F3D' },
-        { label: '账号编辑', icon: 'edit', to: '/yhzx/qyrenzheng', bgColor: '#FFF8E1', color: '#FF9800' },
+        { label: '修改密码', icon: 'lock-on', to: '/yhzx/zhanghugl', bgColor: '#E6F8F0', color: '#344F3D' },
-        { label: '修改密码', icon: 'lock-on', to: '/yhzx/zhanghugl', bgColor: '#E8F5E9', color: '#4CAF50' },
       ],
     };
   },
@@ -62,127 +56,60 @@ export default {
 
 <style lang="less" scoped>
 @green-primary: #48C666;
-@green-dark: #2D8A45;
+@text-dark: #003B1A;
-@green-light: #E8FFEA;
-@text-dark: #1A2B3C;
-@text-muted: #6B7C8D;
-@text-light: #94A3B8;
 @bg-card: #FFFFFF;
-@border-light: rgba(0, 0, 0, 0.06);
-@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
 
 .account-shortcuts {
-  .shortcuts-grid {
+  .shortcuts-row {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
-    gap: 12px;
   }
 }
 
 .shortcut-item {
-  position: relative;
   display: flex;
-  padding: 20px 12px;
-  overflow: hidden;
-  cursor: pointer;
-  background: @bg-card;
-  border: 1px solid @border-light;
-  border-radius: 14px;
-  animation: fadeIn 0.4s ease backwards;
-  animation-delay: var(--delay);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   flex-direction: column;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
-
+  padding: 12px;
-  &::before {
+  cursor: pointer;
-    position: absolute;
+  background: @bg-card;
-    top: 0;
+  border: none;
-    right: 0;
+  border-radius: 4px;
-    left: 0;
+  transition: background 0.2s ease;
-    height: 3px;
+  flex: 1;
-    background: linear-gradient(90deg, @green-primary, @green-dark);
+  min-width: 0;
-    content: '';
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-  }
 
   &:hover {
-    border-color: transparent;
+    background: #F5F7FA;
-    transform: translateY(-3px);
-    box-shadow: @shadow-hover;
-
-    &::before {
-      transform: scaleX(1);
-    }
-
-    .item-icon {
-      transform: scale(1.1);
-    }
-
-    .item-arrow {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  &:active {
-    transform: translateY(-1px);
   }
 
   .item-icon {
     display: flex;
-    width: 48px;
+    width: 36px;
-    height: 48px;
+    height: 36px;
-    font-size: 22px;
+    font-size: 16px;
-    border-radius: 12px;
+    border-radius: 6px;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     align-items: center;
     justify-content: center;
   }
 
   .item-label {
-    font-size: 13px;
+    font-size: 12px;
-    font-weight: 600;
+    font-weight: 400;
     color: @text-dark;
     text-align: center;
-  }
+    line-height: 1.67;
-
-  .item-arrow {
-    position: absolute;
-    top: 50%;
-    right: 12px;
-    display: flex;
-    font-size: 14px;
-    color: @green-primary;
-    opacity: 0;
-    transform: translateX(-4px);
-    transition: all 0.3s ease;
-    align-items: center;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
   }
 }
 
 @media (max-width: 1200px) {
-  .account-shortcuts .shortcuts-grid {
+  .account-shortcuts .shortcuts-row {
-    grid-template-columns: repeat(2, 1fr);
+    flex-wrap: wrap;
   }
-}
 
-@media (max-width: 480px) {
+  .shortcut-item {
-  .account-shortcuts .shortcuts-grid {
+    min-width: 33.33%;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
   }
 }
 </style>

txw-mhzc-web/src/pages/index/views/gzt/components/CarbonServiceTable.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="panel-card carbon-service-table">
+    <div class="table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th class="col-title">标题</th>
+            <th class="col-industry">所属行业</th>
+            <th class="col-scope">服务范围</th>
+            <th class="col-time">创建时间</th>
+            <th class="col-status">状态</th>
+            <th class="col-action">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in tableData" :key="item.id">
+            <td class="col-title">{{ item.title }}</td>
+            <td class="col-industry">{{ item.industry }}</td>
+            <td class="col-scope">{{ item.scope }}</td>
+            <td class="col-time">{{ item.createTime }}</td>
+            <td class="col-status">
+              <span class="status-dot" :class="item.status === 'online' ? 'status--online' : 'status--offline'"></span>
+              {{ item.status === 'online' ? '已上线' : '未上线' }}
+            </td>
+            <td class="col-action">
+              <a class="action-link" @click="handleView(item)">查看</a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ListIcon } from 'tdesign-icons-vue';
+
+export default {
+  name: 'CarbonServiceTable',
+  components: {
+    ListIcon,
+  },
+  data() {
+    return {
+      tableData: [
+        { id: 1, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-20', status: 'online' },
+        { id: 2, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-18', status: 'online' },
+        { id: 3, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-15', status: 'offline' },
+        { id: 4, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-10', status: 'online' },
+        { id: 5, title: '碳服务供给信息', industry: '制造业', scope: '全国', createTime: '2026-04-08', status: 'offline' },
+      ],
+    };
+  },
+  methods: {
+    handleView(item) {
+      console.log('查看详情', item);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@green-primary: #48C666;
+@green-dark: #2D8A45;
+@green-light: #E8FFEA;
+@text-dark: #1A2B3C;
+@text-muted: #6B7C8D;
+@text-light: #94A3B8;
+@bg-card: #FFFFFF;
+@border-light: rgba(0, 0, 0, 0.06);
+@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
+@shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
+
+.carbon-service-table {
+  overflow: hidden;
+  background: @bg-card;
+  border: 1px solid @border-light;
+  border-radius: 4px;
+  box-shadow: @shadow-card;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px 24px 16px;
+  background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
+  border-bottom: 1px solid @border-light;
+
+  .header-icon {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    color: #fff;
+    background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(72, 198, 102, 0.3);
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .header-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .panel-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: @text-dark;
+  }
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 14px 16px;
+    text-align: left;
+    font-size: 13px;
+    border-bottom: 1px solid @border-light;
+  }
+
+  th {
+    font-weight: 600;
+    color: @text-muted;
+    background: #FAFBFC;
+  }
+
+  td {
+    color: @text-dark;
+  }
+
+  tbody tr {
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(72, 198, 102, 0.03);
+    }
+
+    &:last-child td {
+      border-bottom: none;
+    }
+  }
+
+  .col-title {
+    min-width: 200px;
+  }
+
+  .col-industry {
+    min-width: 100px;
+  }
+
+  .col-scope {
+    min-width: 80px;
+  }
+
+  .col-time {
+    min-width: 120px;
+    color: @text-muted;
+  }
+
+  .col-status {
+    min-width: 100px;
+
+    .status-dot {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      margin-right: 6px;
+      border-radius: 50%;
+      vertical-align: middle;
+
+      &.status--online {
+        background: @green-primary;
+      }
+
+      &.status--offline {
+        background: #F56161;
+      }
+    }
+  }
+
+  .col-action {
+    min-width: 60px;
+  }
+
+  .action-link {
+    font-size: 14px;
+    font-weight: 500;
+    color: #3491FA;
+    cursor: pointer;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: @green-dark;
+    }
+  }
+}
+</style>

txw-mhzc-web/src/pages/index/views/gzt/components/EnterpriseCert.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="enterprise-cert">
+    <div class="cert-bg"></div>
+    <div class="cert-content">
       <div class="cert-header">
-      <div class="cert-icon">
-        <UserIcon />
-      </div>
         <div class="cert-title">
           <h3>企业认证</h3>
-        <span class="cert-status" :class="statusClass">{{ statusText }}</span>
+          <span class="cert-status" v-show="certData.qymc">{{ statusText }}</span>
         </div>
       </div>
       <div class="cert-body">
         <template v-if="certData.qymc">
           <div class="cert-info">
             <div class="info-row">
-            <span class="info-label">企业名称</span>
+              <span class="name-icon"></span>
+              <!-- <span class="info-label">企业名称</span> -->
               <span class="info-value">{{ certData.qymc }}</span>
             </div>
             <div class="info-row">
-            <span class="info-label">统一社会信用代码</span>
+              <span class="eid-icon"></span>
+              <!-- <span class="info-label">统一社会信用代码</span> -->
               <span class="info-value">{{ certData.nsrsbh }}</span>
             </div>
             <div class="info-row">
+              <span class="cert-icon"></span>
               <span class="info-label">认证时间</span>
               <span class="info-value">{{ formatDate(certData.lrrq) }}</span>
             </div>
@@ -31,11 +33,12 @@
             <span>暂未认证企业信息</span>
           </div>
         </template>
-      <div class="cert-actions">
+        <!-- <div class="cert-actions">
           <button class="cert-btn" @click="handleClick">
             <span>{{ certData.qymc ? '查看详情' : '立即认证' }}</span>
             <ArrowRightIcon />
           </button>
+        </div> -->
       </div>
     </div>
   </div>
@@ -43,29 +46,20 @@
 
 <script>
 import api from '@/pages/index/api/gxzx/index.js';
-import { UserIcon, ArrowRightIcon } from 'tdesign-icons-vue';
+import { ArrowRightIcon } from 'tdesign-icons-vue';
 
 export default {
   name: 'EnterpriseCert',
   components: {
-    UserIcon,
     ArrowRightIcon,
   },
   data() {
     return {
-      certData: {},
+      certData: {
+        qymc: '',
+      },
     };
   },
-  computed: {
-    statusText() {
-      if (!this.certData.qymc) return '未认证';
-      return '已认证';
-    },
-    statusClass() {
-      if (!this.certData.qymc) return 'status--unreviewed';
-      return 'status--certified';
-    },
-  },
   mounted() {
     this.fetchCertData();
   },
@@ -95,142 +89,160 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@green-primary: #48C666;
+@green-primary: #00B42A;
-@green-dark: #2D8A45;
+@green-dark: #008530;
 @green-light: #E8FFEA;
-@text-dark: #1A2B3C;
+@text-dark: #1D2129;
-@text-muted: #6B7C8D;
+@text-muted: #4E5969;
-@text-light: #94A3B8;
+@text-light: #86909C;
 @bg-card: #FFFFFF;
-@border-light: rgba(0, 0, 0, 0.06);
-@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
 
 .enterprise-cert {
-  width: 100%;
+  position: relative;
+  width: 280px;
+  height: 170px;
   overflow: hidden;
   background: @bg-card;
-  border: 1px solid @border-light;
+  border-radius: 4px;
-  border-radius: 16px;
+  box-shadow: 0 4px 8px 0 rgba(0, 185, 107, 0.2);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
-  transition: box-shadow 0.3s ease;
 
-  &:hover {
+.cert-bg {
-    box-shadow: @shadow-hover;
+  position: absolute;
-  }
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('./cert-bg.png');
+  background-size: cover;
+  background-position: center;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.cert-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
 }
 
 .cert-header {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
-  padding: 16px 20px;
+  margin-bottom: 16px;
-  background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
-  border-bottom: 1px solid @border-light;
-
-  .cert-icon {
-    display: flex;
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-    color: #fff;
-    background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
-    border-radius: 10px;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
 
   .cert-title {
-    flex: 1;
+    width: 100%;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
+    justify-content: space-between;
 
     h3 {
       margin: 0;
-      font-size: 15px;
+      font-size: 16px;
       font-weight: 600;
       color: @text-dark;
     }
 
     .cert-status {
-      padding: 3px 10px;
+      width: 70px;
-      font-size: 11px;
+      height: 22px;
-      font-weight: 600;
+      background-image: url('./cert-label.png');
-      border-radius: 20px;
+      background-size: 100% 100%;
-
+      background-position: center;
-      &.status--certified {
-        color: @green-dark;
-        background: @green-light;
-      }
-
-      &.status--pending {
-        color: #F9A825;
-        background: #FFF8E1;
-      }
-
-      &.status--unreviewed {
-        color: @text-muted;
-        background: #F5F5F5;
-      }
     }
   }
 }
 
 .cert-body {
-  padding: 16px 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .cert-info {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
-  margin-bottom: 14px;
 
   .info-row {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
 
     .info-label {
-      font-size: 12px;
+      font-size: 14px;
-      color: @text-muted;
+      color: #344F3D;
+      margin: 0 4px;
     }
 
     .info-value {
-      font-size: 12px;
+      font-size: 14px;
-      font-weight: 500;
+      // font-weight: 500;
-      color: @text-dark;
+      color: #344F3D;
     }
   }
+  .name-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    background-image: url('./cert-icon.png');
+    background-size: 100% 100%;
+    background-position: center;
+    margin-right: 4px;
+  }
+  .eid-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    background-image: url('./eid-icon.png');
+    background-size: 100% 100%;
+    background-position: center;
+    margin-right: 4px;
+  }
+  .cert-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    background-image: url('./cert-icon.png');
+    background-size: 100% 100%;
+    background-position: center;
+  }
 }
 
 .cert-empty {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 60px;
+  flex: 1;
-  margin-bottom: 14px;
+  font-size: 12px;
-  font-size: 13px;
   color: @text-muted;
 }
 
 .cert-actions {
+  margin-top: auto;
+
   .cert-btn {
     display: flex;
     width: 100%;
-    padding: 10px;
+    padding: 8px;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 600;
     color: @green-primary;
     cursor: pointer;
     background: @green-light;
-    border: 1px solid rgba(72, 198, 102, 0.2);
+    border: 1px solid rgba(0, 180, 42, 0.2);
-    border-radius: 8px;
+    border-radius: 4px;
     transition: all 0.3s ease;
     align-items: center;
     justify-content: center;
-    gap: 6px;
+    gap: 4px;
 
     &:hover {
       color: #fff;
@@ -239,7 +251,7 @@ export default {
     }
 
     .t-icon {
-      font-size: 14px;
+      font-size: 12px;
       transition: transform 0.3s ease;
     }
 

txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="policy-news">
     <div class="panel-header">
-      <div class="header-icon">
-        <NotificationIcon />
-      </div>
       <h3 class="header-title">{{ title }}</h3>
-      <span class="header-tag">政策</span>
     </div>
     <div class="news-list">
       <div
@@ -15,25 +11,24 @@
         :style="{ '--delay': `${index * 0.08}s` }"
       >
         <div class="item-indicator">
-          <div class="indicator-dot" :style="{ background: item.leftBorderColor }"></div>
+          <div class="date-block">
-          <div class="indicator-line" :style="{ background: item.leftBorderColor }"></div>
+            <span class="date-day">{{ item.day || '18' }}</span>
+            <span class="date-month">{{ item.month || '2026.04' }}</span>
+          </div>
+          <div class="date-line"></div>
         </div>
         <div class="item-content">
           <p class="item-title">{{ item.title }}</p>
-          <div class="item-meta">
+          <p class="item-desc">{{ item.desc || item.content }}</p>
-            <span class="meta-tag" :style="{ background: `${item.leftBorderColor}20`, color: item.leftBorderColor }">
-              {{ item.tag || '重要' }}
-            </span>
         </div>
       </div>
     </div>
-    </div>
+    <!-- <div class="panel-footer">
-    <div class="panel-footer">
       <span class="more-link">
         查看全部
         <ArrowRightIcon />
       </span>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -56,22 +51,21 @@ export default {
       default: () => [
         {
           id: 1,
-          title: '关于做好2026年全国碳排放权交易市场有关工作的通知',
+          title: '"十五五"新图景：增绿降碳 加减之间再造万亿级新机遇',
-          leftBorderColor: '#3491FA',
+          content: '"十五五"规划纲要中提出，加快经济社会发展全面绿色转型。当前，一场增绿降碳的变革正在重塑我们的生产生活方式，持续激发绿色发展动能。',
+          day: '18',
+          month: '2026.04',
           tag: '官方',
         },
         {
           id: 2,
-          title: '第一财经研究院碳市场月报：2026年全国碳市场相关工作安排出炉',
+          title: '全球最大输送容量海上风电项目进入首个集中施工期',
-          leftBorderColor: '#F9A825',
+          content: '粤西海域，离岸70公里外，水深超50米，一场绿色能源的接力正在加紧进行。全球最大输送容量海上风电项目，现在进入开春后的首个集中施工期。',
+          day: '17',
+          month: '2026.04',
           tag: '研究',
         },
-        {
+
-          id: 3,
-          title: '2026年全国碳市场重点工作：从存证到清缴，一步都不能少',
-          leftBorderColor: '#78909C',
-          tag: '解读',
-        },
       ],
     },
   },
@@ -82,9 +76,9 @@ export default {
 @green-primary: #48C666;
 @green-dark: #2D8A45;
 @green-light: #E8FFEA;
-@text-dark: #1A2B3C;
+@text-dark: #333333;
-@text-muted: #6B7C8D;
+@text-muted: #666666;
-@text-light: #94A3B8;
+@text-light: #999999;
 @bg-card: #FFFFFF;
 @bg-panel: #F8FAFB;
 @border-light: rgba(0, 0, 0, 0.06);
@@ -95,7 +89,8 @@ export default {
   width: 100%;
   overflow: hidden;
   background: @bg-card;
-  border-radius: 16px;
+  border: 1px solid @border-light;
+  border-radius: 4px;
   box-shadow: @shadow-soft;
   transition: box-shadow 0.3s ease;
 
@@ -139,15 +134,18 @@ export default {
     letter-spacing: 0.5px;
     color: @green-primary;
     background: @green-light;
-    border-radius: 20px;
+    border-radius: 4px;
   }
 }
 
 .news-list {
   display: flex;
   padding: 12px 20px;
-  flex-direction: column;
+  // flex-direction: column;
-  gap: 4px;
+  gap: 32px;
+  // display: grid;
+  // grid-template-columns: 1fr 1fr;
+  // gap: 20px;
 }
 
 .news-item {
@@ -158,66 +156,86 @@ export default {
   animation-delay: var(--delay);
   transition: all 0.25s ease;
   align-items: stretch;
+  gap: 16px;
+  min-width: 0;
 
   &:last-child {
     border-bottom: none;
   }
 
   &:hover {
-    transform: translateX(4px);
-
     .item-title {
-      color: @green-dark;
+      color: @green-primary;
-    }
-
-    .indicator-dot {
-      transform: scale(1.3);
     }
   }
 
   .item-indicator {
     display: flex;
-    width: 20px;
+    width: 55px;
-    padding-top: 4px;
+    // flex-direction: column;
+    align-items: flex-start;
+    flex-shrink: 0;
+    gap: 14px;
+
+    .date-block {
+      display: flex;
       flex-direction: column;
       align-items: center;
-    flex-shrink: 0;
+      gap: 0;
-
-    .indicator-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      transition: transform 0.25s ease;
     }
 
-    .indicator-line {
+    .date-day {
-      width: 2px;
+      font-family: 'San Francisco Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      margin-top: 6px;
+      font-size: 24px;
-      border-radius: 1px;
+      font-weight: 500;
-      opacity: 0.4;
+      line-height: 1.19;
-      flex: 1;
+      color: @text-dark;
+    }
+
+    .date-month {
+      font-size: 14px;
+      font-weight: 400;
+      color: @text-light;
+      line-height: 1.27;
+    }
+
+    .date-line {
+      width: 0;
+      height: 72px;
+      border-left: 1px dashed #E7E7E7;
     }
   }
 
   .item-content {
     display: flex;
     min-width: 0;
-    padding-left: 12px;
+    overflow: hidden;
-    flex: 1;
     flex-direction: column;
-    gap: 8px;
+    // gap: 9px;
   }
 
   .item-title {
+    overflow: hidden;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.4;
+    margin: 0;
+    color: @text-dark;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    transition: color 0.25s ease;
+  }
+
+  .item-desc {
     display: -webkit-box;
     overflow: hidden;
-    font-size: 13px;
+    font-size: 14px;
-    line-height: 1.6;
+    font-weight: 400;
-    color: @text-dark;
+    line-height: 1.57;
+    color: @text-muted;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     line-clamp: 2;
-    transition: color 0.25s ease;
   }
 
   .item-meta {

txw-mhzc-web/src/pages/index/views/gzt/components/QuickActions.vue

@@ -1,29 +1,23 @@
 <template>
   <div class="quick-actions">
-    <div class="actions-grid">
+    <div class="actions-row">
       <button
-        v-for="(action, index) in actions"
+        v-for="action in actions"
         :key="action.label"
         class="action-item"
-        :style="{ '--delay': `${index * 0.06}s` }"
         @click="handleClick(action.to)"
       >
-        <div class="item-icon-wrap">
+        <div class="item-icon" :style="{ background: action.bgColor }">
-          <div class="item-icon" :style="{ background: action.bgColor, color: action.color }">
+          <component :is="getIconComponent(action.icon)" :style="{ color: action.color }" />
-            <component :is="getIconComponent(action.icon)" />
-          </div>
         </div>
         <span class="item-label">{{ action.label }}</span>
-        <div class="item-arrow">
-          <ArrowRightIcon />
-        </div>
       </button>
     </div>
   </div>
 </template>
 
 <script>
-import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon, ArrowRightIcon } from 'tdesign-icons-vue';
+import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon } from 'tdesign-icons-vue';
 
 const iconMap = {
   upload: UploadIcon,
@@ -39,15 +33,14 @@ export default {
     CloudUploadIcon,
     EditIcon,
     BulletpointIcon,
-    ArrowRightIcon,
   },
   data() {
     return {
       actions: [
-        { label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload', bgColor: '#E8FFEA', color: '#48C666' },
+        { label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload', bgColor: '#E6F8F0', color: '#344F3D' },
-        { label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload', bgColor: '#E3F2FD', color: '#2196F3' },
+        { label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload', bgColor: '#E6F8F0', color: '#344F3D' },
-        { label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit', bgColor: '#FFF8E1', color: '#FF9800' },
+        { label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit', bgColor: '#E6F8F0', color: '#344F3D' },
-        { label: '质证申请', to: '/yhzx/zzgl', icon: 'bulletpoint', bgColor: '#FCE4EC', color: '#E91E63' },
+        { label: '资质申请', to: '/yhzx/zzgl', icon: 'bulletpoint', bgColor: '#E6F8F0', color: '#344F3D' },
       ],
     };
   },
@@ -64,131 +57,63 @@ export default {
 
 <style lang="less" scoped>
 @green-primary: #48C666;
-@green-dark: #2D8A45;
+@text-dark: #003B1A;
-@green-light: #E8FFEA;
+@text-link: #008CFF;
-@text-dark: #1A2B3C;
-@text-muted: #6B7C8D;
 @bg-card: #FFFFFF;
-@border-light: rgba(0, 0, 0, 0.06);
+@border-light: #E5E6EB;
-@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
 
 .quick-actions {
-  .actions-grid {
+  .actions-row {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(4, 1fr);
+    flex-wrap: wrap;
-    gap: 12px;
+    gap: 8px;
   }
 }
 
 .action-item {
-  position: relative;
   display: flex;
-  padding: 20px 12px;
-  overflow: hidden;
-  cursor: pointer;
-  background: @bg-card;
-  border: 1px solid @border-light;
-  border-radius: 14px;
-  animation: fadeIn 0.4s ease backwards;
-  animation-delay: var(--delay);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   flex-direction: column;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
-
+  padding: 12px;
-  &::before {
+  cursor: pointer;
-    position: absolute;
+  background: @bg-card;
-    top: 0;
+  border: none;
-    right: 0;
+  border-radius: 4px;
-    left: 0;
+  transition: background 0.2s ease;
-    height: 3px;
+  width: calc(33.33% - 6px);
-    background: linear-gradient(90deg, @green-primary, @green-dark);
+  min-width: 0;
-    content: '';
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-  }
 
   &:hover {
-    border-color: transparent;
+    background: #F5F7FA;
-    transform: translateY(-3px);
-    box-shadow: @shadow-hover;
-
-    &::before {
-      transform: scaleX(1);
-    }
-
-    .item-icon {
-      transform: scale(1.1);
-    }
-
-    .item-arrow {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  &:active {
-    transform: translateY(-1px);
-  }
-
-  .item-icon-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 
   .item-icon {
     display: flex;
-    width: 48px;
+    width: 36px;
-    height: 48px;
+    height: 36px;
-    font-size: 22px;
+    font-size: 16px;
-    border-radius: 12px;
+    border-radius: 6px;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     align-items: center;
     justify-content: center;
   }
 
   .item-label {
-    font-size: 13px;
+    font-size: 12px;
-    font-weight: 600;
+    font-weight: 400;
     color: @text-dark;
     text-align: center;
-  }
+    line-height: 1.67;
-
-  .item-arrow {
-    position: absolute;
-    top: 50%;
-    right: 12px;
-    display: flex;
-    font-size: 14px;
-    color: @green-primary;
-    opacity: 0;
-    transform: translateX(-4px);
-    transition: all 0.3s ease;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
   }
 }
 
 @media (max-width: 1200px) {
-  .quick-actions .actions-grid {
+  .quick-actions .actions-row {
-    grid-template-columns: repeat(2, 1fr);
+    flex-wrap: wrap;
   }
-}
 
-@media (max-width: 480px) {
+  .action-item {
-  .quick-actions .actions-grid {
+    min-width: 33.33%;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
   }
 }
 </style>

txw-mhzc-web/src/pages/index/views/gzt/components/StatsCard.vue

@@ -1,221 +1,105 @@
 <template>
-  <div class="stats-card" :class="{ 'is-clickable': to }" @click="goTo">
+  <div class="stats-card">
-    <div class="card-glow"></div>
     <div class="card-inner">
-      <div class="card-icon-wrap" :style="iconWrapStyle">
+      <div class="card-icon-wrap" :style="{ backgroundImage: `url(${iconUrl})` }"></div>
-        <div class="icon-inner" :style="iconInnerStyle">
-          <component :is="iconComponent" />
-        </div>
-      </div>
       <div class="card-content">
+        <div class="card-title">{{ title }}</div>
         <div class="card-value">
           <span class="value-num">{{ count }}</span>
           <span class="value-unit">{{ unit }}</span>
         </div>
-        <div class="card-title">{{ title }}</div>
       </div>
     </div>
-    <div class="card-shine"></div>
   </div>
 </template>
 
 <script>
-import { UploadIcon, SearchIcon, SwapIcon, MailIcon } from 'tdesign-icons-vue';
-
-const iconMap = {
-  upload: UploadIcon,
-  search: SearchIcon,
-  swap: SwapIcon,
-  mail: MailIcon,
-};
-
 export default {
   name: 'StatsCard',
-  components: {
-    UploadIcon,
-    SearchIcon,
-    SwapIcon,
-    MailIcon,
-  },
   props: {
     title: String,
     count: [String, Number],
-    unit: { type: String, default: '条' },
+    unit: { type: String, default: '个' },
     bgColor: { type: String, default: '#E8F5E9' },
     borderColor: { type: String, default: '#48C666' },
     iconName: String,
     to: String,
   },
   computed: {
-    iconWrapStyle() {
+    iconUrl() {
-      return {
+      const iconMap = {
-        background: `linear-gradient(135deg, ${this.bgColor} 0%, ${this.lightenColor(this.bgColor)} 100%)`,
+        upload: require('./stats-1.png'),
-        boxShadow: this.borderColor !== 'transparent'
+        search: require('./stats-2.png'),
-          ? `0 8px 24px rgba(72, 198, 102, 0.25), inset 0 1px 0 rgba(255,255,255,0.4)`
+        swap: require('./stats-3.png'),
-          : `0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4)`,
+        mail: require('./stats-4.png'),
       };
-    },
+      return iconMap[this.iconName] || iconMap.upload;
-    iconInnerStyle() {
-      return {
-        color: this.borderColor !== 'transparent' ? this.borderColor : '#666',
-      };
-    },
-    iconComponent() {
-      return iconMap[this.iconName] || UploadIcon;
-    },
-  },
-  methods: {
-    lightenColor(hex) {
-      // Simple lighten: blend with white
-      const r = parseInt(hex.slice(1, 3), 16);
-      const g = parseInt(hex.slice(3, 5), 16);
-      const b = parseInt(hex.slice(5, 7), 16);
-      return `rgb(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 60)})`;
-    },
-    goTo() {
-      if (this.to) {
-        this.$router.push(this.to);
-      }
     },
   },
 };
 </script>
 
 <style lang="less" scoped>
-@green-primary: #48C666;
+@text-dark: #003B1A;
-@green-dark: #2D8A45;
+@text-muted: #344F3D;
-@green-light: #E8FFEA;
+@text-unit: #6B8575;
-@bg-card: #FFFFFF;
+@border-light: #E5E6EB;
-@text-dark: #1A2B3C;
-@text-muted: #6B7C8D;
-@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
-@shadow-hover: 0 8px 32px rgba(72, 198, 102, 0.18);
 
 .stats-card {
-  position: relative;
-  width: 180px;
-  height: 100px;
-  overflow: hidden;
-  cursor: default;
-  background: @bg-card;
-  border-radius: 16px;
-  box-shadow: @shadow-soft;
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-
-  &.is-clickable {
-    cursor: pointer;
-  }
-
-  &:hover {
-    transform: translateY(-4px) scale(1.02);
-    box-shadow: @shadow-hover;
-
-    .card-glow {
-      opacity: 1;
-    }
-
-    .card-shine {
-      opacity: 1;
-      transform: translateX(100%);
-    }
-
-    .card-icon-wrap {
-      transform: scale(1.08);
-    }
-  }
-
-  .card-glow {
-    position: absolute;
-    top: -50%;
-    right: -50%;
   width: 100%;
-    height: 100%;
+}
-    pointer-events: none;
-    background: radial-gradient(circle, rgba(72, 198, 102, 0.15) 0%, transparent 70%);
-    opacity: 0;
-    transition: opacity 0.35s;
-  }
 
-  .card-inner {
+.card-inner {
-    position: relative;
-    z-index: 1;
   display: flex;
-    height: 100%;
-    padding: 16px 18px;
   align-items: center;
-    gap: 16px;
+  gap: 12px;
-  }
+  padding: 0 0 0 20px;
+}
 
-  .card-icon-wrap {
+.card-icon-wrap {
-    display: flex;
+  width: 56px;
-    width: 52px;
+  height: 56px;
-    height: 52px;
+  background-size: contain;
-    border-radius: 14px;
+  background-repeat: no-repeat;
-    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  background-position: center;
-    align-items: center;
-    justify-content: center;
   flex-shrink: 0;
+}
 
-    .icon-inner {
+.card-content {
-      display: flex;
-      font-size: 22px;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .card-content {
   min-width: 0;
-    flex: 1;
-  }
-
-  .card-value {
   display: flex;
-    margin-bottom: 4px;
+  flex-direction: column;
-    align-items: baseline;
+  gap: 8px;
-    gap: 3px;
+}
+
+.card-value {
+  display: flex;
+  align-items: flex-end;
+  gap: 7px;
 
   .value-num {
-      font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
+    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-      font-size: 32px;
+    font-size: 28px;
-      font-weight: 700;
+    font-weight: 600;
-      line-height: 1;
+    line-height: 1.14;
-      letter-spacing: -1px;
     color: @text-dark;
   }
 
   .value-unit {
-      font-size: 12px;
+    font-size: 13px;
-      font-weight: 500;
+    font-weight: 400;
-      color: @text-muted;
+    color: @text-unit;
-    }
+    line-height: 1.54;
   }
+}
 
-  .card-title {
+.card-title {
   overflow: hidden;
   font-size: 13px;
-    font-weight: 500;
+  font-weight: 400;
   color: @text-muted;
   text-overflow: ellipsis;
   white-space: nowrap;
-  }
+  line-height: 1.54;
-
-  .card-shine {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 200%;
-    height: 100%;
-    pointer-events: none;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.4) 50%,
-      transparent 100%
-    );
-    opacity: 0;
-    transform: translateX(-100%);
-    transition: all 0.6s ease;
-  }
 }
 </style>

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

@@ -1,490 +1,340 @@
 <template>
-  <div class="gzt-page">
+  <div class="dashboard-container">
-    <!-- 装饰背景 -->
+    <!-- 主内容区域 - 左右布局 -->
-    <div class="bg-decoration">
+    <section class="main-content">
-      <div class="deco-circle deco-circle--1"></div>
+      <!-- 左侧内容区 - 整块白色背景 -->
-      <div class="deco-circle deco-circle--2"></div>
+      <div class="content-left">
-      <div class="deco-dots"></div>
+        <div class="left-panel">
+          <!-- 欢迎登录 + 日期 -->
+          <header class="panel-section welcome-section">
+            <div class="header-left">
+              <h1 class="welcome-title">欢迎登录</h1>
             </div>
+            <div class="header-right">
+              <span class="current-date">{{ currentDate }}</span>
+            </div>
+          </header>
 
-    <div class="gzt-container">
+          <div class="section-divider"></div>
-      <!-- 第一行：欢迎区域 + 企业认证 -->
-      <div class="top-row">
-        <!-- 左侧：欢迎 + 统计 -->
-        <div class="left-column">
-          <div class="welcome-section">
-            <div class="welcome-left">
-              <h1 class="welcome-title">欢迎回来</h1>
-              <p class="welcome-subtitle">{{ currentGreeting }}，祝您工作顺利</p>
-            </div>
-            <div class="welcome-right">
-              <div class="time-widget">
-                <div class="time-date">{{ currentDate }}</div>
-                <div class="time-weekday">{{ currentWeekday }}</div>
-              </div>
-            </div>
-          </div>
 
-          <!-- 统计卡片区域 -->
+          <!-- 统计块 -->
-          <div class="stats-section">
+          <div class="panel-section stats-section">
-            <div class="stats-grid">
+            <div class="stats-row">
               <StatsCard
                 title="我的供给"
                 :count="5"
                 unit="条"
-                bgColor="#E8FFEA"
+                bg-color="#E3F2FD"
-                borderColor="#48C666"
+                border-color="#1890FF"
-                iconName="upload"
+                icon-name="upload"
-                to="/yhzx/wdgj"
               />
               <StatsCard
                 title="我的需求"
                 :count="2"
                 unit="条"
-                bgColor="#E3F2FD"
+                bg-color="#E8F5E9"
-                borderColor="#2196F3"
+                border-color="#00B42A"
-                iconName="search"
+                icon-name="search"
-                to="/yhzx/wdxq"
               />
               <StatsCard
                 title="绿色交易"
                 :count="1"
                 unit="条"
-                bgColor="#FFF8E1"
+                bg-color="#E8FFEA"
-                borderColor="#FF9800"
+                border-color="#00B42A"
-                iconName="swap"
+                icon-name="swap"
-                to="/yhzx/lsjy"
               />
               <StatsCard
                 title="待处理消息"
                 :count="6"
                 unit="条"
-                bgColor="#FCE4EC"
+                bg-color="#FFF7E6"
-                borderColor="#E91E63"
+                border-color="#FF7D00"
-                iconName="mail"
+                icon-name="mail"
-                to="/yhzx/ggwhgl"
               />
             </div>
           </div>
+
+          <div class="section-divider"></div>
+
+          <!-- 碳服务供给表格 -->
+          <div class="panel-section table-section">
+            <CarbonServiceTable />
           </div>
 
-        <!-- 右侧：企业认证 -->
+          <div class="section-divider"></div>
-        <div class="right-column">
-          <EnterpriseCert />
-        </div>
-      </div>
 
-      <!-- 主要内容区 -->
+          <!-- 政策公告 - 左右两个 -->
-      <div class="main-content">
+          <div class="panel-section policy-section">
-        <!-- 左侧：功能区 -->
-        <div class="left-panel">
-          <!-- 常用功能 -->
-          <div class="panel-card">
-            <div class="panel-header">
-              <div class="header-icon">
-                <AppIcon />
-              </div>
-              <div class="header-text">
-                <h2 class="panel-title">常用功能</h2>
-                <p class="panel-desc">快速访问核心功能</p>
-              </div>
-            </div>
-            <div class="panel-body">
-              <QuickActions />
-            </div>
-          </div>
-
-          <!-- 账号管理 -->
-          <div class="panel-card account-panel">
-            <div class="panel-header">
-              <div class="header-icon header-icon--account">
-                <SettingIcon />
-              </div>
-              <div class="header-text">
-                <h2 class="panel-title">账号管理</h2>
-                <p class="panel-desc">账户设置与安全</p>
-              </div>
-            </div>
-            <div class="panel-body">
-              <AccountShortcuts />
-            </div>
-          </div>
-        </div>
-
-        <!-- 右侧：政策公告 -->
-        <div class="right-panel">
             <PolicyNews />
           </div>
         </div>
       </div>
+
+      <!-- 右侧边栏 -->
+      <aside class="content-right">
+        <!-- 企业认证卡片 -->
+        <EnterpriseCert />
+
+        <!-- 快捷入口 + 账号管理 -->
+        <div class="right-section">
+          <div class="section-header">
+            <h3 class="header-title">快捷入口</h3>
+            <a class="header-link">管理</a>
+          </div>
+          <QuickActions />
+
+          <div class="section-divider"></div>
+
+          <div class="section-header">
+            <h3 class="header-title">账号管理</h3>
+          </div>
+          <AccountShortcuts />
+        </div>
+      </aside>
+    </section>
   </div>
 </template>
 
 <script>
-import { AppIcon, SettingIcon } from 'tdesign-icons-vue';
 import StatsCard from './components/StatsCard.vue';
-import QuickActions from './components/QuickActions.vue';
+import CarbonServiceTable from './components/CarbonServiceTable.vue';
 import PolicyNews from './components/PolicyNews.vue';
-import AccountShortcuts from './components/AccountShortcuts.vue';
 import EnterpriseCert from './components/EnterpriseCert.vue';
+import QuickActions from './components/QuickActions.vue';
+import AccountShortcuts from './components/AccountShortcuts.vue';
+import {  SettingIcon } from 'tdesign-icons-vue';
 
 export default {
-  name: 'GztIndex',
+  name: 'DashboardIndex',
   components: {
-    AppIcon,
-    SettingIcon,
     StatsCard,
-    QuickActions,
+    CarbonServiceTable,
     PolicyNews,
-    AccountShortcuts,
     EnterpriseCert,
+    QuickActions,
+    AccountShortcuts,
   },
-  data() {
+  computed: {
-    return {
+    currentDate() {
-      currentDate: '',
-      currentWeekday: '',
-      currentGreeting: '',
-    };
-  },
-  mounted() {
-    this.updateDateTime();
-  },
-  methods: {
-    updateDateTime() {
       const now = new Date();
-      const hours = now.getHours();
+      const year = now.getFullYear();
+      const month = now.getMonth() + 1;
+      const day = now.getDate();
       const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
-      this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
+      const weekday = weekdays[now.getDay()];
-      this.currentWeekday = weekdays[now.getDay()];
+      return `${year}年${month}月${day}日 ${weekday}`;
-      if (hours < 12) {
-        this.currentGreeting = '早上好';
-      } else if (hours < 14) {
-        this.currentGreeting = '中午好';
-      } else if (hours < 18) {
-        this.currentGreeting = '下午好';
-      } else {
-        this.currentGreeting = '晚上好';
-      }
     },
   },
 };
 </script>
 
 <style lang="less" scoped>
+@bg-page: #F5F7FA;
+@bg-card: #FFFFFF;
+@text-dark: #003B1A;
+@text-muted: #4E5969;
+@text-light: #86909C;
+@border-light: #E5E6EB;
+@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
 @green-primary: #48C666;
 @green-dark: #2D8A45;
-@green-light: #E8FFEA;
+@link-color: #008CFF;
-@green-soft: rgba(72, 198, 102, 0.08);
+@link-hover: #0066CC;
-@text-dark: #1A2B3C;
-@text-muted: #6B7C8D;
-@text-light: #94A3B8;
-@bg-page: #F4F7F6;
-@bg-card: #FFFFFF;
-@border-light: rgba(0, 0, 0, 0.06);
-@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
-@shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
 
-// ========== 页面布局 ==========
+.dashboard-container {
-.gzt-page {
+  min-height: 100vh;
-  position: relative;
+  padding: 24px;
-  min-height: 100%;
-  padding: 28px 32px;
-  overflow: hidden;
   background: @bg-page;
 }
 
-.bg-decoration {
+// 主内容区域
-  position: absolute;
-  overflow: hidden;
-  pointer-events: none;
-  inset: 0;
-
-  .deco-circle {
-    position: absolute;
-    border-radius: 50%;
-    opacity: 0.5;
-
-    &--1 {
-      top: -120px;
-      right: -80px;
-      width: 400px;
-      height: 400px;
-      background: radial-gradient(circle, rgba(72, 198, 102, 0.12) 0%, transparent 70%);
-    }
-
-    &--2 {
-      bottom: -100px;
-      left: -100px;
-      width: 350px;
-      height: 350px;
-      background: radial-gradient(circle, rgba(45, 138, 69, 0.08) 0%, transparent 70%);
-    }
-
-    &--dots {
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
-      background-size: 24px 24px;
-    }
-  }
-}
-
-.gzt-container {
-  position: relative;
-  z-index: 1;
-  max-width: 1280px;
-  margin: 0 auto;
-}
-
-// ========== 第一行布局 ==========
-.top-row {
-  display: grid;
-  grid-template-columns: 1fr 300px;
-  gap: 20px;
-  margin-bottom: 24px;
-  animation: fadeSlideUp 0.5s ease backwards;
-}
-
-.left-column {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.right-column {
-  display: flex;
-  width: 300px;
-  flex-shrink: 0;
-}
-
-// ========== 欢迎区域 ==========
-.welcome-section {
-  display: flex;
-  padding: 20px 24px;
-  background: linear-gradient(135deg, #FFF 0%, #FAFFFE 50%, @green-soft 100%);
-  border: 1px solid rgba(72, 198, 102, 0.1);
-  border-radius: 16px;
-  box-shadow: @shadow-soft;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.welcome-left {
-  .welcome-badge {
-    display: inline-flex;
-    padding: 5px 12px;
-    margin-bottom: 8px;
-    font-size: 12px;
-    font-weight: 600;
-    color: @green-dark;
-    background: @green-light;
-    border: 1px solid rgba(72, 198, 102, 0.2);
-    border-radius: 20px;
-    align-items: center;
-    gap: 6px;
-
-    .t-icon {
-      font-size: 13px;
-    }
-  }
-
-  .welcome-title {
-    margin: 0 0 6px;
-    font-size: 24px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-    color: @text-dark;
-  }
-
-  .welcome-subtitle {
-    margin: 0;
-    font-size: 13px;
-    color: @text-muted;
-  }
-}
-
-.welcome-right {
-  .time-widget {
-    padding: 8px 12px;
-    text-align: right;
-    background: rgba(255, 255, 255, 0.8);
-    border: 1px solid @border-light;
-    border-radius: 8px;
-
-    .time-date {
-      margin-bottom: 2px;
-      font-size: 12px;
-      font-weight: 600;
-      color: @text-dark;
-    }
-
-    .time-weekday {
-      font-size: 11px;
-      color: @text-muted;
-    }
-  }
-}
-
-// ========== 统计卡片区域 ==========
-.stats-section {
-  animation: fadeSlideUp 0.5s ease backwards;
-  animation-delay: 0.1s;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-
-  .header-line {
-    width: 32px;
-    height: 4px;
-    background: linear-gradient(90deg, @green-primary, @green-dark);
-    border-radius: 2px;
-  }
-
-  .section-label {
-    font-size: 13px;
-    font-weight: 600;
-    letter-spacing: 1px;
-    color: @text-muted;
-    text-transform: uppercase;
-  }
-}
-
-.stats-grid {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-}
-
-// ========== 主要内容区 ==========
 .main-content {
   display: grid;
   grid-template-columns: 1fr 300px;
   gap: 24px;
-  animation: fadeSlideUp 0.5s ease backwards;
+  align-items: start;
-  animation-delay: 0.2s;
 }
 
-.left-panel {
+// 左侧内容区
-  display: flex;
+.content-left {
-  flex-direction: column;
-  gap: 24px;
-}
-
-.right-panel {
-  width: 300px;
-  flex-shrink: 0;
-}
-
-.panel-card {
-  overflow: hidden;
-  background: @bg-card;
-  border: 1px solid @border-light;
-  border-radius: 20px;
-  box-shadow: @shadow-card;
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 18px 24px 16px;
-  background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
-  border-bottom: 1px solid @border-light;
-
-  .header-icon {
-    display: flex;
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-    color: #fff;
-    background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
-    border-radius: 10px;
-    box-shadow: 0 4px 12px rgba(72, 198, 102, 0.3);
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-
-    &--account {
-      background: linear-gradient(135deg, #78909C 0%, #546E7A 100%);
-      box-shadow: 0 4px 12px rgba(120, 144, 156, 0.3);
-    }
-  }
-
-  .header-text {
-    flex: 1;
   min-width: 0;
-  }
+}
 
-  .panel-title {
+// 整块白色面板
+.left-panel {
+  padding: 20px;
+  background: @bg-card;
+  border-radius: 4px;
+  box-shadow: @shadow-soft;
+  overflow: hidden;
+}
+
+// 面板内的区块
+.panel-section {
+  // padding: 24px 28px;
+}
+
+// 分割线
+.section-divider {
+  height: 1px;
+  background: @border-light;
+}
+
+// 欢迎登录区块
+.welcome-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: 20px;
+
+  .header-left {
+    .welcome-title {
       margin: 0;
-    font-size: 16px;
+      font-size: 24px;
-    font-weight: 600;
+      font-weight: 700;
-    line-height: 1.4;
       color: @text-dark;
     }
+  }
 
-  .panel-desc {
+  .header-right {
-    margin: 2px 0 0;
+    .current-date {
-    font-size: 12px;
+      font-size: 14px;
-    line-height: 1.4;
+      font-weight: 500;
-    color: @text-light;
+      color: @text-muted;
+    }
   }
 }
 
-.panel-body {
+// 统计块
-  padding: 18px 24px;
+.stats-section {
-}
+  padding-top: 20px;
+  padding-bottom: 20px;
 
-// ========== 动画 ==========
+  .stats-row {
-@keyframes fadeSlideUp {
+    display: flex;
-  from {
+    gap: 0;
-    opacity: 0;
+
-    transform: translateY(16px);
+    & > :not(:last-child) {
+      padding-right: 16px;
+      margin-right: 16px;
+      border-right: 1px dashed @border-light;
     }
-  to {
-    opacity: 1;
-    transform: translateY(0);
   }
 }
 
-// ========== 响应式 ==========
+// 表格区块
-@media (max-width: 1024px) {
+.table-section {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+// 政策公告区块
+.policy-section {
+  padding-top: 20px;
+}
+
+// 右侧边栏
+.content-right {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 280px;
+  flex-shrink: 0;
+
+  .right-section {
+    padding: 20px;
+    background: @bg-card;
+    border-radius: 4px;
+    box-shadow: @shadow-soft;
+    overflow: hidden;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 4px;
+    padding-bottom: 16px;
+
+    .header-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: @text-dark;
+      line-height: 1.5;
+    }
+
+    .header-link {
+      font-size: 14px;
+      font-weight: 400;
+      color: @link-color;
+      text-decoration: none;
+      cursor: pointer;
+
+      &:hover {
+        color: @link-hover;
+      }
+    }
+  }
+
+  .section-divider {
+    height: 0;
+    margin: 20px 0;
+    border-top: 1px solid @border-light;
+  }
+}
+
+// 响应式
+@media (max-width: 1400px) {
+  .main-content {
+    grid-template-columns: 1fr 280px;
+  }
+
+  .content-right {
+    width: 280px;
+
+    .right-section {
+      padding: 16px;
+    }
+  }
+}
+
+@media (max-width: 1200px) {
   .main-content {
     grid-template-columns: 1fr;
   }
 
-  .stats-grid {
+  .content-right {
-    gap: 16px;
+    width: 100%;
+    flex-direction: row;
+
+    & > * {
+      flex: 1;
+    }
+  }
+
+  .stats-section .stats-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .policy-section {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 768px) {
-  .gzt-page {
+  .dashboard-container {
-    padding: 20px 16px;
+    padding: 16px;
   }
 
   .welcome-section {
     flex-direction: column;
-    padding: 20px;
+    gap: 12px;
   }
 
-  .welcome-right {
+  .stats-section .stats-row {
-    margin-top: 16px;
+    grid-template-columns: 1fr;
-
-    .time-widget {
-      text-align: left;
-    }
-  }
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
   }
 }
 </style>

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

@@ -103,7 +103,7 @@
           </div>
 
           <div class="capability-grid">
-            <div class="capability-card" v-for="(item, index) in capabilityList" :key="index">
+            <div class="capability-card" v-for="(item, index) in capabilityList" :key="index" @click="handleCapabilityClick(item)">
               <div class="capability-card-content">
                 <img :src="item.icon" :alt="item.name" class="capability-icon" />
                 <span class="capability-name">{{ item.name }}</span>
@@ -260,12 +260,12 @@ export default {
         // require('@/pages/index/assets/home-top-bg3.jpg'),
       ],
       capabilityList: [
-        { name: '碳核算平台', icon: require('@/pages/index/assets/home-thspt-icon.png') },
+        { name: '碳核算平台', icon: require('@/pages/index/assets/home-thspt-icon.png'), anchor: 'content-1' },
-        { name: '碳交易平台', icon: require('@/pages/index/assets/home-tjypt-icon.png') },
+        { name: '碳交易平台', icon: require('@/pages/index/assets/home-tjypt-icon.png'), anchor: 'content-3' },
-        { name: '碳认证机构', icon: require('@/pages/index/assets/home-trzjg-icon.png') },
+        { name: '碳认证机构', icon: require('@/pages/index/assets/home-trzjg-icon.png'), anchor: 'content-2' },
-        { name: '碳金融服务', icon: require('@/pages/index/assets/home-tjrfw-icon.png') },
+        { name: '碳金融服务', icon: require('@/pages/index/assets/home-tjrfw-icon.png'), anchor: 'content-4' },
-        { name: '碳技术咨询', icon: require('@/pages/index/assets/home-tjszx-icon.png') },
+        { name: '碳技术咨询', icon: require('@/pages/index/assets/home-tjszx-icon.png'), anchor: 'content-5' },
-        { name: '更多能力', icon: require('@/pages/index/assets/home-gdnl-icon.png') }
+        { name: '更多能力', icon: require('@/pages/index/assets/home-gdnl-icon.png'), anchor: '' }
       ],
       coreList: [
         {
@@ -460,6 +460,13 @@ export default {
       console.log('点击企业出海:', item.title);
       this.$message.info(`${item.title} - ${item.btnText}`);
     },
+    handleCapabilityClick(item) {
+      if (item.anchor) {
+        this.$router.push({ path: '/gxnlpt', query: { anchor: item.anchor } });
+      } else {
+        this.$router.push('/gxnlpt');
+      }
+    },
     // 行业动态点击
     handleNewsClick(item) {
       if (item.src) {

txw-mhzc-web/src/pages/index/views/yhzx/zhanghugl/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="change-password-page">
     <div class="page-header">
-      <div class="page-title">账号管理</div>
+      <div class="page-title">修改密码</div>
     </div>
     <div class="page-content">
       <t-form