diff --git a/f/web-kboss/package.json b/f/web-kboss/package.json
index 5081730..703ab73 100644
--- a/f/web-kboss/package.json
+++ b/f/web-kboss/package.json
@@ -98,6 +98,7 @@
     "lint-staged": "8.1.5",
     "mockjs": "1.0.1-beta3",
     "plop": "2.3.0",
+    "postcss": "^8.5.26",
     "postcss-pxtorem": "^5.0.0",
     "runjs": "4.3.2",
     "sass": "1.39.0",
@@ -106,6 +107,7 @@
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.0",
+    "tailwindcss": "^2.2.19",
     "vue-happy-scroll": "^2.1.1",
     "vue-template-compiler": "2.6.10",
     "webpack": "^4.47.0"
diff --git a/f/web-kboss/src/components/FloatingBox/FloatingBox.vue b/f/web-kboss/src/components/FloatingBox/FloatingBox.vue
index ce2ef33..cca8240 100644
--- a/f/web-kboss/src/components/FloatingBox/FloatingBox.vue
+++ b/f/web-kboss/src/components/FloatingBox/FloatingBox.vue
@@ -133,11 +133,18 @@ export default {
   },
   computed: {
     shouldShowFloatingConsult() {
+      const path = this.$route && this.$route.path ? this.$route.path : ''
+      // 兼容 hash 模式部署在外部域名的情况（例如 www.ncmatch.cn）
+      const hashPath = (window.location.hash || '').replace(/^#/, '')
       const isHomePage = [
         '/homePage/index',
-        '/homePage/indexLast',
-        '/ncmatchHome/index'
-      ].includes(this.$route.path)
+        // '/homePage/indexLast',
+
+      ].some(p => path === p || hashPath === p || hashPath.startsWith(p + '/'))
+      // ncmatch 子站单独部署场景下，不显示云宝
+      const isNcmatchSubSite = window.location.host === 'www.ncmatch.cn'
+        || window.location.host.endsWith('.ncmatch.cn')
+      if (isNcmatchSubSite) return false
       return isHomePage || this.orgType === '2' || this.orgType === '3' || !this.userid
     }
   },
diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js
index f4ed06b..786d15f 100644
--- a/f/web-kboss/src/router/index.js
+++ b/f/web-kboss/src/router/index.js
@@ -120,6 +120,16 @@ export const constantRoutes = [
         title: 'H5合同智能审查案例',
         component: () => import('@/views/H5/contractCase/index.vue'),
         meta: { title: '合同智能审查', fullPath: '/h5HomePage/contract-case' }
+      },
+      {
+        path: 'consultDialogFull',
+        name: 'consultDialogFull',
+        title: 'H5咨询对话',
+        component: () => import('@/views/H5/consultDialogFullPreview/index.vue'),
+        meta: {
+          title: 'H5咨询对话',
+          fullPath: '/h5HomePage/consultDialogFull'
+        }
       }
     ]
   },
@@ -283,19 +293,28 @@ export const constantRoutes = [
         name: 'ncmatchSocietyNews',
         meta: { title: '政社快讯', fullPath: '/ncmatch/societyNews', noCache: true }
       },
