概述
员工名片的操作说明。
开始之前
[!IMPORTANT]
使用有权访问本功能的账号。按下方步骤准备对应的业务数据或配置资料。
自定义样式开发规范
-
支持 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
模版示例
模版 1
名片 - 简约商务模板
.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;
}
<img src="${card.avatar}" alt="">
${card.name!'暂无姓名'}
${card.vocation!'暂无部门信息'}
${card.department!'暂无部门信息'}
${card.companyName!'暂无公司信息'}
${card.companyAddress!'暂无地址信息'}
${card.phone!'暂无电话信息'}
${card.email!'user@example.com'}
模板 2
名片 - FANUC模板
.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;
}
${PersonnelObj.name}
${PersonnelObj.position!'暂无职位信息'}
${PersonnelObj.main_department}
${PersonnelObj.owner_department}
上海发那科机器人有限公司
上海市宝山区富联三路369号，201906
www.shanghai-fanuc.com.cn
手机:${PersonnelObj.phone}
邮箱:${PersonnelObj.email!"user@example.com"}
模版 3
名片 - 简约商务模板
.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;
}
${card.name!'暂无姓名'}
${card.companyName!'暂无公司信息'}
${card.companyAddress!'暂无地址信息'}
${card.phone!'暂无电话信息'}
${card.email!'暂无邮箱信息'}
预期结果与验证
完成上述操作后，在对应页面检查处理结果，并与本步骤的目标核对。
常见问题与故障排除
无法继续操作时，先核对上文说明的条件和输入信息；遇到权限提示时，请管理员确认访问权限。