登录

src/views/login/other-login.vue

@@ -0,0 +1,83 @@
+<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>