<template>
    <view style="height: 100%">
        <custom-nav-bar position="fixed" color="black" left-text="个人档案" left-arrow />

        <view class="page-content">
            <!-- 可拆分为数组渲染，也可以作为每一个单独(推荐第一种方式) -->
            <view class="cell cell-defale">
                <view class="cell-left">头像</view>
                <view class="cell-right">112312323345543211</view>
            </view>
            <view class="cell">
                <view class="cell-left">人群类别</view>
                <view class="cell-tag-two">
                    <text class="tag-bth">普通居民</text>
                </view>
            </view>
            <view class="cell">
                <view class="cell-left">照片</view>
                <view class="cell-img">
                    <image class="cell-img-item" src="https://zongzhi.xuqidata.com:5009/xq-ssg/5235d88da3fbc57ee1288546498471136fbad6435f73193503d7af46954a54b3.webp"></image>
                    <image class="cell-img-item" src="https://zongzhi.xuqidata.com:5009/xq-ssg/5235d88da3fbc57ee1288546498471136fbad6435f73193503d7af46954a54b3.webp"></image>
                    <image class="cell-img-item" src="https://zongzhi.xuqidata.com:5009/xq-ssg/5235d88da3fbc57ee1288546498471136fbad6435f73193503d7af46954a54b3.webp"></image>
                    <image class="cell-img-item" src="https://zongzhi.xuqidata.com:5009/xq-ssg/5235d88da3fbc57ee1288546498471136fbad6435f73193503d7af46954a54b3.webp"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// packages/people/pages/doctor-archives/doctor-archives.js
export default {
    data() {
        return {};
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style lang="less">
.page-content {
    margin-top: 20rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;

    .cell {
        width: 100%;
        padding: 42rpx 0;
        background: #ffffff;
        border-bottom: 1px solid #efefef;

        .cell-left {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
            line-height: 28rpx;
        }

        .cell-right {
            font-size: 32rpx;
            font-weight: 400;
            color: #999999;
            line-height: 32rpx;
        }
    }

    .cell-defale {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cell-tag-two {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .tag-bth {
        padding: 16rpx 32rpx;
        background: #f7faff;
        border-radius: 40rpx;
        border: 1px solid #c5dff4;
        font-size: 28rpx;
        font-weight: 400;
        color: #0091ff;
        line-height: 28rpx;
        margin-right: 16rpx;
        margin-top: 24rpx;

        &:last-child {
            margin-right: 0;
        }
    }
    .cell-img {
        margin-top: 32rpx;
        display: grid;
        grid-template-columns: repeat(3, 218rpx);
        grid-gap: 10rpx;

        .cell-img-item {
            width: 218rpx;
            height: 200rpx;
        }
    }
}
</style>
