<!--
 * @Author: Kane
 * @Date: 2023-03-23 16:05:08
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/DataManagement.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="wrapper">
        <div class="reward-wrapper">
            <div class="reward-gainer-wrapper">
                <el-divider content-position="left">
                    90俱乐部
                </el-divider>
                <el-table
                    border
                    stripe
                    style="width:100%;"
                >
                    <el-table-column type="selection" />
                    <el-table-column
                        label="坐席名称"
                        align="center"
                    />
                    <el-table-column
                        label="奖项名称"
                        align="center"
                    />
                </el-table>
            </div>
            <div class="dishonor-wrapper">
                <el-divider content-position="left">
                    XXX
                </el-divider>
                <el-table
                    border
                    stripe
                    style="width:100%;"
                >
                    <el-table-column type="selection" />
                    <el-table-column
                        label="坐席名称"
                        align="center"
                    />
                    <el-table-column
                        label="奖项名称"
                        align="center"
                    />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: "DataManagement",
    setup()
    {
        return {};
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/public/_public.scss";

.wrapper {
    margin: 10px;
    padding: 10px;

    // background-color: #fff;
    // border-radius: 5px;
    // box-shadow: $box-shadow;

    // &:hover {
    //     box-shadow: $box-shadow-hover;
    // }

    min-width: 800px;

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

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

    >div {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: $box-shadow;

        padding: 10px;

        &:hover {
            box-shadow: $box-shadow-hover;
        }
    }

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

.reward-gainer-wrapper {
    flex-grow: 1;
}

.dishonor-wrapper {
    flex-grow: 1;
}
</style>
