<!--
 * @Author: Kane
 * @Date: 2023-03-08 18:32:13
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/components/DishonorListComponent.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="dishonorlist-wrapper">
        <div class="banner-wrapper">
            <img
                src="@/assets/img/ranking/stop.png"
                alt=""
            >
            <div class="title-wrapper">
                <span>“消 8 灭 6 突围战”</span>
                <span>指标落后入营坐席</span>
            </div>
        </div>
        <div class="telsaler-list-wrapper">
            <span>开发中……</span>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "DishonorListComponent",
    props: {
        month: {
            type: String,
            require: true,
            default: () => "本",
        },
        dishonorPersons: {
            type: Array,
            require: true,
            default: () => [],
        },
    },
    setup( props )
    {
        return { props, };
    },
};
</script>

<style scoped lang="scss">
.dishonorlist-wrapper {
    display: flex;
    flex-direction: column;
    height: 240px;
    width: 360px;
    border-radius: 5px;

    background-color: $color-honorlist-bg;
    backdrop-filter: blur(10px);

    padding: 10px;

    >*+* {
        margin-top: 10px;
    }

    .banner-wrapper {
        display: flex;
        justify-content: center;
        align-items: stretch;
        height: 65px;
        flex-grow: 0;

        img {
            // width: 70px;
            height: 60px;
        }

        span {
            display: block;
            width: 100%;
            text-align: center;

            font: {
                family: "fz-zhuohei";
                size: 1.7rem;
                weight: 100;
            }

            color: #fff;
        }
    }
}

.telsaler-list-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
        display: block;
        text-align: center;
        color: rgb(101, 140, 194);
        margin-top: 0px;

        font: {
            size: 2rem;
            family: "FZ-ZHUOHEI";
            weight: 100;
        }
    }
}
</style>
