员工名片

支持 div、span、img 三种标签，文字内容必须使用 span 标签包裹
布局使用绝对定位或者flex布局
最外层盒子必须固定宽度375px, 高度可自行设置
样式必须为 class 写法，不支持行内样式，class 名称严格定义为驼峰式或者下划线拼接（如：cardContainer、card_container），禁止使用中划线，需为每个元素指定 width 和 height 属性，否则会导致布局错误，比如文字如果高度不够在微信小程序绘制不出

可使用的css属性见下方表格

布局相关

属性	支持的值或类型	默认值	说明
width	number	0	宽度
height	number	0	高度
display	flex, block	block	显示方式（flex-direction 默认为 column）
position	relative, absolute	relative	定位方式
left	number	0	左偏移
top	number	0	上偏移
right	number	0	右偏移
bottom	number	0	下偏移
margin	number	0	外边距
padding	number	0	内边距
borderWidth	number	0	边框宽度
borderRadius	number	0	边框圆角
flex-direction	column, row	row	弹性布局方向
flex-wrap	wrap, nowrap	nowrap	弹性布局换行
justify-content	flex-start, center, flex-end, space-between, space-around	flex-start	弹性布局对齐方式
align-items	flex-start, center, flex-end, stretch	flex-start	弹性布局对齐方式
align-self	flex-start, center, flex-end, stretch	flex-start	弹性布局对齐方式

文字相关

属性	支持的值或类型	默认值	说明
font-size	number	14	字体大小
line-height	number / string	'1.4em'	行高
text-align	left, center, right	left	文字对齐方式
vertical-align	top, middle, bottom	top	文字对齐方式
color	string	#181c25	文字颜色
background-color	string	transparent	背景颜色

参考微信文档，但略有区别，请勿直接套用：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/wxml-to-canvas.html
变量使用 ${变量名} 格式，使用 . 链式访问对象属性，比如 ${PersonnelObj.name}、${card.name}
- ! 为变量默认值，如果变量不存在，则使用默认值，如 ${PersonnelObj.position!'暂无职位信息'}，在没有职位时会显示“暂无职位信息”
- PersonnelObj 为员工信息对象（具体在 CRM 人员对象中查看字段 apiName）
- card 为营销通名片信息表
  
  字段说明
  
  name 姓名
  
  phone 手机号
  
  department 部门
  
  companyName 公司名称
  
  companyAddress 公司地址
  
  vocation 职位
  
  email 邮箱
图片需要先上传到营销通图片库，然后获取其 cdn 地址（https://a9.fspage.com/xxx）后写在 img 标签的 src 属性中
img 标签的 object-fit 属性支持 fill、contain、cover，具体含义参考：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

字段	说明
name	姓名
phone	手机号
department	部门
companyName	公司名称
companyAddress	公司地址
vocation	职位
email	邮箱

