登陆注册页面

src/views/login/index.vue

@@ -1,13 +1,63 @@
 <template>
-	<div class="index"></div>
+	<div class="index background-pink">
+		<div class="header">
+			<p class="split"></p>
+			<button class="login" @click="onLogin">Log in</button>
+			<button class="register" @click="onRegister">Sign up</button>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
 	import { computed } from 'vue'
-	import { useGlobalStore } from '@/stores'
-	const globalStore = useGlobalStore()
-	const loading = computed(() => globalStore.state.loading)
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const onLogin = () => {
+		router.push({ name: 'login' })
+	}
+	const onRegister = () => {
+		router.push({ name: 'register' })
+	}
 </script>
 
 <style lang="less" scoped>
+	.index {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+		> .header {
+			position: absolute;
+			top: 3rem;
+			left: 0;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			> .split {
+				margin: 0 auto;
+			}
+			> button {
+				margin-right: 3rem;
+				width: 20rem;
+				height: 5.2rem;
+				border-radius: 5rem;
+				border: none;
+				outline: none;
+				font-size: 2.2rem;
+				font-weight: 600;
+				&:active {
+					opacity: 0.8;
+				}
+			}
+			> .login {
+				background-color: #ff7a51;
+				color: #fff;
+			}
+			> .register {
+				background-color: #fff;
+				color: #232323;
+			}
+		}
+	}
 </style>