caimei-applets-caimei/pages/seller/remarks/components/analysis-card.vue

<template>
    <view class="analysis-card">
        <analysis-card-item :isSubtitle="true" :num="analysisInfo.livelyClub">
            <template #title>
                <view>活跃机构</view>
            </template>
            <template #subtitle>
                <view>（6个月内有登录商城等行为）</view>
            </template>
        </analysis-card-item>
        <analysis-card-item :isSubtitle="true" :num="analysisInfo.noLivelyClub"> 
            <template #title>
                <view>不活跃机构</view>
            </template>
            <template #subtitle>
                <view>（6个月内未登录商城等行为）</view>
            </template>
        </analysis-card-item>
        <analysis-card-item :isPercentage="true" :num="analysisInfo.livelyClubProportion">
            <template #title>
                <view>活跃机构占比</view>
            </template>
        </analysis-card-item>
        <analysis-card-item :isPercentage="true" :num="analysisInfo.noLivelyClubProportion">
            <template #title>
                <view>不活跃机构占比</view>
            </template>
        </analysis-card-item>
    </view>
</template>

<script>
import analysisCardItem from './analysis-card-item.vue'
export default {
    components: {
        analysisCardItem
    },
    props: {
        analysisInfo: {
            type: Object,
            default: () => ({
                livelyClub: 0,
                livelyClubProportion: 0,
                noLivelyClub: 0,
                noLivelyClubProportion: 0
            })
        }
    },
    data() {
        return {}
    },
}
</script>

<style lang="scss">
.analysis-card {
    width: 702rpx;
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background-color: #fff;
    border-radius: 16rpx;
    margin: 0 auto;
    &::before {
        width: 1px;
        height: 200rpx;
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: #E5E5E5;
        transform: translate(-50%, -50%);
    }
    &::after {
        width: 660rpx;
        height: 1px;
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: #E5E5E5;
        transform: translate(-50%, -50%);
    }
}
</style>