45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { GiteeIcon, MdiGithub, MdiQqchat, MdiWechat } from '@vben/icons';
|
|
import { $t } from '@vben/locales';
|
|
|
|
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
|
|
|
defineOptions({
|
|
name: 'ThirdPartyLogin',
|
|
});
|
|
|
|
defineEmits<{
|
|
/**
|
|
* 第三方登录 platfrom 对应平台的string
|
|
*/
|
|
oauthLogin: [plateform: string];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full sm:mx-auto md:max-w-md">
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
|
<span class="text-muted-foreground text-center text-xs uppercase">
|
|
{{ $t('authentication.thirdPartyLogin') }}
|
|
</span>
|
|
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap justify-around">
|
|
<VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'wechat')">
|
|
<MdiWechat class="size-[24px] text-green-600" />
|
|
</VbenIconButton>
|
|
<VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'qq')">
|
|
<MdiQqchat class="size-[24px]" />
|
|
</VbenIconButton>
|
|
<VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'github')">
|
|
<MdiGithub class="size-[24px]" />
|
|
</VbenIconButton>
|
|
<VbenIconButton class="mb-3" @click="$emit('oauthLogin', 'gitee')">
|
|
<GiteeIcon class="size-[24px] text-red-700" />
|
|
</VbenIconButton>
|
|
</div>
|
|
</div>
|
|
</template>
|