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

person-card 個人信息卡

解釋： 個人信息卡組件，可配置卡片類型、卡片背景圖、卡片名稱、卡片信息功能，適用于信息展示，并可放置在頁面的任何位置。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

<view class="wrap">
    <view class="content">
        <view class="card-panel" s-for="item, index in personList">
            <view class="comp-wrap">
                <smt-person-card
                    name="主標(biāo)題"
                    type="normal"
                    info-list="{{item.personCard}}"
                    bg-img="{{item.imgSrc}}"
                />
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        personList: [
            {
                title: '默認(rèn)展示',
                imgSrc: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/person-default.png',
                personCard: [
                    {
                        title: '標(biāo)題',
                        desc: '內(nèi)容文本'
                    },
                    {
                        title: '標(biāo)題名稱',
                        desc: '內(nèi)容展示長文本示例'
                    }
                ]
            },
            {
                title: '帶背景展示',
                imgSrc: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/person-use.png',
                personCard: [
                    {
                        title: '標(biāo)題名稱',
                        desc: '內(nèi)容展示長文本多文字示例'
                    },
                    {
                        title: '文本標(biāo)題',
                        desc: '內(nèi)容展示長文本多文字示例'
                    },
                    {
                        title: '標(biāo)題名稱',
                        desc: '內(nèi)容展示長文本多文字示例'
                    }
                ]
            }
        ]
    }
});

.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"
    }
}