<!--
 * @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>"消7灭6"突围战</span>
                <span>{{ props.month }}月入营坐席</span>
            </div>
        </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 {
    height: 240px;
    width: 360px;
    border-radius: 5px;

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

    padding: 10px;

    .banner-wrapper {
        display: flex;
        justify-content: center;
        align-items: stretch;

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

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

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

            color: #fff;
        }
    }
}
</style>
