third-party-login.vue
1.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>