MianxiangAI® 设计规范 · v1.0

技术支持标识

出现在 MianxiangAI® 交付的网站、后台、H5、小程序与 App 底部的一行落款，说明这套系统由谁提供技术支持。它是落款，不是广告位：客户看了觉得讲究，访客几乎注意不到。

深色底 · #152c52

技术支持MianxiangAI^®企业级AI新智基座

实际大小

浅色底 · #ffffff

技术支持MianxiangAI^®企业级AI新智基座

实际大小

看到这个标识，意味着什么

这个平台的技术由 MianxiangAI®（上海派许网络科技有限公司）提供支持：系统的建设、交付与后续维护。
平台上的内容、商品与服务由平台所有者负责。
点击标识会打开 MianxiangAI® 官网，你可以在那里了解我们，或为自己的企业预约一次演示。

设计原则

1比周围弱一档

字号、亮度都低于同区域的版权与备案信息，任何情况下都不是页脚里最醒目的元素。

2精致靠细节，不靠醒目

字距拉开的小标签、一枚小星芒、品牌名略亮、细竖线、定位语更淡。五个层次，但都很轻。

3全平台一致

文案、结构、比例、交互在所有平台保持一致，颜色只分「深底」「浅底」两套。

4不打扰客户品牌

不使用派许 LOGO 图片，不使用品牌色大色块，不加边框、不加背景。

文案规范

固定写法，不得改动。

语言	标签	品牌名	定位语
中文	技术支持	MianxiangAI®	企业级AI新智基座
英文	Powered by	MianxiangAI®	Enterprise AI Foundation

链接 https://www.paixu.com.cn，在新窗口打开。
品牌名写作 MianxiangAI：M、A、I 大写；不写成 Mianxiang AI、MIANXIANGAI。
® 紧跟品牌名，作为上标，字号约为正文的 2/3。
品牌名与定位语之间用 1px 细竖线，不用「｜」「|」字符；只有纯文本环境才用全角「｜」。
悬停提示：中文「MianxiangAI® 企业级AI新智基座」，英文「MianxiangAI® — Enterprise AI Foundation」。

结构

从左到右五个部分。②～⑤ 是一个整体链接，① 在链接外面。

①标签

不可点击，字号最小，字间距拉开。

②星芒图标

13×13 的内联 SVG，品牌青色，是唯一带颜色的元素。

③品牌名

半粗（600），亮度最高。

④分隔线

1×10px 细竖线。

⑤定位语

比品牌名暗一档。

放置位置

平台	位置	对齐
PC 网站	页脚最底部，版权 / 备案那一行的下面，单独一行	跟随版权行：版权靠右就右对齐，居中就居中
网站窄屏（≤ 992px）	同上，版权行变成纵向排列后	左对齐（跟随版权行）
后台管理系统	登录页底部、版权下方；登录后「关于系统」弹窗底部	居中
H5 / 移动端	页脚最底部	居中
微信小程序	「我的」页或「关于」页最底部	居中
App	「设置 → 关于」页底部	居中

禁止放在顶栏导航侧栏首屏弹窗主体结算 / 表单等业务流程页

视觉规格

尺寸与间距（两套主题通用）

整行字号: 12px（移动端 11–12px）
标签: 11px · 字间距 0.12em
品牌名: 12px · 600 · 字间距 0.02em
®: 8px · 400 · 上标 · 左边距 1px
定位语: 12px · 字间距 0.04em
星芒图标: 13 × 13px
行高: 1.6
间距: 标签 ↔ 链接 10px；链接内部 7px
分隔线: 宽 1px · 高 10px
与版权行: 视觉上紧贴，约 6px

颜色

深色底#152c52

标签	#7f9bbd	4.84 : 1
星芒	#6fd0e2 · 0.8	7.79 : 1
品牌名	#c9d7e9	9.5 : 1
分隔线	rgba(255,255,255,.20)	—
定位语	#86a0c1	5.16 : 1
悬停：品牌名	#ffffff → #9fe6f2	—
悬停：定位语	#c9d7e9	—

浅色底#ffffff

标签	#6b7588	4.64 : 1
星芒	#0b7d91 · 0.85	4.82 : 1
品牌名	#1f3b66	11.2 : 1
分隔线	rgba(0,0,0,.14)	—
定位语	#5b6577	5.88 : 1
悬停：品牌名	#1f3b66 → #0a8fa6	—
悬停：定位语	#1f3b66	—

页脚底色和这两套差距很大时，按同样的层级重新取色（品牌名最亮 > 定位语 > 标签），并保证每一段文字对底色 ≥ 4.5 : 1（WCAG AA）。

交互

技术支持MianxiangAI^®企业级AI新智基座

把鼠标移到上面的标识上试试。

