75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { PageType } from '~/stores/login';
|
|
|
|
const store = useLoginStore();
|
|
const { currentType, loginForm } = storeToRefs(store);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div
|
|
class="flex md:flex-row items-center md:justify-center w-full flex-col gap-4"
|
|
>
|
|
<div class="flex flex-col items-center gap-4">
|
|
<button class="w-56 h-10 bg-qqColor text-white rounded-md"
|
|
><img class="max-h-7 inline" src="/QQ.png" alt="QQ logo" />
|
|
<span class="text-white">QQ登录</span>
|
|
</button>
|
|
<button class="w-56 h-10 bg-wechatColor rounded-md"
|
|
><img
|
|
class="max-h-7 inline"
|
|
src="public/微信.png"
|
|
alt="wechat logo"
|
|
/>
|
|
<span class="text-white">微信登录</span>
|
|
</button>
|
|
<button class="w-56 h-10 bg-alipayColor rounded-md"
|
|
><img
|
|
class="max-h-7 inline"
|
|
src="public/支付,支付宝.png"
|
|
alt="alipay logo"
|
|
/>
|
|
<span class="text-black">支付宝登录</span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="relative hidden md:flex flex-col items-center gap-4 w-2/5 max-w-24 select-none"
|
|
>
|
|
<div class="w-1 h-44 bg-gray-200"></div>
|
|
<div
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-gray-200 w-10 h-10 bg-loginBG"
|
|
>
|
|
<span
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-1"
|
|
>or
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-4 mt-3 md:mt-0">
|
|
<TInput
|
|
v-model="loginForm.username"
|
|
class="w-56"
|
|
placeholder="请输入用户名"
|
|
/>
|
|
<TInput
|
|
v-model="loginForm.password"
|
|
class="w-56"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
/>
|
|
<TButton class="w-56" @click="store.login">登录</TButton>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
|
|
>
|
|
<button class="text-white" @click="currentType = PageType.register"
|
|
>注册
|
|
</button>
|
|
<button class="text-white" @click="currentType = PageType.reset"
|
|
>忘记密码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|