<template>
	<div class="other-login">
		<div class="title">{{ $t('Login.orContinueWith') }}</div>
		<div class="btns">
			<el-button class="submit" @click="onGoogle">
				<img src="@/assets/images/login/google.png" />
				{{ $t('Login.googleLogin') }}
			</el-button>
			<el-button class="submit" @click="onWechat">
				<img src="@/assets/images/login/wechat.png" />
				{{ $t('Login.wechatLogin') }}
			</el-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: #252727;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.6rem;
			font-family: Regular;
			&::before,
			&::after {
				content: '';
				flex: 1;
				border-bottom: 0.05rem solid #333535;
			}

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

			&::after {
				margin-left: 2.5rem;
			}
		}
		> .btns {
			margin-top: 3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			> .el-button {
				flex: 1;
				height: 5rem;
				--el-border-radius-base: 0.8rem;
				--el-font-size-base: 1.6rem;
				--el-border-color: #dfdfdf;
				--el-border-text-color: #666;
				margin-left: 2.4rem;

				&:first-child {
					margin-left: 0;
				}

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