+      // token市集
       {
         path: 'tokenMarket',
-        component: () => import('@/views/product/allProduct/index.vue'),
-        name: 'homePageTokenMarket',
+        component: () => import('@/views/Ncmatch/token.vue'),
+        name: 'ncmatchTokenMarket',
         hidden: true,
-        meta: { title: 'TOKEN市集', onCache: true }
+        meta: { title: 'TOKEN市集', fullPath: '/ncmatch/tokenMarket', noCache: true }
+      },
+      // 云枢基座
+      {
+        path: 'cloudHub',
+        component: () => import('@/views/Ncmatch/CloudHub.vue'),
+        name: 'ncmatchCloudHub',
+        hidden: true,
+        meta: { title: '云枢基座', fullPath: '/ncmatch/cloudHub', noCache: true }
       },
       {
         path: 'supplyAndDemandSquare',
-        component: () => import('@/views/homePage/ncmatch/supplyAndDemandSquare/index.vue'),
+        component: () => import('@/views/Ncmatch/supply_demand.vue'),
         name: 'supplyAndDemandSquare',
         hidden: true,
-        meta: { title: '算力供需广场', fullPath: '/ncmatch/supplyAndDemandSquare' }
+        meta: { title: '供需广场', fullPath: '/ncmatch/supplyAndDemandSquare' }
       },
 
       {
diff --git a/f/web-kboss/src/views/Ncmatch/CloudHub.vue b/f/web-kboss/src/views/Ncmatch/CloudHub.vue
new file mode 100644
index 0000000..0456e88
--- /dev/null
+++ b/f/web-kboss/src/views/Ncmatch/CloudHub.vue
@@ -0,0 +1,627 @@
+<template>
+  <div class="cloud-hub-page">
+    <!-- 内容区域 -->
+    <div class="hub-content">
+      <!-- 左侧分类导航 -->
+      <div class="hub-sidebar">
+        <div class="sidebar-section">
+          <!-- 搜索框 -->
+          <div class="input">
+            <el-input
+              v-model="searchKeyword"
+              class="product-search"
+              clearable
+              prefix-icon="el-icon-search"
+              placeholder="搜索产品名称、类型或描述"
+            ></el-input>
+          </div>
+
+          <!-- 厂家筛选 -->
+          <div class="vendor-filter">
+            <!-- <div
+              class="vendor-item"
+              :class="{ active: !activeVendor }"
+              @click="switchVendor(null)"
+            >
+              <span class="vendor-text">全部</span>
+            </div> -->
+            <div
+              v-for="v in vendorOptions"
+              :key="v.key"
+              class="vendor-item"
+              :class="{ active: activeVendor === v.key }"
+              @click="switchVendor(v.key)"
+            >
+              <span class="vendor-text">{{ v.label }}</span>
+            </div>
+          </div>
+
+          <div class="section-title">产品分类</div>
+          <div class="category-chips">
+            <div
+              v-for="chip in displayedChips"
+              :key="chip.key"
+              class="chip-item"
+              :class="{ active: activeChipKey === chip.key }"
+              @click="switchChip(chip)"
+            >
+              <span class="chip-name">
+                <span v-if="chip.secTitle" class="chip-vendor-text">{{ chip.secTitle }}</span>
+                {{ chip.thrTitle }}
+              </span>
+              <span class="chip-count">{{ chip.count }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧产品网格 -->
+      <div class="hub-main">
+        <div v-if="loading" class="loading-state">
+          <i class="el-icon-loading"></i>
+          <span>加载中...</span>
+        </div>
+
+        <div v-else-if="displayedProducts.length" class="product-grid">
+          <div
+            v-for="product in displayedProducts"
+            :key="product.id"
+            class="product-card"
+            @click="handleProductClick(product)"
+          >
+            <!-- 卡片头部：图标 + 标题 + 类型 -->
+            <div class="product-header">
+              <div class="product-icon">
+                <img
+                  v-if="product.iconUrl && !iconLoadFailed[product.id]"
+                  :src="product.iconUrl"
+                  :alt="product.name"
+                  @error="handleIconError(product.id)"
+                >
+                <i v-else class="el-icon-cloudy"></i>
+              </div>
+              <div class="product-title">
+                <h3 class="product-name">{{ product.name }}</h3>
+                <span class="product-type">{{ product.type || '百度云' }}</span>
+              </div>
+            </div>
+
+            <!-- 产品描述 -->
+            <div class="product-desc">{{ product.description }}</div>
+
+            <!-- 卡片底部：状态标签 + 查看详情按钮 -->
+            <div class="product-footer">
+              <span class="product-status">
+                {{ getStatusLabel(product) }}
+              </span>
+              <button class="detail-btn" @click.stop="handleDetailClick(product)">
+                查看详情
+                <i class="el-icon-arrow-right"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="empty-state">
+          <div class="empty-icon">
+            <i class="el-icon-box"></i>
+          </div>
+          <p class="empty-text">{{ searchKeyword ? '没有匹配的产品' : '暂无产品数据' }}</p>
+          <span>可以切换分类或调整搜索关键词后再试。</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reqNavList } from "@/api/newHome";
+
+export default {
+  name: "BaseCloudProducts",
+  data() {
+    return {
+      panelData: [],
+      activeChipKey: null,
+      activeVendor: null, // 当前选中的 secTitle，null 表示全部
+      loading: false,
+      iconLoadFailed: {},
+      searchKeyword: '',
+    };
+  },
+  computed: {
+    // 获取"基础云"分类
+    jichuyunCategory() {
+      return this.panelData.find(item => item.firTitle === '基础云') || null;
+    },
+    // 厂商列表（从接口数据 secMenu.secTitle 动态生成）
+    vendorOptions() {
+      if (!this.jichuyunCategory || !this.jichuyunCategory.secMenu) return [];
+      // 去重并保留原始顺序
+      const seen = new Set();
+      const list = [];
+      this.jichuyunCategory.secMenu.forEach(sec => {
+        if (sec.secTitle && !seen.has(sec.secTitle)) {
+          seen.add(sec.secTitle);
+          list.push({ key: sec.secTitle, label: sec.secTitle });
+        }
+      });
+      return list;
+    },
+    // 合并"基础云"下所有云厂商的三级分类为 chips
+    categoryChips() {
+      if (!this.jichuyunCategory || !this.jichuyunCategory.secMenu) return [];
+      const chips = [];
+      this.jichuyunCategory.secMenu.forEach(sec => {
+        if (!sec.thrMenu || !sec.thrMenu.length) return;
+        sec.thrMenu
+          .filter(thr => thr.value && thr.value.length > 0)
+          .forEach(thr => {
+            chips.push({
+              key: thr.id || `${sec.id}_${thr.thrTitle}`,
+              thrTitle: thr.thrTitle,
+              secTitle: sec.secTitle,
+              secId: sec.id,
+              count: thr.value.length,
+              products: thr.value,
+            });
+          });
+      });
+      return chips;
+    },
+    // 按厂商过滤后的分类 chips
+    displayedChips() {
+      if (!this.activeVendor) return this.categoryChips;
+      return this.categoryChips.filter(chip => chip.secTitle === this.activeVendor);
+    },
+    currentProducts() {
+      if (!this.activeChipKey) {
+        return this.allProducts;
+      }
+      const chip = this.categoryChips.find(c => c.key === this.activeChipKey);
+      return chip ? chip.products : [];
+    },
+    // 搜索过滤后的产品
+    displayedProducts() {
+      const keyword = this.searchKeyword.trim().toLowerCase();
+      if (!keyword) return this.currentProducts;
+      return this.currentProducts.filter(product => {
+        return [
+          product.name,
+          product.type,
+          product.description
+        ].join(' ').toLowerCase().includes(keyword);
+      });
+    },
+    allProducts() {
+      if (!this.categoryChips.length) return [];
+      return this.categoryChips.reduce((acc, chip) => acc.concat(chip.products), []);
+    },
+  },
+  async mounted() {
+    await this.loadNavData();
+    if (this.categoryChips.length) {
+      this.activeChipKey = this.categoryChips[0].key;
+    }
+  },
+  methods: {
+    async loadNavData() {
+      this.loading = true;
+      try {
+        const url_link = window.location.href.split('#')[0] + '#' + (window.location.pathname || '/homePage/index');
+        const response = await reqNavList({ url_link });
+        if (response.status && response.data && response.data.product_service) {
+          this.panelData = response.data.product_service;
+        }
+      } catch (error) {
+        console.error('加载基础云产品数据失败:', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    switchChip(chip) {
+      this.activeChipKey = chip.key;
+    },
+    // 切换云厂商
+    switchVendor(secTitle) {
+      this.activeVendor = secTitle;
+      // 切换厂商后重置已选分类到当前厂商下的第一个分类
+      const chips = secTitle
+        ? this.categoryChips.filter(c => c.secTitle === secTitle)
+        : this.categoryChips;
+      this.activeChipKey = chips.length ? chips[0].key : null;
+    },
+    // 计算状态标签文本
+    getStatusLabel(product) {
+      if (product.label) {
+        const first = product.label.split(',')[0].trim();
+        if (first) return first;
+      }
+      return '稳定服务';
+    },
+    // 点击卡片整体（跳转产品详情）
+    handleProductClick(product) {
+      console.log('点击产品:', product);
+      const userId = sessionStorage.getItem('userId');
+      if (product.url) {
+        if (userId) {
+          localStorage.setItem('redirectUrl', product.url);
+          localStorage.setItem('userRescourseUrl', product.listUrl);
+          this.$router.push({
+            name: 'baiduProductShow',
+            params: {
+              listUrl: product.listUrl,
+              url: product.url,
+            },
+          });
+        } else {
+          window.dispatchEvent(new Event('kboss-open-login-dialog'));
+        }
+      }
+    },
+    // 点击“查看详情”按钮（打开文档或外部链接）
+    handleDetailClick(product) {
+      if (product.listUrl) {
+        window.open(product.listUrl, '_blank');
+      } else if (product.url) {
+        window.open(product.url, '_blank');
+      }
+    },
+    handleIconError(productId) {
+      this.$set(this.iconLoadFailed, productId, true);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cloud-hub-page {
+  margin: 0 auto;
+  padding: 0 24px 40px;
+  background: #f8f9fb;
+  min-height: calc(100vh - 80px);
+}
+
+.hub-content {
+  display: flex;
+  gap: 20px;
+  padding-top: 24px;
+}
+
+/* ============= 左侧分类导航 ============= */
+.hub-sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  
+  .sidebar-section {
+    background: #fff;
+    height: calc(100vh - 130px);
+    border-radius: 10px;
+    padding: 16px;
+    border: 1px solid #eef0f5;
+  }
+
+  .input {
+    margin-bottom: 12px;
+
+    .product-search {
+      /deep/ .el-input__inner {
+        height: 36px;
+        line-height: 36px;
+        border-radius: 10px;
+        background: #f6f8fc;
+        border-color: #e8edf5;
+      }
+    }
+  }
+
+  /* 厂家筛选区域 */
+  .vendor-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 12px;
+  }
+
+  .vendor-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border-radius: 16px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #6b7890;
+    background: #f0f4f8;
+    border: 1px solid transparent;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: currentColor;
+    }
+
+    &.active {
+      background: #eef3ff;
+      border-color: #1e6fff;
+      color: #1e6fff;
+      font-weight: 600;
+    }
+  }
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1a1a1a;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .category-chips {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .chip-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+
+    &:hover {
+      background: rgba(30, 111, 255, 0.06);
+      color: #1e6fff;
+    }
+
+    &.active {
+      background: rgba(30, 111, 255, 0.1);
+      border-color: rgba(30, 111, 255, 0.2);
+      color: #1e6fff;
+      font-weight: 600;
+
+      .chip-count {
+        background: #1e6fff;
+        color: #fff;
+      }
+    }
+
+    .chip-name {
+      font-size: 13px;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .chip-vendor-text {
+      display: inline-block;
+      font-size: 11px;
+      font-weight: 600;
+      color: #1e6fff;
+      background: #eef3ff;
+      padding: 1px 6px;
+      border-radius: 4px;
+      flex-shrink: 0;
+      margin-right: 4px;
+    }
+
+    .chip-count {
+      background: #e8f0fe;
+      color: #6b7890;
+      font-size: 11px;
+      padding: 1px 7px;
+      border-radius: 10px;
+      min-width: 20px;
+      text-align: center;
+    }
+  }
+}
+
+/* ============= 右侧主区域 ============= */
+.hub-main {
+  flex: 1;
+  min-width: 0;
+
+  .loading-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: 200px;
+    color: #6b7890;
+    font-size: 14px;
+  }
+
+  .product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+  }
+
+  /* ===== 产品卡片新样式（参考用户提供） ===== */
+  .product-card {
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    padding: 20px;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+    min-height: 178px;
+    overflow: hidden;
+    border-color: #edf1f7;
+    border-radius: 18px;
+    box-shadow: 0 10px 26px rgba(31, 45, 61, 0.06);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    // 右上角大圆装饰（默认显示）
+    &::before {
+      content: '';
+      position: absolute;
+      top: -40px;
+      right: -40px;
+      width: 110px;
+      height: 110px;
+      border-radius: 50%;
+      background: #f0f6ff;
+      pointer-events: none;
+    }
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 16px 32px rgba(31, 45, 61, 0.1);
+      border-color: #1e6fff;
+    }
+
+    .product-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+
+      .product-icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+
+        i {
+          font-size: 32px;
+          color: #1e6fff;
+        }
+      }
+
+      .product-title {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+
+        .product-name {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #111827;
+          line-height: 1.3;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .product-type {
+          font-size: 12px;
+          color: #6b7890;
+          background: #f0f4f8;
+          padding: 1px 8px;
+          border-radius: 10px;
+          display: inline-block;
+          width: fit-content;
+        }
+      }
+    }
+
+    .product-desc {
+      font-size: 14px;
+      color: #4a5568;
+      line-height: 1.6;
+      margin: 4px 0 8px;
+      flex: 1;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .product-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      padding-top: 12px;
+      border-top: 1px solid #f0f4f8;
+
+      .product-status {
+        font-size: 13px;
+        color: #10b981;
+        background: #ecfdf5;
+        padding: 2px 12px;
+        border-radius: 12px;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+
+        &::before {
+          content: '';
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: #10b981;
+        }
+      }
+
+      .detail-btn {
+        background: #1e6fff;
+        border: none;
+        color: #fff;
+        font-size: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 6px 12px;
+        border-radius: 4px;
+        transition: background 0.2s;
+
+        &:hover {
+          background: #0d5ae0;
+        }
+
+        i {
+          font-size: 12px;
+          transition: transform 0.2s;
+        }
+
+        &:hover i {
+          transform: translateX(2px);
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 60px 20px;
+
+    .empty-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+      color: #a0aec0;
+    }
+
+    .empty-text {
+      color: #999;
+      font-size: 14px;
+      margin: 0 0 6px;
+    }
+
+    span {
+      color: #b0b8c4;
+      font-size: 12px;
+    }
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/Ncmatch/OpcJoinDialog.vue b/f/web-kboss/src/views/Ncmatch/OpcJoinDialog.vue
index 92821e0..86cdff3 100644
--- a/f/web-kboss/src/views/Ncmatch/OpcJoinDialog.vue
+++ b/f/web-kboss/src/views/Ncmatch/OpcJoinDialog.vue
@@ -22,212 +22,281 @@
       </button>
     </header>
 
-    <!-- 主体 -->
+    <!-- 主体（可滚动） -->
     <main class="dialog-body">
-      <el-form ref="form" :model="formData" :rules="rules" label-position="top" class="opc-form">
-        <!-- 第一部分：企业基本信息 -->
-        <section class="form-section">
-          <h3 class="section-title">
-            <span class="section-num">1</span>
-            企业基本信息
-          </h3>
-          <div class="grid-2">
-            <el-form-item label="企业名称" prop="company_name">
-              <el-input
-                v-model="formData.company_name"
-                placeholder="请输入企业名称"
-                maxlength="100"
-              />
-            </el-form-item>
-            <el-form-item label="统一社会信用代码">
-              <el-input
-                v-model="formData.credit_code"
-                placeholder="请输入统一社会信用代码"
-                maxlength="18"
-              />
-            </el-form-item>
-            <el-form-item label="成立时间">
-              <el-date-picker
-                v-model="formData.est_date"
-                type="date"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd"
-                class="full-width"
-              />
-            </el-form-item>
-            <el-form-item label="从业人数（人）">
-              <el-input
-                v-model.number="formData.employee_count"
-                type="number"
-                placeholder="请输入从业人数"
-                min="1"
-              />
-              <p class="field-tip">以最近一个月实际缴纳社保为准</p>
-            </el-form-item>
-            <el-form-item label="企业性质" class="col-span-2">
-              <div class="checkbox-group">
-                <label
-                  v-for="item in companyTypeOptions"
-                  :key="item"
-                  class="checkbox-label"
-                  :class="{ active: formData.company_type.includes(item) }"
-                >
-                  <input
-                    type="checkbox"
-                    :value="item"
-                    v-model="formData.company_type"
-                  />
-                  <span>{{ item }}</span>
-                </label>
-              </div>
-            </el-form-item>
-            <el-form-item label="所属细分行业" class="col-span-2">
-              <el-input
-                v-model="formData.industry"
-                placeholder="请输入所属细分行业"
-                maxlength="100"
-              />
-            </el-form-item>
-            <el-form-item label="注册地址">
-              <el-input
-                v-model="formData.reg_address"
-                placeholder="请输入注册地址"
-                maxlength="200"
-              />
-            </el-form-item>
-            <el-form-item label="办公地址">
-              <el-input
-                v-model="formData.office_address"
-                placeholder="请输入办公地址"
-                maxlength="200"
-              />
-            </el-form-item>
-            <el-form-item label="企业简介（不超过1000字）" class="col-span-2">
-              <el-input
-                v-model="formData.company_intro"
-                type="textarea"
-                :rows="4"
-                maxlength="1000"
-                show-word-limit
-                placeholder="请简要介绍企业主营业务、发展历程、核心优势等"
-              />
-            </el-form-item>
-          </div>
-        </section>
 
-        <!-- 第二部分：创始人信息 -->
-        <section class="form-section">
-          <h3 class="section-title">
-            <span class="section-num">2</span>
-            创始人信息
-          </h3>
-          <div class="grid-2">
-            <el-form-item label="单一创始人姓名" prop="founder_name">
-              <el-input
-                v-model="formData.founder_name"
-                placeholder="请输入创始人姓名"
-                maxlength="50"
-              />
-            </el-form-item>
-            <el-form-item label="经股权穿透后合计持股比例（%）">
-              <el-input
-                v-model.number="formData.shareholding_ratio"
-                type="number"
-                placeholder="请输入持股比例"
-                min="0"
-                max="100"
-              />
-            </el-form-item>
-            <el-form-item label="联系电话" prop="founder_phone">
-              <el-input
-                v-model="formData.founder_phone"
-                placeholder="请输入联系电话"
-                maxlength="20"
-              />
-            </el-form-item>
-            <el-form-item label="创始人在企业的技术创新、战略决策和主要业务执行中发挥主导作用情况" class="col-span-2">
-              <el-input
-                v-model="formData.founder_role"
-                type="textarea"
-                :rows="3"
-                placeholder="请说明创始人在企业技术创新、战略决策和主要业务执行中发挥的主导作用"
-                maxlength="500"
-              />
-            </el-form-item>
-            <el-form-item label="上传相关证明文件（可选）" class="col-span-2">
-              <div class="file-upload-area">
-                <label class="upload-btn">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
-                  </svg>
-                  <span>选择文件</span>
-                  <input
-                    type="file"
-                    class="hidden"
-                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
-                    @change="handleFileChange($event, 'founder_file_list')"
-                  />
-                </label>
-                <div class="file-list">
-                  <div
-                    v-for="(file, index) in formData.founder_file_list"
-                    :key="index"
-                    class="file-item"
-                  >
-                    <span class="file-name">{{ file.name }}</span>
-                    <button type="button" class="file-remove" @click="removeFile(index, 'founder_file_list')">×</button>
-                  </div>
+      <!-- 第一部分：企业基本信息 -->
+      <section class="form-section">
+        <h3 class="section-title">
+          <span class="section-num">1</span>
+          企业基本信息
+        </h3>
+
+        <!-- 企业名称（一行） -->
+        <div class="field-row grid-2">
+          <div class="field-item">
+            <label class="field-label">企业名称 <span class="required">*</span></label>
+            <el-input
+              v-model="formData.company_name"
+              placeholder="请输入企业名称"
+              maxlength="100"
+              @blur="validateField('company_name')"
+            />
+            <p v-if="errors.company_name" class="field-error">{{ errors.company_name }}</p>
+          </div>
+          <div class="field-item">
+            <label class="field-label">统一社会信用代码<span class="required">*</span></label>
+            <el-input
+              v-model="formData.credit_code"
+              placeholder="请输入统一社会信用代码"
+              maxlength="100"
+              @blur="validateField('credit_code')"
+            />
+            <p v-if="errors.credit_code" class="field-error">{{ errors.credit_code }}</p>
+          </div>
+        </div>
+
+        <!-- 成立时间 / 从业人数（一行） -->
+        <div class="field-row grid-2">
+          <div class="field-item">
+            <label class="field-label">成立时间</label>
+            <el-date-picker
+              v-model="formData.est_date"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              class="full-width"
+            />
+          </div>
+          <div class="field-item">
+            <label class="field-label">从业人数（人）</label>
+            <el-input
+              v-model.number="formData.employee_count"
+              type="number"
+              placeholder="请输入从业人数"
+              min="1"
+            />
+            <p class="field-tip">以最近一个月实际缴纳社保为准</p>
+          </div>
+        </div>
+
+        <!-- 企业性质（一行） -->
+        <div class="field-row">
+          <div class="field-item">
+            <label class="field-label">企业性质</label>
+            <div class="checkbox-group">
+              <label
+                v-for="item in companyTypeOptions"
+                :key="item"
+                class="checkbox-label"
+                :class="{ active: formData.company_type.includes(item) }"
+              >
+                <input
+                  type="checkbox"
+                  :value="item"
+                  v-model="formData.company_type"
+                />
+                <span>{{ item }}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <!-- 所属细分行业 / 注册地址（一行） -->
+        <div class="field-row grid-2">
+          <div class="field-item">
+            <label class="field-label">所属细分行业</label>
+            <el-input
+              v-model="formData.industry"
+              placeholder="请输入所属细分行业"
+              maxlength="100"
+            />
+          </div>
+          <div class="field-item">
+            <label class="field-label">注册地址</label>
+            <el-input
+              v-model="formData.reg_address"
+              placeholder="请输入注册地址"
+              maxlength="200"
+            />
+          </div>
+        </div>
+
+        <!-- 办公地址（一行） -->
+        <div class="field-row">
+          <div class="field-item">
+            <label class="field-label">办公地址</label>
+            <el-input
+              v-model="formData.office_address"
+              placeholder="请输入办公地址"
+              maxlength="200"
+            />
+          </div>
+        </div>
+
+        <!-- 企业简介（一行） -->
+        <div class="field-row">
+          <div class="field-item">
+            <label class="field-label">企业简介（不超过1000字）</label>
+            <el-input
+              v-model="formData.company_intro"
+              type="textarea"
+              :rows="4"
+              maxlength="1000"
+              show-word-limit
+              placeholder="请简要介绍企业主营业务、发展历程、核心优势等"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- 第二部分：创始人信息 -->
+      <section class="form-section">
+        <h3 class="section-title">
+          <span class="section-num">2</span>
+          创始人信息
+        </h3>
+
+        <!-- 单一创始人姓名 / 持股比例（一行） -->
+        <div class="field-row grid-2">
+          <div class="field-item">
+            <label class="field-label">单一创始人姓名 <span class="required">*</span></label>
+            <el-input
+              v-model="formData.founder_name"
+              placeholder="请输入创始人姓名"
+              maxlength="50"
+              @blur="validateField('founder_name')"
+            />
+            <p v-if="errors.founder_name" class="field-error">{{ errors.founder_name }}</p>
+          </div>
+          <div class="field-item">
+            <label class="field-label">经股权穿透后合计持股比例（%）</label>
+            <el-input
+              v-model.number="formData.shareholding_ratio"
+              type="number"
+              placeholder="请输入持股比例"
+              min="0"
+              max="100"
+            />
+          </div>
+        </div>
+
+        <!-- 联系电话（一行） -->
+        <div class="field-row">
+          <div class="field-item">
+            <label class="field-label">联系电话 <span class="required">*</span></label>
+            <el-input
+              v-model="formData.founder_phone"
+              placeholder="请输入联系电话"
+              maxlength="20"
+              @blur="validateField('founder_phone')"
+            />
+            <p v-if="errors.founder_phone" class="field-error">{{ errors.founder_phone }}</p>
+          </div>
+        </div>
+
+        <!-- 创始人作用情况（一行） -->
+        <div class="field-row">
+          <div class="field-item">
+            <label class="field-label">创始人在企业的技术创新、战略决策和主要业务执行中发挥主导作用情况</label>
+            <el-input
+              v-model="formData.founder_role"
+              type="textarea"
+              :rows="3"
+              placeholder="请说明创始人在企业技术创新、战略决策和主要业务执行中发挥的主导作用"
+              maxlength="500"
+            />
+          </div>
+        </div>
+
+        <!-- 上传证明文件（一行） -->
+        <div class="field-row">
+          <div class="field-item">
+            <label class="field-label">上传相关证明文件（可另附文件）</label>
+            <div class="file-upload-area">
+              <label class="upload-btn">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
+                </svg>
+                <span>选择文件</span>
+                <input
+                  type="file"
+                  class="hidden"
+                  accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
+                  @change="handleFileChange($event, 'founder_file_list')"
+                />
+              </label>
+              <div class="file-list">
+                <div
+                  v-for="(file, index) in formData.founder_file_list"
+                  :key="index"
+                  class="file-item"
+                >
+                  <span class="file-name">{{ file.name }}</span>
+                  <button type="button" class="file-remove" @click="removeFile(index, 'founder_file_list')">×</button>
                 </div>
               </div>
-            </el-form-item>
-            <el-form-item label="核心技术情况" class="col-span-2">
-              <el-input
-                v-model="formData.core_tech"
-                type="textarea"
-                :rows="3"
-                placeholder="以人工智能技术作为核心生产工具与关键驱动力，利用大模型、智能体、AI开发工具等，完成核心产品开发"
-                maxlength="500"
-              />
-            </el-form-item>
+            </div>
           </div>
-        </section>
+        </div>
 
-        <!-- 第三部分：联系人信息 -->
-        <section class="form-section">
-          <h3 class="section-title">
-            <span class="section-num">3</span>
-            联系人信息
-          </h3>
-          <div class="grid-3">
-            <el-form-item label="联系人姓名" prop="contact_name">
-              <el-input
-                v-model="formData.contact_name"
-                placeholder="请输入联系人姓名"
-                maxlength="50"
-              />
-            </el-form-item>
-            <el-form-item label="职务">
-              <el-input
-                v-model="formData.job_title"
-                placeholder="请输入职务"
-                maxlength="50"
-              />
-            </el-form-item>
-            <el-form-item label="联系电话" prop="contact_phone">
-              <el-input
-                v-model="formData.contact_phone"
-                placeholder="请输入联系电话"
-                maxlength="20"
-              />
-            </el-form-item>
+        <!-- 核心技术情况（一行） -->
+        <div class="field-row">
+          <div class="field-item">
+            <label class="field-label">核心技术情况</label>
+            <el-input
+              v-model="formData.core_tech"
+              type="textarea"
+              :rows="3"
+              placeholder="以人工智能技术作为核心生产工具与关键驱动力，利用大模型、智能体、AI开发工具等，完成核心产品开发"
+              maxlength="500"
+            />
           </div>
-        </section>
-      </el-form>
+        </div>
+      </section>
+
+      <!-- 第三部分：联系人信息 -->
+      <section class="form-section">
+        <h3 class="section-title">
+          <span class="section-num">3</span>
+          联系人信息
+        </h3>
+        <!-- 联系人姓名 / 职务 / 联系电话（一行三列） -->
+        <div class="field-row grid-3">
+          <div class="field-item">
+            <label class="field-label">联系人姓名 <span class="required">*</span></label>
+            <el-input
+              v-model="formData.contact_name"
+              placeholder="请输入联系人姓名"
+              maxlength="50"
+              @blur="validateField('contact_name')"
+            />
+            <p v-if="errors.contact_name" class="field-error">{{ errors.contact_name }}</p>
+          </div>
+          <div class="field-item">
+            <label class="field-label">职务</label>
+            <el-input
+              v-model="formData.job_title"
+              placeholder="请输入职务"
+              maxlength="50"
+            />
+          </div>
+          <div class="field-item">
+            <label class="field-label">联系电话 <span class="required">*</span></label>
+            <el-input
+              v-model="formData.contact_phone"
+              placeholder="请输入联系电话"
+              maxlength="20"
+              @blur="validateField('contact_phone')"
+            />
+            <p v-if="errors.contact_phone" class="field-error">{{ errors.contact_phone }}</p>
+          </div>
+        </div>
+      </section>
     </main>
 
     <!-- 底部 -->
     <footer class="dialog-footer">
-      <el-button type="default" @click="saveDraft">保存草稿</el-button>
       <el-button type="default" @click="handleClose">取消</el-button>
       <el-button type="primary" :loading="submitting" @click="submitForm">提交申请</el-button>
     </footer>
@@ -246,18 +315,22 @@ props: {
   }
 },
 data() {
-  const validatePhone = (rule, value, callback) => {
-    if (!value) {
-      callback(new Error('请输入联系电话'))
-    } else if (!/^1[3-9]\d{9}$/.test(value)) {
-      callback(new Error('请输入正确的手机号'))
-    } else {
-      callback()
-    }
+  const validatePhone = (value) => {
+    if (!value) return '请输入联系电话'
+    if (!/^1[3-9]\d{9}$/.test(value)) return '请输入正确的手机号'
+    return null
+  }
+  const validateCreditCode = (value) => {
+    if (!value) return '请输入统一社会信用代码'
+    const trimmed = String(value).trim()
+    // 统一社会信用代码：18 位，由数字和大写字母组成
+    if (!/^[0-9A-Z]{18}$/.test(trimmed)) return '请输入正确的统一社会信用代码（18位数字或大写字母）'
+    return null
   }
   return {
     submitting: false,
     companyTypeOptions: ['国有企业', '国有控股企业', '私营企业', '外资企业', '合资企业', '个体工商户', '其他'],
+    errors: {},
     formData: {
       company_name: '',
       credit_code: '',
@@ -277,13 +350,6 @@ data() {
       contact_name: '',
       job_title: '',
       contact_phone: ''
-    },
-    rules: {
-      company_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
-      founder_name: [{ required: true, message: '请输入创始人姓名', trigger: 'blur' }],
-      founder_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
-      contact_name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
-      contact_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
     }
   }
 },
@@ -301,6 +367,7 @@ watch: {
   visible(val) {
     if (val) {
       this.loadDraft()
+      this.errors = {}
     }
   }
 },
@@ -334,22 +401,52 @@ methods: {
       // ignore
     }
   },
+  validateField(field) {
+    const value = this.formData[field]
+    let msg = null
+    switch (field) {
+      case 'company_name':
+      case 'founder_name':
+      case 'contact_name':
+        if (!value) msg = '该项为必填项'
+        break
+      case 'credit_code':
+        msg = validateCreditCode(value)
+        break
+      case 'founder_phone':
+      case 'contact_phone':
+        msg = validatePhone(value)
+        break
+    }
+    if (msg) {
+      this.$set(this.errors, field, msg)
+    } else {
+      this.$delete(this.errors, field)
+    }
+  },
+  validateAll() {
+    ['company_name', 'credit_code', 'founder_name', 'founder_phone', 'contact_name', 'contact_phone'].forEach(f => this.validateField(f))
+    return Object.keys(this.errors).length === 0
+  },
   submitForm() {
-    this.$refs.form.validate(async valid => {
-      if (!valid) return
-      this.submitting = true
-      try {
-        // TODO: 调用提交接口
-        console.log('提交数据:', this.formData)
-        this.$message.success('提交成功')
-        localStorage.removeItem('opc_application_draft')
+    if (!this.validateAll()) {
+      this.$message.error('请填写必填项')
+      return
+    }
+    this.submitting = true
+    try {
+      // TODO: 调用提交接口
+      console.log('提交数据:', this.formData)
+      this.$message.success('提交成功')
+      localStorage.removeItem('opc_application_draft')
+      setTimeout(() => {
         this.handleClose()
-      } catch (e) {
-        this.$message.error('提交失败，请重试')
-      } finally {
-        this.submitting = false
-      }
-    })
+      }, 800)
+    } catch (e) {
+      this.$message.error('提交失败，请重试')
+    } finally {
+      this.submitting = false
+    }
   }
 }
 }
diff --git a/f/web-kboss/src/views/Ncmatch/SocietyNewsBrief.vue b/f/web-kboss/src/views/Ncmatch/SocietyNewsBrief.vue
index 0e5b5d3..b942ee5 100644
--- a/f/web-kboss/src/views/Ncmatch/SocietyNewsBrief.vue
+++ b/f/web-kboss/src/views/Ncmatch/SocietyNewsBrief.vue
@@ -126,47 +126,47 @@ export default {
                     title: '北京市正式印发《支持人工智能OPC创新发展行动方案》（试行）',
                     desc: '北京市经济和信息化局正式印发《支持人工智能OPC创新发展行动方案》（试行），从培育孵化、算力支撑、场景开放、融资渠道、人才引进五大维度系统构建OPC创业支持体系。',
                     content: `
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             为落实国家"人工智能＋"战略，构建活跃开放的人工智能创新创业生态，支持青年人才创新创业，助力超级经济个体（OPC）快速成长，近日，北京市经济和信息化局正式印发<strong style="color:#111827;">《支持人工智能OPC创新发展行动方案》（试行）</strong>。方案围绕支持创办OPC企业、建设OPC社区、发放"全栈资源包"、加强融资增信赋能、强化赛事培优赋能、举办全球OPC共创节、深化合规引导赋能、支持高校设立OPC微专业八大重点领域，出台8条支持举措。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">北京市经济和信息化局关于印发《支持人工智能OPC创新发展行动方案（试行）》的通知</strong>
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">各区中小企业主管部门、各有关单位：</p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">现将《支持人工智能OPC创新发展行动方案（试行）》印发给你们，请结合实际认真贯彻落实。</p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">北京市经济和信息化局</p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">2026年6月17日</p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">各区中小企业主管部门、各有关单位：</p>
+                        <p style="color:#374151;line-height:1.9;">现将《支持人工智能OPC创新发展行动方案（试行）》印发给你们，请结合实际认真贯彻落实。</p>
+                        <p style="color:#374151;line-height:1.9;">北京市经济和信息化局</p>
+                        <p style="color:#374151;line-height:1.9;">2026年6月17日</p>
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">《支持人工智能OPC创新发展行动方案》（试行）</strong>
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             为深入贯彻落实国家"人工智能＋"战略部署，加快构建活跃开放的人工智能创新创业生态，支持青年人才创新创业，培育一批AI驱动、小而精、专而强的创新主体，助力更多超级经济个体（OPC）快速成长，壮大本市中小企业科技创新力量，制定本行动方案。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">一、支持创办智能体开发</strong>、AIGC产品创制、大模型微调、AI行业落地应用等领域的OPC企业。依托北京市中小企业公共服务平台，打造"OPC开办服务专区"，提供开办指引、社区入驻、政策辅导和订单对接等全链条服务。联合高校、产业园区、龙头企业，开展OPC创业"校园行""园区行""企业行"，通过政策宣讲、案例分享、技术培训等，鼓励各类科技人才创办OPC。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">二、出台OPC成长社区建设指引</strong>，支持社区自建词元（Token）服务平台或链接智算服务机构、数字员工服务平台，为OPC企业提供AI工具集、高质量数据集、优惠算力、低成本办公空间、创业服务包等配套服务，对于服务成效突出的OPC社区，最高给予200万元资金支持。鼓励新一代信息技术企业依托存量技术人才与产业生态资源，探索建设企业内部OPC社区。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">三、通过OPC成长社区为入驻OPC企业发放"全栈资源包"</strong>，包含Token券（模型券）、算力券、数据券等。入驻企业可免费享受3个月的模型使用、智能算力使用、数据代采赠送等服务（单个企业合计最高不超过10万元）。OPC成长社区可按季度申请兑付，每个社区每年最高不超过1000万元。对通过北京人工智能数据沙盒服务平台开展数据治理和模型应用的OPC企业，可享受50%服务费减免。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">四、依托北京市企业融资综合信用服务平台设立"OPC金融服务专区"</strong>，提供担保增信、融资撮合、政策对接等服务。联合金融机构开发适配OPC企业的专属信贷产品"OPC贷"，综合运用Token消耗数据、赛事获奖情况、创始人征信报告、自主知识产权与自研技术成果等内容，为企业提供增信支持。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">五、联合一批投资机构举办"创赢未来"OPC专场路演活动</strong>，由OPC社区推荐OPC企业参赛。针对参赛企业提供"创训营"综合赋能服务，对路演通过的OPC项目，最高给予1000万元资金支持。依托"创客北京""京彩大创"设立OPC专项赛道，对于优质项目最高给予50万元资金支持。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">六、举办全球OPC共创节</strong>，通过AI黑客松、AI工作坊、项目路演、大咖分享、成果发布等系列活动，为OPC企业提供项目展示的国际舞台和资源对接平台，打造连接开发者、创作者、企业与大众的创新生态。支持符合条件OPC企业参加中小企业服务券服务商遴选，依托服务券政策，推动其产品在中小企业中落地应用。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">七、编制OPC合规指引</strong>，梳理财税管理、知识产权、算法备案、跨境出海等领域的风险要点，明确合规要求和操作规范。联合专业服务机构开展"合规服务进社区"活动，通过合规咨询、实操指导，推动合规服务深度对接，提升OPC企业合规经营意识与风险防控能力。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">八、支持高校依托学科特色设立OPC微专业</strong>，聚焦"人工智能大模型工程应用＋OPC创业实践"，构建"AI通识＋政策解读＋场景实战"课程体系，推行校企"双师制"教学，推动形成"学科建设—产业需求—人才培养"闭环育人体系，打造校企政合作共建的实训基地。鼓励OPC社区开办"夜校""加速营"等OPC创业培训。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0;">
+                        <p style="color:#374151;line-height:1.9;margin-bottom:0;">
                             本方案自印发之日起试行，由北京市经济和信息化局负责解释。
                         </p>
                     `
@@ -180,26 +180,26 @@ export default {
                     source: '石景山区人民政府',
                     location: '石景山区',
                     date: '2026年7月10日',
-                    url: '',
+                    url: 'https://www.bjsjs.gov.cn/ywdt/sjsdt/202607/t20260723_763460.shtml',
                     title: '石景山区关于支持OPC创业生态发展的若干措施',
                     desc: '石景山区出台专项措施支持OPC创业生态发展，涵盖入驻补贴、算力支持、融资对接、人才保障等多项扶持政策，打造OPC创业首选地。',
                     content: `
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             石景山区人民政府正式出台《关于支持OPC创业生态发展的若干措施》，围绕OPC企业入驻、算力支撑、融资渠道、人才保障等关键环节，推出多项专项扶持政策，旨在将石景山区打造为北京OPC创业首选地。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">一、办公空间支持。</strong>新入驻 OPC 企业首年办公租金全免，第二年减免50%，第三年减免30%，，单家最高可节省租金支出约500万元。符合条件的企业可优先入驻石景山区人工智能产业园，享受"一事一议"专项支持。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">二、算力补贴政策。</strong>联合区内智算中心为OPC企业提供专项算力包，单家最高补贴200万元/年。企业可享受不高于市场价的80%算力采购折扣，同时可申请算力"先用后付"试点服务。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">三、融资对接机制。</strong>设立 OPC 创投联盟，搭建"基金 + 直投"双轨融资通道。区级产业发展基金优先跟投优质OPC项目，单笔跟投最高5000万元。定期举办OPC项目路演及资本对接会。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">四、人才引进保障。</strong>为OPC企业引进的高层次人才提供最高100万元安家补贴，在住房、子女入学、医疗等方面给予优先保障。设立"石景山OPC人才服务专线"，提供一对一政策咨询服务。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;margin-bottom:0;">
+                        <p style="color:#374151;margin-bottom:0;">
                             <strong style="color:#111827;">五、政务绿色通道。</strong>开通 OPC 项目"绿色通道"，实行专班专员全程服务，企业注册、资质审批、政策申报等事项平均提速50%以上。
                         </p>
                     `
@@ -213,26 +213,26 @@ export default {
                     source: '紫东数智OPC社区',
                     location: '北京市',
                     date: '2026年7月14日',
-                    url: '',
+                    url: 'https://mp.weixin.qq.com/s/8QKyYCloB468Lw2An0nW-A',
                     title: '紫东数智OPC社区正式揭牌',
                     desc: '紫东数智OPC社区正式揭牌成立，标志着北京OPC创业生态建设迈入新阶段。社区由中关村数智人工智能产业联盟与紫东太初联合打造，致力于构建集科研创新、项目孵化、创业加速与产业转化于一体的新型生态社区。',
                     content: `
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             紫东数智OPC社区正式揭牌成立，标志着北京OPC创业生态建设迈入新阶段。社区由中关村数智人工智能产业联盟与紫东太初联合打造，致力于构建集科研创新、项目孵化、创业加速与产业转化于一体的新型生态社区。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">一、孵化空间。</strong>社区首期启用2万平方米孵化空间，覆盖50+创业团队，配备独立办公室、共享工位及会议室，满足OPC企业不同阶段的空间需求。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">二、产学研合作。</strong>联合清华、北航、北理工等高校共建OPC联合实验室，围绕大模型应用、智能体开发、AI行业落地等方向开展联合技术攻关，推动科研成果转化。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">三、品牌活动。</strong>每月举办AI沙龙、项目路演、产业对接等品牌活动，邀请学术界、产业界、投资界嘉宾分享前沿洞见，为OPC创业者搭建高质量交流平台。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;line-height:1.9;margin-bottom:0.75rem;">
+                        <p style="color:#374151;line-height:1.9;">
                             <strong style="color:#111827;">四、公共服务。</strong>配套算力、数据、模型"一站式"公共服务平台，提供优惠算力调用、高质量数据集获取、主流大模型API接入等服务，降低OPC企业创新门槛。
                         </p>
-                        <p style="color:#374151;font-size:0.875rem;margin-bottom:0;">
+                        <p style="color:#374151;margin-bottom:0;">
                             <strong style="color:#111827;">五、发展目标。</strong>2026年内计划孵化30个标杆性OPC创业项目，培育5家以上估值超亿元的OPC头部企业，形成具有全国影响力的OPC创新高地。
                         </p>
                     `
diff --git a/f/web-kboss/src/views/Ncmatch/images/illustration-ecosystem.jpeg b/f/web-kboss/src/views/Ncmatch/images/illustration-ecosystem.jpeg
new file mode 100644
index 0000000..c6ad75b
Binary files /dev/null and b/f/web-kboss/src/views/Ncmatch/images/illustration-ecosystem.jpeg differ
diff --git a/f/web-kboss/src/views/Ncmatch/images/illustration-platform.jpeg b/f/web-kboss/src/views/Ncmatch/images/illustration-platform.jpeg
new file mode 100644
index 0000000..574de79
Binary files /dev/null and b/f/web-kboss/src/views/Ncmatch/images/illustration-platform.jpeg differ
diff --git a/f/web-kboss/src/views/Ncmatch/images/illustration-services.jpeg b/f/web-kboss/src/views/Ncmatch/images/illustration-services.jpeg
new file mode 100644
index 0000000..9277add
Binary files /dev/null and b/f/web-kboss/src/views/Ncmatch/images/illustration-services.jpeg differ
diff --git a/f/web-kboss/src/views/Ncmatch/images/illustration-supply.jpeg b/f/web-kboss/src/views/Ncmatch/images/illustration-supply.jpeg
new file mode 100644
index 0000000..063928f
Binary files /dev/null and b/f/web-kboss/src/views/Ncmatch/images/illustration-supply.jpeg differ
diff --git a/f/web-kboss/src/views/Ncmatch/images/illustration-tech.jpeg b/f/web-kboss/src/views/Ncmatch/images/illustration-tech.jpeg
new file mode 100644
index 0000000..764f4a6
Binary files /dev/null and b/f/web-kboss/src/views/Ncmatch/images/illustration-tech.jpeg differ
diff --git a/f/web-kboss/src/views/Ncmatch/images/96008e08710dc520404f3d41cf05366c.jpg b/f/web-kboss/src/views/Ncmatch/images/zhongguancun.jpg
similarity index 100%
rename from f/web-kboss/src/views/Ncmatch/images/96008e08710dc520404f3d41cf05366c.jpg
rename to f/web-kboss/src/views/Ncmatch/images/zhongguancun.jpg
diff --git a/f/web-kboss/src/views/Ncmatch/images/a86f92912905fe67783b4ec66c1ac72a.png b/f/web-kboss/src/views/Ncmatch/images/zidongtaichu.png
similarity index 100%
rename from f/web-kboss/src/views/Ncmatch/images/a86f92912905fe67783b4ec66c1ac72a.png
rename to f/web-kboss/src/views/Ncmatch/images/zidongtaichu.png
diff --git a/f/web-kboss/src/views/Ncmatch/index.vue b/f/web-kboss/src/views/Ncmatch/index.vue
index f2382a8..a07777a 100644
--- a/f/web-kboss/src/views/Ncmatch/index.vue
+++ b/f/web-kboss/src/views/Ncmatch/index.vue
@@ -1,135 +1,624 @@
 <template>
-    <div class="container">
-        <!-- slogan -->
-        <div class="slogan">
-            <div class="title">
-                <span class="gradient-text">数智开物</span>
-                <span class="clip-text">opc公共服务平台</span>
-                <span class="desp">紫东数智OPC社区 × 数智开物OPC公共服务平台，超级个体从这里启航</span>
-            </div>
-            <div class="MetricsDisplay">
+    <div class="page-wrapper">
+        <!-- 网格背景点 -->
+        <div class="bg-grid"></div>
 
-                <div class="item">
-                    <div class="item-title">
-                        3500<span>㎡</span>
-                    </div>
-                    <div class="item-details">
-                        社区建筑面积
-                    </div>
+        <!-- 浮动光球装饰 -->
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+        <div class="orb orb-4"></div>
+
+        <div class="container">
+            <!-- slogan -->
+            <div class="slogan">
+                <div class="title">
+                    <span class="gradient-text">数智开物</span>
+                    <span class="clip-text">OPC公共服务平台</span>
+                    <span class="desp">紫东数智OPC社区 × 数智开物OPC公共服务平台，超级个体从这里启航</span>
                 </div>
-                <div class="item">
-                    <div class="item-title">
-                        3500<span>㎡</span>
-                    </div>
-                    <div class="item-details">
-                        社区建筑面积
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="item-title">
-                        3500<span>㎡</span>
-                    </div>
-                    <div class="item-details">
-                        社区建筑面积
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="item-title">
-                        3500<span>㎡</span>
-                    </div>
-                    <div class="item-details">
-                        社区建筑面积
+
+                <div class="metrics-display">
+                    <div class="metric-card" v-for="(item, index) in metrics" :key="index">
+                        <div class="card-num">
+                            {{ item.value }} 
+                            <span class="card-unit" v-if="item.unit">{{ item.unit }}</span>
+
+                        </div>
+                        <div class="card-label">{{ item.label }}</div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- 优惠政策 -->
-        <div class="policies">
-            
+
+            <!-- 优惠政策 -->
+            <section class="policies">
+                <div class="policies-inner">
+                    <div class="policies-header">
+                        <h2 class="policies-title">优惠政策</h2>
+                        <p class="policies-subtitle">
+                            北京市及石景山区双重政策加持，从培育孵化、算力支撑、场景开放到融资人才全方位支持
+                        </p>
+                    </div>
+
+                    <div class="policy-grid">
+                        <div
+                            class="policy-card glass-card"
+                            v-for="policy in policies"
+                            :key="policy.id"
+                        >
+                            <div class="policy-card-header">
+                                <div class="policy-icon" :style="{ background: policy.iconGradient }">
+                                    <svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="policy.icon"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="policy-name">{{ policy.name }}</h3>
+                            </div>
+                            <p class="policy-desc">{{ policy.desc }}</p>
+                            <div class="policy-amount">
+                                <span class="amount-num" :style="{ color: policy.amountColor }">{{ policy.amount }}</span>
+                                <span class="amount-unit" :style="{ color: policy.amountColor }">{{ policy.unit }}</span>
+                            </div>
+                            <div v-if="policy.subAmount" class="policy-sub-amount">
+                                <span class="amount-num sub" :style="{ color: policy.amountColor }">{{ policy.subAmount }}</span>
+                                <span class="amount-unit sub" :style="{ color: policy.amountColor }">{{ policy.subUnit }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="policy-footer">
+                        <p class="footer-note">
+                            【市】= 北京市《支持人工智能OPC创新发展行动方案》（试行）
+                            【石】= 石景山区《关于支持OPC创业生态发展的若干措施》（试行）
+                            按从优不重复原则予以支持
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 紫东数智OPC社区介绍 -->
+            <div class="community-intro">
+                <div class="community-intro-container">
+                    <!-- 标题 -->
+                    <div class="community-intro-header">
+                        <h2 class="community-intro-title">紫东数智OPC社区介绍</h2>
+                        <p class="community-intro-subtitle">
+                            紫东数智OPC社区由中关村数智人工智能产业联盟与紫东太初联合打造，<br>
+                            以"超级个体创业新型生态载体与协作网络"为定位，致力于构建集科研创新、项目孵化、创业加速与产业转化于一体的新型生态社区。
+                        </p>
+                    </div>
+
+                    <!-- 社区简介 -->
+                    <div class="community-intro-brief glass-card">
+                        <div class="community-intro-brief-inner">
+                            <div class="community-intro-logos">
+                                <div class="community-intro-logo-wrapper">
+                                    <img src="./images/zhongguancun.jpg" alt="中关村数智人工智能产业联盟" class="community-intro-logo">
+                                </div>
+                                <div class="community-intro-logo-wrapper">
+                                    <img src="./images/zidongtaichu.png" alt="紫东太初" class="community-intro-logo">
+                                </div>
+                            </div>
+                            <div class="community-intro-brief-content">
+                                <h3 class="community-intro-brief-title">社区定位</h3>
+                                <p class="community-intro-brief-text">
+                                    以"一人即一团队、一AI即一生态"为核心理念，紧扣人工智能重塑科研、研发与创业组织方式的趋势。社区落地于北京市石景山区人工智能产业集聚区，首期投入<strong class="community-intro-brief-highlight">3500平方米</strong>标准化办公空间，可实现拎包入驻。
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 核心优势 -->
+                    <div class="core-advantages">
+                        <div class="core-advantages-header">
+                            <h3 class="core-advantages-title">核心优势</h3>
+                            <p class="core-advantages-subtitle">五大支撑体系，全方位赋能创业</p>
+                        </div>
+                        <div class="core-advantages-grid">
+                            <!-- 数智开物公共服务平台 -->
+                            <div class="core-advantage-card glass-card">
+                                <div class="core-advantage-image-wrapper">
+                                    <img src="./images/illustration-platform.jpeg" alt="数智开物平台" class="core-advantage-image">
+                                </div>
+                                <div class="core-advantage-content">
+                                    <div class="core-advantage-icon-title">
+                                        <div class="core-advantage-icon core-advantage-icon--blue">
+                                            <svg class="core-advantage-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path>
+                                            </svg>
+                                        </div>
+                                        <h4 class="core-advantage-name">数智开物公共服务平台</h4>
+                                    </div>
+                                    <p class="core-advantage-desc">普惠算力、多模型接入、AIGC创作工具，打造低成本创业数字底座。云枢底座整合H800/A100/昇腾算力，TOKEN市集集成50+主流大模型API。</p>
+                                </div>
+                            </div>
+
+                            <!-- 国产技术底座 -->
+                            <div class="core-advantage-card glass-card">
+                                <div class="core-advantage-image-wrapper">
+                                    <img src="./images/illustration-tech.jpeg" alt="国产技术底座" class="core-advantage-image">
+                                </div>
+                                <div class="core-advantage-content">
+                                    <div class="core-advantage-icon-title">
+                                        <div class="core-advantage-icon core-advantage-icon--cyan">
+                                            <svg class="core-advantage-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                                            </svg>
+                                        </div>
+                                        <h4 class="core-advantage-name">国产技术底座</h4>
+                                    </div>
+                                    <p class="core-advantage-desc">依托紫东太初技术能力与品牌势能，对接具身智能与科学智能领域前沿技术资源，提供技术对接窗口与生态合作入口。</p>
+                                </div>
+                            </div>
+
+                            <!-- 联盟全域生态资源 -->
+                            <div class="core-advantage-card glass-card">
+                                <div class="core-advantage-image-wrapper">
+                                    <img src="./images/illustration-ecosystem.jpeg" alt="联盟生态资源" class="core-advantage-image">
+                                </div>
+                                <div class="core-advantage-content">
+                                    <div class="core-advantage-icon-title">
+                                        <div class="core-advantage-icon core-advantage-icon--violet">
+                                            <svg class="core-advantage-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                            </svg>
+                                        </div>
+                                        <h4 class="core-advantage-name">联盟生态资源</h4>
+                                    </div>
+                                    <p class="core-advantage-desc">汇聚小米集团、浪潮集团等百余家头部会员单位，聘请多位院士组成专家智库，搭建上下游合作桥梁与专业技术指导。</p>
+                                </div>
+                            </div>
+
+                            <!-- 全链条创业配套 -->
+                            <div class="core-advantage-card glass-card">
+                                <div class="core-advantage-image-wrapper">
+                                    <img src="./images/illustration-services.jpeg" alt="创业配套服务" class="core-advantage-image">
+                                </div>
+                                <div class="core-advantage-content">
+                                    <div class="core-advantage-icon-title">
+                                        <div class="core-advantage-icon core-advantage-icon--amber">
+                                            <svg class="core-advantage-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+                                            </svg>
+                                        </div>
+                                        <h4 class="core-advantage-name">创业配套服务</h4>
+                                    </div>
+                                    <p class="core-advantage-desc">提供企业注册地址托管服务，以及记账报税、知识产权保护、政策申报等事务的服务资源，全链条支持创业。</p>
+                                </div>
+                            </div>
+
+                            <!-- 供需对接 -->
+                            <div class="core-advantage-card glass-card">
+                                <div class="core-advantage-image-wrapper">
+                                    <img src="./images/illustration-supply.jpeg" alt="供需对接" class="core-advantage-image">
+                                </div>
+                                <div class="core-advantage-content">
+                                    <div class="core-advantage-icon-title">
+                                        <div class="core-advantage-icon core-advantage-icon--rose">
+                                            <svg class="core-advantage-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
+                                            </svg>
+                                        </div>
+                                        <h4 class="core-advantage-name">供需对接</h4>
+                                    </div>
+                                    <p class="core-advantage-desc">支持企业发布技术需求与合作信息，平台基于标签实现智能匹配推荐，联盟依托会员单位资源对大型综合订单进行拆解细分并派发，助力入驻企业拓展业务渠道。</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 服务内容 -->
+                    <div class="service-content">
+                        <div class="service-content-header">
+                            <h3 class="service-content-title">服务内容</h3>
+                            <p class="service-content-subtitle">围绕资源共享、学习成长与协同创新三大维度构建服务体系</p>
+                        </div>
+                        <div class="service-content-grid">
+                            <!-- 资源共享 -->
+                            <div class="service-card glass-card">
+                                <div class="service-card-header">
+                                    <div class="service-card-icon service-card-icon--blue">
+                                        <svg class="service-card-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
+                                        </svg>
+                                    </div>
+                                    <h4 class="service-card-title">资源共享</h4>
+                                </div>
+                                <ul class="service-card-list">
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--blue"></span>
+                                        <span>提供办公载体空间与创新工位</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--blue"></span>
+                                        <span>集成数智开物公共服务平台、紫东太初多模态大模型及ScienceClaw科学智能平台使用权限</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--blue"></span>
+                                        <span>搭建经验交流、技能交易与项目协作置换机制</span>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <!-- 学习成长 -->
+                            <div class="service-card glass-card">
+                                <div class="service-card-header">
+                                    <div class="service-card-icon service-card-icon--emerald">
+                                        <svg class="service-card-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+                                        </svg>
+                                    </div>
+                                    <h4 class="service-card-title">学习成长</h4>
+                                </div>
+                                <ul class="service-card-list">
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--emerald"></span>
+                                        <span>依托联盟专家智库打通上下游产业链</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--emerald"></span>
+                                        <span>提供前沿技术指导与商业合作对接</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--emerald"></span>
+                                        <span>定期举办AI技术前沿沙龙，开设OPC创业课程</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--emerald"></span>
+                                        <span>配备创业与技术双导师指导</span>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <!-- 协同创新 -->
+                            <div class="service-card glass-card">
+                                <div class="service-card-header">
+                                    <div class="service-card-icon service-card-icon--violet">
+                                        <svg class="service-card-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+                                        </svg>
+                                    </div>
+                                    <h4 class="service-card-title">协同创新</h4>
+                                </div>
+                                <ul class="service-card-list">
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--violet"></span>
+                                        <span>协助入驻团队申报产业政策与投融资对接</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--violet"></span>
+                                        <span>对优质项目给予平台重点扶持</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--violet"></span>
+                                        <span>已成功举办WAIC FT OPC大赛</span>
+                                    </li>
+                                    <li class="service-card-list-item">
+                                        <span class="service-card-list-dot service-card-list-dot--violet"></span>
+                                        <span>持续策划OPC专题赛事，提供赛事奖金与资源支持</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 招募信息 -->
+                    <div class="recruitment-banner">
+                        <div class="recruitment-banner-inner">
+                            <div class="recruitment-banner-content">
+                                <h3 class="recruitment-banner-title">入驻招募</h3>
+                                <p class="recruitment-banner-text">
+                                    社区面向人工智能领域个体创新者及初创小微团队开展招募，优先方向为<strong class="recruitment-banner-highlight">具身智能</strong>、<strong class="recruitment-banner-highlight">AI4S科研</strong>、<strong class="recruitment-banner-highlight">AIGC文娱</strong>等领域。
+                                </p>
+                                <div class="recruitment-banner-tags">
+                                    <div class="recruitment-tag recruitment-tag--blue">
+                                        <svg class="recruitment-tag-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                                        </svg>
+                                        <span class="recruitment-tag-text">具身智能</span>
+                                    </div>
+                                    <div class="recruitment-tag recruitment-tag--emerald">
+                                        <svg class="recruitment-tag-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                                        </svg>
+                                        <span class="recruitment-tag-text">AI4S科研</span>
+                                    </div>
+                                    <div class="recruitment-tag recruitment-tag--violet">
+                                        <svg class="recruitment-tag-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
+                                        </svg>
+                                        <span class="recruitment-tag-text">AIGC文娱</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="recruitment-banner-actions">
+                                <button @click="openEntryRequirements" class="recruitment-btn recruitment-btn--blue">
+                                    <span>了解入驻要求</span>
+                                </button>
+                                <button @click="openEntryFormModal" class="recruitment-btn recruitment-btn--violet">
+                                    <span>入驻申请</span>
+                                    <svg class="recruitment-btn-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 背景装饰 -->
+                <div class="community-intro-bg">
+                    <div class="community-intro-bg-orb community-intro-bg-orb--blue"></div>
+                    <div class="community-intro-bg-orb community-intro-bg-orb--violet"></div>
+                </div>
+
+                <!-- 入驻要求弹窗 -->
+                <transition name="modal-fade">
+                    <div
+                        v-if="showEntryRequirements"
+                        class="entry-requirements-overlay"
+                        @click.self="closeEntryRequirements"
+                    >
+                        <div class="entry-requirements-modal">
+                            <!-- 头部 -->
+                            <div class="entry-requirements-header">
+                                <div class="entry-requirements-header-inner">
+                                    <h2 class="entry-requirements-title">OPC企业入驻要求</h2>
+                                </div>
+                                <button @click="closeEntryRequirements" class="entry-requirements-close">
+                                    <svg class="entry-requirements-close-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <!-- 内容 -->
+                            <div class="entry-requirements-body">
+                                <!-- 入驻条件 -->
+                                <h3 class="entry-requirements-section-title">
+                                    <span class="entry-requirements-section-indicator entry-requirements-section-indicator--blue"></span>
+                                    入驻条件
+                                </h3>
+                                <div class="entry-requirements-list">
+                                    <div class="entry-requirements-item">
+                                        <span class="entry-requirements-item-num">1</span>
+                                        <p class="entry-requirements-item-text">在京企业，近三年无严重失信记录</p>
+                                    </div>
+                                    <div class="entry-requirements-item">
+                                        <span class="entry-requirements-item-num">2</span>
+                                        <p class="entry-requirements-item-text">员工总数原则上不超过10人</p>
+                                    </div>
+                                    <div class="entry-requirements-item">
+                                        <span class="entry-requirements-item-num">3</span>
+                                        <p class="entry-requirements-item-text">营业执照经营范围包含"人工智能"字样</p>
+                                    </div>
+                                    <div class="entry-requirements-item">
+                                        <span class="entry-requirements-item-num">4</span>
+                                        <p class="entry-requirements-item-text">单一创始人在企业的技术创新、战略决策和主要业务执行中发挥主导作用（经股权穿透后，单一创始人合计持股比例超过50%）</p>
+                                    </div>
+                                    <div class="entry-requirements-item">
+                                        <span class="entry-requirements-item-num">5</span>
+                                        <p class="entry-requirements-item-text">以人工智能技术作为核心生产工具与关键驱动力，利用大模型、智能体、AI开发工具等，完成核心产品开发</p>
+                                    </div>
+                                </div>
+
+                                <!-- 入驻需提交信息 -->
+                                <h3 class="entry-requirements-section-title">
+                                    <span class="entry-requirements-section-indicator entry-requirements-section-indicator--emerald"></span>
+                                    入驻需提交信息
+                                </h3>
+                                <div class="entry-requirements-grid">
+                                    <div class="entry-requirements-grid-item">
+                                        <div class="entry-requirements-grid-label">基本信息</div>
+                                        <div class="entry-requirements-grid-value">企业名称、统一社会信用代码、成立时间</div>
+                                    </div>
+                                    <div class="entry-requirements-grid-item">
+                                        <div class="entry-requirements-grid-label">企业规模</div>
+                                        <div class="entry-requirements-grid-value">从业人数、企业性质、所属细分行业</div>
+                                    </div>
+                                    <div class="entry-requirements-grid-item">
+                                        <div class="entry-requirements-grid-label">企业地址</div>
+                                        <div class="entry-requirements-grid-value">注册地址、办公地址</div>
+                                    </div>
+                                    <div class="entry-requirements-grid-item">
+                                        <div class="entry-requirements-grid-label">企业简介</div>
+                                        <div class="entry-requirements-grid-value">不超过1000字</div>
+                                    </div>
+                                    <div class="entry-requirements-grid-item">
+                                        <div class="entry-requirements-grid-label">创始人信息</div>
+                                        <div class="entry-requirements-grid-value">姓名、持股比例、联系电话</div>
+                                    </div>
+                                    <div class="entry-requirements-grid-item">
+                                        <div class="entry-requirements-grid-label">核心技术情况</div>
+                                        <div class="entry-requirements-grid-value">AI技术应用、核心产品说明</div>
+                                    </div>
+                                </div>
+
+                                <!-- 联系方式 -->
+                                <div class="entry-requirements-contact">
+                                    <div class="entry-requirements-contact-header">
+                                        <svg class="entry-requirements-contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                        </svg>
+                                        <span class="entry-requirements-contact-title">联系方式</span>
+                                    </div>
+                                    <div class="entry-requirements-contact-info">
+                                        <p>电话：010-59227146</p>
+                                        <p>邮箱：huqiao@bjzai.org.cn（备注OPC社区入驻申请+项目名称+负责人姓名）</p>
+                                        <p>工作时间：工作日 9:00-12:00，13:30-18:00</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </transition>
+
+                <!-- 入驻申请弹窗 -->
+                <OpcJoinDialog
+                    :visible.sync="showJoinDialog"
+                    @close="handleJoinDialogClose"
+                />
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import OpcJoinDialog from './OpcJoinDialog.vue'
+
 export default {
-    name: 'ComponentName',
+    name: 'NcmatchIndex',
+    components: {
+        OpcJoinDialog
+    },
     data() {
         return {
-
+            // 入驻申请弹窗
+            showJoinDialog: false,
+            // 入驻要求弹窗
+            showEntryRequirements: false,
+            metrics: [
+                { value: '3500', unit: '㎡', label: '社区建筑面积' },
+                { value: '100', unit: '万', label: '最高商业化奖励' },
+                { value: '200', unit: '万', label: '年度算力券支持' },
+                { value: '5', unit: '大', label: '核心服务体系' },
+            ],
+            policies: [
+                {
+                    id: 1,
+                    name: '创业启动资金【石】',
+                    desc: '支持毕业五年内高校毕业生、在校师生、科研团队及科技人才创办OPC企业，经认定给予一次性启动资金；可申报"景贤人才"。',
+                    amount: '10',
+                    unit: '万元 / 启动扶持',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
+                    icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+                    amountColor: '#2563eb'
+                },
+                {
+                    id: 2,
+                    name: '全栈资源包【市】',
+                    desc: '入驻社区可申领Token、算力、数据、模型工具等补贴。',
+                    amount: '10',
+                    unit: '万元 / 单企业资源上限',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #0891b2 0%, #06b6d4 100%)',
+                    icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10',
+                    amountColor: '#0891b2'
+                },
+                {
+                    id: 3,
+                    name: '模工具与算力支持【石】',
+                    desc: '鼓励使用智能体技术工具进行研发创新，发放词元或算力券，社区按季度申请兑付。',
+                    amount: '200',
+                    unit: '万元 / 年',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%)',
+                    icon: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z',
+                    amountColor: '#7c3aed'
+                },
+                {
+                    id: 4,
+                    name: '商业化突破奖励【石】',
+                    desc: '形成自主核心成果并实现首次市场转化的OPC企业，经评审给予一次性资金支持。',
+                    amount: '100',
+                    unit: '万元 / 首次转化',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #d97706 0%, #f59e0b 100%)',
+                    icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6',
+                    amountColor: '#d97706'
+                },
+                {
+                    id: 5,
+                    name: '赛事路演支持【市/石】',
+                    desc: '市级"创赢未来"OPC专场路演、"创客北京""京彩大创"OPC专项赛道；区级赛事获奖成果转化支持。',
+                    amount: '1000',
+                    unit: '万元 / 路演项目（北京市）',
+                    subAmount: '50',
+                    subUnit: '万元 / 赛事转化（石景山）',
+                    iconGradient: 'linear-gradient(135deg, #dc2626 0%, #ef4444 100%)',
+                    icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z',
+                    amountColor: '#dc2626'
+                },
+                {
+                    id: 6,
+                    name: '融资增信服务【市/石】',
+                    desc: '市级"OPC金融服务专区"担保增信、专属信贷"OPC贷"；区级普惠贷款与创业担保贷款贴息。',
+                    amount: '50',
+                    unit: '万元 / 年贴息上限（石景山）',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
+                    icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+                    amountColor: '#059669'
+                },
+                {
+                    id: 7,
+                    name: '人才安居保障【石】',
+                    desc: '为入驻社区创业人才提供免费周转住房，期满后享受租金优惠。',
+                    amount: '3',
+                    unit: '个月免费 + 3年优惠',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)',
+                    icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+                    amountColor: '#4f46e5'
+                },
+                {
+                    id: 8,
+                    name: '政务服务保障【石】',
+                    desc: 'OPC登记专窗实现"一站准入、一日办结"。',
+                    amount: '1',
+                    unit: '日办结',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%)',
+                    icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01',
+                    amountColor: '#0284c7'
+                },
+                {
+                    id: 9,
+                    name: '合规与培训赋能【市】',
+                    desc: '编制OPC合规指引（财税、知识产权、算法备案、跨境出海）；支持高校设OPC微专业，社区开办夜校与加速营。',
+                    amount: '全链条合规',
+                    unit: '+ 育人闭环',
+                    subAmount: '',
+                    subUnit: '',
+                    iconGradient: 'linear-gradient(135deg, #be185d 0%, #ec4899 100%)',
+                    icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253',
+                    amountColor: '#be185d'
+                }
+            ]
         };
     },
-    computed: {
-
-    },
+    computed: {},
     methods: {
-
+        // 打开入驻要求弹窗
+        openEntryRequirements() {
+            this.showEntryRequirements = true;
+            document.body.style.overflow = 'hidden';
+        },
+        // 关闭入驻要求弹窗
+        closeEntryRequirements() {
+            this.showEntryRequirements = false;
+            document.body.style.overflow = '';
+        },
+        // 打开入驻申请弹窗
+        openEntryFormModal() {
+            this.showJoinDialog = true;
+        },
+        // 入驻申请弹窗关闭回调
+        handleJoinDialogClose() {
+            this.showJoinDialog = false;
+        }
     }
 };
 </script>
 
 <style scoped lang="less">
-.container {
-    width: 100%;
-    height: 100%;
-}
-
-.slogan {
-    width: 100%;
-    height: 100%;
-    padding: 176px 0;
-    .title {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 62px;
-
-        .gradient-text {
-            font-size: 72px;
-            font-weight: 800;
-            background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #3b82f6 70%, #0ea5e9 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .clip-text{
-            font-size: 72px;
-            font-weight: 800;        
-            background: linear-gradient(to right, rgb(147, 51, 234), rgb(37, 99, 235), rgb(6, 182, 212));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 32px;
-        }
-        .desp{
-            font-size: 20px;
-            color:rgb(75, 85, 99)
-        }
-    }
-
-    .MetricsDisplay {
-        display: flex;
-        justify-content: center;
-        gap: 80px;
-
-        .item {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            .item-title{
-                font-size: 36px;
-                font-weight: 700;
-                span{
-                    color: #2563EB;
-                }
-            }
-            .item-details{
-                font-size: 14px;
-                color: #6B7280;
-            }
-        }
-    }
-
-}
-</style>
\ No newline at end of file
+@import url('./less/index.less');
+</style>
diff --git a/f/web-kboss/src/views/Ncmatch/less/OpcJoinDialog.less b/f/web-kboss/src/views/Ncmatch/less/OpcJoinDialog.less
index 4d2f71c..6ed2937 100644
--- a/f/web-kboss/src/views/Ncmatch/less/OpcJoinDialog.less
+++ b/f/web-kboss/src/views/Ncmatch/less/OpcJoinDialog.less
@@ -1,24 +1,27 @@
+// ==================== Dialog Shell ====================
 ::v-deep .opc-application-dialog {
   margin: 0 auto !important;
   width: 100% !important;
   max-width: 900px;
-  // max-height: 85vh;
   border-radius: 16px !important;
-  background: #ffffff;
-  border: 1px solid #dbeafe;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  overflow: hidden;
-  display: flex;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  display: flex !important;
   flex-direction: column;
-
+  max-height: 85vh !important;
+  top: 100px;
   .el-dialog__header {
     display: none;
   }
 
   .el-dialog__body {
-    flex: 1;
+    flex: 1 1 auto;
     padding: 0;
-    overflow: hidden;
+    overflow: hidden !important;
+    display: flex;
+    flex-direction: column;
+    background: transparent !important;
     min-height: 0;
   }
 }
@@ -27,24 +30,29 @@
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
-  overflow: hidden;
 }
 
+// ==================== Layout Container ====================
 .dialog-layout {
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: 100%;
-  background: #ffffff;
+  max-height: 85vh;
   overflow: hidden;
+  background: #ffffff;
+  border-radius: 16px;
+  border: 1px solid #dbeafe;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
 
+// ==================== Header ====================
 .dialog-header {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 32px;
-  background: #ffffff;
   border-bottom: 1px solid #f0f0f0;
 
   .header-info {
@@ -82,12 +90,16 @@
   }
 }
 
+// ==================== Body (scrollable) ====================
 .dialog-body {
-  flex: 1;
+  flex: 1 1 auto;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 24px 32px;
+  min-height: 0;
 }
 
+// ==================== Footer ====================
 .dialog-footer {
   flex-shrink: 0;
   display: flex;
@@ -117,11 +129,25 @@
     border-radius: 8px;
     font-size: 14px;
     height: 40px;
+    padding: 0 20px;
+    border-color: #e5e7eb;
+    color: #6b7280;
+    background: #ffffff;
+
+    &:hover {
+      border-color: #d1d5db;
+      color: #374151;
+    }
   }
 }
 
+// ==================== Form Section ====================
 .form-section {
-  margin-bottom: 32px;
+  margin-bottom: 28px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   .section-title {
     display: flex;
@@ -143,36 +169,137 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
     }
   }
 }
 
-.grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
+// ==================== Field Row（核心：一行就是一个 .field-row） ====================
+// 关键设计：每个"一行"就是一个独立 .field-row 容器
+// - 单列：.field-row（里面 1 个 .field-item 独占整行）
+// - 两列：.field-row.grid-2（里面 2 个 .field-item 自动等分两列）
+// - 三列：.field-row.grid-3（里面 3 个 .field-item 自动等分三列）
+// 这样无论每行是 1、2、3 个字段，列宽都严格对齐
+.field-row {
+  display: block;
+  margin-bottom: 16px;
 
-  .col-span-2 {
-    grid-column: 1 / -1;
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
-.grid-3 {
+.field-row.grid-2 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
 }
 
-.full-width {
-  width: 100%;
+.field-row.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+// ==================== Field Item ====================
+.field-item {
+  display: block;
+  min-width: 0;
+}
+
+.field-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 6px;
+  line-height: 1.4;
+
+  .required {
+    color: #ef4444;
+    margin-left: 2px;
+  }
 }
 
 .field-tip {
   margin: 4px 0 0;
   font-size: 12px;
   color: #9ca3af;
+  line-height: 1.4;
 }
 
+.field-error {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: #ef4444;
+  line-height: 1.4;
+}
+
+.full-width {
+  width: 100%;
+}
+
+// ==================== Element UI Input Overrides ====================
+::v-deep .el-input__inner,
+::v-deep .el-textarea__inner {
+  border-radius: 8px;
+  border-color: #e5e7eb;
+  background: #f9fafb;
+  font-size: 14px;
+  color: #111827;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.15s, box-shadow 0.15s;
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+
+  &:focus {
+    border-color: #2563eb;
+    background: #ffffff;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    outline: none;
+  }
+}
+
+::v-deep .el-input {
+  width: 100% !important;
+  display: block !important;
+
+  .el-input__inner {
+    height: 40px;
+  }
+}
+
+::v-deep .el-textarea {
+  width: 100% !important;
+  display: block !important;
+}
+
+::v-deep .el-textarea__inner {
+  resize: none;
+  padding: 10px 14px;
+  line-height: 1.5;
+}
+
+::v-deep .el-date-editor.el-input {
+  width: 100%;
+  .el-input__inner {
+    padding-right: 30px;
+  }
+}
+
+::v-deep .el-input-number {
+  width: 100% !important;
+  .el-input__inner {
+    text-align: left;
+    padding-left: 14px;
+    padding-right: 60px;
+  }
+}
+
+// ==================== Checkbox Group ====================
 .checkbox-group {
   display: flex;
   flex-wrap: wrap;
@@ -180,7 +307,7 @@
 }
 
 .checkbox-label {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
@@ -209,6 +336,7 @@
   }
 }
 
+// ==================== File Upload ====================
 .file-upload-area {
   display: flex;
   flex-direction: column;
@@ -274,75 +402,13 @@
   }
 }
 
-::v-deep .opc-form {
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  .el-form-item__label {
-    padding-bottom: 6px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #374151;
-    line-height: 1.4;
-  }
-
-  .el-form-item__error {
-    position: static;
-    padding-top: 4px;
-    font-size: 12px;
-  }
-
-  .el-input__inner,
-  .el-textarea__inner {
-    border-radius: 8px;
-    border-color: #e5e7eb;
-    background: #f9fafb;
-    font-size: 14px;
-    color: #111827;
-
-    &::placeholder {
-      color: #9ca3af;
-    }
-
-    &:focus {
-      border-color: #2563eb;
-      background: #ffffff;
-      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-    }
-  }
-
-  .el-input {
-    .el-input__inner {
-      height: 40px;
-    }
-  }
-
-  .el-textarea__inner {
-    resize: none;
-  }
-
-  .el-checkbox__input.is-checked .el-checkbox__inner {
-    background-color: #2563eb;
-    border-color: #2563eb;
-  }
-
-  .el-checkbox__label {
-    color: #374151;
-    font-size: 14px;
-  }
-}
-
+// ==================== Responsive ====================
 @media (max-width: 768px) {
-  .grid-2,
-  .grid-3 {
+  .field-row.grid-2,
+  .field-row.grid-3 {
     grid-template-columns: 1fr;
   }
 
-  .col-span-2 {
-    grid-column: 1;
-  }
-
   .dialog-header {
     padding: 16px 20px;
   }
@@ -353,10 +419,15 @@
 
   .dialog-footer {
     padding: 12px 16px;
+    gap: 8px;
   }
 
   ::v-deep .opc-application-dialog {
     margin: 16px auto !important;
-    max-height: calc(100vh - 32px);
+    max-height: calc(100vh - 32px) !important;
+
+    .el-dialog__body {
+      max-height: calc(100vh - 32px) !important;
+    }
   }
 }
diff --git a/f/web-kboss/src/views/Ncmatch/less/SocietyNewsBrief.less b/f/web-kboss/src/views/Ncmatch/less/SocietyNewsBrief.less
index eb9fca8..67745db 100644
--- a/f/web-kboss/src/views/Ncmatch/less/SocietyNewsBrief.less
+++ b/f/web-kboss/src/views/Ncmatch/less/SocietyNewsBrief.less
@@ -454,8 +454,8 @@
 }
 
 .detail-content {
-    font-size: 14px;
-    line-height: 1.9;
+    font-size: 13px;
+    line-height: 1.85;
     color: #374151;
 
     p {
diff --git a/f/web-kboss/src/views/Ncmatch/less/index.less b/f/web-kboss/src/views/Ncmatch/less/index.less
new file mode 100644
index 0000000..d769feb
--- /dev/null
+++ b/f/web-kboss/src/views/Ncmatch/less/index.less
@@ -0,0 +1,1193 @@
+// ==================== Font ====================
+@font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+
+// ==================== Page Wrapper ====================
+.page-wrapper {
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    font-family: @font-family;
+    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 40%, #ecfeff 100%);
+}
+
+// ==================== 网格背景点 ====================
+.bg-grid {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-image: radial-gradient(rgba(59, 130, 246, 0.12) 1px, transparent 1px);
+    background-size: 32px 32px;
+}
+
+// ==================== 浮动光球 ====================
+.orb {
+    position: fixed;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 0;
+    filter: blur(80px);
+    animation: orb-float 25s ease-in-out infinite;
+}
+
+.orb-1 {
+    width: 500px;
+    height: 500px;
+    top: -100px;
+    right: -100px;
+    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+    opacity: 0.5;
+    animation-delay: 0s;
+}
+
+.orb-2 {
+    width: 600px;
+    height: 600px;
+    bottom: -150px;
+    left: -150px;
+    background: radial-gradient(circle, #1d4ed8 0%, transparent 70%);
+    opacity: 0.4;
+    animation-delay: -8s;
+}
+
+.orb-3 {
+    width: 400px;
+    height: 400px;
+    top: 50%;
+    left: 10%;
+    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
+    opacity: 0.35;
+    animation-delay: -16s;
+}
+
+.orb-4 {
+    width: 300px;
+    height: 300px;
+    top: 30%;
+    right: 5%;
+    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+    opacity: 0.3;
+    animation-delay: -5s;
+}
+
+@keyframes orb-float {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(25px, -25px) scale(1.03); }
+    66% { transform: translate(-15px, 15px) scale(0.97); }
+}
+
+// ==================== Container ====================
+.container {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+}
+
+// ==================== Slogan ====================
+.slogan {
+    width: 100%;
+    padding: 176px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding-bottom: 72px;
+        font-weight: 900;
+
+        .gradient-text {
+            font-size: 72px;
+            // font-weight: 800;
+            background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #3b82f6 70%, #0ea5e9 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .clip-text {
+            font-size: 72px;
+            // font-weight: 800;
+            margin-bottom: 32px;
+            background: linear-gradient(to right, rgb(147, 51, 234), rgb(37, 99, 235), rgb(6, 182, 212));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .desp {
+            font-size: 20px;
+            color: rgb(75, 85, 99);
+        }
+    }
+}
+
+// ==================== Metrics Display ====================
+.metrics-display {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+    width: 100%;
+    max-width: 960px;
+    padding: 0 24px;
+}
+
+// ==================== 指标卡片 ====================
+.metric-card {
+    flex: 1;
+    // min-width: 180px;
+    // max-width: 220px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 28px 20px;
+    text-align: center;
+    border-radius: 16px;
+   
+
+    .card-num {
+        font-size: 40px;
+        font-weight: 700;
+        color: #1e293b;
+        // line-height: 1;
+       
+    }
+
+    .card-unit {
+        font-size: 40px;
+        font-weight: 600;
+        // color: #2563eb;  
+         background: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #06b6d4 100%);
+         background-color: #000;
+         -webkit-background-clip: text;
+         -webkit-text-fill-color: transparent;
+         background-clip: text;
+
+        // margin-top: 4px;
+        // line-height: 1;
+    }
+
+    .card-label {
+        font-size: 14px;
+        color: #6b7280;
+        margin-top: 8px;
+        line-height: 1.4;
+    }
+}
+
+// ==================== 玻璃卡片（政策卡） ====================
+.glass-card {
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(24px) saturate(1.2);
+    -webkit-backdrop-filter: blur(24px) saturate(1.2);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(59, 130, 246, 0.08);
+    transition: all 0.3s ease;
+
+    &:hover {
+        border-color: rgba(59, 130, 246, 0.4);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 48px rgba(59, 130, 246, 0.15);
+        transform: translateY(-4px);
+    }
+}
+
+// ==================== 优惠政策 ====================
+.policies {
+    width: 100%;
+    padding: 80px 0;
+
+    .policies-inner {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 0 32px;
+    }
+
+    .policies-header {
+        text-align: center;
+        margin-bottom: 56px;
+
+        .policies-title {
+            font-size: 36px;
+            font-weight: 700;
+            color: #1e293b;
+            margin-bottom: 16px;
+        }
+
+        .policies-subtitle {
+            font-size: 18px;
+            color: #6b7280;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+    }
+}
+
+// ==================== 政策卡片网格 ====================
+.policy-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+}
+
+.policy-card {
+    border-radius: 16px;
+    padding: 28px;
+    // cursor: default;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .policy-card-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 16px;
+
+        .policy-icon {
+            flex-shrink: 0;
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .icon-svg {
+                width: 20px;
+                height: 20px;
+                color: #fff;
+            }
+        }
+
+        .policy-name {
+            font-size: 16px;
+            font-weight: 700;
+            color: #1e293b;
+            line-height: 1.3;
+        }
+    }
+
+    .policy-desc {
+        font-size: 14px;
+        color: #6b7280;
+        line-height: 1.7;
+        margin-bottom: 16px;
+    }
+
+    .policy-amount {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+
+        .amount-num {
+            font-size: 20px;
+            font-weight: 800;
+            line-height: 1;
+        }
+
+        .amount-unit {
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 1;
+        }
+    }
+
+    .policy-sub-amount {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+        margin-top: 6px;
+
+        .amount-num.sub {
+            font-size: 22px;
+            font-weight: 800;
+            line-height: 1;
+        }
+
+        .amount-unit.sub {
+            font-size: 12px;
+            font-weight: 600;
+            line-height: 1;
+            opacity: 0.8;
+        }
+    }
+}
+
+// ==================== 政策脚注 ====================
+.policy-footer {
+    margin-top: 48px;
+    text-align: center;
+
+    .footer-note {
+        font-size: 14px;
+        color: #9ca3af;
+        line-height: 1.8;
+    }
+}
+
+// ==================== Responsive ====================
+@media (max-width: 1024px) {
+    .policy-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .core-advantages-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    .service-content-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .slogan {
+        padding: 120px 0 80px;
+
+        .title {
+            padding-bottom: 48px;
+
+            .gradient-text,
+            .clip-text {
+                font-size: 48px;
+            }
+
+            .desp {
+                font-size: 16px;
+                padding: 0 16px;
+            }
+        }
+    }
+
+    .metrics-display {
+        gap: 12px;
+    }
+
+    .policy-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .policies .policies-header .policies-title {
+        font-size: 28px;
+    }
+}
+
+// ==================== 紫东数智OPC社区介绍 ====================
+.community-intro {
+    position: relative;
+    padding: 80px 0;
+    overflow: hidden;
+
+    .community-intro-container {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 0 48px;
+        position: relative;
+        z-index: 1;
+
+        @media (max-width: 768px) {
+            padding: 0 24px;
+        }
+    }
+
+    // 背景装饰
+    .community-intro-bg {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+
+        .community-intro-bg-orb {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(100px);
+
+            &--blue {
+                top: 0;
+                left: 25%;
+                width: 400px;
+                height: 400px;
+                background: rgba(219, 234, 254, 0.2);
+            }
+
+            &--violet {
+                bottom: 25%;
+                right: 25%;
+                width: 320px;
+                height: 320px;
+                background: rgba(238, 233, 254, 0.15);
+            }
+        }
+    }
+
+    // 页面标题
+    .community-intro-header {
+        text-align: center;
+        margin-bottom: 48px;
+
+        .community-intro-title {
+            font-size: 36px;
+            font-weight: 800;
+            color: #111827;
+            margin-bottom: 16px;
+
+            @media (max-width: 768px) {
+                font-size: 28px;
+            }
+        }
+
+        .community-intro-subtitle {
+            font-size: 18px;
+            color: #6b7280;
+            max-width: 800px;
+            margin: 0 auto;
+            line-height: 1.7;
+
+            @media (max-width: 768px) {
+                font-size: 16px;
+            }
+        }
+    }
+
+    // 社区简介
+    .community-intro-brief {
+        padding: 32px;
+        margin-bottom: 48px;
+
+        .community-intro-brief-inner {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+
+            @media (max-width: 768px) {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+
+        .community-intro-logos {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex-shrink: 0;
+        }
+
+        .community-intro-logo-wrapper {
+            width: 160px;
+            height: 56px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .community-intro-logo {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+
+        .community-intro-brief-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .community-intro-brief-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: #111827;
+            margin-bottom: 8px;
+        }
+
+        .community-intro-brief-text {
+            font-size: 16px;
+            color: #4b5563;
+            line-height: 1.7;
+        }
+
+        .community-intro-brief-highlight {
+            color: #111827;
+            font-weight: 700;
+        }
+    }
+
+    // 核心优势
+    .core-advantages {
+        margin-bottom: 64px;
+
+        .core-advantages-header {
+            text-align: center;
+            margin-bottom: 32px;
+
+            .core-advantages-title {
+                font-size: 24px;
+                font-weight: 700;
+                color: #111827;
+                margin-bottom: 8px;
+            }
+
+            .core-advantages-subtitle {
+                font-size: 16px;
+                color: #6b7280;
+            }
+        }
+
+        .core-advantages-grid {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 24px;
+
+            @media (max-width: 1200px) {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            @media (max-width: 768px) {
+                grid-template-columns: 1fr !important;
+            }
+        }
+    }
+
+    // 核心优势卡片
+    .core-advantage-card {
+        padding: 24px;
+        cursor: default;
+
+        &:hover {
+            border-color: rgba(59, 130, 246, 0.3);
+
+            .core-advantage-image {
+                transform: scale(1.05);
+            }
+
+            .core-advantage-icon {
+                transform: scale(1.1);
+            }
+        }
+
+        .core-advantage-image-wrapper {
+            border-radius: 12px;
+            overflow: hidden;
+            margin-bottom: 16px;
+            background-color: rgba(59, 130, 246, 0.05);
+        }
+
+        .core-advantage-image {
+            width: 100%;
+            height: 128px;
+            object-fit: cover;
+            transition: transform 0.5s ease;
+        }
+
+        .core-advantage-content {
+            .core-advantage-icon-title {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                margin-bottom: 16px;
+            }
+
+            .core-advantage-icon {
+                flex-shrink: 0;
+                width: 40px;
+                height: 40px;
+                border-radius: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: transform 0.3s ease;
+
+                &--blue {
+                    background-color: #eff6ff;
+                    border: 1px solid #bfdbfe;
+
+                    .core-advantage-icon-svg {
+                        color: #60a5fa;
+                    }
+                }
+
+                &--cyan {
+                    background-color: #ecfeff;
+                    border: 1px solid #a5f3fc;
+
+                    .core-advantage-icon-svg {
+                        color: #22d3ee;
+                    }
+                }
+
+                &--violet {
+                    background-color: #f5f3ff;
+                    border: 1px solid #ddd6fe;
+
+                    .core-advantage-icon-svg {
+                        color: #a78bfa;
+                    }
+                }
+
+                &--amber {
+                    background-color: #fffbeb;
+                    border: 1px solid #fde68a;
+
+                    .core-advantage-icon-svg {
+                        color: #fbbf24;
+                    }
+                }
+
+                &--rose {
+                    background-color: #fff1f2;
+                    border: 1px solid #fecdd3;
+
+                    .core-advantage-icon-svg {
+                        color: #fb7185;
+                    }
+                }
+            }
+
+            .core-advantage-icon-svg {
+                width: 20px;
+                height: 20px;
+            }
+
+            .core-advantage-name {
+                font-size: 16px;
+                font-weight: 700;
+                color: #111827;
+                line-height: 1.3;
+            }
+
+            .core-advantage-desc {
+                font-size: 14px;
+                color: #6b7280;
+                line-height: 1.7;
+            }
+        }
+    }
+
+    // 服务内容
+    .service-content {
+        margin-bottom: 64px;
+
+        .service-content-header {
+            text-align: center;
+            margin-bottom: 32px;
+
+            .service-content-title {
+                font-size: 24px;
+                font-weight: 700;
+                color: #111827;
+                margin-bottom: 8px;
+            }
+
+            .service-content-subtitle {
+                font-size: 16px;
+                color: #6b7280;
+            }
+        }
+
+        .service-content-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 24px;
+
+            @media (max-width: 1024px) {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            @media (max-width: 768px) {
+                grid-template-columns: 1fr !important;
+            }
+        }
+    }
+
+    // 服务卡片
+    .service-card {
+        padding: 24px;
+        cursor: default;
+
+        &:hover {
+            border-color: rgba(59, 130, 246, 0.3);
+
+            .service-card-icon {
+                transform: scale(1.1);
+            }
+        }
+
+        .service-card-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 16px;
+        }
+
+        .service-card-icon {
+            flex-shrink: 0;
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.3s ease;
+
+            &--blue {
+                background-color: #eff6ff;
+                border: 1px solid #bfdbfe;
+
+                .service-card-icon-svg {
+                    color: #60a5fa;
+                }
+            }
+
+            &--emerald {
+                background-color: #ecfdf5;
+                border: 1px solid #a7f3d0;
+
+                .service-card-icon-svg {
+                    color: #34d399;
+                }
+            }
+
+            &--violet {
+                background-color: #f5f3ff;
+                border: 1px solid #ddd6fe;
+
+                .service-card-icon-svg {
+                    color: #a78bfa;
+                }
+            }
+        }
+
+        .service-card-icon-svg {
+            width: 20px;
+            height: 20px;
+        }
+
+        .service-card-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: #111827;
+        }
+
+        .service-card-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .service-card-list-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 8px;
+            margin-bottom: 10px;
+            font-size: 14px;
+            color: #4b5563;
+            line-height: 1.6;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        .service-card-list-dot {
+            flex-shrink: 0;
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            margin-top: 8px;
+
+            &--blue {
+                background-color: #60a5fa;
+            }
+
+            &--emerald {
+                background-color: #34d399;
+            }
+
+            &--violet {
+                background-color: #a78bfa;
+            }
+        }
+    }
+
+    // 招募信息
+    .recruitment-banner {
+        .recruitment-banner-inner {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 24px;
+            padding: 32px;
+            border-radius: 16px;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
+
+            @media (max-width: 768px) {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+
+        .recruitment-banner-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .recruitment-banner-title {
+            font-size: 20px;
+            font-weight: 700;
+            color: #111827;
+            margin-bottom: 12px;
+        }
+
+        .recruitment-banner-text {
+            font-size: 16px;
+            color: #4b5563;
+            line-height: 1.7;
+            margin-bottom: 16px;
+        }
+
+        .recruitment-banner-highlight {
+            color: #111827;
+            font-weight: 700;
+        }
+
+        .recruitment-banner-tags {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .recruitment-tag {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 12px;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+            &--blue {
+                border: 1px solid #dbeafe;
+            }
+
+            &--emerald {
+                border: 1px solid #d1fae5;
+            }
+
+            &--violet {
+                border: 1px solid #ede9fe;
+            }
+        }
+
+        .recruitment-tag-icon {
+            width: 14px;
+            height: 14px;
+
+            .recruitment-tag--blue & {
+                color: #60a5fa;
+            }
+
+            .recruitment-tag--emerald & {
+                color: #34d399;
+            }
+
+            .recruitment-tag--violet & {
+                color: #a78bfa;
+            }
+        }
+
+        .recruitment-tag-text {
+            font-size: 12px;
+            font-weight: 500;
+            color: #374151;
+        }
+
+        .recruitment-banner-actions {
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .recruitment-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 12px 24px;
+            font-size: 16px;
+            font-weight: 600;
+            border-radius: 12px;
+            border: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+
+            &--blue {
+                background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+                color: #fff;
+                box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
+
+                &:hover {
+                    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
+                    transform: translateY(-2px);
+                }
+            }
+
+            &--violet {
+                background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+                color: #fff;
+                box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
+
+                &:hover {
+                    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+                    transform: translateY(-2px);
+                }
+            }
+        }
+
+        .recruitment-btn-arrow {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
+
+// ==================== 入驻要求弹窗 ====================
+// 弹窗过渡动画
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+    transition: opacity 0.3s ease;
+}
+
+.modal-fade-enter,
+.modal-fade-leave-to {
+    opacity: 0;
+}
+
+.entry-requirements-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(6px);
+}
+
+.entry-requirements-modal {
+    width: 100%;
+    max-width: 672px;
+    margin: 0 16px;
+    background: #fff;
+    border-radius: 24px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+    animation: modalFadeIn 0.3s ease;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+
+    @keyframes modalFadeIn {
+        from {
+            opacity: 0;
+            transform: scale(0.95);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    // 头部
+    .entry-requirements-header {
+        padding: 2px 32px 0px;
+        border-bottom: 1px solid #f3f4f6;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .entry-requirements-header-inner {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .entry-requirements-title {
+            font-size: 20px;
+            font-weight: 700;
+            color: #111827;
+        }
+
+        .entry-requirements-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: #f3f4f6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.2s ease;
+
+            &:hover {
+                background: #e5e7eb;
+            }
+
+            .entry-requirements-close-icon {
+                width: 16px;
+                height: 16px;
+                color: #6b7280;
+            }
+        }
+    }
+
+    // 内容区域
+    .entry-requirements-body {
+        padding: 0px 32px;
+        overflow-y: auto;
+        padding-bottom: 10px;
+        flex: 1;
+    }
+
+    // 区块标题
+    .entry-requirements-section-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 16px;
+        font-weight: 700;
+        color: #111827;
+        margin-bottom: 16px;
+    }
+
+    .entry-requirements-section-indicator {
+        width: 4px;
+        height: 20px;
+        border-radius: 4px;
+
+        &--blue {
+            background-color: #3b82f6;
+        }
+
+        &--emerald {
+            background-color: #10b981;
+        }
+    }
+
+    // 入驻条件列表
+    .entry-requirements-list {
+        margin-bottom: 32px;
+    }
+
+    .entry-requirements-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 12px;
+        border-radius: 12px;
+        background: #eff6ff;
+        border: 1px solid #dbeafe;
+        margin-bottom: 12px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        .entry-requirements-item-num {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: #dbeafe;
+            color: #2563eb;
+            font-size: 12px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            margin-top: 2px;
+        }
+
+        .entry-requirements-item-text {
+            font-size: 14px;
+            color: #374151;
+            line-height: 1.6;
+        }
+    }
+
+    // 提交信息网格
+    .entry-requirements-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        margin-bottom: 24px;
+
+        @media (max-width: 640px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .entry-requirements-grid-item {
+        padding: 12px;
+        border-radius: 12px;
+        background: #f9fafb;
+        border: 1px solid #f3f4f6;
+
+        .entry-requirements-grid-label {
+            font-size: 12px;
+            color: #6b7280;
+            margin-bottom: 4px;
+        }
+
+        .entry-requirements-grid-value {
+            font-size: 14px;
+            color: #374151;
+        }
+    }
+
+    // 联系方式
+    .entry-requirements-contact {
+        padding: 16px;
+        border-radius: 12px;
+        background: #fffbeb;
+        border: 1px solid #fef3c7;
+
+        .entry-requirements-contact-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+
+            .entry-requirements-contact-icon {
+                width: 16px;
+                height: 16px;
+                color: #d97706;
+            }
+
+            .entry-requirements-contact-title {
+                font-size: 14px;
+                font-weight: 600;
+                color: #92400e;
+            }
+        }
+
+        .entry-requirements-contact-info {
+            font-size: 14px;
+            color: #b45309;
+            line-height: 1.6;
+
+            p {
+                margin: 0;
+
+                &:not(:last-child) {
+                    margin-bottom: 4px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/f/web-kboss/src/views/Ncmatch/opcOverview.vue b/f/web-kboss/src/views/Ncmatch/opcOverview.vue
index 5e3dce9..f9dcc4a 100644
--- a/f/web-kboss/src/views/Ncmatch/opcOverview.vue
+++ b/f/web-kboss/src/views/Ncmatch/opcOverview.vue
@@ -18,7 +18,7 @@
           </div>
   
           <!-- 园区图片 -->
-          <div class="hero-images">
+          <div class="hero-images"> 
             <div class="image-card">
               <div class="image-wrapper">
                 <img src="./images/opc-community-sign.jpeg" alt="紫东数智OPC社区">
@@ -37,7 +37,7 @@
             </div>
           </div>
         </div>
-      </section>
+      </section> 
   
       <!-- 入驻流程 -->
       <section class="process-section">
@@ -142,7 +142,7 @@
   export default {
     name: 'OpcOverview',
     components: { OpcJoinDialog },
-    data() {
+    data() { 
       return {
         showFormModal: false
       }
diff --git a/f/web-kboss/src/views/Ncmatch/supply_demand.vue b/f/web-kboss/src/views/Ncmatch/supply_demand.vue
new file mode 100644
index 0000000..4e2a6e7
--- /dev/null
+++ b/f/web-kboss/src/views/Ncmatch/supply_demand.vue
@@ -0,0 +1,823 @@
+<template>
+    <div class="supply-demand-wrapper">
+        <!-- 网格背景点 -->
+        <div class="bg-grid"></div>
+
+        <!-- 浮动光球装饰 -->
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+        <div class="orb orb-4"></div>
+
+        <!-- 供需广场主体 -->
+        <main class="supply-demand">
+            <div class="supply-demand-container">
+                <!-- 页面标题 -->
+                <div class="supply-demand-header">
+                    <h1 class="supply-demand-title gradient-text">供需广场</h1>
+                    <p class="supply-demand-subtitle">产业需求与能力精准对接，助力资源高效匹配</p>
+                </div>
+
+                <!-- 简单六步 -->
+                <div class="process-flow">
+                    <h2 class="process-flow-title">简单六步，开启服务合作之旅</h2>
+                    <div class="process-flow-steps">
+                        <!-- 企业入驻 -->
+                        <div class="process-step glass-card" @click="openEntryFormModal">
+                            <div class="process-step-header">
+                                <div class="process-step-icon process-step-icon--blue">
+                                    <svg class="process-step-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="process-step-name">企业入驻</h3>
+                            </div>
+                            <p class="process-step-desc">点击填写入驻申请</p>
+                        </div>
+                        <!-- 箭头 -->
+                        <svg class="process-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                        <!-- 发布供需 -->
+                        <div class="process-step glass-card">
+                            <div class="process-step-header">
+                                <div class="process-step-icon process-step-icon--cyan">
+                                    <svg class="process-step-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="process-step-name">发布供需</h3>
+                            </div>
+                            <p class="process-step-desc">发布资源供给或业务需求信息</p>
+                        </div>
+                        <!-- 箭头 -->
+                        <svg class="process-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                        <!-- 精准匹配 -->
+                        <div class="process-step glass-card">
+                            <div class="process-step-header">
+                                <div class="process-step-icon process-step-icon--emerald">
+                                    <svg class="process-step-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="process-step-name">精准匹配</h3>
+                            </div>
+                            <p class="process-step-desc">AI引擎智能推荐最优合作方</p>
+                        </div>
+                        <!-- 箭头 -->
+                        <svg class="process-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                        <!-- 签约合作 -->
+                        <div class="process-step glass-card">
+                            <div class="process-step-header">
+                                <div class="process-step-icon process-step-icon--teal">
+                                    <svg class="process-step-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="process-step-name">签约合作</h3>
+                            </div>
+                            <p class="process-step-desc">线上签约，安全高效达成合作</p>
+                        </div>
+                        <!-- 箭头 -->
+                        <svg class="process-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                        <!-- 履约跟进 -->
+                        <div class="process-step glass-card">
+                            <div class="process-step-header">
+                                <div class="process-step-icon process-step-icon--amber">
+                                    <svg class="process-step-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="process-step-name">履约跟进</h3>
+                            </div>
+                            <p class="process-step-desc">全程跟踪项目执行进度</p>
+                        </div>
+                        <!-- 箭头 -->
+                        <svg class="process-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                        <!-- 在线验收 -->
+                        <div class="process-step glass-card">
+                            <div class="process-step-header">
+                                <div class="process-step-icon process-step-icon--purple">
+                                    <svg class="process-step-icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                    </svg>
+                                </div>
+                                <h3 class="process-step-name">在线验收</h3>
+                            </div>
+                            <p class="process-step-desc">线上验收，确保交付质量</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 筛选标签 -->
+                <div class="tab-nav">
+                    <button 
+                        class="tab-nav-item" 
+                        :class="{ 'tab-nav-item--active': currentTab === 'all' }"
+                        @click="switchTab('all')"
+                    >全部</button>
+                    <button 
+                        class="tab-nav-item"
+                        :class="{ 'tab-nav-item--active': currentTab === 'demand' }"
+                        @click="switchTab('demand')"
+                    >需求发布</button>
+                    <button 
+                        class="tab-nav-item"
+                        :class="{ 'tab-nav-item--active': currentTab === 'supply' }"
+                        @click="switchTab('supply')"
+                    >能力供给</button>
+                    <button 
+                        class="tab-nav-item"
+                        :class="{ 'tab-nav-item--active': currentTab === 'signed' }"
+                        @click="switchTab('signed')"
+                    >签约项目</button>
+                </div>
+
+                <!-- 筛选侧边栏 + 卡片列表 -->
+                <div class="content-layout">
+                    <!-- 左侧筛选面板 -->
+                    <aside class="filter-sidebar">
+                        <!-- 能力供给分类（全部时只展示前3个） -->
+                        <div v-show="currentTab === 'all' || currentTab === 'supply'" class="filter-group">
+                            <h3 class="filter-group-title">
+                                <span class="filter-group-badge filter-group-badge--blue">供</span>
+                                企业分类
+                            </h3>
+                            <div class="filter-buttons">
+                                <button
+                                    class="filter-btn"
+                                    :class="{ 'filter-btn--active': activeSupplyFilter === category }"
+                                    @click="filterSupply(category)"
+                                    v-for="category in currentTab === 'all' ? supplyCategories.slice(0, 3) : supplyCategories"
+                                    :key="'s-' + category"
+                                >{{ category }}</button>
+                            </div>
+                        </div>
+                        <div v-show="currentTab === 'all' || currentTab === 'supply'" class="filter-divider"></div>
+
+                        <!-- 需求发布分类 -->
+                        <div v-show="currentTab === 'all' || currentTab === 'demand'" class="filter-group">
+                            <h3 class="filter-group-title">
+                                <span class="filter-group-badge filter-group-badge--cyan">需</span>
+                                需求分类
+                            </h3>
+                            <div class="filter-buttons">
+                                <button
+                                    class="filter-btn"
+                                    :class="{ 'filter-btn--active': activeDemandFilter === category }"
+                                    @click="filterDemand(category)"
+                                    v-for="category in currentTab === 'all' ? demandCategories.slice(0, 3) : demandCategories"
+                                    :key="'d-' + category"
+                                >{{ category }}</button>
+                            </div>
+                        </div>
+                        <div v-show="currentTab === 'all' || currentTab === 'demand'" class="filter-divider"></div>
+
+                        <!-- 签约项目分类 -->
+                        <div v-show="currentTab === 'all' || currentTab === 'signed'" class="filter-group">
+                            <h3 class="filter-group-title">
+                                <span class="filter-group-badge filter-group-badge--emerald">签</span>
+                                签约分类
+                            </h3>
+                            <div class="filter-buttons">
+                                <button
+                                    class="filter-btn"
+                                    :class="{ 'filter-btn--active': activeSignedFilter === category }"
+                                    @click="filterSigned(category)"
+                                    v-for="category in currentTab === 'all' ? signedCategories.slice(0, 3) : signedCategories"
+                                    :key="'g-' + category"
+                                >{{ category }}</button>
+                            </div>
+                        </div>
+                    </aside>
+
+                    <!-- 卡片列表 -->
+                    <div class="card-grid" id="item-list">
+                        <!-- 空状态卡片 -->
+                        <div v-if="filteredItems.length === 0" class="empty-state">
+                            <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+                            </svg>
+                            <p class="empty-state-text">暂无数据</p>
+                            <p class="empty-state-hint">该分类下暂无相关信息</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <OpcJoinDialog :visible.sync="showJoinDialog" @close="handleJoinDialogClose" />
+    </div>
+</template>
+
+<script>
+import OpcJoinDialog from './OpcJoinDialog.vue'
+
+export default {
+    name: 'SupplyDemand',
+    components: {
+        OpcJoinDialog
+    },
+    data() {
+        return {
+            // 供需广场相关数据
+            currentTab: 'all',
+            activeSupplyFilter: '全部',
+            activeDemandFilter: '全部',
+            activeSignedFilter: '全部',
+            supplyCategories: ['全部', 'AI/智能', '软件开发', '设计创意', '外贸出海', '教育培训', '医疗健康', '工业制造', '农业科技', '校园服务'],
+            demandCategories: ['全部', '智能设备', 'AI营销', '智能硬件', '铁路交通', '跨境电商', '前端开发'],
+            signedCategories: ['全部', '智能设备', 'AI营销', '智能硬件', '铁路交通'],
+            supplyItems: [],
+            demandItems: [],
+            signedItems: [],
+            showJoinDialog: false
+        };
+    },
+    computed: {
+        filteredItems() {
+            if (this.currentTab === 'supply') {
+                return this.supplyItems;
+            } else if (this.currentTab === 'demand') {
+                return this.demandItems;
+            } else if (this.currentTab === 'signed') {
+                return this.signedItems;
+            }
+            return [...this.supplyItems, ...this.demandItems, ...this.signedItems];
+        }
+    },
+    methods: {
+        // 打开入驻表单弹窗
+        openEntryFormModal() {
+            this.showJoinDialog = true;
+        },
+        // 入驻弹窗关闭
+        handleJoinDialogClose() {
+            this.showJoinDialog = false;
+        },
+        // 切换tab
+        switchTab(tab) {
+            this.currentTab = tab;
+            // 切换 tab 时重置当前分类下的小筛选
+            if (tab === 'supply') this.activeSupplyFilter = '全部';
+            if (tab === 'demand') this.activeDemandFilter = '全部';
+            if (tab === 'signed') this.activeSignedFilter = '全部';
+        },
+        // 筛选能力供给
+        filterSupply(category) {
+            this.activeSupplyFilter = category;
+            // 若当前不在 supply tab，则切到 supply tab 并应用筛选
+            if (this.currentTab === 'all') {
+                this.currentTab = 'supply';
+            }
+        },
+        // 筛选需求发布
+        filterDemand(category) {
+            this.activeDemandFilter = category;
+            if (this.currentTab === 'all') {
+                this.currentTab = 'demand';
+            }
+        },
+        // 筛选签约项目
+        filterSigned(category) {
+            this.activeSignedFilter = category;
+            if (this.currentTab === 'all') {
+                this.currentTab = 'signed';
+            }
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+// ==================== Font ====================
+@font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+
+// ==================== Wrapper ====================
+.supply-demand-wrapper {
+    position: relative;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    // overflow: hidden;
+    font-family: @font-family;
+
+}
+
+// ==================== 网格背景点 ====================
+.bg-grid {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-image: radial-gradient(rgba(59, 130, 246, 0.12) 1px, transparent 1px);
+    background-size: 32px 32px;
+}
+
+// ==================== 浮动光球 ====================
+.orb {
+    position: fixed;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 0;
+    filter: blur(80px);
+    animation: orb-float 25s ease-in-out infinite;
+}
+
+.orb-1 {
+    width: 500px;
+    height: 500px;
+    top: -100px;
+    right: -100px;
+    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+    opacity: 0.5;
+    animation-delay: 0s;
+}
+
+.orb-2 {
+    width: 600px;
+    height: 600px;
+    bottom: -150px;
+    left: -150px;
+    background: radial-gradient(circle, #1d4ed8 0%, transparent 70%);
+    opacity: 0.4;
+    animation-delay: -8s;
+}
+
+.orb-3 {
+    width: 400px;
+    height: 400px;
+    top: 50%;
+    left: 10%;
+    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
+    opacity: 0.35;
+    animation-delay: -16s;
+}
+
+.orb-4 {
+    width: 300px;
+    height: 300px;
+    top: 30%;
+    right: 5%;
+    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+    opacity: 0.3;
+    animation-delay: -5s;
+}
+
+@keyframes orb-float {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(25px, -25px) scale(1.03); }
+    66% { transform: translate(-15px, 15px) scale(0.97); }
+}
+
+// ==================== 玻璃卡片 ====================
+.glass-card {
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(24px) saturate(1.2);
+    -webkit-backdrop-filter: blur(24px) saturate(1.2);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(59, 130, 246, 0.08);
+    transition: all 0.3s ease;
+
+    &:hover {
+        border-color: rgba(59, 130, 246, 0.4);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 48px rgba(59, 130, 246, 0.15);
+        transform: translateY(-4px);
+    }
+}
+
+// ==================== 供需广场主体 ====================
+.supply-demand {
+    position: relative;
+    z-index: 10;
+    padding-top: 40px;
+    padding-bottom: 80px;
+
+    .supply-demand-container {
+        max-width: 1500px;
+        margin: 0 auto;
+        padding: 0 48px;
+
+        @media (max-width: 768px) {
+            padding: 0 24px;
+        }
+    }
+
+    // 页面标题
+    .supply-demand-header {
+        text-align: center;
+        margin-bottom: 48px;
+
+        .supply-demand-title {
+            font-size: 36px;
+            font-weight: 700;
+            margin-bottom: 16px;
+            background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #3b82f6 70%, #0ea5e9 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .supply-demand-subtitle {
+            font-size: 18px;
+            color: #6b7280;
+        }
+    }
+
+    // 简单六步流程
+    .process-flow {
+        margin-bottom: 48px;
+
+        .process-flow-title {
+            text-align: center;
+            font-size: 20px;
+            font-weight: 500;
+            color: #4b5563;
+            margin-bottom: 32px;
+        }
+
+        .process-flow-steps {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+    }
+
+    // 流程步骤卡片
+    .process-step {
+        flex: 1;
+        max-width: 200px;
+        padding: 16px;
+        border-radius: 16px;
+        cursor: pointer;
+
+        &:hover {
+            border-color: rgba(59, 130, 246, 0.4);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 48px rgba(59, 130, 246, 0.15);
+            transform: translateY(-4px);
+        }
+
+        .process-step-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+
+        .process-step-icon {
+            flex-shrink: 0;
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &--blue {
+                background-color: #eff6ff;
+                border: 1px solid #bfdbfe;
+
+                .process-step-icon-svg {
+                    color: #60a5fa;
+                }
+            }
+
+            &--cyan {
+                background-color: #ecfeff;
+                border: 1px solid #a5f3fc;
+
+                .process-step-icon-svg {
+                    color: #22d3ee;
+                }
+            }
+
+            &--emerald {
+                background-color: #ecfdf5;
+                border: 1px solid #a7f3d0;
+
+                .process-step-icon-svg {
+                    color: #34d399;
+                }
+            }
+
+            &--teal {
+                background-color: #f0fdfa;
+                border: 1px solid #99f6e4;
+
+                .process-step-icon-svg {
+                    color: #2dd4bf;
+                }
+            }
+
+            &--amber {
+                background-color: #fffbeb;
+                border: 1px solid #fde68a;
+
+                .process-step-icon-svg {
+                    color: #fbbf24;
+                }
+            }
+
+            &--purple {
+                background-color: #faf5ff;
+                border: 1px solid #e9d5ff;
+
+                .process-step-icon-svg {
+                    color: #c084fc;
+                }
+            }
+        }
+
+        .process-step-icon-svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        .process-step-name {
+            font-size: 14px;
+            font-weight: 600;
+            color: #111827;
+        }
+
+        .process-step-desc {
+            font-size: 12px;
+            color: #6b7280;
+        }
+    }
+
+    // 流程箭头
+    .process-arrow {
+        width: 16px;
+        height: 16px;
+        color: #93c5fd;
+        flex-shrink: 0;
+    }
+
+    // 筛选标签导航
+    .tab-nav {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 32px;
+        margin-bottom: 48px;
+        border-bottom: 1px solid #dbeafe;
+        padding-bottom: 16px;
+
+        .tab-nav-item {
+            font-size: 14px;
+            font-weight: 500;
+            padding-bottom: 8px;
+            transition: color 0.2s ease;
+            color: #6b7280;
+            background: none;
+            border: none;
+            cursor: pointer;
+
+            &--active {
+                color: #2563eb;
+                border-bottom: 2px solid #2563eb;
+            }
+
+            &:hover {
+                color: #2563eb;
+            }
+        }
+    }
+
+    // 内容布局（侧边栏 + 卡片列表）
+    .content-layout {
+        position: relative;
+    }
+
+    // 筛选侧边栏
+    .filter-sidebar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 160px;
+        z-index: 10;
+        background-color: transparent;
+        .filter-group {
+            .filter-group-title {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                font-size: 13px;
+                font-weight: 600;
+                color: #4b5563;
+                margin-bottom: 10px;
+            }
+
+            .filter-group-badge {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 18px;
+                height: 18px;
+                border-radius: 4px;
+                font-size: 11px;
+                font-weight: 700;
+                color: #ffffff;
+
+                &--blue {
+                    background: linear-gradient(135deg, #3b82f6, #2563eb);
+                }
+
+                &--cyan {
+                    background: linear-gradient(135deg, #06b6d4, #0891b2);
+                }
+
+                &--emerald {
+                    background: linear-gradient(135deg, #10b981, #059669);
+                }
+            }
+
+            .filter-buttons {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+            }
+        }
+
+        .filter-divider {
+            border-top: 1px dashed #dbeafe;
+            margin: 14px 0;
+        }
+    }
+
+    // 筛选按钮
+    .filter-btn {
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        border: 1px solid transparent;
+        background: transparent;
+        color: #374151;
+        text-align: left;
+        cursor: pointer;
+        transition: all 0.25s ease;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+
+        &:hover {
+            color: #2563eb;
+            border-color: #3b82f6;
+            background: rgba(59, 130, 246, 0.08);
+        }
+
+        &--active {
+            color: #2563eb;
+            border-color: #3b82f6;
+            background: rgba(59, 130, 246, 0.08);
+            font-weight: 600;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: -1px;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 3px;
+                height: 16px;
+                background: #2563eb;
+                border-radius: 0 2px 2px 0;
+            }
+        }
+    }
+
+    // 卡片网格
+    .card-grid {
+        // display: grid;
+        // grid-template-columns: repeat(1, 1fr);
+        // gap: 24px;
+        margin-left: 160px;
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @media (min-width: 1024px) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    // 空状态
+    .empty-state {
+        grid-column: 1 / -1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 80px 0;
+        color: #d1d5db;
+
+        .empty-state-icon {
+            width: 64px;
+            height: 64px;
+            margin-bottom: 16px;
+            color: #e5e7eb;
+        }
+
+        .empty-state-text {
+            font-size: 18px;
+            font-weight: 500;
+        }
+
+        .empty-state-hint {
+            font-size: 14px;
+            margin-top: 4px;
+        }
+    }
+}
+
+// ==================== 响应式适配 ====================
+@media (max-width: 1024px) {
+    .supply-demand {
+        .process-flow-steps {
+            gap: 8px;
+        }
+
+        .process-step {
+            max-width: 160px;
+            padding: 12px;
+        }
+
+        .card-grid {
+            margin-left: 0;
+        }
+
+        .filter-sidebar {
+            position: relative;
+            width: 100%;
+            margin-bottom: 24px;
+
+            .filter-buttons {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .supply-demand {
+        padding-top: 80px;
+        padding-bottom: 60px;
+
+        .supply-demand-container {
+            padding: 0 24px;
+        }
+
+        .supply-demand-header {
+            margin-bottom: 32px;
+
+            .supply-demand-title {
+                font-size: 28px;
+            }
+
+            .supply-demand-subtitle {
+                font-size: 16px;
+            }
+        }
+
+        .process-flow {
+            margin-bottom: 32px;
+
+            .process-flow-title {
+                font-size: 18px;
+                margin-bottom: 24px;
+            }
+
+            .process-flow-steps {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .process-arrow {
+                transform: rotate(90deg);
+            }
+        }
+
+        .process-step {
+            max-width: 240px;
+            width: 100%;
+        }
+
+        .tab-nav {
+            gap: 16px;
+            margin-bottom: 32px;
+        }
+    }
+}
+</style>
diff --git a/f/web-kboss/src/views/Ncmatch/token.vue b/f/web-kboss/src/views/Ncmatch/token.vue
index e69de29..4102ec4 100644
--- a/f/web-kboss/src/views/Ncmatch/token.vue
+++ b/f/web-kboss/src/views/Ncmatch/token.vue
@@ -0,0 +1,1121 @@
+<template>
+  <div class="token-market-page">
+    <!-- 左侧筛选栏 -->
+    <aside class="menu-sidebar">
+      <div class="sidebar-header">
+        <h3 class="sidebar-title">
+          <i class="el-icon-s-operation"></i>
+          <span>筛选模型</span>
+        </h3>
+        <button
+          v-if="hasActiveFilter"
+          class="reset-btn"
+          @click="resetFilter"
+        >
+          <i class="el-icon-refresh-right"></i>
+          重置
+        </button>
+      </div>
+
+      <el-input
+        v-model="searchKeyword"
+        class="product-search"
+        clearable
+        prefix-icon="el-icon-search"
+        placeholder="输入关键词 搜索模型"
+      ></el-input>
+
+      <div class="filter-scroll">
+        <section class="token-filter-section">
+          <header class="filter-header">
+            <h4>模型类型</h4>
+          </header>
+          <div class="token-filter-grid">
+            <button
+              class="filter-chip"
+              :class="{ active: !tokenActiveModelType }"
+              @click="tokenActiveModelType = ''"
+            >
+              全部
+            </button>
+            <button
+              v-for="item in tokenModelTypeList"
+              :key="item"
+              class="filter-chip"
+              :class="{ active: tokenActiveModelType === item }"
+              @click="toggleTokenModelType(item)"
+            >
+              {{ item }}
+            </button>
+          </div>
+        </section>
+
+        <section class="token-filter-section">
+          <header class="filter-header">
+            <h4>提供方</h4>
+          </header>
+          <div class="token-filter-grid">
+            <button
+              class="filter-chip"
+              :class="{ active: !tokenActiveProvider }"
+              @click="tokenActiveProvider = ''"
+            >
+              全部
+            </button>
+            <button
+              v-for="item in tokenProviderList"
+              :key="item"
+              class="filter-chip"
+              :class="{ active: tokenActiveProvider === item }"
+              @click="toggleTokenProvider(item)"
+            >
+              <el-tooltip
+                :content="item"
+                placement="top"
+                :disabled="!isProviderNameOverflow(item)"
+              >
+                <span class="chip-label">{{ item }}</span>
+              </el-tooltip>
+            </button>
+          </div>
+        </section>
+      </div>
+    </aside>
+
+    <!-- 主内容区 -->
+    <main class="main-content">
+
+      <div class="token-market-grid">
+        <article
+          v-for="product in displayedTokenProducts"
+          :key="product.id"
+          class="token-market-card"
+        >
+          <div class="token-card-top">
+            <span class="token-provider-avatar">
+              <img
+                v-if="getModelLogoUrl(product.model_logo) && !product.logoLoadFailed"
+                :src="getModelLogoUrl(product.model_logo)"
+                :alt="product.display_name || product.model_name || '模型logo'"
+                @error="handleModelLogoError(product)"
+              >
+              <template v-else>{{ getProviderInitial(product.provider || product.display_name) }}</template>
+            </span>
+            <div class="token-title-group">
+              <h3>{{ product.display_name || product.model_name }}</h3>
+              <p>
+                <i class="el-icon-office-building"></i>
+                {{ product.provider || product.model_name || '-' }}
+              </p>
+            </div>
+          </div>
+
+          <div class="token-price-grid">
+            <div
+              v-for="(price, priceIndex) in parseBillingMethod(product.billing_method)"
+              :key="`${product.id}-billing-${priceIndex}`"
+              class="token-price-item"
+            >
+              <span class="price-name">{{ price.name }}</span>
+              <strong class="price-value">{{ price.price }}</strong>
+              <em class="price-desc">{{ price.desc }}</em>
+            </div>
+          </div>
+
+          <div class="token-card-footer">
+            <div class="token-feature-tags">
+              <span
+                v-for="(tag, tagIndex) in getTokenFeatureTags(product)"
+                :key="`${tag.type}-${tag.text}-${tagIndex}`"
+                :class="tag.type"
+              >
+                <i :class="tag.icon"></i>
+                {{ tag.text }}
+              </span>
+            </div>
+          </div>
+
+          <div class="token-hover-actions">
+            <button
+              class="primary-action"
+              :class="{ disabled: !isModelExperienceEnabled(product) }"
+              :disabled="!isModelExperienceEnabled(product)"
+              @click.stop="goModelExperience(product)"
+            >
+              <i class="el-icon-video-play"></i>
+              快速体验
+            </button>
+            <button @click.stop="goModelApiDocument(product)">
+              <i class="el-icon-document"></i>
+              API参考
+            </button>
+          </div>
+        </article>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!displayedTokenProducts.length" class="empty-state">
+        <div class="empty-icon">
+          <i class="el-icon-box"></i>
+        </div>
+        <p class="empty-text">{{ searchKeyword ? '没有匹配的模型' : '暂无模型数据' }}</p>
+        <span class="empty-hint">
+          {{ hasActiveFilter ? '可以调整搜索关键词或筛选条件后再试' : '请稍后再来，或联系管理员补充模型' }}
+        </span>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import { reqNavList } from "@/api/newHome";
+
+const getImageUrlPrefix = () => {
+  const origin = window.location.origin
+  if (origin.includes('localhost') || origin.includes('dev.opencomputing.cn')) {
+    return 'https://dev.opencomputing.cn/idfile?path='
+  }
+  if (origin.includes('www.opencomputing.cn')) {
+    return 'https://www.opencomputing.cn/idfile?path='
+  }
+  if (origin.includes('www.ncmatch.cn')) {
+    return 'https://www.ncmatch.cn/idfile?path='
+  }
+  return `${origin}/idfile?path=`
+}
+
+export default {
+  name: "TokenMarket",
+  data() {
+    return {
+      searchKeyword: '',
+      tokenList: [],
+      tokenModelTypeList: [],
+      tokenProviderList: [],
+      tokenActiveModelType: '',
+      tokenActiveProvider: "",
+      IMG_URL: getImageUrlPrefix(),
+    };
+  },
+  computed: {
+    displayedTokenProducts() {
+      const keyword = this.searchKeyword.trim().toLowerCase();
+      return this.tokenList.filter(item => {
+        const matchKeyword = !keyword || [
+          item.display_name,
+          item.model_name,
+          item.model_type,
+          item.provider,
+          item.description
+        ].join(' ').toLowerCase().includes(keyword);
+        const matchType = !this.tokenActiveModelType || item.model_type === this.tokenActiveModelType;
+        const matchProvider = !this.tokenActiveProvider || item.provider === this.tokenActiveProvider;
+        return matchKeyword && matchType && matchProvider;
+      });
+    },
+    hasActiveFilter() {
+      return Boolean(
+        this.searchKeyword.trim() ||
+        this.tokenActiveModelType ||
+        this.tokenActiveProvider
+      );
+    },
+    typeCountMap() {
+      const map = {};
+      this.tokenList.forEach(item => {
+        if (item.model_type) {
+          map[item.model_type] = (map[item.model_type] || 0) + 1;
+        }
+      });
+      return map;
+    },
+    providerCountMap() {
+      const map = {};
+      this.tokenList.forEach(item => {
+        if (item.provider) {
+          map[item.provider] = (map[item.provider] || 0) + 1;
+        }
+      });
+      return map;
+    },
+    loginState() {
+      const userId = sessionStorage.getItem('userId');
+      return userId !== null && userId !== 'null' && userId !== '';
+    },
+  },
+  async mounted() {
+    await this.loadNavData();
+  },
+  methods: {
+    isTokenMarketCategory(title) {
+      return ['TOKEN市集', 'Token市集', 'token市集', 'Token Market'].includes(title);
+    },
+
+    setTokenMarketData(category) {
+      const marketData = category && category.token_market && category.token_market.data
+        ? category.token_market.data
+        : {};
+      this.tokenList = Array.isArray(marketData.model_list) ? marketData.model_list : [];
+      this.tokenModelTypeList = Array.isArray(marketData.model_type_list) ? marketData.model_type_list : [];
+      this.tokenProviderList = Array.isArray(marketData.provider_list) ? marketData.provider_list : [];
+    },
+
+    toggleTokenModelType(type) {
+      this.tokenActiveModelType = this.tokenActiveModelType === type ? '' : type;
+    },
+
+    toggleTokenProvider(provider) {
+      this.tokenActiveProvider = this.tokenActiveProvider === provider ? '' : provider;
+    },
+
+    resetFilter() {
+      this.searchKeyword = '';
+      this.tokenActiveModelType = '';
+      this.tokenActiveProvider = '';
+    },
+
+    getTypeCount(type) {
+      return this.typeCountMap[type] || 0;
+    },
+
+    getProviderCount(provider) {
+      return this.providerCountMap[provider] || 0;
+    },
+
+    // 提供方名称长度判定：> 8 个字符时大概率会换行超过 2 行，启用 tooltip
+    isProviderNameOverflow(name) {
+      if (!name) return false;
+      // 中文字符按 2 个英文字符宽度计，整体大于约 16 个字符视为可能溢出
+      let width = 0;
+      for (const ch of String(name)) {
+        // CJK 范围
+        if (/[　-鿿]/.test(ch)) width += 2;
+        else width += 1;
+      }
+      return width > 14;
+    },
+
+    parseBillingMethod(value) {
+      const text = String(value || '').trim();
+      if (!text) {
+        return [{ name: '计费方式', price: '按量计费', desc: '详情以后端配置为准' }];
+      }
+      return text
+        .split(/\n+/)
+        .map(line => line.replace(/^\s*[-–—]\s*/, '').trim())
+        .filter(Boolean)
+        .map(line => {
+          const match = line.match(/^([^:：]+)[:：]\s*([^\[]+)(?:\[(.+)\])?$/);
+          if (!match) {
+            return { name: '计费说明', price: line, desc: '' };
+          }
+          return {
+            name: match[1].trim(),
+            price: match[2].trim(),
+            desc: (match[3] || '').trim()
+          };
+        });
+    },
+
+    getProviderInitial(provider) {
+      return provider ? provider.slice(0, 1) : 'M';
+    },
+
+    getModelLogoUrl(modelLogo) {
+      if (!modelLogo) return '';
+      if (/^https?:\/\//.test(modelLogo) || modelLogo.startsWith('data:') || modelLogo.startsWith('blob:')) {
+        return modelLogo;
+      }
+      return `${this.IMG_URL}${modelLogo}`;
+    },
+
+    handleModelLogoError(product) {
+      this.$set(product, 'logoLoadFailed', true);
+    },
+
+    normalizeTokenConfigList(value) {
+      if (!value) return [];
+      let parsedValue = value;
+      if (typeof value === 'string') {
+        try {
+          parsedValue = JSON.parse(value);
+        } catch (error) {
+          return [];
+        }
+      }
+      if (Array.isArray(parsedValue)) {
+        return parsedValue.map(item => ({
+          name: item.name || item.label || item.key || '',
+          value: item.value || item.text || item.content || ''
+        })).filter(item => item.name || item.value);
+      }
+      if (parsedValue && typeof parsedValue === 'object') {
+        return Object.keys(parsedValue).map(key => ({ name: key, value: parsedValue[key] }));
+      }
+      return [];
+    },
+
+    getTokenFeatureTags(model) {
+      const capabilities = this.normalizeTokenConfigList(model.capabilities);
+      const highlights = this.normalizeTokenConfigList(model.highlights);
+      const inputType = capabilities.find(item => item.name === '输入类型');
+      const outputType = capabilities.find(item => item.name === '输出类型');
+      const highlight = highlights[0];
+      return [
+        {
+          text: inputType && inputType.value ? inputType.value : (model.model_type || '模型能力'),
+          icon: 'el-icon-view',
+          type: 'green'
+        },
+        {
+          text: outputType && outputType.value ? outputType.value : (highlight && (highlight.value || highlight.name)) || '智能生成',
+          icon: 'el-icon-magic-stick',
+          type: 'purple'
+        },
+  
+      ].filter(item => item.text);
+    },
+
+    isModelExperienceEnabled(model) {
+      return Number(model && model.experience) === 1;
+    },
+
+    goModelApiDocument(model) {
+      this.cacheTokenMarketModel(model);
+      this.$router.push({
+        name: 'modelApiDocument',
+        query: {
+          id: model.id,
+          model_id: model.id,
+          from: 'tokenMarket',
+          category: 'TOKEN市集'
+        }
+      });
+    },
+
+    goModelExperience(model) {
+      if (!this.isModelExperienceEnabled(model)) return;
+      if (!this.loginState) {
+        this.$message.warning('请先登录再进行体验哦')
+        return;
+      }
+      this.cacheTokenMarketModel(model);
+      this.$router.push({
+        name: 'modelExperience',
+        query: {
+          id: model.id,
+          model_id: model.id,
+          from: 'tokenMarket',
+          category: 'TOKEN市集'
+        }
+      });
+    },
+
+    cacheTokenMarketModel(model) {
+      if (!model) return;
+      sessionStorage.setItem('tokenMarketSelectedModel', JSON.stringify(model));
+    },
+
+    async loadNavData() {
+      try {
+        const baseUrl = window.location.href.split('#')[0];
+        const hostname = window.location.hostname
+        const homePath = hostname.includes('ncmatch.cn') || hostname.includes('zgcopc.opencomputing.cn')
+          ? '/ncmatchHome/index'
+          : '/homePage/index';
+        const response = await reqNavList({ url_link: `${baseUrl}#${homePath}` });
+        if (response.status && response.data.product_service) {
+          response.data.product_service.forEach(category => {
+            if (this.isTokenMarketCategory(category.firTitle)) {
+              this.setTokenMarketData(category);
+            }
+          });
+        }
+      } catch (error) {
+        console.error("加载模型数据失败:", error);
+      }
+    },
+  }
+};
+</script>
+
+<style lang="less" scoped>
+// ====== 配色变量 ======
+@primary: #1e6fff;
+@primary-light: #eef5ff;
+@primary-lighter: #f0f7ff;
+@primary-deep: #155eef;
+@text-dark: #1f2937;
+@text-mid: #475467;
+@text-soft: #98a2b3;
+@border: #edf1f7;
+@border-soft: #f1f5f9;
+@bg-card: #ffffff;
+@shadow-card: 0 2px 12px rgba(31, 45, 61, 0.06);
+@shadow-hover: 0 0 0 3px rgba(30, 111, 255, 0.12), 0 16px 32px rgba(30, 111, 255, 0.16);
+
+.token-market-page {
+  display: flex;
+  gap: 24px;
+  padding: 24px 32px 40px;
+  min-height: calc(100vh - 80px);
+  background:
+    radial-gradient(800px circle at 8% 0%, rgba(30, 111, 255, 0.06) 0%, transparent 40%),
+    radial-gradient(700px circle at 95% 8%, rgba(125, 105, 255, 0.05) 0%, transparent 42%),
+    linear-gradient(180deg, #f5f8ff 0%, #ffffff 60%);
+  box-sizing: border-box;
+}
+
+/* ==================== 侧栏 ==================== */
+.menu-sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 80px;
+  height: calc(100vh - 80px - 48px); // 撑满整屏高度，48px = 上下内边距总和
+  display: flex;
+  flex-direction: column;
+  padding: 20px 18px;
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(237, 241, 247, 0.8);
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(31, 45, 61, 0.05);
+  backdrop-filter: blur(10px);
+  box-sizing: border-box;
+  transition: box-shadow 0.3s;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0 12px 32px rgba(31, 45, 61, 0.08);
+  }
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  margin-bottom: 16px;
+}
+
+.sidebar-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: @text-dark;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+
+  i {
+    color: @primary;
+    font-size: 16px;
+  }
+}
+
+.reset-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 10px;
+  color: @primary;
+  background: @primary-lighter;
+  border: 1px solid #c7defb;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+
+  &:hover {
+    background: @primary-light;
+    border-color: @primary;
+    transform: scale(1.04);
+  }
+
+  i {
+    font-size: 12px;
+  }
+}
+
+.product-search {
+  margin-bottom: 18px;
+
+  :deep(.el-input__inner) {
+    height: 40px;
+    line-height: 40px;
+    color: @text-dark;
+    font-size: 13px;
+    background: rgba(248, 250, 252, 0.7);
+    border: 1px solid @border;
+    border-radius: 12px;
+    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+
+    &:focus {
+      background: #fff;
+      border-color: @primary;
+      box-shadow: 0 0 0 4px rgba(30, 111, 255, 0.12);
+    }
+
+    &::placeholder {
+      color: @text-soft;
+    }
+  }
+
+  :deep(.el-input__prefix) {
+    left: 12px;
+
+    i {
+      color: @text-soft;
+      font-size: 14px;
+      line-height: 40px;
+    }
+  }
+
+  :deep(.el-input__suffix) {
+    right: 10px;
+  }
+}
+
+// 滚动区：撑满侧栏剩余高度，内容超出时出现滚动条
+.filter-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: #d0d7e2 transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #d0d7e2;
+    border-radius: 4px;
+  }
+}
+
+.product-search {
+  flex-shrink: 0;
+}
+
+.token-filter-section {
+  margin-top: 20px;
+}
+
+.filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding-left: 2px;
+
+  h4 {
+    margin: 0;
+    color: @text-soft;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+}
+
+.filter-count {
+  padding: 1px 7px;
+  color: @primary;
+  font-size: 11px;
+  font-weight: 700;
+  background: @primary-light;
+  border-radius: 999px;
+}
+
+.token-filter-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 6px;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  height: 28px;
+  padding: 0 12px;
+  color: @text-mid;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
+
+  // tooltip 内的 label
+  :deep(.el-tooltip) {
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .chip-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    color: @primary;
+    background: @primary-lighter;
+    border-color: #bcd6fb;
+    transform: translateY(-1px);
+  }
+
+  &.active {
+    color: #fff;
+    font-weight: 600;
+    background: linear-gradient(135deg, @primary, #4d86ff);
+    border-color: transparent;
+    box-shadow: 0 4px 10px rgba(30, 111, 255, 0.28);
+
+    &:hover {
+      color: #fff;
+      background: linear-gradient(135deg, @primary-deep, #4170ee);
+      border-color: transparent;
+      transform: translateY(-1px);
+    }
+  }
+}
+
+/* ==================== 主内容区 ==================== */
+.main-content {
+  flex: 1;
+  min-width: 0;
+}
+
+
+.summary-text {
+  color: @text-mid;
+  font-size: 14px;
+
+  strong {
+    margin: 0 2px;
+    color: @primary;
+    font-size: 18px;
+    font-weight: 700;
+  }
+}
+
+.active-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.active-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 26px;
+  padding: 0 6px 0 10px;
+  color: @primary;
+  font-size: 12px;
+  font-weight: 600;
+  background: @primary-light;
+  border: 1px solid #c7defb;
+  border-radius: 999px;
+
+  i:first-child {
+    font-size: 12px;
+  }
+
+  .close-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-left: 2px;
+    color: @primary;
+    background: #fff;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+
+    &:hover {
+      color: #fff;
+      background: @primary;
+    }
+  }
+}
+
+.token-market-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 18px;
+  align-items: stretch;
+}
+
+/* ==================== 卡片 ==================== */
+.token-market-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // 裁剪 hover-actions 底部圆角
+  min-height: 240px;
+  padding: 16px;
+  background: @bg-card;
+  border: 1px solid rgba(228, 234, 243, 0.9);
+  border-radius: 14px;
+  box-shadow: @shadow-card;
+  cursor: pointer;
+  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 140px;
+    height: 140px;
+    background: radial-gradient(circle at 100% 0%, rgba(30, 111, 255, 0.08) 0%, transparent 60%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+  }
+
+  &:hover {
+    border-color: #8bbcff;
+    transform: translateY(-4px);
+    box-shadow: @shadow-hover;
+
+    &::before {
+      opacity: 1;
+    }
+
+    .token-hover-actions {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .token-card-top h3 {
+      color: @primary;
+    }
+  }
+}
+
+/* 卡片顶部 */
+.token-card-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.token-provider-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 42px;
+  height: 42px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.28);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    background: #fff;
+  }
+}
+
+.token-title-group {
+  flex: 1;
+  min-width: 0;
+
+  h3 {
+    margin: 0;
+    color: @text-dark;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color 0.25s;
+  }
+
+  p {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 3px 0 0;
+    color: @text-soft;
+    font-size: 12px;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    i {
+      font-size: 11px;
+    }
+  }
+}
+
+/* 计费区 */
+.token-price-grid {
+  flex: 1;
+  max-height: 178px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding-right: 2px;
+  scrollbar-width: thin;
+  scrollbar-color: #d0d7e2 transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #d0d7e2;
+    border-radius: 4px;
+  }
+}
+
+.token-price-item {
+  padding: 8px 12px;
+  background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%);
+  border: 1px solid @border-soft;
+  border-radius: 10px;
+  transition: background 0.2s, border-color 0.2s;
+
+  &:hover {
+    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
+    border-color: #d6e4fb;
+  }
+}
+
+.price-name {
+  display: block;
+  margin-bottom: 3px;
+  color: @text-soft;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+}
+
+.price-value {
+  display: block;
+  color: @text-dark;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.price-desc {
+  display: block;
+  margin-top: 3px;
+  color: @text-soft;
+  font-size: 11px;
+  font-style: normal;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 底部标签 */
+.token-card-footer {
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+}
+
+.token-feature-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    max-width: 120px;
+    height: 22px;
+    padding: 0 8px;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 999px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: translateY(-1px);
+    }
+
+    i {
+      font-size: 11px;
+    }
+
+    &.green {
+      color: #047857;
+      background: #d1fae5;
+    }
+
+    &.purple {
+      color: #5b21b6;
+      background: #ede9fe;
+    }
+
+    &.blue {
+      color: #1e40af;
+      background: #dbeafe;
+    }
+  }
+}
+
+/* hover 操作栏 */
+.token-hover-actions {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  gap: 6px;
+  padding: 8px 10px;
+  opacity: 0;
+  background: rgba(255, 255, 255, 0.97);
+  border-top: 1px solid @border;
+  box-shadow: 0 -6px 16px rgba(31, 45, 61, 0.04);
+  backdrop-filter: blur(10px);
+  transform: translateY(100%);
+  transition: opacity 0.22s, transform 0.22s;
+
+  button {
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 32px;
+    padding: 0 10px;
+    color: @text-mid;
+    font-size: 13px;
+    font-weight: 600;
+    background: #fff;
+    border: 1px solid #d8e0ee;
+    border-radius: 9px;
+    cursor: pointer;
+    transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
+
+    &:hover {
+      color: @primary;
+      border-color: #9ec5ff;
+      background: @primary-lighter;
+      transform: translateY(-1px);
+    }
+  }
+
+  .primary-action {
+    color: #fff;
+    background: linear-gradient(135deg, @primary, #5d8dff);
+    border-color: transparent;
+    box-shadow: 0 2px 6px rgba(30, 111, 255, 0.25);
+
+    &:hover {
+      color: #fff;
+      background: linear-gradient(135deg, @primary-deep, #4a7aef);
+      box-shadow: 0 4px 10px rgba(30, 111, 255, 0.35);
+    }
+
+    &.disabled,
+    &:disabled {
+      color: #fff;
+      background: linear-gradient(135deg, #cbd5e1, #b8c2cf);
+      box-shadow: none;
+      cursor: not-allowed;
+      transform: none;
+    }
+  }
+}
+
+/* 空状态 */
+.empty-state {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80px 20px;
+  background: #fff;
+  border: 2px dashed #d6e0ee;
+  border-radius: 18px;
+}
+
+.empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  margin-bottom: 16px;
+  color: @text-soft;
+  font-size: 32px;
+  background: linear-gradient(135deg, @primary-lighter, #f1f5f9);
+  border-radius: 20px;
+}
+
+.empty-text {
+  margin: 0 0 8px;
+  color: @text-dark;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.empty-hint {
+  color: @text-soft;
+  font-size: 13px;
+}
+
+/* ==================== 响应式 ==================== */
+@media (max-width: 1280px) {
+  .token-market-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .token-market-page {
+    flex-direction: column;
+    padding: 16px;
+  }
+
+  .menu-sidebar {
+    width: 100%;
+    position: static;
+    height: auto;
+    max-height: 60vh;
+  }
+
+  .token-market-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/Ncmatch/topNav.vue b/f/web-kboss/src/views/Ncmatch/topNav.vue
index 839a2c4..361926b 100644
--- a/f/web-kboss/src/views/Ncmatch/topNav.vue
+++ b/f/web-kboss/src/views/Ncmatch/topNav.vue
@@ -6,7 +6,7 @@
         <img src="./images/logo.png" alt="OPC数智平台" class="logo-img" />
       </a>
 
-      <!-- 中间导航 -->
+      <!-- 中间导航 --> 
       <div class="nav-links">
         <a href="javascript:void(0)" @click="go('/ncmatchHome/index')" class="nav-link"
           :class="{ active: isActive('/ncmatchHome/index') }">首页
@@ -17,8 +17,8 @@
         <a href="javascript:void(0)" @click="go('/ncmatchHome/tokenMarket')" class="nav-link"
           :class="{ active: isActive('/ncmatchHome/tokenMarket') }">token市集 
         </a>
-        <a href="javascript:void(0)" @click="go('/ncmatchHome/tokenMarket')" class="nav-link"
-          :class="{ active: isActive('/ncmatchHome/tokenMarket') }">云枢基座
+        <a href="javascript:void(0)" @click="go('/ncmatchHome/cloudHub')" class="nav-link"
+          :class="{ active: isActive('/ncmatchHome/cloudHub') }">云枢基座
         </a>
         <a href="javascript:void(0)" @click="go('/ncmatchHome/supplyAndDemandSquare')" class="nav-link"
           :class="{ active: isActive('/ncmatchHome/supplyAndDemandSquare') }">供需广场
@@ -27,14 +27,85 @@
           :class="{ active: isActive('/ncmatchHome/opcOverview') }">OPC社区概况
         </a>
         <!-- 梦工厂 -->
-        <a href="javascript:void(0)" @click="go('/ncmatchHome/tokenMarket')" class="nav-link"
-          :class="{ active: isActive('/ncmatchHome/tokenMarket') }">梦工厂 
+        <a href="javascript:void(0)" @click="goCreativeWorkshop" class="nav-link"
+          :class="{ active: isActive('') }">梦工厂
         </a>
       </div>
 
       <!-- 右侧功能按钮 -->
       <div class="nav-actions">
-        <button class="btn-login" @click="onLogin">登录</button>
+        <i v-if="loginState" class="iconfont icon-xiaoxi functions" @click="handleMessageClick"></i>
+
+        <button v-if="loginState" type="button" class="console-link" @click="goConsole">
+          控制台
+        </button>
+
+        <button v-if="!loginState" type="button" class="btn-login" @click="onLogin">登录</button>
+
+        <el-dropdown
+          v-if="loginState"
+          class="avatar-container right-menu-item hover-effect nick-name-style"
+          trigger="click"
+          @visible-change="handleShow"
+        >
+          <button type="button" class="login-pill login-pill--user">
+            {{ nick_name || '控制台' }}
+            <i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
+          </button>
+
+          <el-dropdown-menu slot="dropdown" style="width: 230px; font-size: 16px;" divided>
+            <div class="user-dropdown-head">
+              <span class="user-dropdown-name">{{ nick_name }}</span>
+              <span class="user-dropdown-id">
+                ID:
+                <span ref="contentToCopy">{{ userId }}</span>
+                <svg
+                  class="copy-btn"
+                  viewBox="0 0 1024 1024"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="12"
+                  height="12"
+                  style="fill: #1019ab;"
+                  @click="copyBtn"
+                >
+                  <path d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"></path>
+                </svg>
+              </span>
+            </div>
+
+            <el-divider style="margin: 0 !important;"></el-divider>
+
+            <div
+              v-if="role.includes('客户')"
+              class="user-dropdown-balance"
+            >
+              <span class="moneyNow">
+                <span class="moneyNow-label">余额</span>
+                {{ mybalance ? mybalance : initMybalance() }} ￥
+              </span>
+              <el-button
+                type="primary"
+                plain
+                style="padding: 8px;"
+                @click="$router.push('/kbossCharge')"
+              >
+                充值
+              </el-button>
+            </div>
+
+            <el-dropdown-item
+              v-if="role.includes('客户')"
+              @click.native="$router.push('/customer/customerInformation')"
+            >
+              <span style="display: block">个人中心</span>
+            </el-dropdown-item>
+
+            <el-dropdown-item @click.native="logout">
+              <span style="display: block">退出登录</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+
         <div class="dropdown-wrap" id="platform-menu-wrapper">
 
 
@@ -45,19 +116,46 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import store from '@/store'
+import { getUserInfoAPI } from '@/api/login'
+import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
+import { getHomePath } from '@/views/setting/tools'
+
 export default {
   name: 'TopNav',
   data() {
     return {
       logoSrc: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32"><rect width="120" height="32" fill="%23e5e7eb"/><text x="50%" y="55%" font-size="14" text-anchor="middle" fill="%236b7280" font-family="sans-serif">LOGO</text></svg>',
       dropdownOpen: false,
+      // 用户登录信息
+      role: sessionStorage.getItem('jueseNew') === 'admin' ? '' : (sessionStorage.getItem('jueseNew') || ''),
+      userId: sessionStorage.getItem('userId'),
+      nick_name: ''
     };
   },
+  computed: {
+    ...mapState({
+      loginStateVuex: state => state.login.loginState,
+      mybalance: state => state.user.mybalance
+    }),
+    loginState() {
+      const userId = sessionStorage.getItem('userId');
+      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
+    }
+  },
+  created() {
+    if (sessionStorage.getItem('userId')) this.$store.commit('setLoginState', true)
+    this.getUserInfo();
+    this.nick_name = sessionStorage.getItem('username') || '';
+  },
   mounted() {
     document.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('kboss-open-login-dialog', this.handleExternalLoginOpen);
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleOutsideClick);
+    window.removeEventListener('kboss-open-login-dialog', this.handleExternalLoginOpen);
   },
   methods: {
     isActive(path) {
@@ -70,6 +168,80 @@ export default {
     onLogin() {
       window.dispatchEvent(new Event('kboss-open-login-dialog'));
     },
+    handleExternalLoginOpen() {
+      this.onLogin();
+    },
+    handleMessageClick() {
+      if (!this.loginState) {
+        this.onLogin();
+        return;
+      }
+      this.$message.info('消息中心暂未在 ncmatch 域开放');
+    },
+    handleShow(isShow) {
+      const icon = document.getElementById('resverIcon');
+      if (!icon) return;
+      icon.style.transform = isShow ? 'rotate(180deg)' : 'rotate(0)';
+      if (isShow && this.role.includes('客户')) {
+        this.$store.dispatch('user/getCustmoersMoney');
+      }
+    },
+    goConsole() {
+      const role = sessionStorage.getItem('jueseNew') || '';
+      if (role.includes('客户')) this.$router.push('/product/productHome').catch(() => this.$router.replace('/product/productHome'));
+      else if (role.includes('运营')) this.$router.push('/operation/supplierManagement');
+      else if (role.includes('运维')) this.$router.push('/operationAndMaintenance/workOrderProcessing');
+      else if (role.includes('销售')) this.$router.push('/sales/distributorManagement');
+      else if (role.includes('财务')) this.$router.push('/finance/supplierSettlementStatistics');
+      else if (role.includes('管理员')) this.$router.push('/superAdministrator/roleManagement');
+      else if (role.includes('admin')) this.$router.push('/superAdministrator/addAdmin');
+    },
+    initMybalance() {
+      return sessionStorage.getItem('mybalance');
+    },
+    copyBtn() {
+      const textToCopy = this.$refs.contentToCopy ? this.$refs.contentToCopy.innerText : '';
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        this.$message.success('复制成功！');
+      }).catch(() => {
+        this.$message.error('复制失败，请重试');
+      });
+    },
+    getUserInfo() {
+      if (!this.userId) return;
+      getUserInfoAPI({ id: this.userId }).then((res) => {
+        if (res.status && res.data && res.data[0]) {
+          sessionStorage.setItem('orgid', res.data[0].orgid);
+        }
+      });
+    },
+    async logout() {
+      this.$store.commit('setLoginState', false);
+      store.commit('tagsView/resetBreadcrumbState');
+      store.commit('permission/RESET_ROUTES');
+
+      sessionStorage.removeItem('auths');
+      sessionStorage.removeItem('routes');
+      sessionStorage.removeItem('user');
+      sessionStorage.removeItem('userId');
+      sessionStorage.removeItem('org_type');
+      sessionStorage.removeItem('userType');
+      sessionStorage.removeItem('orgType');
+      sessionStorage.removeItem('roles');
+      sessionStorage.removeItem('juese');
+      sessionStorage.removeItem('jueseNew');
+      sessionStorage.removeItem('loginRedirectPath');
+
+      localStorage.removeItem('auths');
+      localStorage.removeItem('routes');
+      localStorage.removeItem('user');
+      localStorage.removeItem('userId');
+      localStorage.removeItem('org_type');
+      this.userId = '';
+      this.nick_name = '';
+
+      await this.$router.replace(getHomePath()).catch(() => {});
+    },
     handleOutsideClick(e) {
       const wrap = document.getElementById('platform-menu-wrapper');
       if (wrap && !wrap.contains(e.target)) {
@@ -78,6 +250,59 @@ export default {
         this.dropdownOpen = false;
       }
     },
+    async goCreativeWorkshop() {
+      if (!this.loginState) {
+        window.open('https://ai.opencomputing.cn/', '_blank')
+        return
+      }
+
+      const yuanJingWindow = window.open('', '_blank')
+
+      try {
+        const res = await gotoYuanJingAPI({
+          user_id: sessionStorage.getItem('userId')
+        })
+
+        const deerer = this.getYuanJingAuthorization(res)
+
+        if (!deerer) {
+          if (yuanJingWindow) {
+            yuanJingWindow.close()
+          }
+          this.$message.error((res && res.msg) || '获取元境授权参数失败')
+          return
+        }
+
+        const loginUrl = `https://ai.opencomputing.cn/#/getCookie?deerer=${encodeURIComponent(deerer)}`
+
+        if (yuanJingWindow) {
+          yuanJingWindow.location.href = loginUrl
+        } else {
+          window.location.href = loginUrl
+        }
+      } catch (error) {
+        if (yuanJingWindow) {
+          yuanJingWindow.close()
+        }
+        this.$message.error('跳转元境失败，请稍后重试')
+      }
+    },
+    getYuanJingAuthorization(res) {
+      if (!res) {
+        return ''
+      }
+
+      if (typeof res === 'string') {
+        return res
+      }
+
+      const data = res.data || res
+      if (typeof data === 'string') {
+        return data
+      }
+
+      return data.Authorization || data.authorization || data.token || data.header || data.value || ''
+    },
   },
 };
 </script>
@@ -201,6 +426,124 @@ export default {
 
 /* ==================== Dropdown ==================== */
 
+/* ==================== Functions Icon ==================== */
+.functions {
+  color: #000;
+  cursor: pointer;
+  font-size: 20px !important;
+  line-height: 1;
+  transition: color 0.2s ease;
+}
+
+.functions:hover {
+  color: #2563eb;
+}
+
+/* ==================== Console Link ==================== */
+.console-link {
+  height: 36px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #333;
+  cursor: pointer;
+  font-size: 15px !important;
+  font-weight: 600;
+  line-height: 36px;
+  transition: color 0.2s ease;
+}
+
+.console-link:hover {
+  color: #2563eb;
+}
+
+/* ==================== Login Pill (Logged-in) ==================== */
+.avatar-container {
+  display: inline-flex;
+  align-items: center;
+}
+
+.login-pill {
+  min-width: 58px;
+  height: 36px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: 999px;
+  background: #050505;
+  color: #fff;
+  cursor: pointer;
+  font-size: 15px !important;
+  font-weight: 600;
+  line-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.login-pill:hover {
+  opacity: 0.84;
+}
+
+.login-pill--user {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.login-pill .resverIcon {
+  font-size: 12px !important;
+  transition: transform 0.2s ease;
+}
+
+/* ==================== User Dropdown ==================== */
+.user-dropdown-head {
+  display: flex;
+  flex-direction: column;
+  padding: 14px 16px 12px;
+}
+
+.user-dropdown-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 4px;
+}
+
+.user-dropdown-id {
+  font-size: 13px;
+  color: #6b7280;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.copy-btn {
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.copy-btn:hover {
+  opacity: 0.7;
+}
+
+.user-dropdown-balance {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: #f9fafb;
+}
+
+.moneyNow {
+  font-size: 14px;
+  color: #374151;
+}
+
+.moneyNow-label {
+  margin-right: 6px;
+  color: #6b7280;
+}
 
 /* ==================== Hidden Utility ==================== */
 .hidden {