<template>
    <el-config-provider :locale="locale" :size="size" :z-index="zIndex">
        <RouterView class="" />
    </el-config-provider>
</template>
<script>
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn';

export default defineComponent({
    components: {
        ElConfigProvider,
    },
    setup() {
        const data = reactive({
            size: 'large',
            zIndex: 100,
            locale: zhCn,
        });
        return {
            ...toRefs(data),
        };
    },
});
</script>
<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
