adminBigData/src/baseComponents/HonorTimeLine.vue

<template>
<div class="timeline_component">
    <el-timeline v-if="honorList?.length > 0" class="timeline" v-for="(honorItm) in honorList" :key="honorItm.id">
        <el-timeline-item
            placement="top"
            center="true"
            :timestamp="honorItm.awardDatetime"
            :hide-timestamp="true"
        >
            <div class="timeline_item">
                <div class="base_summarize">
                    <!-- <span class="timestamp">{{ honorItm.awardDatetime }}</span> -->
                    <!-- <span class="honor_type one_line_ellipsis"  :title="honorItm.honorTypeName">{{ honorItm.honorTypeName }}</span> -->
                </div>

                <div class="honoor_introduce">
                    <!-- <img :src="honorItm.certPicUrl" alt=""> -->
                    <div class="honor_msg">
                        <div class="base_msg">
                            <div class="title one_line_ellipsis" :title="honorItm.honorName">{{ honorItm.honorName }}</div>
                            <div class="honor_people">访问ip：{{ honorItm.teacherName }}</div>
                            <!-- <div v-if="honorItm.inputData?.length > 0" class="introduce_list one_line_ellipsis">
                                {{ 
                                    honorItm.inputData?.map(item=>{
                                        return item
                                    }).join('&nbsp; &nbsp;')
                                }}
                            </div> -->
                            <!-- <ul v-if="honorItm.radioData?.length > 0" class="tag_list one_line_ellipsis" >
                                <li v-for="tag in honorItm.radioData">{{ tag}}</li>
                            </ul> -->
                        </div>
                        <div class="operation">
                            <div class="honor_status">
                                <span class="upload_time">{{ honorItm.awardDatetime }}</span>
                                <slot name="status"  :honorItm="honorItm">
                                    <!-- <span class="status">{{ honorItm.reviewStatus }}</span> -->
                                </slot>
                            </div>
                            <div class="table_row_option">
                                <slot name="operation" :honorItm="honorItm"></slot>
                             </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </el-timeline-item>
        <el-timeline-item  placement="top" />
    </el-timeline>
    <div class="no_data_bg" v-else>
        <span>暂无数据</span>
    </div>
</div>
</template>

<script setup lang="ts">
interface HonorItem {
    id:String,
    awardDatetime: String,
    certPicUrl:String,
    honorTypeName: String,
    honorName:String,
    teacherName:String,
    radioData:Array<String>,
    inputData:Array<Object>    
    createdAt:String,
    reviewStatus:String,
}
const props = defineProps({
    honorList:{
        type:Array<HonorItem>,
        default:()=>[]
    }
})
</script>


<style lang="scss" scoped>
.timeline{
    padding:0;
}

:deep(.el-timeline){
    .el-timeline-item:last-child{
        padding-bottom: 10px;
    }
    
    .el-timeline-item{
        justify-content: flex-start;
        .el-timeline-item__wrapper{
            padding:0px;
        }

        .el-timeline-item__node{
            width: 5px;
            height: 5px;

        }

        .el-timeline-item__tail{
            left:1px
        }
    }

}


.timeline_item{
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;

    .base_summarize{
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        // width: 94px;
        width: 24px;
        .honor_type{
            font-size: 14px;
            color:#999;
            cursor: pointer;
        }
        .timestamp{
            font-weight: 600;
            font-size: 16px;
            color:#333;
        }
    }
    .honoor_introduce{
        flex:1 1;
        display: flex;
        gap:16px;
        background-color: #F8FAFE;
        border:solid #EBEEF5 1px;
        border-radius: 8px;
        position: relative;
        overflow: auto;
       
        padding:10px 20px 10px 10px;

        &:hover{
            background-color: rgba(46, 100, 250,0.1);
            border:solid #2E64FA 1px;
        }
        img{
            width: 200px;
            height: 117px;
        }
        .honor_msg{
            flex:1 1;
            position: relative;
            overflow: auto;
            display: flex;
            justify-content: space-between;
            gap:20px;
            .base_msg{
                overflow: auto;
                flex:1 1;
                display: flex;
                flex-direction: column;
                gap:8px;

                .title{
                    font-weight: 600;
                    font-size: 16px;
                    color:#333;
                    line-height: 22px;
                }
                .honor_people{
                    font-size: 14px;
                }
                .introduce_list{
                    font-size: 14px;
                    color:#999;
                }
                .tag_list{
                    display: flex;
                    gap:10px;
                    font-size: 12px;
                    color:#2E64FA;
                    li{
                        padding:3px 8px;
                        background-color: rgba(46, 100, 249,0.1);
                    }
                }
            }

            .operation{
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .honor_status{
                    justify-content: flex-end;
                    display: flex;
                    gap:20px;
                    .upload_time{
                        color:#999;
                    }
                }
                .table_row_option{
                    justify-content: flex-end;
                    gap:20px;
                }
            }
        }
    }
}
</style>