<template>
    <view class="page-container">
        <u-navbar title="资格证书" :autoBack="true" placeholder border></u-navbar>

        <view class="content">
            <view class="status-card blue-theme">
                <u-icon name="checkmark-circle-fill" color="#03C8BE" size="20" style="margin-right: 10rpx;"></u-icon>
                <view class="info">
                    <view class="title">签约商户</view>
                    <view class="desc">xxx健康咨询部(个体工商户)</view>
                </view>
            </view>

            <view class="status-card blue-theme">
                <u-icon name="checkmark-circle-fill" color="#03C8BE" size="20" style="margin-right: 10rpx;"></u-icon>
                <view class="info">
                    <view class="title">店长实名认证通过</view>
                    <view class="sub">身份证 1**********</view>
                    <view class="desc">所有理疗师签约入驻平台时，身份证均已通过核验</view>
                </view>
            </view>

            <view class="status-card blue-theme">
                <u-icon name="checkmark-circle-fill" color="#03C8BE" size="20" style="margin-right: 10rpx;"></u-icon>
                <view class="info">
                    <view class="row-between">
                        <view class="title">健康证认证</view>
                        <view class="date">有效期2020.01.01-2021.01.01</view>
                    </view>
                    <view class="desc">该理疗师健康体验合格，并在平台已认证通过</view>
                </view>
            </view>

            <view class="status-card blue-theme">
                <u-icon name="checkmark-circle-fill" color="#03C8BE" size="20" style="margin-right: 10rpx;"></u-icon>
                <view class="info">
                    <view class="title">该店铺已在平台完成免市场主体登记认证</view>
                    <view class="desc">个人进行零星小额交易活动，依法不需要办理市场主体登记</view>
                </view>
            </view>

            <view class="status-card img-section">
                <view class="title">所属商家资质</view>
                <image src="https://via.placeholder.com/600x400?text=Business+License" mode="widthFix" class="cert-img">
                </image>
            </view>

            <view class="status-card img-section">
                <view class="title">从业资格证书</view>
                <image src="https://via.placeholder.com/600x400?text=Vocational+Certificate" mode="widthFix"
                    class="cert-img"></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            
        };
    },
    methods: {
        
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    background-color: #f8f8f8;
}

.content {
    padding: 24rpx;
}

.status-card {
    padding: 24rpx;
    margin-bottom: 24rpx;
    border-radius: 12rpx;
    background: #fff;
    display: flex;
    align-items: flex-start;

    /* 颜色主题 */
    &.blue-theme {
        background: linear-gradient(180deg, #E6FFFE 0%, #FFFFFF 100%);;

        .desc {
            color: #03C8BE;
        }
    }

    .info {
        flex: 1;
        margin-left: 10rpx;

        .title {
            font-size: 30rpx;
            color: #333;
            margin-bottom: 8rpx;
        }

        .sub {
            font-size: 22rpx;
            color: #999;
            margin-bottom: 8rpx;
        }

        .desc {
            font-size: 24rpx;
            line-height: 1.4;
        }

        .date {
            font-size: 24rpx;
            color: #333;
        }
    }

    .row-between {
        margin-bottom: 8rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            margin-bottom: 0;
        }
    }
}

.img-section {
    flex-direction: column;

    .title {
        margin-bottom: 24rpx;
    }

    .cert-img {
        width: 100%;
        border-radius: 10rpx;
        border: 1px solid #eee;
    }
}
</style>