默认	整体比版权行弱。
悬停	品牌名亮起渐变；星芒旋转 45° 并放大到 1.08 倍（0.4s ease）；定位语提亮。
键盘聚焦	1px 青色描边，外扩 3px，圆角 2px。
点击	新窗口打开，rel="noopener"；小程序为复制网址并提示。
减少动效	星芒不旋转、不放大，只保留颜色变化。

代码（复制即用）

所有类名以 mx-credit 开头，和各项目原有样式互不冲突。浅色底加 mx-credit--light；需要右对齐加 mx-credit--end。

HTML

<p class="mx-credit">
  <span class="mx-credit-k">技术支持</span>
  <a class="mx-credit-a" href="https://www.paixu.com.cn" target="_blank" rel="noopener"
     title="MianxiangAI® 企业级AI新智基座">
    <svg class="mx-credit-ic" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M8 1.2l1.45 4.1 4.1 1.45-4.1 1.45L8 12.3 6.55 8.2l-4.1-1.45 4.1-1.45L8 1.2z" fill="currentColor"/>
      <circle cx="13.2" cy="12.6" r="1.3" fill="currentColor" opacity=".65"/>
    </svg>
    <b>MianxiangAI<sup>®</sup></b>
    <i aria-hidden="true"></i>
    <em>企业级AI新智基座</em>
  </a>
</p>

CSS

.mx-credit {
  --mx-k: #7f9bbd;  --mx-ic: #6fd0e2;  --mx-b: #c9d7e9;
  --mx-line: rgba(255,255,255,.2);  --mx-em: #86a0c1;
  --mx-hover-from: #ffffff;  --mx-hover-to: #9fe6f2;  --mx-hover-em: #c9d7e9;
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center;
  margin: 0; font-size: 12px; line-height: 1.6;
}
.mx-credit--light {
  --mx-k: #6b7588;  --mx-ic: #0b7d91;  --mx-b: #1f3b66;
  --mx-line: rgba(0,0,0,.14);  --mx-em: #5b6577;
  --mx-hover-from: #1f3b66;  --mx-hover-to: #0a8fa6;  --mx-hover-em: #1f3b66;
}
.mx-credit--end { justify-content: flex-end; }

.mx-credit-k  { font-size: 11px; color: var(--mx-k); letter-spacing: .12em; }
.mx-credit-a  { display: inline-flex; gap: 7px; align-items: center; color: var(--mx-em); text-decoration: none; }
.mx-credit-ic { flex: none; width: 13px; height: 13px; color: var(--mx-ic); opacity: .8; transition: transform .4s ease, opacity .2s; }
.mx-credit-a b   { font-weight: 600; color: var(--mx-b); letter-spacing: .02em; }
.mx-credit-a sup { margin-left: 1px; font-size: 8px; font-weight: 400; vertical-align: super; }
.mx-credit-a i   { width: 1px; height: 10px; background: var(--mx-line); }
.mx-credit-a em  { font-style: normal; color: var(--mx-em); letter-spacing: .04em; transition: color .2s; }

.mx-credit-a:hover .mx-credit-ic { opacity: 1; transform: rotate(45deg) scale(1.08); }
.mx-credit-a:hover b {
  color: transparent;
  background: linear-gradient(90deg, var(--mx-hover-from), var(--mx-hover-to));
  -webkit-background-clip: text; background-clip: text;
}
.mx-credit-a:hover em { color: var(--mx-hover-em); }
.mx-credit-a:focus-visible { outline: 1px solid var(--mx-ic); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mx-credit-ic { transition: none; }
  .mx-credit-a:hover .mx-credit-ic { transform: none; }
}
@media (max-width: 992px) {
  .mx-credit--end { justify-content: flex-start; }  /* 窄屏跟随版权行改为左对齐 */
}

<!-- src/components/MxCredit.vue -->
<template>
  <p class="mx-credit" :class="{ 'mx-credit--light': light, 'mx-credit--end': end }">
    <span class="mx-credit-k">{{ en ? 'Powered by' : '技术支持' }}</span>
    <a class="mx-credit-a" href="https://www.paixu.com.cn" target="_blank" rel="noopener"
       :title="en ? 'MianxiangAI® — Enterprise AI Foundation' : 'MianxiangAI® 企业级AI新智基座'">
      <svg class="mx-credit-ic" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M8 1.2l1.45 4.1 4.1 1.45-4.1 1.45L8 12.3 6.55 8.2l-4.1-1.45 4.1-1.45L8 1.2z" fill="currentColor"/>
        <circle cx="13.2" cy="12.6" r="1.3" fill="currentColor" opacity=".65"/>
      </svg>
      <b>MianxiangAI<sup>®</sup></b>
      <i aria-hidden="true"></i>
      <em>{{ en ? 'Enterprise AI Foundation' : '企业级AI新智基座' }}</em>
    </a>
  </p>
