《陶瓷工业大气污染物排放标准》展示调整

.tmp-serve-css.css

@@ -0,0 +1,495 @@
+.registry-head{
+  position:relative;overflow:hidden;
+  display:flex;align-items:center;
+  padding:82px 0 90px;
+  background:
+    radial-gradient(720px 400px at 84% -18%,rgba(22,120,255,.16),transparent 62%),
+    radial-gradient(560px 380px at -6% 116%,rgba(77,154,255,.13),transparent 60%),
+    linear-gradient(118deg,#EDF5FF 0%,#F8FBFF 46%,#E9F2FF 100%);
+  border-bottom:1px solid var(--line);
+}
+/* 光纹网格（淡出到内容区边缘） */
+.registry-head::before{
+  content:"";position:absolute;inset:0;pointer-events:none;
+  background-image:
+    linear-gradient(rgba(22,120,255,.05) 1px,transparent 1px),
+    linear-gradient(90deg,rgba(22,120,255,.05) 1px,transparent 1px);
+  background-size:44px 44px;
+  -webkit-mask-image:radial-gradient(900px 480px at 66% 42%,#000 0%,transparent 78%);
+          mask-image:radial-gradient(900px 480px at 66% 42%,#000 0%,transparent 78%);
+}
+/* 右上角装饰圆环 */
+.registry-head::after{
+  content:"";position:absolute;right:-200px;top:-230px;width:580px;height:580px;
+  border-radius:50%;pointer-events:none;
+  border:1px dashed rgba(22,120,255,.20);
+  box-shadow:0 0 0 44px rgba(22,120,255,.035),0 0 0 106px rgba(22,120,255,.02);
+}
+.registry-head .wrap{position:relative;z-index:1;width:100%;}
+.registry-inner{display:flex;align-items:center;gap:56px;}
+.registry-text{flex:1;min-width:0;max-width:656px;}
+
+.hero-badge{
+  display:inline-flex;align-items:center;gap:9px;
+  padding:7px 16px 7px 12px;border-radius:999px;
+  background:rgba(255,255,255,.86);
+  border:1px solid rgba(22,120,255,.25);
+  color:#1678FF;font-size:12.5px;font-weight:600;
+  font-family:"PingFang SC","PingFangSC-Semibold","Helvetica Neue",sans-serif;
+  letter-spacing:.4px;
+  box-shadow:0 10px 26px -14px rgba(22,120,255,.5);
+  margin-bottom:28px;
+  backdrop-filter:blur(6px);
+}
+.hero-badge .hero-badge-dot{
+  width:7px;height:7px;border-radius:50%;
+  background:linear-gradient(135deg,#5FA8FF,#1678FF);
+  box-shadow:0 0 0 3.5px rgba(22,120,255,.15);
+}
+.registry-head h1{
+  font-family:"PingFang SC","PingFangSC-Semibold","Helvetica Neue",sans-serif;font-weight:800;
+  font-size:clamp(40px,5.2vw,58px);line-height:1.12;letter-spacing:-1.5px;
+  color:#0B1F3F;
+}
+.registry-head h1 .brand-blue{
+  background:linear-gradient(100deg,#3B96FF,#1678FF 55%,#0A5FE0);
+  -webkit-background-clip:text;background-clip:text;color:transparent;
+}
+.registry-head .sub-title{
+  margin-top:16px;font-family:"PingFang SC","PingFangSC-Semibold","Helvetica Neue",sans-serif;font-weight:600;
+  font-size:clamp(16px,1.9vw,19px);color:#2E4A6B;letter-spacing:.3px;
+}
+.registry-head .lead{
+  margin-top:22px;max-width:600px;color:#5F7490;font-size:14.5px;line-height:2.0;letter-spacing:.2px;
+  font-family:"PingFang SC","PingFangSC-Regular","Helvetica Neue",sans-serif;font-weight:400;
+}
+.cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:38px;}
+.btn-cta{
+  display:inline-flex;align-items:center;gap:8px;
+  padding:13px 28px;border-radius:999px;font-size:14.5px;font-weight:700;
+  background:linear-gradient(135deg,#2E8CFF,#1678FF 60%,#0B63E0);
+  color:#fff;border:none;cursor:pointer;
+  font-family:"PingFang SC","PingFangSC-Semibold","Helvetica Neue",sans-serif;
+  box-shadow:0 12px 26px -10px rgba(22,120,255,.65);
+  transition:transform .18s,box-shadow .18s,filter .18s;
+}
+.btn-cta:hover{
+  transform:translateY(-2px);filter:brightness(1.07);
+  box-shadow:0 16px 34px -12px rgba(22,120,255,.78);
+}
+.btn-ghost{
+  display:inline-flex;align-items:center;gap:8px;
+  padding:13px 26px;border-radius:999px;font-size:14px;font-weight:600;
+  background:rgba(255,255,255,.8);color:#33506F;
+  border:1px solid rgba(154,182,214,.9);cursor:pointer;
+  font-family:"PingFang SC","PingFangSC-Semibold","Helvetica Neue",sans-serif;
+  transition:.18s;
+}
+.btn-ghost:hover{border-color:#1678FF;color:#1678FF;background:#fff;transform:translateY(-1px);}
+.hero-meta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px;}
+.hm-item{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#57708C;font-weight:500;}
+.hm-item svg{flex:none;}
+.hm-item b{color:#1678FF;font-weight:700;}
+
+/* ===== 右侧接入拓扑卡（横幅内装饰，随横幅一起改） ===== */
+.hero-visual{
+  flex:none;width:420px;position:relative;
+  font-family:"PingFang SC","PingFangSC-Regular","Helvetica Neue",sans-serif;
+}
+.hv-card{
+  position:relative;background:rgba(255,255,255,.82);
+  border:1px solid rgba(22,120,255,.16);
+  border-radius:22px;padding:18px;
+  box-shadow:0 30px 64px -26px rgba(22,80,160,.38);
+  backdrop-filter:blur(10px);
+  animation:hvFloat 7s ease-in-out infinite;
+}
+@keyframes hvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
+.hv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 13px;border-bottom:1px dashed rgba(22,120,255,.2);}
+.hv-title{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#22395C;letter-spacing:.05em;}
+.hv-sm{width:22px;height:22px;flex:none;border-radius:7px;background:linear-gradient(135deg,#EAF2FF,#DCE9FF);display:inline-flex;align-items:center;justify-content:center;color:#1678FF;}
+.hv-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#17a14b;}
+.hv-ping{width:6px;height:6px;border-radius:50%;background:#17a14b;animation:hvPing 2s ease-out infinite;}
+@keyframes hvPing{0%{box-shadow:0 0 0 0 rgba(23,161,75,.4)}70%{box-shadow:0 0 0 8px rgba(23,161,75,0)}100%{box-shadow:0 0 0 0 rgba(23,161,75,0)}}
+.hv-flow{display:flex;align-items:center;gap:8px;padding:16px 2px 14px;}
+.hv-node{
+  flex:1;min-width:0;display:flex;align-items:center;gap:9px;
+  padding:10px 11px;border-radius:14px;background:#fff;
+  border:1px solid #E3ECF7;box-shadow:0 10px 20px -16px rgba(22,51,84,.4);
+}
+.hv-ico{width:32px;height:32px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;}
+.hv-ico.app{background:linear-gradient(135deg,#EDF4FF,#DCE9FF);color:#1678FF;}
+.hv-ico.hub{background:linear-gradient(135deg,#1678FF,#0A5FE0);color:#fff;box-shadow:0 8px 14px -6px rgba(22,120,255,.55);}
+.hv-nt{min-width:0;}
+.hv-n1{display:block;font-size:12px;font-weight:700;color:#22354F;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.hv-n2{display:block;font-size:10.5px;color:#8CA0B8;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.hv-line{
+  flex:none;width:36px;height:2px;border-radius:2px;
+  background:repeating-linear-gradient(90deg,rgba(22,120,255,.8) 0 5px,transparent 5px 10px);
+  animation:hvDash 1.1s linear infinite;
+}
+@keyframes hvDash{to{background-position:10px 0}}
+.hv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
+.hv-tile{
+  display:flex;align-items:center;gap:7px;min-width:0;
+  padding:10px 11px;border-radius:12px;background:#fff;
+  border:1px solid #E6EEF8;box-shadow:0 6px 14px -12px rgba(22,51,84,.3);
+  transition:transform .16s,border-color .16s;
+}
+.hv-tile:hover{transform:translateY(-1px);border-color:rgba(22,120,255,.35);}
+.hv-tile svg{flex:none;width:18px;height:18px;}
+.hv-tile .tx{font-size:11px;font-weight:600;color:#3A5575;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.hv-chip{
+  position:absolute;right:-10px;bottom:-13px;display:inline-flex;align-items:center;gap:6px;
+  padding:7px 12px;border-radius:10px;
+  background:linear-gradient(135deg,#0B63E0,#1678FF);color:#fff;
+  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
+  box-shadow:0 12px 24px -10px rgba(22,120,255,.6);
+}
+@media (max-width:1160px){
+  .registry-head{padding:68px 0 78px;}
+  .hero-visual{display:none;}
+  .registry-text{max-width:none;}
+}
+@media (prefers-reduced-motion:reduce){
+  .hv-card,.hv-ping,.hv-line{animation:none;}
+}
+/* ===== 区块通用 ===== */
+.section{padding:72px 0;}
+.section-head{max-width:720px;margin-bottom:38px;}
+.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
+.section-head .eyebrow{margin-bottom:14px;}
+.section-head h2{
+  font-family:var(--font-serif);font-weight:900;font-size:clamp(24px,3vw,32px);line-height:1.2;
+}
+.section-head p{margin-top:12px;color:var(--ink-2);font-size:15px;line-height:1.7;}
+
+/* ===== 服务矩阵（注册中心卡片） ===== */
+.matrix-toolbar{
+  display:flex;align-items:center;justify-content:space-between;
+  gap:16px;flex-wrap:wrap;margin-bottom:26px;
+}
+.toolbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
+.cap-select{
+  appearance:none;-webkit-appearance:none;
+  padding:9px 36px 9px 16px;border-radius:999px;border:1px solid var(--line-strong);
+  background:var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231678ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
+  font-size:13.5px;color:var(--ink);font-family:var(--font-sans);font-weight:500;cursor:pointer;
+}
+.cap-select:focus{outline:none;border-color:var(--brand);}
+.matrix-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;}
+
+.service-grid{
+  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
+  gap:18px;
+}
+.svc-card{
+  position:relative;display:flex;flex-direction:column;
+  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
+  padding:22px;box-shadow:var(--shadow-card);
+  transition:transform .22s,box-shadow .22s,border-color .22s;
+  overflow:hidden;
+}
+.svc-card::before{
+  content:"";position:absolute;top:0;left:0;right:0;height:3px;
+  background:var(--brand);opacity:.9;
+}
+.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-strong);}
+.svc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
+.svc-icon{
+  width:46px;height:46px;border-radius:13px;flex:none;
+  background:var(--brand);color:#fff;
+  display:flex;align-items:center;justify-content:center;
+}
+.svc-badges{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;}
+.price-tag{
+  display:inline-flex;align-items:center;gap:6px;
+  font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
+}
+.price-tag.token{color:var(--brand-ink);background:var(--brand-soft);}
+.price-tag.free{color:#A05A00;background:#FFF4E3;}
+.limit-free-tag{
+  display:inline-flex;align-items:center;gap:6px;
+  font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
+  color:#C62828;background:#FFEBEC;
+}
+.svc-card h3{margin-top:18px;font-family:"PingFang SC","PingFangSC-Regular","Helvetica Neue",sans-serif;font-weight:700;font-size:19px;letter-spacing:.01em;}
+.tool-name-box{
+  display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:12px;
+  color:var(--brand-ink);background:var(--brand-soft-2);border:1px dashed var(--line-strong);
+  padding:4px 12px;border-radius:6px;letter-spacing:.01em;
+}
+.tool-name-box::before{content:"工具名称";font-family:var(--font-sans);font-size:11px;color:var(--muted);font-weight:600;margin-right:8px;}
+.svc-url-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
+.svc-url-input{
+  flex:1;min-width:0;font-family:var(--font-mono);font-size:11px;
+  color:var(--brand-ink);background:var(--surface-2);border:1px solid var(--line-strong);
+  padding:5px 10px;border-radius:6px;outline:none;
+}
+.svc-url-input:focus{border-color:var(--brand);}
+.btn-copy{
+  flex:none;display:inline-flex;align-items:center;gap:5px;
+  padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;
+  background:var(--brand-soft);color:var(--brand-ink);border:1px solid transparent;
+  cursor:pointer;font-family:var(--font-sans);transition:.16s;
+}
+.btn-copy:hover{border-color:var(--brand);}
+.btn-copy.copied{background:var(--ok-soft);color:var(--ok);}
+.svc-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
+.tag{
+  font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;
+  border:1px solid var(--line-strong);color:var(--ink-2);background:var(--surface);
+}
+.tag.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.01em;background:var(--surface-2);}
+.svc-desc{margin-top:12px;font-size:13.5px;color:var(--ink-2);line-height:1.7;flex:1;font-family:"PingFang SC","PingFangSC-Regular","Helvetica Neue",sans-serif;font-weight:400;}
+.svc-tools{
+  margin-top:12px;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
+  padding-top:12px;border-top:1px dashed var(--line);
+}
+.svc-tools b{font-size:12.5px;color:var(--ink-2);font-weight:600;padding-top:2px;flex:none;}
+.tool-tag{
+  font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:999px;
+  background:var(--brand-soft);color:var(--brand-ink);cursor:pointer;
+  transition:.16s;border:1px solid transparent;user-select:none;
+}
+.tool-tag:hover{border-color:var(--brand);}
+.tool-tag.active{background:var(--brand);color:#fff;box-shadow:0 6px 12px -6px rgba(22,120,255,.5);}
+.svc-actions{
+  margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;
+  padding-top:13px;border-top:1px dashed var(--line);
+}
+.btn-sm{
+  display:inline-flex;align-items:center;gap:7px;
+  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;
+  cursor:pointer;font-family:var(--font-sans);transition:.18s;border:1px solid transparent;
+}
+.btn-sm.primary{background:var(--brand);color:#fff;box-shadow:0 8px 16px -8px rgba(22,120,255,.6);}
+.btn-sm.primary:hover{filter:brightness(1.06);}
+.btn-sm.ghost{background:var(--surface);color:var(--brand-ink);border-color:var(--line-strong);}
+.btn-sm.ghost:hover{border-color:var(--brand);}
+.toast{
+  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(16px);
+  background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;
+  font-size:13.5px;font-weight:500;box-shadow:0 12px 30px -10px rgba(22,33,46,.5);
+  opacity:0;pointer-events:none;transition:.28s;z-index:200;max-width:82vw;line-height:1.5;
+}
+.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
+.matrix-empty{
+  display:none;text-align:center;padding:60px 20px;color:var(--muted);
+  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);
+}
+
+/* ===== 能力覆盖速览（矩阵表） ===== */
+.cap-bg{background:linear-gradient(180deg,#F0F7FF 0%,#F6F9FD 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
+.matrix-table-wrap{
+  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
+  box-shadow:var(--shadow-card);overflow:hidden;overflow-x:auto;
+}
+table.matrix{width:100%;border-collapse:collapse;min-width:760px;font-size:14px;}
+.matrix caption{
+  text-align:left;padding:18px 22px;font-weight:700;color:var(--ink);
+  background:var(--surface-2);border-bottom:1px solid var(--line);font-size:14.5px;
+}
+.matrix th,.matrix td{padding:15px 20px;text-align:left;vertical-align:top;}
+.matrix thead th{
+  font-size:13px;letter-spacing:.03em;color:var(--ink-2);
+  background:var(--surface);border-bottom:1px solid var(--line);
+}
+.matrix thead th.pl{color:var(--brand-ink);}
+.matrix tbody tr{border-bottom:1px solid var(--line);}
+.matrix tbody tr:last-child{border-bottom:none;}
+.matrix tbody tr:hover{background:var(--surface-2);}
+.matrix td.cap{font-weight:600;color:var(--ink);white-space:nowrap;}
+.matrix td .srv{font-family:var(--font-mono);font-size:12px;color:var(--brand-ink);}
+.matrix td.cell-note{color:var(--ink-2);}
+.matrix tfoot td{
+  font-size:12.5px;color:var(--muted);background:var(--surface-2);
+  border-top:1px solid var(--line);padding:12px 20px;
+}
+
+/* ===== 接入方式 ===== */
+.guide-bg{background:var(--surface);}
+.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px;}
+.step{
+  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
+  padding:24px;box-shadow:var(--shadow-card);
+}
+.step-no{
+  width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;
+  display:flex;align-items:center;justify-content:center;
+  font-family:var(--font-mono);font-weight:600;font-size:15px;margin-bottom:16px;
+}
+.step h4{font-family:var(--font-serif);font-weight:700;font-size:17px;margin-bottom:8px;}
+.step p{font-size:13.5px;color:var(--ink-2);line-height:1.7;}
+.config-panel{
+  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
+  overflow:hidden;box-shadow:var(--shadow-card);
+}
+.config-head{
+  padding:16px 20px;border-bottom:1px solid var(--line);
+  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
+}
+.config-head h4{font-size:15px;font-weight:700;}
+.config-head .plat{
+  font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:6px;
+  background:var(--brand-soft);color:var(--brand-ink);
+}
+.config-head .meta{font-size:11.5px;color:var(--muted);width:100%;}
+.config-body pre{
+  font-family:var(--font-mono);font-size:12px;line-height:1.65;
+  padding:18px 20px;overflow-x:auto;color:#DDE6EF;
+  background:#12213A;border-radius:0;
+}
+.config-note{
+  margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.7;
+  display:flex;gap:8px;align-items:flex-start;
+}
+.back-home{margin-top:26px;text-align:center;}
+.back-home a{
+  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand-ink);
+}
+.back-home a:hover{text-decoration:underline;}
+
+/* ===== 页脚 ===== */
+.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:34px 0;}
+.footer-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
+.footer-src a{
+  display:inline-block;margin:4px 12px 4px 0;font-size:13px;color:var(--brand-ink);
+  border-bottom:1px dashed var(--line-strong);
+}
+.footer-src a:hover{border-bottom-color:var(--brand);}
+.footer-note{font-size:12px;color:var(--muted);line-height:1.8;max-width:640px;}
+/* ---- 演示版页脚（基础信息 + 快捷跳转） ---- */
+.site-footer{padding:44px 0 0;background:#fff;border-top:1px solid var(--line);font-family:"PingFang SC","PingFangSC-Regular","Helvetica Neue",sans-serif;}
+.site-footer .wrap{display:flex;flex-direction:column;}
+.footer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:0 0 34px;}
+.footer-brand{flex:1.2;min-width:260px;max-width:380px;}
+.footer-brand .fb-title{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700;color:var(--brand-ink);letter-spacing:.5px;}
+.footer-brand .fb-logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#2E8CFF,#1678FF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
+.footer-brand .fb-desc{margin-top:12px;font-size:13px;line-height:1.9;color:var(--muted);}
+.footer-brand .fb-endpoint{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12.5px;color:var(--brand-ink);background:var(--brand-soft-2);border:1px solid var(--line-strong);padding:5px 11px;border-radius:8px;}
+.footer-col{min-width:150px;}
+.footer-col h4{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:14px;position:relative;padding-left:11px;}
+.footer-col h4::before{content:"";position:absolute;left:0;top:3px;width:3px;height:13px;border-radius:2px;background:var(--brand);}
+.footer-col ul{list-style:none;margin:0;padding:0;}
+.footer-col li{margin-bottom:10px;line-height:1.4;}
+.footer-col a,.footer-col button{background:none;border:none;padding:0;cursor:pointer;font-size:13px;color:#43556b;font-family:inherit;text-align:left;transition:.15s;}
+.footer-col a:hover,.footer-col button:hover{color:var(--brand);}
+.footer-link-ico{margin-right:6px;font-style:normal;color:#93A5BB;}
+.footer-bottom{border-top:1px solid var(--line);padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#93A5BB;}
+.footer-bottom .fb-right a{margin-left:16px;color:#72859A;}
+.footer-bottom .fb-right a:hover{color:var(--brand);}
+
+/* ===== 响应式 ===== */
+@media (max-width:760px){
+  .footer-main{flex-direction:column;gap:26px;}
+}
+@media (max-width:960px){
+  .steps{grid-template-columns:1fr;}
+  .section{padding:56px 0;}
+  .nav{display:none;}
+}
+@media (max-width:520px){
+  .service-grid{grid-template-columns:1fr;}
+}
+@media (prefers-reduced-motion:reduce){
+  html{scroll-behavior:auto;}
+  .svc-card{transition:none;}
+}
+/* ===== 顶栏（mcp.eiacloud.com 导航） ===== */
+.svg-icon{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;outline:none;}
+.svg-icon use{pointer-events:none;}
+.desktop-header{position:relative;z-index:30;background:#fff;}
+.desktop-header .header-inner{min-height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;}
+.desktop-header .header-left{min-width:0;display:flex;align-items:center;gap:20px;}
+.desktop-header .brand-wrapper{flex-shrink:0;display:flex;align-items:center;gap:10px;cursor:pointer;}
+.desktop-header .brand-logo{width:40px;height:40px;object-fit:contain;}
+.desktop-header .brand-text{display:flex;align-items:center;}
+.desktop-header .brand-title{font-weight:600;font-size:28px;line-height:1;color:#1678ff;letter-spacing:1px;}
+.desktop-header .navigation-list{min-width:0;display:flex;align-items:center;flex-wrap:nowrap;gap:0;}
+.desktop-header .upload-metrial{position:relative;padding-bottom:12px;margin-bottom:-12px;}
+.desktop-header .upload-metrial:hover .upload-category{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
+.desktop-header .top-load{height:36px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:18px;background:#1678ff;box-shadow:rgba(66,133,244,.4) 0 2px 6px;color:#fff;cursor:pointer;user-select:none;}
+.desktop-header .top-load img{width:18px;height:18px;object-fit:contain;}
+.desktop-header .top-load span{font-size:15px;font-weight:600;line-height:20px;}
+.desktop-header .upload-category{position:absolute;top:calc(100% - 2px);left:0;z-index:20;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;}
+.desktop-header .upload-category-wrapper{width:180px;margin:0;padding:4px 0;list-style:none;border-radius:12px;background:#fff;box-shadow:rgba(31,52,88,.16) 0 12px 30px;border:1px solid #eef2f8;}
+.desktop-header .upload-category-li{height:40px;padding:0 20px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background-color .2s,color .2s;}
+.desktop-header .upload-category-li:hover{background:#f4f8ff;}
+.desktop-header .upload-category-li:hover span{color:#1678ff;}
+.desktop-header .upload-category-li img{width:20px;height:20px;object-fit:contain;flex-shrink:0;}
+.desktop-header .upload-category-li span{font-size:14px;line-height:20px;color:#333;transition:color .2s;white-space:nowrap;}
+.desktop-header .navigation-item,.desktop-header .text-action{border:none;outline:none;background:transparent;cursor:pointer;transition:.2s;}
+.desktop-header .navigation-item{padding:0;margin-right:30px;font-size:16px;line-height:20px;color:#333;white-space:nowrap;position:relative;flex-shrink:0;}
+.desktop-header .navigation-item:hover,.desktop-header .navigation-item.active{color:#1678ff;}
+.desktop-header .ai-auto-fill{position:absolute;top:-17px;left:31px;background:url("https://cdntest.eiacloud.com/hpyzs/ai-auto-fill-bg.png") 0 0/100% 100%;display:flex;font-size:12px;line-height:16px;color:#fff;font-family:"PingFang SC","PingFang SC";gap:1px;width:56px;height:20px;padding:0 4px 4px 1px;}
+.desktop-header .ai-auto-fill img{width:14px;height:14px;margin-top:1px;}
+.desktop-header .ai-auto-fill span{line-height:16px;}
+.desktop-header .header-right{flex-shrink:0;display:flex;align-items:center;gap:20px;font-weight:400;font-size:16px;color:#333;}
+.desktop-header .head-middle-link{display:inline-flex;align-items:center;flex-shrink:0;line-height:0;}
+.desktop-header .head-middle-link img{height:54px;display:block;object-fit:contain;}
+.desktop-header .text-action{margin-right:10px;height:32px;padding:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:#333;}
+.desktop-header .text-action:hover{color:#1678ff;}
+.desktop-header .quick-action-wrapper{position:relative;display:inline-flex;align-items:center;}
+.desktop-header .quick-action-wrapper.has-dropdown{padding-bottom:16px;margin-bottom:-16px;}
+.desktop-header .quick-action-wrapper.has-dropdown:hover .aq-dropdown{opacity:1;visibility:visible;transform:translate(-50%);pointer-events:auto;}
+.desktop-header .aq-dropdown{position:absolute;top:100%;left:50%;z-index:40;padding-top:8px;opacity:0;visibility:hidden;transform:translate(-50%,8px);pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;}
+.desktop-header .aq-down-app{width:200px;padding:16px;border-radius:12px;background:#fff;box-shadow:rgba(31,52,88,.16) 0 12px 30px;border:1px solid #eef2f8;text-align:center;}
+.desktop-header .aq-qr-image{width:160px;height:160px;display:block;margin:0 auto;object-fit:cover;}
+.desktop-header .download-app-contents{margin-top:12px;}
+.desktop-header .download-app-text{margin-bottom:12px;font-size:14px;line-height:22px;font-weight:600;color:#4c535c;}
+.desktop-header .gda-btn{width:100%;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e8eaec;background:transparent;color:#333;text-decoration:none;box-sizing:border-box;transition:.2s;}
+.desktop-header .gda-btn:hover{color:#1678ff;border-color:#1678ff;background:#f4f8ff;}
+.desktop-header .gda-btn-sm{font-size:16px;line-height:22px;}
+.desktop-header .login-button{flex-shrink:0;margin:0;font-size:16px;line-height:20px;color:#333;cursor:pointer;white-space:nowrap;}
+.desktop-header .login-button:hover{color:#1678ff;}
+/* ===== 顶栏登录后用户区 ===== */
+.desktop-header .user-area{flex-shrink:0;display:flex;align-items:center;gap:12px;position:relative;}
+.ua-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 8px;border-radius:20px;transition:background .2s;}
+.ua-user:hover{background:#f4f8ff;}
+.ua-avatar{width:28px;height:28px;border-radius:50%;flex:none;background:linear-gradient(135deg,#3B96FF,#1678FF);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
+.ua-name{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#333;}
+.ua-caret{color:#97A3B0;transition:transform .2s;}
+.user-area.open .ua-caret{transform:rotate(180deg);}
+.ua-cloudchip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:linear-gradient(135deg,#FFF6E5,#FFEFD2);border:1px solid #FFD98A;font-size:13px;font-weight:500;color:#9A6B00;}
+.ua-cloudchip b{font-size:15px;color:#B26A00;}
+.ua-chip-ico,.ua-di-ico{font-style:normal;font-weight:700;color:#F0A81D;font-size:11px;}
+.ua-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;padding:6px;border-radius:12px;background:#fff;border:1px solid #EEF2F8;box-shadow:rgba(31,52,88,.16) 0 12px 30px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:.2s;}
+.user-area.open .ua-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
+.ua-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:none;background:transparent;text-align:left;font-size:13.5px;color:#333;cursor:pointer;border-radius:8px;transition:.15s;white-space:nowrap;}
+.ua-dropdown-item:hover{background:#f4f8ff;color:#1678ff;}
+.ua-dropdown-item.ua-logout{color:#D33;border-top:1px solid #f0f3f8;border-radius:0 0 8px 8px;margin-top:4px;padding-top:10px;}
+.ua-dropdown-item.ua-logout:hover{background:#fff1f0;color:#c62828;}
+
+/* ===== 通用遮罩与居中弹窗（品牌蓝风格） ===== */
+.wb-overlay{position:fixed;inset:0;background:rgba(16,34,64,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;}
+.wb-overlay.show{opacity:1;visibility:visible;}
+.wb-modal{width:min(94vw,420px);background:#fff;border-radius:18px;box-shadow:0 30px 70px -20px rgba(6,26,54,.5);overflow:hidden;transform:translateY(16px) scale(.96);transition:.24s cubic-bezier(.2,.8,.2,1);font-family:var(--font-sans);}
+.wb-overlay.show .wb-modal{transform:translateY(0) scale(1);}
+.wb-modal-head{position:relative;padding:18px 24px;background:linear-gradient(120deg,#EDF5FF,#F7FBFF);border-bottom:1px solid #E7EFFA;}
+.wb-modal-head h3{font-size:16px;color:#0B1F3F;display:flex;align-items:center;gap:8px;}
+.wb-close{position:absolute;right:14px;top:14px;width:28px;height:28px;border:none;background:transparent;cursor:pointer;color:#8CA0B8;font-size:22px;line-height:1;border-radius:50%;}
+.wb-close:hover{background:#e9f2ff;color:#1678ff;}
+.wb-modal-body{padding:22px 24px;}
+.wb-modal-foot{padding:0 24px 22px;text-align:right;}
+.wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:110px;padding:10px 20px;border:none;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;transition:.18s;font-family:var(--font-sans);}
+.wb-btn.primary{background:linear-gradient(135deg,#2E8CFF,#1678FF 60%,#0B63E0);color:#fff;box-shadow:0 8px 18px -8px rgba(22,120,255,.7);}
+.wb-btn.primary:hover{filter:brightness(1.07);transform:translateY(-1px);}
+.wb-btn.ghost{background:#fff;color:#5F7490;border:1px solid #D6E2F0;}
+.wb-btn.ghost:hover{border-color:#1678ff;color:#1678ff;}
+.wb-field{margin-bottom:14px;}
+.wb-field label{display:block;font-size:13px;color:#57708C;margin-bottom:6px;}
+.wb-field input{width:100%;height:42px;padding:0 14px;border:1px solid #D6E2F0;border-radius:10px;font-size:14px;outline:none;transition:.15s;color:#333;background:#fff;box-sizing:border-box;}
+.wb-field input:focus{border-color:#1678ff;box-shadow:0 0 0 3px rgba(22,120,255,.12);}
+.wb-err{color:#E03131;font-size:12.5px;margin-top:4px;display:none;}
+.wb-tip{color:#8CA0B8;font-size:12.5px;line-height:1.6;}
+/* 领取成功弹窗 */
+.wb-success-badge{width:64px;height:64px;border-radius:50%;margin:4px auto 14px;background:linear-gradient(135deg,#2E8CFF,#1678FF);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 26px -10px rgba(22,120,255,.6);}
+.wb-success-badge svg{width:34px;height:34px;color:#fff;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;}
+.wb-success-title{font-size:19px;font-weight:700;color:#0B1F3F;text-align:center;}
+.wb-success-sub{text-align:center;color:#5F7490;font-size:14px;margin-top:8px;line-height:1.7;}
+.wb-cloud-add{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:linear-gradient(135deg,#FFF6E5,#FFEFD2);border:1px solid #FFD98A;color:#B26A00;font-weight:700;font-size:15px;margin:0 4px;}
+.wb-login-badge{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,#EAF2FF,#DCE9FF);display:flex;align-items:center;justify-content:center;}
+.wb-login-badge svg{width:28px;height:28px;stroke:#1678ff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+.wb-hint{background:#FFF8E6;border:1px solid #FFE4A8;color:#8A5B00;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.7;margin-bottom:16px;display:flex;gap:8px;}
+.wb-hint svg{width:16px;height:16px;flex:none;stroke:#E8890C;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}

src/pages/guide/index.vue

@@ -129,7 +129,7 @@
                       <div class="home-guide-tool-step-copy">
                         <div class="home-guide-tool-step-title">验证接入是否成功</div>
                         <div class="home-guide-tool-step-desc">
-                          在对话中发送「用环评云助手MCP检索《大气污染物综合排放标准》中关于 VOCs 排放限值的规定」
+                          在对话中发送「用环评云助手MCP检索《陶瓷工业大气污染物排放标准》对氮氧化物的分级控制要求」
                         </div>
                       </div>
                     </div>
@@ -736,7 +736,7 @@ const guideDoubaoContent = {
     {
       num: 3,
       title:
-        "验证是否成功——在对话中发送「用环评云助手MCP检索《大气污染物综合排放标准》中关于 VOCs 排放限值的规定」",
+        "验证是否成功——在对话中发送「用环评云助手MCP检索《陶瓷工业大气污染物排放标准》对氮氧化物的分级控制要求」",
     },
   ],
   notes: [

src/pages/home/index.vue

@@ -295,7 +295,7 @@
                       <div class="home-guide-tool-step-copy">
                         <div class="home-guide-tool-step-title">验证接入是否成功</div>
                         <div class="home-guide-tool-step-desc">
-                          在对话中发送「用环评云助手MCP检索《大气污染物综合排放标准》中关于 VOCs 排放限值的规定」
+                          在对话中发送「用环评云助手MCP检索《陶瓷工业大气污染物排放标准》对氮氧化物的分级控制要求」
                         </div>
                       </div>
                     </div>
@@ -907,6 +907,8 @@ const formatHotRequestCount = (value) => {
   if (value == null || value === "") return "-";
   const num = Number(value);
   if (Number.isNaN(num)) return String(value);
+  if (num >= 10000) return `${(num / 10000).toFixed(1)}w`;
+  if (num >= 1000) return `${(num / 1000).toFixed(1)}k`;
   return String(num);
 };
 
@@ -1004,7 +1006,7 @@ const guideDoubaoContent = {
     {
       num: 3,
       title:
-        "验证是否成功——在对话中发送「用环评云助手MCP检索《大气污染物综合排放标准》中关于 VOCs 排放限值的规定」",
+        "验证是否成功——在对话中发送「用环评云助手MCP检索《陶瓷工业大气污染物排放标准》对氮氧化物的分级控制要求」",
     },
   ],
   notes: [

src/pages/mcp/serve.vue

@@ -0,0 +1,1216 @@
+<template>
+  <div class="serve-page">
+    <section class="registry-head">
+      <div class="wrap">
+        <div class="registry-inner">
+          <div class="registry-text">
+            <div class="hero-badge">
+              <span class="hero-badge-dot"></span>
+              企业级 MCP 智能服务中枢
+            </div>
+            <h1>MCP<span class="brand-blue">服务中心</span></h1>
+            <div class="sub-title">一个页面汇总环评云助手全部 MCP 智能服务</div>
+            <p class="lead">
+              以矩阵形式呈现每项服务的能力、端点与调用指标，统一 Token 即可接入主流大模型。参考标准 MCP 服务目录规范整理，随平台服务更新维护。
+            </p>
+            <div class="cta-row">
+              <button type="button" class="btn-cta" @click="claimGift">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
+                领取MCP体验礼包
+              </button>
+              <button type="button" class="btn-ghost" @click="scrollToMatrix">
+                浏览全部服务
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg>
+              </button>
+            </div>
+            <div class="hero-meta">
+              <span class="hm-item">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="#EAF2FF"></circle><path d="m8.5 12.2 2.4 2.4 4.8-5" stroke="#1678FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                官方端点 <b>mcp.eiacloud.com</b>
+              </span>
+              <span class="hm-item">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="#EAF2FF"></circle><path d="m8.5 12.2 2.4 2.4 4.8-5" stroke="#1678FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                标准 MCP 协议接入
+              </span>
+              <span class="hm-item">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" fill="#EAF2FF"></circle><path d="m8.5 12.2 2.4 2.4 4.8-5" stroke="#1678FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                统一 Token 计费
+              </span>
+            </div>
+          </div>
+
+          <div class="hero-visual" aria-hidden="true">
+            <div class="hv-card">
+              <div class="hv-head">
+                <div class="hv-title">
+                  <span class="hv-sm">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="18" cy="18" r="3"></circle><path d="M8.7 10.7 15.3 7.3"></path><path d="m8.7 13.3 6.6 3.4"></path></svg>
+                  </span>
+                  MCP 服务中枢
+                </div>
+                <span class="hv-live"><span class="hv-ping"></span>实时连接</span>
+              </div>
+              <div class="hv-flow">
+                <div class="hv-node">
+                  <span class="hv-ico app">
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2.5"></rect><rect x="10" y="10" width="4" height="4" rx="1"></rect><path d="M9 2.5v3M15 2.5v3M9 18.5v3M15 18.5v3M2.5 9h3M2.5 15h3M18.5 9h3M18.5 15h3"></path></svg>
+                  </span>
+                  <span class="hv-nt"><span class="hv-n1">AI 应用 / Agent</span><span class="hv-n2">智能体即插即用</span></span>
+                </div>
+                <div class="hv-line"></div>
+                <div class="hv-node">
+                  <span class="hv-ico hub">
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 10 5.5L12 13 2 7.5z"></path><path d="m2 12.5 10 5.5 10-5.5"></path><path d="m2 17.5 10 5.5 10-5.5"></path></svg>
+                  </span>
+                  <span class="hv-nt"><span class="hv-n1">环评云助手 MCP</span><span class="hv-n2">统一接入服务目录</span></span>
+                </div>
+              </div>
+              <div class="hv-grid">
+                <div class="hv-tile" style="color:#059669;">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
+                  <span class="tx">法规检索</span>
+                </div>
+                <div class="hv-tile" style="color:#3B82F6;">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path><path d="M11 8v6"></path><path d="M8 11h6"></path></svg>
+                  <span class="tx">语义检索</span>
+                </div>
+                <div class="hv-tile" style="color:#7C3AED;">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"></path></svg>
+                  <span class="tx">政策问答</span>
+                </div>
+                <div class="hv-tile" style="color:#E8890C;">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>
+                  <span class="tx">排放限值</span>
+                </div>
+                <div class="hv-tile" style="color:#EF4444;">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 13H8"></path><path d="M16 17H8"></path><path d="M10 9H8"></path></svg>
+                  <span class="tx">报告检索</span>
+                </div>
+                <div class="hv-tile" style="color:#6366F1;">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 10 5.5L12 13 2 7.5z"></path><path d="m2 12.5 10 5.5 10-5.5"></path><path d="m2 17.5 10 5.5 10-5.5"></path></svg>
+                  <span class="tx">标准汇编</span>
+                </div>
+              </div>
+            </div>
+            <div class="hv-chip">https://mcp.eiacloud.com</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="matrix">
+      <div class="wrap">
+        <div class="service-grid">
+          <article v-for="item in serviceList" :key="item.id" class="svc-card">
+            <div class="svc-top">
+              <div class="svc-icon" :style="{ background: item.iconBg, boxShadow: item.iconShadow }">
+                <svg v-if="item.icon === 'book'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
+                <svg v-else-if="item.icon === 'file'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
+                <svg v-else-if="item.icon === 'chat'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"></path></svg>
+                <svg v-else-if="item.icon === 'chart'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"></path><path d="M7 14v4"></path><path d="M12 9v9"></path><path d="M17 5v13"></path></svg>
+                <svg v-else-if="item.icon === 'report'" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>
+                <svg v-else viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 10 5.5L12 13 2 7.5z"></path><path d="m2 12.5 10 5.5 10-5.5"></path><path d="m2 17.5 10 5.5 10-5.5"></path></svg>
+              </div>
+              <div class="svc-badges">
+                <span v-if="item.free" class="price-tag free">免费</span>
+                <span v-else class="price-tag token">{{ item.rate }}x token</span>
+                <span v-if="item.limitFree" class="limit-free-tag">限免</span>
+              </div>
+            </div>
+            <h3>{{ item.name }}</h3>
+            <div class="svc-url-row">
+              <input :value="item.endpoint" type="text" class="svc-url-input" readonly />
+              <button
+                type="button"
+                class="btn-copy"
+                :class="{ copied: copiedId === item.id }"
+                @click="copyUrl(item)"
+              >
+                {{ copiedId === item.id ? "已复制" : "复制" }}
+              </button>
+            </div>
+            <div class="svc-tools">
+              <b>包含工具</b>
+              <span
+                v-for="(tool, index) in item.tools"
+                :key="tool.code"
+                class="tool-tag"
+                :class="{ active: selectedTool[item.id] === index }"
+                @click="selectedTool[item.id] = index"
+              >{{ tool.label }}</span>
+            </div>
+            <span class="tool-name-box">{{ currentToolCode(item) }}</span>
+            <div class="svc-tags">
+              <span v-for="param in item.params" :key="param" class="tag mono">{{ param }}</span>
+            </div>
+            <p class="svc-desc">{{ item.desc }}</p>
+            <div class="svc-actions">
+              <button type="button" class="btn-sm primary">模拟调用</button>
+              <button type="button" class="btn-sm ghost">查看详情</button>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <footer class="site-footer">
+      <div class="wrap">
+        <div class="footer-main">
+          <div class="footer-brand">
+            <div class="fb-title">
+              <span class="fb-logo">云</span>
+              环评云助手 · MCP服务中心
+            </div>
+            <p class="fb-desc">一个页面汇总环评云助手全部 MCP 智能服务，以矩阵形式呈现每项服务的能力、端点与调用指标，统一 Token 即可接入主流大模型。面向环评领域 AI 应用与智能体，即插即用、随平台服务更新维护。</p>
+            <span class="fb-endpoint">官方端点 mcp.eiacloud.com</span>
+          </div>
+          <div class="footer-col">
+            <h4>本页快捷跳转</h4>
+            <ul>
+              <li><button type="button" @click="scrollToMatrix"><span class="footer-link-ico">▦</span>浏览全部服务</button></li>
+              <li><button type="button" @click="claimGift"><span class="footer-link-ico">◆</span>领取MCP体验礼包</button></li>
+              <li><button type="button" @click="scrollToTop"><span class="footer-link-ico">↑</span>回到顶部</button></li>
+            </ul>
+          </div>
+          <div class="footer-col">
+            <h4>快捷产品入口</h4>
+            <ul>
+              <li><a href="https://mcp.eiacloud.com" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>MCP服务中心</a></li>
+              <li><a href="https://www.eiacloud.com" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>环评云助手官网</a></li>
+              <li><a href="https://www.eiacloud.com/bbs" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>环评论坛</a></li>
+              <li><a href="https://www.eiacloud.com/bbs/download" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">➤</span>手机/电脑端下载</a></li>
+            </ul>
+          </div>
+          <div class="footer-col">
+            <h4>服务信息</h4>
+            <ul>
+              <li><button type="button" @click="scrollToMatrix"><span class="footer-link-ico">◎</span>标准 MCP 协议接入</button></li>
+              <li><a href="https://org.eiacloud.com/#/home/control?openVip=1" target="_blank" rel="noopener noreferrer"><span class="footer-link-ico">◎</span>会员开通与云点</a></li>
+              <li><span class="footer-link-ico">✉</span>联系客服获取接入支持</li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <span>环评云助手 MCP服务中心</span>
+          <div class="fb-right">
+            <button type="button" @click="scrollToTop">回到顶部</button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+
+const serviceList = [
+  {
+    id: 1,
+    name: "法规关键词检索",
+    icon: "book",
+    iconBg: "linear-gradient(135deg,#059669,#10b981)",
+    iconShadow: "0 6px 16px rgba(5,150,105,.25)",
+    endpoint: "https://mcp.eiacloud.com/law-keyword",
+    rate: "0.002",
+    tools: [{ label: "关键词检索", code: "law_keyword_search" }],
+    params: ["keyword", "law_type", "limit"],
+    desc: "基于生态环境政策法规库的关键词精确检索，适合已知法规名称、文号、发布机关的定向查询。",
+  },
+  {
+    id: 2,
+    name: "法规导则 · 语义检索",
+    icon: "file",
+    iconBg: "linear-gradient(135deg,#3b82f6,#60a5fa)",
+    iconShadow: "0 6px 16px rgba(59,130,246,.25)",
+    endpoint: "https://mcp.eiacloud.com/law-semantic",
+    rate: "0.002",
+    limitFree: true,
+    tools: [{ label: "语义检索", code: "law_semantic_search" }],
+    params: ["query", "top_k", "scope"],
+    desc: "自然语言智能检索，无需精准关键词；输入业务场景即可跨法规召回条款，适配模糊提问与实务流程查询。",
+  },
+  {
+    id: 3,
+    name: "环境问答检索",
+    icon: "chat",
+    iconBg: "linear-gradient(135deg,#7c3aed,#a78bfa)",
+    iconShadow: "0 8px 24px rgba(124,58,237,.25)",
+    endpoint: "https://mcp.eiacloud.com/qa",
+    rate: "0.001",
+    tools: [
+      { label: "关键词问答检索", code: "qa_keyword_search" },
+      { label: "语义检索", code: "qa_semantic_search" },
+    ],
+    params: ["question", "limit", "query", "top_k"],
+    desc: "全国环保政策问答知识库语义检索，汇聚生态环境官方答复、部长信箱口径，解答判定、流程、时限、豁免类实操疑问。",
+  },
+  {
+    id: 4,
+    name: "排放限值查询",
+    icon: "chart",
+    iconBg: "linear-gradient(135deg,#f59e0b,#fb923c)",
+    iconShadow: "0 6px 16px rgba(245,158,11,.25)",
+    endpoint: "https://mcp.eiacloud.com/emission",
+    rate: "0.004",
+    tools: [
+      { label: "大气污染物限值查询", code: "air_emission_limit" },
+      { label: "水污染物限值查询", code: "water_emission_limit" },
+    ],
+    params: ["pollutant", "standard_no", "province"],
+    desc: "大气、水排放标准结构化数值库，按污染物 / 标准号查询浓度、速率、无组织限值，支撑环评与排污许可达标核算。",
+  },
+  {
+    id: 5,
+    name: "公示环评报告检索",
+    icon: "report",
+    iconBg: "linear-gradient(135deg,#ef4444,#f87171)",
+    iconShadow: "0 6px 16px rgba(239,68,68,.25)",
+    endpoint: "接入端点待平台公布，以 mcp.eiacloud.com 为准",
+    rate: "0.004",
+    tools: [
+      { label: "关键字搜索", code: "eia_report_keyword" },
+      { label: "语义检索", code: "eia_report_semantic" },
+    ],
+    params: ["keyword", "region", "limit", "query", "top_k"],
+    desc: "检索全国建设项目环境信息公示平台上的环评报告（报告书、报告表、登记表等公示文本），支持关键字搜索与语义检索两种方式，快速定位项目环评公示文件。",
+  },
+  {
+    id: 6,
+    name: "《排污许可证申请与核发技术规范》汇编检索",
+    icon: "stack",
+    iconBg: "linear-gradient(135deg,#6366f1,#818cf8)",
+    iconShadow: "0 6px 16px rgba(99,102,241,.25)",
+    endpoint: "接入端点待平台公布，以 mcp.eiacloud.com 为准",
+    free: true,
+    tools: [
+      { label: "关键字搜索", code: "permit_std_keyword" },
+      { label: "语义检索", code: "permit_std_semantic" },
+    ],
+    params: ["keyword", "industry", "limit", "query", "top_k"],
+    desc: "《排污许可证申请与核发技术规范》汇编检索服务，覆盖总则（HJ 942-2018）及分行业技术规范，支持关键字搜索与语义检索，服务免费开放。",
+  },
+];
+
+const selectedTool = reactive({});
+serviceList.forEach((item) => {
+  selectedTool[item.id] = 0;
+});
+
+const copiedId = ref(null);
+let copiedTimer = null;
+
+const currentToolCode = (item) => {
+  const index = selectedTool[item.id] || 0;
+  return item.tools[index]?.code || "";
+};
+
+const copyUrl = async (item) => {
+  const text = item.endpoint || "";
+  if (!text) {
+    ElMessage.warning("暂无内容可复制");
+    return;
+  }
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.left = "-9999px";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }
+    copiedId.value = item.id;
+    clearTimeout(copiedTimer);
+    copiedTimer = setTimeout(() => {
+      copiedId.value = null;
+    }, 1500);
+  } catch (error) {
+    console.error(error);
+    ElMessage.error("复制失败");
+  }
+};
+
+const scrollToMatrix = () => {
+  document.getElementById("matrix")?.scrollIntoView({ behavior: "smooth", block: "start" });
+};
+
+const scrollToTop = () => {
+  const shell = document.querySelector(".page-shell");
+  if (shell) {
+    shell.scrollTo({ top: 0, behavior: "smooth" });
+    return;
+  }
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+const claimGift = () => {
+  ElMessage.info("体验礼包功能待接入");
+};
+</script>
+
+<style scoped lang="less">
+.serve-page {
+  --bg: #F6F9FD;
+  --surface: #FFFFFF;
+  --surface-2: #F7FAFE;
+  --ink: #1B2533;
+  --ink-2: #3E5063;
+  --muted: #72859A;
+  --line: #E4ECF6;
+  --line-strong: #C9D8EA;
+  --brand: #1678ff;
+  --brand-ink: #0b63e0;
+  --brand-deep: #0a4fd0;
+  --brand-soft: #EAF2FF;
+  --brand-soft-2: #F0F6FF;
+  --ok: #17a14b;
+  --ok-soft: #E7F6EC;
+  --radius: 16px;
+  --shadow-card: 0 1px 2px rgba(22, 51, 84, 0.05), 0 10px 28px -18px rgba(22, 51, 84, 0.18);
+  --shadow-lift: 0 2px 6px rgba(22, 51, 84, 0.06), 0 20px 44px -22px rgba(22, 51, 84, 0.26);
+  --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  box-sizing: border-box;
+  min-height: calc(100vh - 64px);
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  font-size: 15px;
+}
+
+.serve-page *,
+.serve-page *::before,
+.serve-page *::after {
+  box-sizing: border-box;
+}
+
+.serve-page button {
+  appearance: none;
+  font-family: inherit;
+  outline: none;
+}
+
+.serve-page button:focus,
+.serve-page button:focus-visible {
+  outline: none;
+}
+
+.wrap {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.registry-head {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding: 82px 0 90px;
+  background:
+    radial-gradient(720px 400px at 84% -18%, rgba(22, 120, 255, 0.16), transparent 62%),
+    radial-gradient(560px 380px at -6% 116%, rgba(77, 154, 255, 0.13), transparent 60%),
+    linear-gradient(118deg, #EDF5FF 0%, #F8FBFF 46%, #E9F2FF 100%);
+  border-bottom: 1px solid var(--line);
+}
+
+.registry-head::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(22, 120, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(22, 120, 255, 0.05) 1px, transparent 1px);
+  background-size: 44px 44px;
+  -webkit-mask-image: radial-gradient(900px 480px at 66% 42%, #000 0%, transparent 78%);
+  mask-image: radial-gradient(900px 480px at 66% 42%, #000 0%, transparent 78%);
+}
+
+.registry-head::after {
+  content: "";
+  position: absolute;
+  right: -200px;
+  top: -230px;
+  width: 580px;
+  height: 580px;
+  border-radius: 50%;
+  pointer-events: none;
+  border: 1px dashed rgba(22, 120, 255, 0.20);
+  box-shadow: 0 0 0 44px rgba(22, 120, 255, 0.035), 0 0 0 106px rgba(22, 120, 255, 0.02);
+}
+
+.registry-head .wrap {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+.registry-inner {
+  display: flex;
+  align-items: center;
+  gap: 56px;
+}
+
+.registry-text {
+  flex: 1;
+  min-width: 0;
+  max-width: 656px;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 16px 7px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(22, 120, 255, 0.25);
+  color: #1678FF;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  box-shadow: 0 10px 26px -14px rgba(22, 120, 255, 0.5);
+  margin-bottom: 28px;
+}
+
+.hero-badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #5FA8FF, #1678FF);
+  box-shadow: 0 0 0 3.5px rgba(22, 120, 255, 0.15);
+}
+
+.registry-head h1 {
+  margin: 0;
+  font-weight: 800;
+  font-size: clamp(40px, 5.2vw, 58px);
+  line-height: 1.12;
+  letter-spacing: -1.5px;
+  color: #0B1F3F;
+}
+
+.brand-blue {
+  background: linear-gradient(100deg, #3B96FF, #1678FF 55%, #0A5FE0);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.sub-title {
+  margin-top: 16px;
+  font-weight: 600;
+  font-size: clamp(16px, 1.9vw, 19px);
+  color: #2E4A6B;
+}
+
+.lead {
+  margin: 22px 0 0;
+  max-width: 600px;
+  color: #5F7490;
+  font-size: 14.5px;
+  line-height: 2;
+}
+
+.cta-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-top: 38px;
+}
+
+.btn-cta,
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-cta {
+  padding: 13px 28px;
+  font-size: 14.5px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #2E8CFF, #1678FF 60%, #0B63E0);
+  color: #fff;
+  border: none;
+  box-shadow: 0 12px 26px -10px rgba(22, 120, 255, 0.65);
+}
+
+.btn-cta:hover {
+  transform: translateY(-2px);
+  filter: brightness(1.07);
+  border-color: transparent;
+  box-shadow: 0 16px 34px -12px rgba(22, 120, 255, 0.78);
+}
+
+.btn-ghost {
+  padding: 13px 26px;
+  font-size: 14px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.8);
+  color: #33506F;
+  border: 1px solid rgba(154, 182, 214, 0.9);
+}
+
+.btn-ghost:hover {
+  border-color: #1678FF;
+  color: #1678FF;
+  background: #fff;
+  transform: translateY(-1px);
+}
+
+.hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  margin-top: 26px;
+}
+
+.hm-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  color: #57708C;
+  font-weight: 500;
+}
+
+.hm-item b {
+  color: #1678FF;
+  font-weight: 700;
+}
+
+.hero-visual {
+  flex: none;
+  width: 420px;
+  position: relative;
+}
+
+.hv-card {
+  position: relative;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(22, 120, 255, 0.16);
+  border-radius: 22px;
+  padding: 18px;
+  box-shadow: 0 30px 64px -26px rgba(22, 80, 160, 0.38);
+  animation: hvFloat 7s ease-in-out infinite;
+}
+
+@keyframes hvFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-7px); }
+}
+
+.hv-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 2px 13px;
+  border-bottom: 1px dashed rgba(22, 120, 255, 0.2);
+}
+
+.hv-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #22395C;
+}
+
+.hv-sm {
+  width: 22px;
+  height: 22px;
+  flex: none;
+  border-radius: 7px;
+  background: linear-gradient(135deg, #EAF2FF, #DCE9FF);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #1678FF;
+}
+
+.hv-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #17a14b;
+}
+
+.hv-ping {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #17a14b;
+  animation: hvPing 2s ease-out infinite;
+}
+
+@keyframes hvPing {
+  0% { box-shadow: 0 0 0 0 rgba(23, 161, 75, 0.4); }
+  70% { box-shadow: 0 0 0 8px rgba(23, 161, 75, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(23, 161, 75, 0); }
+}
+
+.hv-flow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 2px 14px;
+}
+
+.hv-node {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 10px 11px;
+  border-radius: 14px;
+  background: #fff;
+  border: 1px solid #E3ECF7;
+}
+
+.hv-ico {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hv-ico.app {
+  background: linear-gradient(135deg, #EDF4FF, #DCE9FF);
+  color: #1678FF;
+}
+
+.hv-ico.hub {
+  background: linear-gradient(135deg, #1678FF, #0A5FE0);
+  color: #fff;
+}
+
+.hv-n1,
+.hv-n2 {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hv-n1 {
+  font-size: 12px;
+  font-weight: 700;
+  color: #22354F;
+}
+
+.hv-n2 {
+  font-size: 10.5px;
+  color: #8CA0B8;
+}
+
+.hv-line {
+  flex: none;
+  width: 36px;
+  height: 2px;
+  border-radius: 2px;
+  background: repeating-linear-gradient(90deg, rgba(22, 120, 255, 0.8) 0 5px, transparent 5px 10px);
+  animation: hvDash 1.1s linear infinite;
+}
+
+@keyframes hvDash {
+  to { background-position: 10px 0; }
+}
+
+.hv-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.hv-tile {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 10px 11px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid #E6EEF8;
+}
+
+.hv-tile svg {
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+.hv-tile .tx {
+  font-size: 11px;
+  font-weight: 600;
+  color: #3A5575;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hv-chip {
+  position: absolute;
+  right: -10px;
+  bottom: -13px;
+  padding: 7px 12px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #0B63E0, #1678FF);
+  color: #fff;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  box-shadow: 0 12px 24px -10px rgba(22, 120, 255, 0.6);
+}
+
+.section {
+  padding: 30px 0 72px;
+}
+
+.service-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+  gap: 18px;
+}
+
+.svc-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 22px;
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
+}
+
+.svc-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--brand);
+}
+
+.svc-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lift);
+  border-color: var(--line-strong);
+}
+
+.svc-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.svc-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 13px;
+  flex: none;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svc-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.svc-badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.price-tag,
+.limit-free-tag {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: 999px;
+}
+
+.price-tag.token {
+  color: var(--brand-ink);
+  background: var(--brand-soft);
+}
+
+.price-tag.free {
+  color: #A05A00;
+  background: #FFF4E3;
+}
+
+.limit-free-tag {
+  color: #C62828;
+  background: #FFEBEC;
+}
+
+.svc-card h3 {
+  margin: 18px 0 0;
+  font-weight: 700;
+  font-size: 19px;
+}
+
+.svc-url-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.svc-url-input {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--brand-ink);
+  background: var(--surface-2);
+  border: 1px solid var(--line-strong);
+  padding: 5px 10px;
+  border-radius: 6px;
+  outline: none;
+}
+
+.btn-copy {
+  flex: none;
+  padding: 5px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--brand-soft);
+  color: var(--brand-ink);
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-copy:hover {
+  border-color: var(--brand);
+}
+
+.btn-copy.copied {
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+
+.svc-tools {
+  margin-top: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding-top: 12px;
+  border-top: 1px dashed var(--line);
+}
+
+.svc-tools b {
+  font-size: 12.5px;
+  color: var(--ink-2);
+  font-weight: 600;
+  padding-top: 2px;
+}
+
+.tool-tag {
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--brand-soft);
+  color: var(--brand-ink);
+  cursor: pointer;
+  border: 1px solid transparent;
+  user-select: none;
+}
+
+.tool-tag:hover {
+  border-color: var(--brand);
+}
+
+.tool-tag.active {
+  background: var(--brand);
+  color: #fff;
+  box-shadow: 0 6px 12px -6px rgba(22, 120, 255, 0.5);
+}
+
+.tool-name-box {
+  display: inline-block;
+  margin-top: 10px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--brand-ink);
+  background: var(--brand-soft-2);
+  border: 1px dashed var(--line-strong);
+  padding: 4px 12px;
+  border-radius: 6px;
+}
+
+.tool-name-box::before {
+  content: "工具名称";
+  font-family: var(--font-sans);
+  font-size: 11px;
+  color: var(--muted);
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.svc-tags {
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag.mono {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 9px;
+  border-radius: 999px;
+  border: 1px solid var(--line-strong);
+  color: var(--ink-2);
+  background: var(--surface-2);
+}
+
+.svc-desc {
+  margin: 12px 0 0;
+  font-size: 13.5px;
+  color: var(--ink-2);
+  line-height: 1.7;
+  flex: 1;
+}
+
+.svc-actions {
+  margin-top: 14px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding-top: 13px;
+  border-top: 1px dashed var(--line);
+}
+
+.btn-sm {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  border: 1px solid transparent;
+}
+
+.btn-sm.primary {
+  background: var(--brand);
+  color: #fff;
+  box-shadow: 0 8px 16px -8px rgba(22, 120, 255, 0.6);
+}
+
+.btn-sm.primary:hover {
+  filter: brightness(1.06);
+  border-color: transparent;
+}
+
+.btn-sm.ghost {
+  background: var(--surface);
+  color: var(--brand-ink);
+  border-color: var(--line-strong);
+}
+
+.btn-sm.ghost:hover {
+  border-color: var(--brand);
+}
+
+.site-footer {
+  padding: 44px 0 0;
+  background: #fff;
+  border-top: 1px solid var(--line);
+}
+
+.footer-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 40px;
+  flex-wrap: wrap;
+  padding: 0 0 34px;
+}
+
+.footer-brand {
+  flex: 1.2;
+  min-width: 260px;
+  max-width: 380px;
+}
+
+.fb-title {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--brand-ink);
+}
+
+.fb-logo {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: linear-gradient(135deg, #2E8CFF, #1678FF);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.fb-desc {
+  margin-top: 12px;
+  font-size: 13px;
+  line-height: 1.9;
+  color: var(--muted);
+}
+
+.fb-endpoint {
+  margin-top: 14px;
+  display: inline-flex;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  color: var(--brand-ink);
+  background: var(--brand-soft-2);
+  border: 1px solid var(--line-strong);
+  padding: 5px 11px;
+  border-radius: 8px;
+}
+
+.footer-col {
+  min-width: 150px;
+}
+
+.footer-col h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+  margin: 0 0 14px;
+  position: relative;
+  padding-left: 11px;
+}
+
+.footer-col h4::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 3px;
+  width: 3px;
+  height: 13px;
+  border-radius: 2px;
+  background: var(--brand);
+}
+
+.footer-col ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-col li {
+  margin-bottom: 10px;
+}
+
+.footer-col a,
+.footer-col button,
+.footer-bottom button {
+  background: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 400;
+  color: #43556b;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+
+.footer-col a:hover,
+.footer-col button:hover,
+.footer-bottom button:hover {
+  color: var(--brand);
+  border-color: transparent;
+}
+
+.footer-link-ico {
+  margin-right: 6px;
+  color: #93A5BB;
+}
+
+.footer-bottom {
+  border-top: 1px solid var(--line);
+  padding: 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: #93A5BB;
+}
+
+@media (max-width: 1160px) {
+  .hero-visual {
+    display: none;
+  }
+
+  .registry-text {
+    max-width: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .footer-main {
+    flex-direction: column;
+    gap: 26px;
+  }
+}
+
+@media (max-width: 520px) {
+  .service-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/pages/mcp/serverDetail.vue

@@ -403,6 +403,15 @@ const formatMetricValue = (value, suffix = "") => {
   return `${num}${suffix}`;
 };
 
+const formatRequestCountValue = (value) => {
+  if (value == null || value === "") return "-";
+  const num = Number(value);
+  if (Number.isNaN(num)) return String(value);
+  if (num >= 10000) return `${(num / 10000).toFixed(1)}w`;
+  if (num >= 1000) return `${(num / 1000).toFixed(1)}k`;
+  return String(num);
+};
+
 const parseCssStyle = (cssText) => {
   if (!cssText) return {};
   const style = {};
@@ -540,7 +549,7 @@ const mapServerDetail = (data) => {
       },
       {
         label: "累计请求",
-        value: formatMetricValue(data.requestCount30d),
+        value: formatRequestCountValue(data.requestCount30d),
         type: "purple",
         icon: "requests_in_the_past_days",
       },

src/router/index.js

@@ -39,6 +39,11 @@ const routes = [
         },
       },
       {
+        path: "serve",
+        name: "serve",
+        component: () => import("@/pages/mcp/serve.vue"),
+      },
+      {
         path: "",
         component: () => import("@/pages/home/mcpIndex.vue"),
         children: [