<template>
    <div class="task_list">
        <div class="title">
            <img class="icon" src="@/assets/img/zf_task_title_icon.svg" alt="">
            <span>任务进度</span>
        </div>
        <div class="list">
            <el-scrollbar>
                <taskItem v-for="i in 10"></taskItem>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import taskItem from './taskItem.vue';

</script>

<style lang="less" scoped>
.task_list {
    background-color: #053b7b;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {

        display: flex;
        align-items: center;
        height: 40px;
        background: linear-gradient(90deg, #0A5CC8 3%, #053B7B 95%);
        padding-left: 20px;
        font-size: 18px;
        color: #fff;
        border-bottom: 1px solid #4784FF;
        ;

        .icon {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
    }

    .list {
        flex: 1;
        height: 0;
        padding: 16px 20px;
        overflow-y: auto;
        height: 0;
    }

}
</style>