<template>
    <div class="aq_list">
        <div class="list_title">
            <span class="bjc">待检查提醒</span>
            <span class="righ">2条待处理</span>
        </div>
        <ul class="infinite-list">
            <li v-for="(item, index) in tableData" :key="index" class="infinite-list-item">
                <div class="list_btn">提醒</div>
                <span class="titl">{{ item.text }}</span>
                <span class="time">{{ item.time }}</span>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const tableData = [
    {
        text: '安全检查记录内容详情一',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情二',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情三',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情一',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情二',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情三',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情一',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情二',
        time: '14：45',
    },
    {
        text: '安全检查记录内容详情三',
        time: '14：45',
    }
]


</script>
<style lang="scss" scoped>
.aq_list {
    width: 100%;
    height: 100%;

    .list_title {
        margin: 8px;
        padding: 10px 10px;
        display: flex;
        justify-content: space-between;
        // background: linear-gradient(90deg, #0C343A 0%, rgba(12, 52, 58, 0) 100%);
        background: var(--el-table-cell-bmx-backgroundcolor);

        .bjc {
            font-weight: 290;
            color: #757575;
            line-height: 13px;
        }

        .righ {
            font-weight: 400;
            color: var(--el-color-primary);
            line-height: 13px;
        }

    }

    .infinite-list {
        height: calc(100% - 50px);
        overflow: hidden;
        overflow: auto;

        >.infinite-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 30px;
            margin: 5px;
            padding: 0 10px;
            box-sizing: border-box;

            .list_btn {
                padding: 5px;
                text-align: center;
                width: 42px;
                background: #FFF6E8;
                border-radius: 2px 2px 2px 2px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FE7F2E;
                line-height: 13px;
            }

            .titl {
                font-weight: 290;
                color: #191919;
                line-height: 13px;
            }

            .time {
                font-weight: 400;
                color: #A3B69C;
                line-height: 12px;
            }

            span {

                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        >.infinite-list-item:hover {
            background: #b1f2d3;
        }
    }
}

::v-deep ::-webkit-scrollbar-thumb {
    background-color: #1E3A26;
}

[data-v-67f2c4c8]::-webkit-scrollbar-track {
    background-color: #0e2007
}
</style>