<template>
	<div class="other-login">
		<div class="title">{{ $t('Login.orContinueWith') }}</div>
		<div class="btns">
			<button class="submit" custom @click="onGoogle">
				<img src="@/assets/images/login/google.png" />
				{{ $t('Login.googleLogin') }}
			</button>
			<button class="submit" custom @click="onWechat">
				<img src="@/assets/images/login/wechat.png" />
				{{ $t('Login.wechatLogin') }}
			</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, reactive, ref } from 'vue'
	const onGoogle = () => {}
	const onWechat = () => {}
</script>

<style lang="less" scoped>
	.other-login {
		width: 100%;
		> .title {
			width: 100%;
			color: #232323;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.1rem;
			font-family: KaiseiOpti-Regular;
			line-height: 2rem;

			&::before,
			&::after {
				content: '';
				flex: 1;
				border-bottom: 0.05rem solid #232323;
			}

			&::before {
				margin-right: 2rem;
			}

			&::after {
				margin-left: 2rem;
			}
		}
		> .btns {
			margin-top: 2.4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 2rem;
			width: 100%;
			overflow: hidden;
			> button {
				min-width: 0;
				flex: 1;
				height: 3.4rem;
				display: flex;
				align-items: center;
				justify-content: space-around;

				--button-bgcolor: transparent;
				--button-color: #666666;
				--button-font-size: 1rem;
				border: 0.1rem solid #c4c4c4;
				&:first-child {
					margin-left: 0;
				}

				img {
					width: auto;
					height: 2rem;
					// margin-right: 2.5rem;
				}
			}
		}
	}
</style>
