feat: 新版首页

.claude/settings.local.json

@@ -4,7 +4,10 @@
       "Bash(yarn install:*)",
       "WebFetch(domain:)",
       "Bash(git checkout:*)",
-      "Bash(netstat -ano)"
+      "Bash(netstat -ano)",
+      "mcp__figma-developer-mcp__get_figma_data",
+      "mcp__figma-developer-mcp__download_figma_images",
+      "mcp__MiniMax__understand_image"
     ]
   }
 }

txw-mhzc-web/src/pages/index/router/routes.js

@@ -7,6 +7,9 @@ function home() {
 // function home2() {
 //   return import(/* webpackChunkName: "sbfdemo" */ '@/pages/index/views/home2/index.vue');
 // }
+function home3() {
+  return import(/* webpackChunkName: "sbfdemo" */ '@/pages/index/views/home3/index.vue');
+}
 function yhzx() {
   return import(/* webpackChunkName: "sbfdemo" */ '@/pages/index/views/glxtSy/glxtSy.vue');
 }
@@ -149,6 +152,19 @@ export default [
   //     needLogin: false,
   //   },
   // },
+  {
+    name: 'home3',
+    path: '/home3',
+    component: home3,
+    meta: {
+      title: '碳身份证',
+      isShowSideBar: false,
+      hasHome: true,
+      breadCrumbs: [{ title: '首页', to: '/home' }, { title: '碳身份证', to: '/home3' }],
+      disableBack: true,
+      needLogin: false,
+    },
+  },
   {
     name: 'yhzx',
     path: '/yhzx',

txw-mhzc-web/src/pages/index/views/home3/assets/core_driver_title_icon.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 0C14.2456 0 14.85 0.604422 14.85 1.35C14.85 2.09558 14.2456 2.7 13.5 2.7C7.53532 2.7 2.7 7.53532 2.7 13.5C2.7 19.4647 7.53532 24.3 13.5 24.3C19.4647 24.3 24.3 19.4647 24.3 13.5C24.3 12.7544 24.9044 12.15 25.65 12.15C26.3956 12.15 27 12.7544 27 13.5C27 20.9558 20.9558 27 13.5 27C6.04415 27 0 20.9558 0 13.5C0 6.04415 6.04415 0 13.5 0ZM13.5 5.4C14.2456 5.4 14.85 6.00442 14.85 6.75C14.85 7.49557 14.2456 8.09999 13.5 8.09999C10.5177 8.09999 8.09999 10.5177 8.09999 13.5C8.09999 16.4823 10.5177 18.9 13.5 18.9C16.4823 18.9 18.9 16.4823 18.9 13.5C18.9 12.7544 19.5044 12.15 20.25 12.15C20.9956 12.15 21.6 12.7544 21.6 13.5C21.6 17.9735 17.9735 21.6 13.5 21.6C9.02648 21.6 5.4 17.9735 5.4 13.5C5.4 9.02648 9.02648 5.4 13.5 5.4ZM22.3712 0.135796C22.744 0.13581 23.0461 0.438061 23.0462 0.810796V3.28008C23.0466 3.65246 23.3488 3.95369 23.7212 3.95376H26.1892C26.5618 3.95376 26.8639 4.25621 26.8642 4.62875V5.86406L24.3144 8.41376C23.8083 8.9197 23.1212 9.20462 22.4055 9.20478H19.7055L14.4544 14.4544C13.9273 14.9815 13.0727 14.9816 12.5455 14.4544C12.0186 13.9273 12.0185 13.0726 12.5455 12.5455L17.7965 7.2958V4.5958C17.7965 3.88005 18.0803 3.1931 18.5862 2.68681L21.1372 0.135796H22.3712Z" fill="#222222"/>
+</svg>

txw-mhzc-web/src/pages/index/views/home3/components/Footer.vue

@@ -0,0 +1,180 @@
+<template>
+  <footer class="footer">
+    <div class="footer-container">
+      <!-- 上部信息区 -->
+      <div class="footer-top">
+        <div class="footer-column footer-column-1">
+          <div class="column-title">指导单位</div>
+          <div class="column-content">
+            <p>中国钢铁工业协会</p>
+            <p>中国石油和化学工业联合会</p>
+            <p>中国建筑材料联合会</p>
+          </div>
+        </div>
+
+        <div class="footer-column footer-column-2">
+          <div class="column-title">联系我们</div>
+          <div class="column-content">
+            <p>客服电话：400-888-8888</p>
+            <p>商务合作：business@tanxin.com</p>
+            <p>公司地址：北京市朝阳区建国路88号</p>
+          </div>
+        </div>
+
+        <div class="footer-column footer-column-3">
+          <div class="column-title">微信公众号</div>
+          <div class="qrcode-box">
+            <div class="qrcode"></div>
+          </div>
+        </div>
+
+        <div class="footer-column footer-column-4">
+          <div class="column-title">快捷链接</div>
+          <div class="column-content footer-links">
+            <div class="link-item" @click="goPage('/home3')">首页</div>
+            <div class="link-item" @click="goPage('/qych')">企业出海</div>
+            <div class="link-item" @click="goPage('/hyzt')">行业专题</div>
+            <div class="link-item" @click="goPage('/tfwsc')">服务中心</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 下部版权信息 -->
+      <div class="footer-bottom">
+        <div class="footer-bottom-content">
+          <p class="copyright">Copyright © 2024 可信碳信息网 版权所有</p>
+          <p class="icp">京ICP备12345678号-1</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  methods: {
+    goPage(path) {
+      if (path.startsWith('/')) {
+        this.$router.push(path);
+      } else {
+        window.location.href = path;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.footer {
+  background: #1a1a2e;
+  color: #fff;
+  padding: 60px 0 30px;
+}
+
+.footer-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+}
+
+.footer-top {
+  display: grid;
+  grid-template-columns: 1.2fr 1.5fr 1fr 1fr;
+  gap: 60px;
+  padding-bottom: 50px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-column {
+  .column-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    padding-left: 12px;
+    border-left: 3px solid #00b42a;
+    color: #fff;
+  }
+
+  .column-content {
+    p {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 28px;
+      margin: 0;
+    }
+  }
+
+  .qrcode-box {
+    .qrcode {
+      width: 120px;
+      height: 120px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+    }
+  }
+
+  &.footer-links {
+    .link-item {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 32px;
+      cursor: pointer;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: #00b42a;
+      }
+    }
+  }
+}
+
+.footer-bottom {
+  padding-top: 30px;
+}
+
+.footer-bottom-content {
+  text-align: center;
+
+  .copyright {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.5);
+    margin: 0 0 8px 0;
+  }
+
+  .icp {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.3);
+    margin: 0;
+  }
+}
+
+// 响应式适配
+@media (max-width: 1024px) {
+  .footer-top {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 40px;
+  }
+}
+
+@media (max-width: 768px) {
+  .footer-container {
+    padding: 0 20px;
+  }
+
+  .footer-top {
+    grid-template-columns: 1fr;
+    gap: 30px;
+    padding-bottom: 30px;
+  }
+
+  .footer-column {
+    .qrcode-box {
+      .qrcode {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+}
+</style>

txw-mhzc-web/src/pages/index/views/home3/components/NavBar.vue

@@ -0,0 +1,351 @@
+<template>
+  <nav class="navbar" :class="{ 'navbar-scrolled': isScrolled }">
+    <div class="navbar-container">
+      <!-- 左侧：Logo + 标题 -->
+      <div class="navbar-left">
+        <div class="logo">
+          <img src="@/pages/index/assets/logo.png" alt="可信碳信息网" class="logo-icon" />
+          <img src="@/pages/index/assets/logo-name.png" alt="可信碳信息网" class="logo-img" />
+        </div>
+      </div>
+
+      <!-- 中间：菜单 -->
+      <div class="navbar-menu">
+        <div
+          v-for="(item, index) in menuItems"
+          :key="index"
+          class="menu-item"
+          :class="{ 'menu-item-active': activeMenu === item.name, 'menu-item-home': index === 0 }"
+          @click="handleMenuClick(item)"
+        >
+          <img v-if="index === 0" src="@/pages/index/assets/nav-home.png" alt="" class="menu-icon" />
+          {{ item.name }}
+        </div>
+      </div>
+
+      <!-- 右侧：工作台 + 登录 -->
+      <div class="navbar-right">
+        <div class="workbench-btn" @click="goWorkbench">
+          <img src="@/pages/index/assets/home-gzt-icon.png" alt="" class="gzt-icon" />
+          <span>工作台</span>
+        </div>
+        <div class="login-btn" @click="goLogin">
+          {{ isLoggedIn ? '用户中心' : '激活  |  登录' }}
+        </div>
+      </div>
+
+      <!-- 移动端菜单按钮 -->
+      <div class="mobile-menu-btn" @click="toggleMobileMenu">
+        <div class="hamburger" :class="{ 'hamburger-open': mobileMenuOpen }">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 移动端菜单 -->
+    <div class="mobile-menu" :class="{ 'mobile-menu-open': mobileMenuOpen }">
+      <div class="mobile-menu-content">
+        <div
+          v-for="(item, index) in menuItems"
+          :key="index"
+          class="mobile-menu-item"
+          @click="handleMenuClick(item)"
+        >
+          {{ item.name }}
+        </div>
+        <div class="mobile-menu-divider"></div>
+        <div class="mobile-menu-item" @click="goWorkbench">工作台</div>
+        <div class="mobile-menu-item" @click="goLogin">{{ isLoggedIn ? '用户中心' : '激活' }}</div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'NavBar',
+  data() {
+    return {
+      isScrolled: false,
+      mobileMenuOpen: false,
+      activeMenu: '首页',
+      isLoggedIn: false,
+      menuItems: [
+        { name: '首页', path: '/home3' },
+        { name: '碳证中心', path: '/home3' },
+        { name: '服务中心', path: '/home3' },
+        { name: '共性能力', path: '/home3' },
+        { name: '企业出海', path: '/qych' },
+        { name: '行业专题', path: '/hyzt' }
+      ]
+    };
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll);
+    this.checkLoginStatus();
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+  methods: {
+    handleScroll() {
+      this.isScrolled = window.scrollY > 20;
+    },
+    toggleMobileMenu() {
+      this.mobileMenuOpen = !this.mobileMenuOpen;
+    },
+    handleMenuClick(item) {
+      this.activeMenu = item.name;
+      this.mobileMenuOpen = false;
+      if (item.path.startsWith('/')) {
+        this.$router.push(item.path);
+      } else {
+        window.location.href = item.path;
+      }
+    },
+    goWorkbench() {
+      this.mobileMenuOpen = false;
+      this.$router.push('/yhzx/gzt');
+    },
+    goLogin() {
+      this.mobileMenuOpen = false;
+      if (this.isLoggedIn) {
+        this.$router.push('/yhzx');
+      } else {
+        window.location.href = '/view/mhzc/login';
+      }
+    },
+    checkLoginStatus() {
+      const sfdl = window.sessionStorage.getItem('sfdl');
+      this.isLoggedIn = !!sfdl;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid #fff;
+  border-radius: 0 0 12px 12px;
+  transition: all 0.3s ease;
+
+  &.navbar-scrolled {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.navbar-container {
+  max-width: 1440px;
+  margin: 0 auto;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 120px;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+
+    .logo-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 100px;
+      overflow: hidden;
+    }
+
+    .logo-img {
+      height: 34px;
+      width: auto;
+    }
+  }
+}
+
+.navbar-menu {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  .menu-item {
+    padding: 0 8px;
+    height: 64px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #003B1A;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &.menu-item-active {
+      font-weight: 500;
+    }
+  }
+
+  .menu-item:first-child {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    border-bottom: 3px solid #fff;
+    padding: 0;
+    width: 96px;
+    gap: 10px;
+
+    &.menu-item-active {
+      border-bottom: 3px solid #003B1A;
+    }
+
+    .menu-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+
+  .workbench-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #003B1A;
+    font-size: 16px;
+
+    .gzt-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .login-btn {
+    cursor: pointer;
+    color: #003B1A;
+    font-size: 16px;
+    font-weight: 400;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: #00b42a;
+    }
+  }
+}
+
+.mobile-menu-btn {
+  display: none;
+  padding: 8px;
+
+  .hamburger {
+    width: 24px;
+    height: 18px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    span {
+      display: block;
+      width: 100%;
+      height: 2px;
+      background: #333;
+      border-radius: 1px;
+      transition: all 0.3s ease;
+    }
+
+    &.hamburger-open {
+      span:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px);
+      }
+      span:nth-child(2) {
+        opacity: 0;
+      }
+      span:nth-child(3) {
+        transform: rotate(-45deg) translate(6px, -6px);
+      }
+    }
+  }
+}
+
+.mobile-menu {
+  display: none;
+  position: fixed;
+  top: 64px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(12px);
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+
+  &.mobile-menu-open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .mobile-menu-content {
+    padding: 20px;
+
+    .mobile-menu-item {
+      padding: 16px;
+      font-size: 18px;
+      color: #333;
+      border-bottom: 1px solid #eee;
+      cursor: pointer;
+
+      &:hover {
+        color: #00b42a;
+      }
+    }
+
+    .mobile-menu-divider {
+      height: 20px;
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 1024px) {
+  .navbar-menu {
+    display: none;
+  }
+
+  .navbar-right {
+    display: none;
+  }
+
+  .mobile-menu-btn {
+    display: block;
+  }
+
+  .mobile-menu {
+    display: block;
+  }
+}
+</style>

txw-mhzc-web/src/pages/index/views/home3/figma-structure.md

@@ -0,0 +1,73 @@
+# Figma设计稿结构
+
+| 字段 | 值 |
+|------|-----|
+| 文件Key | pAhXcxXvsz0xswPn817sFf |
+| Node ID | 2345-106 |
+| Root ID | 2345:106 |
+| Root Name | 001 |
+| Root Type | FRAME |
+| 子节点数量 | 58 |
+
+## 页面节点列表
+
+| 序号 | Node ID | 类型 | 名称/内容 |
+|------|---------|------|---------|
+| 1 | 2345:107 | GROUP | Group 7 |
+| 2 | 2345:116 | RECTANGLE | Rectangle 118 |
+| 3 | 2345:123 | RECTANGLE | 轮播图2 |
+| 4 | 2345:125 | RECTANGLE | Rectangle 83 |
+| 5 | 2345:160 | FRAME | Frame 124 |
+| 6 | 2345:171 | TEXT | 可信碳信息网 |
+| 7 | 2345:172 | TEXT | 让中国的每一个碳都拥有独一无二的可信数字身份 |
+| 8 | 2345:173 | FRAME | Frame 97 |
+| 9 | 2345:177 | RECTANGLE | Rectangle 84 |
+| 10 | 2345:178 | TEXT | 依托块链网络基础底座上海枢纽，确保每一笔碳数据拥有唯一的“链上基因”，实现国家级 |
+| 11 | 2345:179 | TEXT | 为企业构建唯一的链上“身份”，集成资质核验证、资产托管与信用评级，打造绿色经济的 |
+| 12 | 2345:180 | TEXT | 打破碳数据孤岛，支持从生产端到交易端的全链路数据锚定，让碳信用在多场景下实现秒级 |
+| 13 | 2345:181 | TEXT | 服务企业出海、国际互认。直击跨境合规与碳交易撮合痛点，通过智能合约实现供需精准匹 |
+| 14 | 2345:182 | GROUP | Group 12 |
+| 15 | 2345:187 | RECTANGLE | Rectangle 80 |
+| 16 | 2345:188 | RECTANGLE | Rectangle 86 |
+| 17 | 2345:189 | FRAME | Frame 85 |
+| 18 | 2345:191 | FRAME | Frame 87 |
+| 19 | 2345:193 | FRAME | Frame 86 |
+| 20 | 2345:195 | FRAME | Frame 88 |
+| 21 | 2345:197 | RECTANGLE | Rectangle 81 |
+| 22 | 2345:198 | RECTANGLE | Rectangle 87 |
+| 23 | 2345:199 | RECTANGLE | Rectangle 82 |
+| 24 | 2345:200 | RECTANGLE | Rectangle 88 |
+| 25 | 2345:201 | TEXT | 碳数字身份证 |
+| 26 | 2345:202 | TEXT | 国家可信碳链 |
+| 27 | 2345:203 | TEXT | 绿色服务 |
+| 28 | 2345:204 | FRAME | Frame 89 |
+| 29 | 2345:206 | FRAME | Frame 93 |
+| 30 | 2345:208 | FRAME | Frame 90 |
+| 31 | 2345:210 | FRAME | Frame 94 |
+| 32 | 2345:212 | FRAME | Frame 91 |
+| 33 | 2345:214 | FRAME | Frame 95 |
+| 34 | 2345:216 | FRAME | Frame 92 |
+| 35 | 2345:218 | FRAME | Frame 96 |
+| 36 | 2345:220 | GROUP | Group 5 |
+| 37 | 2345:262 | RECTANGLE | 4 1 |
+| 38 | 2345:263 | RECTANGLE | 3 1 |
+| 39 | 2345:264 | RECTANGLE | 2 27 |
+| 40 | 2345:265 | RECTANGLE | 1 9 |
+| 41 | 2345:266 | FRAME | Frame 136 |
+| 42 | 2345:268 | FRAME | Frame 138 |
+| 43 | 2345:270 | FRAME | Frame 139 |
+| 44 | 2345:272 | FRAME | Frame 137 |
+| 45 | 2345:274 | TEXT | 国家区块链上海枢纽 |
+| 46 | 2345:275 | TEXT | 碳数字身份体系 |
+| 47 | 2345:276 | TEXT | 碳信用--碳数据 |
+| 48 | 2345:277 | TEXT | 精准服务企业走出去 |
+| 49 | 2345:278 | GROUP | Group 11 |
+| 50 | 2345:319 | GROUP | Group 16 |
+| 51 | 2345:384 | GROUP | Group 17 |
+| 52 | 2345:417 | FRAME | 导航栏 |
+| 53 | 2345:452 | RECTANGLE | cb80bb64c553e5f5 1 |
+| 54 | 2345:453 | RECTANGLE | cb80bb64c553e5f5 2 |
+| 55 | 2345:454 | RECTANGLE | cb80bb64c553e5f5 3 |
+| 56 | 2345:455 | RECTANGLE | cb80bb64c553e5f5 4 |
+| 57 | 2345:456 | GROUP | Group 21 |
+| 58 | 2345:460 | RECTANGLE | cb80bb64c553e5f5 2 |

txw-mhzc-web/vue.config.js

@@ -286,26 +286,26 @@ module.exports = {
     // 会误伤 SPA 路由 /view/mhzc/...，刷新时整页请求被转发到后端导致 Proxy error。必须用 ^ 限定为路径前缀。
     proxy: {
       '^/sso': {
-        target: 'http://localhost:9301',
+        // target: 'http://localhost:9301',
-        // target: 'http://carbon.liantu.tech',
+        target: 'http://carbon.liantu.tech',
         // target: 'http://10.23.20.13:94/',
         changeOrigin: true,
       },
       '^/mhzc': {
-        target: 'http://localhost:9302',
+        // target: 'http://localhost:9302',
-        // target: 'http://carbon.liantu.tech',
+        target: 'http://carbon.liantu.tech',
         // target: 'http://10.23.20.13:94/',
         changeOrigin: true,
       },
       '^/gxzx': {
-        target: 'http://localhost:9303',
+        // target: 'http://localhost:9303',
-        // target: 'http://carbon.liantu.tech',
+        target: 'http://carbon.liantu.tech',
         // target: 'http://10.23.20.13:94/',
         changeOrigin: true,
       },
       '^/yygl': {
-        target: 'http://localhost:20010',
+        // target: 'http://localhost:20010',
-        // target: 'http://carbon.liantu.tech',
+        target: 'http://carbon.liantu.tech',
         // target: 'http://10.23.20.13:94/',
         changeOrigin: true,
       },