</template>

<script setup lang="ts">
defineProps<{ en?: boolean; light?: boolean; end?: boolean }>()
</script>

PHP

<?php $en = ($lang ?? 'zh') === 'en'; ?>
<p class="mx-credit mx-credit--end">
  <span class="mx-credit-k"><?= $en ? 'Powered by' : '技术支持' ?></span>
  <a class="mx-credit-a" href="https://www.paixu.com.cn" target="_blank" rel="noopener"
     title="<?= $en ? 'MianxiangAI® — Enterprise AI Foundation' : 'MianxiangAI® 企业级AI新智基座' ?>">
    <svg class="mx-credit-ic" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M8 1.2l1.45 4.1 4.1 1.45-4.1 1.45L8 12.3 6.55 8.2l-4.1-1.45 4.1-1.45L8 1.2z" fill="currentColor"/>
      <circle cx="13.2" cy="12.6" r="1.3" fill="currentColor" opacity=".65"/>
    </svg>
    <b>MianxiangAI<sup>®</sup></b>
    <i aria-hidden="true"></i>
    <em><?= $en ? 'Enterprise AI Foundation' : '企业级AI新智基座' ?></em>
  </a>
</p>

微信小程序

<!-- wxml -->
<view class="mx-credit mx-credit--light">
  <text class="mx-credit-k">技术支持</text>
  <view class="mx-credit-a" bindtap="onMxCredit">
    <text class="mx-credit-ic">✦</text>
    <text class="mx-credit-b">MianxiangAI<text class="mx-credit-sup">®</text></text>
    <view class="mx-credit-line"></view>
    <text class="mx-credit-em">企业级AI新智基座</text>
  </view>
</view>

// js
onMxCredit() {
  wx.setClipboardData({ data: 'https://www.paixu.com.cn',
    success: () => wx.showToast({ title: '网址已复制', icon: 'none' }) })
}

/* wxss（浅色底；1px ≈ 2rpx） */
.mx-credit { display:flex; justify-content:center; align-items:center; gap:20rpx; padding:24rpx 0 32rpx; font-size:22rpx; line-height:1.6; }
.mx-credit-k { font-size:20rpx; color:#6b7588; letter-spacing:.12em; }
.mx-credit-a { display:flex; align-items:center; gap:14rpx; }
.mx-credit-ic { font-size:22rpx; color:#0b7d91; }
.mx-credit-b { font-weight:600; color:#1f3b66; letter-spacing:.02em; }
.mx-credit-sup { font-size:14rpx; vertical-align:super; font-weight:400; }
.mx-credit-line { width:2rpx; height:20rpx; background:rgba(0,0,0,.14); }
.mx-credit-em { color:#5b6577; letter-spacing:.04em; }

小程序不能直接打开外部网址，点击时复制网址并提示。深色底页面换成深色一套颜色。

纯文本

技术支持：MianxiangAI®｜企业级AI新智基座  https://www.paixu.com.cn
Powered by MianxiangAI® | Enterprise AI Foundation  https://www.paixu.com.cn

邮件签名、PDF、打印页等无法画线的环境使用。

链接与 SEO

固定 target="_blank" rel="noopener"：新窗口打开，并阻止新页面反向控制原页面。
链接写死在代码里，不进客户后台的可编辑文案，避免被误删、误改。
全站页脚链接会在对方站点产生大量相同的外链，搜索引擎对此会谨慎看待。默认用 rel="noopener"；客户站点页面特别多（几十万页）或客户明确要求时，改成 rel="noopener nofollow"，只保留品牌曝光。

禁止事项与上线验收

禁止事项

改文案、缩写成 MXAI、去掉 ®
放大字号、加粗整行、加背景色块 / 边框 / 阴影 / 按钮样式
比版权行更亮，或放在比版权行更靠上的位置
用表情代替星芒（不同系统显示不一样，还会带出彩色）
用 display:none 在某些页面隐藏——要么全站都有，要么都没有

上线验收清单

文案与「文案规范」完全一致（中英文都检查）
位于页脚版权行下方，对齐方式跟随版权行
默认状态下比版权行更弱，不抢视线
悬停：品牌名渐变、星芒转动；键盘 Tab 能聚焦并有描边
点击在新窗口打开 https://www.paixu.com.cn（小程序为复制网址并提示）
手机宽度下不换行错乱、不溢出
深 / 浅底取色正确，文字对比度 ≥ 4.5 : 1
静态化 / CDN 的项目已刷新缓存，全站页面都已更新

想为自己的企业建一套？

MianxiangAI® 交付的每一个平台都带着这行落款。预约一次演示，看看它能为你的业务做什么。

预约演示 → 联系我们