person-card 个人信息卡

解释:个人信息卡组件,可配置卡片类型、卡片背景图、卡片名称、卡片信息功能,适用于信息展示,并可放置在页面的任何位置。

属性说明

属性名类型必填默认值说明

type

String

normal

信息卡类型。normal:默认普通模式,big:大图模式

bgImg

String

卡片背景图

name

String

卡片名称

infoList

Array

卡片信息,最多可配置 5 条,超过不会显示

person-card-wrap

String

提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片的样式,如背景颜色,背景图的展现方式

info-name-wrap

String

提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片 name 的的样式

info-title-wrap

String

提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片信息的左侧标题样式

info-desc-wrap

String

提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片信息的右边内容样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例

  • SWAN
  • JS
  • CSS
  • JSON
  1. <view class="wrap">
  2. <view class="content">
  3. <view class="card-panel" s-for="item, index in personList">
  4. <view class="comp-wrap">
  5. <smt-person-card
  6. name="主标题"
  7. type="normal"
  8. info-list="{{item.personCard}}"
  9. bg-img="{{item.imgSrc}}"
  10. />
  11. </view>
  12. </view>
  13. </view>
  14. </view>