百度智能小程序 个人信息卡

person-card 个人信息卡

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

属性说明

示例 

在开发者工具中打开

代码示例

<view class="wrap">
    <view class="content">
        <view class="card-panel" s-for="item, index in personList">
            <view class="comp-wrap">
                <smt-person-card
                    name="主标题"
                    type="normal"
                    info-list="{{item.personCard}}"
                    bg-img="{{item.imgSrc}}"
                />
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        personList: [
            {
                title: '默认展示',
                imgSrc: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/person-default.png',
                personCard: [
                    {
                        title: '标题',
                        desc: '内容文本'
                    },
                    {
                        title: '标题名称',
                        desc: '内容展示长文本示例'
                    }
                ]
            },
            {
                title: '带背景展示',
                imgSrc: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/person-use.png',
                personCard: [
                    {
                        title: '标题名称',
                        desc: '内容展示长文本多文字示例'
                    },
                    {
                        title: '文本标题',
                        desc: '内容展示长文本多文字示例'
                    },
                    {
                        title: '标题名称',
                        desc: '内容展示长文本多文字示例'
                    }
                ]
            }
        ]
    }
});

.wrap {
    height: 100vh;
}

.smt-card-area {
    margin-top: 25.36rpx;
}

.card-panel:first-child {
    margin-top: 0;
}

.card-area {
    display: flex;
    margin: 90.58rpx 0 0;
    padding: 28.382rpx 30.797rpx;
    border: none;
    border-radius: 0;
    transition: background-color 200ms linear;
    align-items: center;
    justify-content: space-between;
}

.comp-wrap {
    background-color: #fff;
    margin-top: 25.362rpx;
    padding: 27.174rpx 30.797rpx;
}

{
    "navigationBarTitleText": "个人信息卡",
    "navigationStyle": "default",
    "usingComponents": {
        "smt-person-card": "@smt-ui/component/src/person-card"
    }
}