clientManageSystem/src/components/FollowCard.vue

<template>
    <ul class="follow_card">
        <li 
            v-for="(item, index) in cardList" 
            :key="item.id"
            class="audit_card"
        >
            <!-- 头部内容 -->
            <div class="card_header">
                <!-- 左侧基本信息 -->
                <div class="header_left">
                    <span v-for="(titleItm,index) in item.headerTitleList" :key="index">{{ titleItm }}</span>
                    <template v-if="item.headerTags?.length > 0">
                        <el-tag v-for="(tag,index) in item.headerTags" 
                                :key="index" 
                                :disable-transitions="true"
                                type="success" effect="light" size="small" 
                                class="status_tag">
                            {{ tag }}
                        </el-tag>
                    </template>
                    <span v-if="item.taskType" class="task_type">{{item.taskType}}</span>
                    <span v-if="item.productType" class="product_type">{{item.productType}}</span>
                </div>
                <!-- 右侧操作信息 -->
                <div class="header_right">
                    <slot name="operation" :row="item"></slot>
                </div>
            </div>
            <!-- 2. 中部描述信息-->
            <div v-if="item.middleDesc?.length > 0" class="card_info">
                <span v-for="(desc,index) in item.middleDesc" :key="index">{{ desc }}</span>
            </div>
            <!-- 3. 底部内容 -->
            <div class="card_content" >
                <span v-html="item?.bottomDesc"></span>
            </div>
            <slot name="additional" :row="item"></slot>
        </li>
      
    </ul>
</template>

<script setup lang="ts">

interface AuditItm {
    id:string | number,
    headerTitleList:Array<string>,
    headerTags:Array<string>,
    taskType:string,
    productType:string,
    middleDesc:Array<string>,
    bottomDesc:string,
}

const props = defineProps({
    cardList:{
        type:Array<AuditItm>,
        required:true
    },
})



</script>


<style lang="scss" scoped>
.follow_card {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .audit_card {
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #EBEEF5;
        display: flex;
        flex-direction: column;
        gap:8px;

        /* 顶部布局 */
        .card_header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap:10px;

            .header_left {
                display: flex;
                align-items: center;
                gap:8px;
                font-weight: 600;
                color: #333333;

                .status_tag {
                    height: 25px;
                    padding:0 8px;
                    font-weight: 400;
                    font-size: 12px;
                    background: rgba(46,100,250,0.1);
                    border-radius: 4px;
                    color: #2E64FA;
                }
                .task_type{
                    font-size: 12px;
                    font-weight: 400;
                    color:#fff;
                    line-height: 17px;
                    padding:4px 8px;
                    background: #2E64FA;
                    border-radius: 4px;
                }
                .product_type{
                    padding:3px 8px;
                    line-height: 18px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #2E64FA;
                    border-radius:4px;
                    border: 1px solid #2E64FA;
                }
            }
            .header_right{
                display: flex;
                gap:16px;
                .el-button{
                    margin:0 !important;
                }
            }
        }

        /* 中部布局 */
        .card_info {
            display: flex;
            align-items: center;
            gap:11px;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
        }

        /* 底部内容布局 */
        .card_content {
            font-weight: 400;
            font-size: 12px;
            color: #999999;
        }
    }
}

.follow_card{
    .audit_card{
        padding: 12px 16px;
        .header_left {
            font-size: 14px;
        }
    }
}

</style>