模版1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>名片 - 简约商务模板</title>
  <style>
    .cardContainer {
      position: relative;
      box-sizing: border-box;
      width: 375px;
      height: 200px;
      background-color: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bgImageWrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 375px;
      height: 200px;
      z-index: 1;
    }

    .bgImage {
      width: 375px;
      height: 200px;
    }

    .contentWrapper {
      width: 342px;
      height: 168px;
      display: flex;
      flex-direction: column;
      z-index: 5;
    }

    .headerSection {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 342px;
      height: 40px;
      z-index: 10;
    }

    .nameSection {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 200px;
      height: 48px;
    }

    .avatarImgWrapper {
      width: 48px;
      height: 48px;
      margin-right: 8px;
    }

    .avatarImg {
      width: 48px;
      height: 48px;
      border-radius: 24px;
      object-fit: contain;
    }

    .nameWrapper {
      width: 80px;
      height: 44px;
      display: flex;
      flex-direction: column;
    }

    .name {
      width: 80px;
      height: 24px;
      font-size: 18px;
      color: #ffffff;
      line-height: 24px;
    }

    .vocation {
      margin-top: 4px;
      height: 16px;
      font-size: 12px;
      color: #ffffff;
      line-height: 16px;
    }

    .logoSection {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 76px;
      height: 19px;
      z-index: 10;
    }

    .logoIconImg {
      width: 76px;
      height: 19px;
      object-fit: contain;
    }

    .infoSection {
      display: flex;
      flex-direction: column;
      width: 327px;
      height: 104px;
      z-index: 10;
      margin-top: 18px;
    }

    .infoRow {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 327px;
      height: 16px;
      margin-bottom: 8px;
    }

    .infoIcon {
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .infoIconImg {
      width: 12px;
      height: 12px;
    }

    .infoText {
      margin-left: 4px;
      width: 307px;
      height: 16px;
      font-size: 12px;
      color: #ffffff;
      line-height: 16px;
    }

    .fontWeight__700 {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="cardContainer">
    <div class="bgImageWrapper">
      <img class="bgImage" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/custom-card-bg-1.png" />
    </div>
    <div class="contentWrapper"> 
      <!-- 头部区域：姓名、职位和Logo -->
      <div class="headerSection">
        <div class="nameSection">
          <div class="avatarImgWrapper">
            <img class="avatarImg" src="${card.avatar}"/>
          </div>
          <div class="nameWrapper">
            <span class="name fontWeight__700">${card.name!'暂无姓名'}</span>
            <span class="vocation">${card.vocation!'暂无部门信息'}</span>
          </div>
        </div>
        <div class="logoSection">
          <img class="logoIconImg" src="https://a2.ceshi112.com/image/88146/C_202509_25_ffe851f049944cd1b8b5f92d80978011" />
        </div>
      </div>

      <!-- 信息区域 -->
      <div class="infoSection">
        <!-- 部门信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-email.png" />
          </div>
          <span class="infoText">${card.department!'暂无部门信息'}</span>
        </div>

        <!-- 公司信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-company.png" />
          </div>
          <span class="infoText fontWeight__500">${card.companyName!'暂无公司信息'}</span>
        </div>

        <!-- 地址信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-company-address.png" />
          </div>
          <span class="infoText">${card.companyAddress!'暂无地址信息'}</span>
        </div>

        <!-- 电话信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-phone.png" />
          </div>
          <span class="infoText">${card.phone!'暂无电话信息'}</span>
        </div>

        <!-- 邮箱信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-email.png" />
          </div>
          <span class="infoText">${card.email!'ceshi@fxiaoke.com'}</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

模板2

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>名片 - FANUC模板</title>
  <style>
    .cardContainer {
      position: relative;
      width: 375px;
      height: 200px;
      background-color: #ffffff;
    }

    .bgImageWrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 375px;
      height: 200px;
      background-color: #ffffff;
    }

    .bgImage {
      width: 375px;
      height: 200px;
    }

    .contentWrapper {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 200px;
      height: 160px;
      display: flex;
      flex-direction: column;
      font-size: 10px;
      color: #545861;
      line-height: 14px;
    }

    .nameAndPosition {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }

    .name {
      width: 66px;
      height: 20px;
      font-size: 16px;
      color: #181c25;
      line-height: 20px;
    }

    .position {
      width: 120px;
      height: 14px;
      margin-top: 4px;
      margin-left: 4px;
    }

    .department {
      width: 200px;
      height: 14px;
      margin-top: 4px;
    }

    .companyName {
      width: 200px;
      height: 14px;
      color: #181c25;
      margin-top: 14px;
    }

    .address {
      width: 200px;
      height: 14px;
      margin-top: 4px;
    }

    .website {
      width: 200px;
      height: 14px;
      margin-top: 2px;
    }

    .phone {
      width: 200px;
      height: 14px;
      margin-top: 14px;
    }

    .email {
      width: 300px;
      height: 20px;
      margin-top: 4px;
    }

    .fontWeight__700 {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="cardContainer">
    <div class="bgImageWrapper">
      <img class="bgImage" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/fanake-card-bg.png" />
    </div>
    <div class="contentWrapper">
      <div class="nameAndPosition">
        <span class="name fontWeight__700">${PersonnelObj.name}</span>
        <span class="position">${PersonnelObj.position!'暂无职位信息'}</span>
      </div>
      <span class="department">${PersonnelObj.main_department}</span>
      <span class="department">${PersonnelObj.owner_department}</span>
      <span class="companyName fontWeight__700">上海发那科机器人有限公司</span>
      <span class="address">上海市宝山区富联三路369号，201906</span>
      <span class="website">www.shanghai-fanuc.com.cn</span>
      <span class="phone">手机:${PersonnelObj.phone}</span>
      <span class="email">邮箱:${PersonnelObj.email!"ceshi@fxiaoke.com"}</span>
    </div>
  </div>
</body>
</html>

模版3

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>名片 - 简约商务模板</title>
  <style>
    .cardContainer {
      position: relative;
      box-sizing: border-box;
      width: 375px;
      height: 200px;
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
    }

    .bgImageWrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 375px;
      height: 200px;
      z-index: 1;
    }

    .bgImage {
      width: 375px;
      height: 200px;
    }

    .contentWrapper {
      width: 342px;
      height: 168px;
      display: flex;
      flex-direction: column;
      z-index: 5;
    }

    .headerSection {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 342px;
      height: 30px;
      z-index: 10;
    }

    .nameSection {
      display: flex;
      flex-direction: column;
      width: 200px;
      height: 30px;
    }

    .name {
      width: 120px;
      height: 30px;
      font-size: 20px;
      color: #ffffff;
      line-height: 30px;
    }

    .logoSection {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 99px;
      height: 20px;
      z-index: 10;
    }

    .logoIconImg {
      width: 96px;
      height: 20px;
      object-fit: contain;
    }

    .infoSection {
      display: flex;
      flex-direction: column;
      width: 327px;
      height: 104px;
      z-index: 10;
      margin-top: 45px;
    }

    .infoRow {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 327px;
      height: 16px;
      margin-bottom: 8px;
    }

    .infoIcon {
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .infoIconImg {
      width: 12px;
      height: 12px;
    }

    .infoText {
      margin-left: 4px;
      width: 307px;
      height: 16px;
      font-size: 12px;
      color: #ffffff;
      line-height: 16px;
    }

    .fontWeight__700 {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="cardContainer">
    <div class="bgImageWrapper">
      <img class="bgImage" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/zhaohuadianzi-card-bg.png" />
    </div>
    <div class="contentWrapper"> 
      <!-- 头部区域：姓名、职位和Logo -->
      <div class="headerSection">
        <div class="nameSection">
          <span class="name fontWeight__700">${card.name!'暂无姓名'}</span>
        </div>
        <div class="logoSection">
          <img class="logoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/zhaohuadianzi-logo2.png" />
        </div>
      </div>

      <!-- 信息区域 -->
      <div class="infoSection">
        <!-- 公司信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-company.png" />
          </div>
          <span class="infoText fontWeight__500">${card.companyName!'暂无公司信息'}</span>
        </div>

        <!-- 地址信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-company-address.png" />
          </div>
          <span class="infoText">${card.companyAddress!'暂无地址信息'}</span>
        </div>

        <!-- 电话信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-phone.png" />
          </div>
          <span class="infoText">${card.phone!'暂无电话信息'}</span>
        </div>

        <!-- 邮箱信息 -->
        <div class="infoRow">
          <div class="infoIcon">
            <img class="infoIconImg" src="https://a2.fspage.com/FSR/weex/avatar/marketing_app/images/card/icon-email.png" />
          </div>
          <span class="infoText">${card.email!'暂无邮箱信息'}</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2025-10-21

员工名片

自定义样式开发规范

模版示例

模版1

模板2

模版3

本页目录