<script setup lang="ts">
|
import {
|
SvgDingDingIcon,
|
SvgGithubIcon,
|
SvgQQChatIcon,
|
SvgWeChatIcon,
|
} from '../../../../../icons/src';
|
import { $t } from '../../../../../locales/src';
|
|
import { VbenIconButton } from '../../../../../@core/ui-kit/shadcn-ui/src';
|
|
defineOptions({
|
name: 'ThirdPartyLogin',
|
});
|
|
const emit = defineEmits<{
|
thirdLogin: [type: number];
|
}>();
|
|
/**
|
* 处理第三方登录点击
|
*
|
* @param type 第三方平台类型
|
*/
|
function handleThirdLogin(type: number) {
|
emit('thirdLogin', type);
|
}
|
</script>
|
|
<template>
|
<div class="w-full sm:mx-auto md:max-w-md">
|
<div class="mt-4 flex items-center justify-between">
|
<span class="w-[35%] border-b border-input dark:border-gray-600"></span>
|
<span class="text-center text-xs text-muted-foreground uppercase">
|
{{ $t('authentication.thirdPartyLogin') }}
|
</span>
|
<span class="w-[35%] border-b border-input dark:border-gray-600"></span>
|
</div>
|
|
<div class="mt-4 flex flex-wrap justify-center">
|
<VbenIconButton class="mb-3" @click="handleThirdLogin(30)">
|
<SvgWeChatIcon />
|
</VbenIconButton>
|
<VbenIconButton class="mb-3" @click="handleThirdLogin(20)">
|
<SvgDingDingIcon />
|
</VbenIconButton>
|
<VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
|
<SvgQQChatIcon />
|
</VbenIconButton>
|
<VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
|
<SvgGithubIcon />
|
</VbenIconButton>
|
</div>
|
</div>
|
</template>
|
