museum-H5-V2/components/card/index.vue

<template>
    <div class="content2" :style="styleColor">
        <div class="wrap1">
            <div class="wrap1_1">
                <slot name="l1"></slot>
            </div>
            <div class="wrap1_2">
                <slot name="r1"></slot>
            </div>
        </div>
        <div class="wrap1">
            <div class="wrap1_1">
                <slot name="l2"></slot>
            </div>
            <div class="wrap1_2">
                <slot name="r2"></slot>
            </div>
        </div>

    </div>
</template>

<script >
export default {
    props: {
        styleColor: {
            type: Object,
            default: () => {
                return { backgroundColor: '#fff' }
            }
        }
    }
}

</script>

<style lang="scss" scoped>
.content2 {
    border-radius: 24rpx;
    padding-left: 18rpx;
    padding-right: 32rpx;

    .wrap1 {
        padding-left: 14rpx;
        padding-top: 26rpx;
        padding-bottom: 22rpx;
        border-bottom: 1rpx solid #E4EAF1;
        display: flex;

        &:last-child {
            border-bottom: none;
        }

        .wrap1_2 {
            flex-grow: 1;
            padding-left: 36rpx;
            font-size: 24rpx;
            color: #939393;
        }

        .wrap1_1 {
            display: flex;
            align-items: center;
            width: 192rpx;
            border-right: 1rpx solid #E4EAF1;
        }
    }
}
</style>