feat: 优化登录页面
parent
4ac30f177d
commit
23738a4987
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div class="w-full h-full flex justify-center items-center p-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<div>
|
||||
<img src="@/assets/404.svg" alt="404" class="w-[320px]" />
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="mt-0">抱歉页面未找到，你访问的地址不存在!</p>
|
||||
<div class="space-x-3 mt-5">
|
||||
<div class="slide-in-bottom">
|
||||
<h1 class="text-3xl font-bold my-0">404</h1>
|
||||
<p class="mt-2">抱歉，您访问的地址不存在!</p>
|
||||
<div class="space-x-3 mt-5 pb-4">
|
||||
<a-button type="primary" @click="router.back()">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-back"></i>
|
||||
|
|
@ -30,7 +31,21 @@ import { useRouter } from "vue-router";
|
|||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.slide-in-bottom {
|
||||
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
@keyframes slide-in-bottom {
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<route lang="json">
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,51 +1,56 @@
|
|||
<template>
|
||||
<div class="page-login w-full h-full flex items-center justify-center bg-white">
|
||||
<div class="md:hidden fixed flex items-center justify-between top-0 m-0 h-13 w-full px-10 z-10">
|
||||
<div class="flex items-center">
|
||||
<img src="/favicon.ico" alt="" width="20" height="20" class="mr-1" />
|
||||
<h1 class="text-lg m-0">
|
||||
{{ appStore.title }}
|
||||
</h1>
|
||||
</div>
|
||||
<div>敬请期待</div>
|
||||
</div>
|
||||
<div
|
||||
class="login-box w-[920px] h-[560px] relative mx-8 grid md:grid-cols-2 rounded overflow-hidden border border-blue-100"
|
||||
>
|
||||
<div class="relative hidden md:block w-full h-full overflow-hidden bg-[#09f] px-4">
|
||||
<img src="@/assets/td.svg" :alt="appStore.title" class="w-full h-full select-none" />
|
||||
</div>
|
||||
<div class="relative p-20 px-8 md:px-14 bg-white shadow-sm">
|
||||
<div class="text-2xl">欢迎登陆</div>
|
||||
<div class="text-base text-gray-500 mt-3">{{ meridiem }}好，欢迎登陆{{ appStore.title }}!</div>
|
||||
<a-form ref="formRef" :model="model" :rules="formRules" layout="vertical" class="mt-8">
|
||||
<a-form-item field="username" label="账号" hide-asterisk>
|
||||
<a-input v-model="model.username" placeholder="请输入账号/手机号/邮箱" allow-clear>
|
||||
<template #prefix>
|
||||
<i class="icon-park-outline-user" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="password" label="密码" hide-asterisk>
|
||||
<a-input-password v-model="model.password" placeholder="请输入密码" allow-clear>
|
||||
<template #prefix>
|
||||
<i class="icon-park-outline-lock" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-space :size="16" direction="vertical">
|
||||
<div class="flex items-center justify-between">
|
||||
<a-checkbox checked="rememberPassword">记住我</a-checkbox>
|
||||
<a-link @click="onForgetPasswordClick">忘记密码?</a-link>
|
||||
</div>
|
||||
<a-button type="primary" html-type="submit" long class="mt-2" :loading="loading" @click="onSubmitClick">
|
||||
立即登录
|
||||
</a-button>
|
||||
<p type="text" long class="text-gray-400 text-center m-0">暂不支持其他方式登录</p>
|
||||
</a-space>
|
||||
</a-form>
|
||||
<div class="page-login w-full h-full grid grid-rows-[auto_1fr_auto]">
|
||||
<div class=" top-0 m-0 h-20 w-full px-10 z-10">
|
||||
<div class="md:hidden flex items-center justify-between h-13">
|
||||
<div class="flex items-center">
|
||||
<img src="/favicon.ico" alt="" width="20" height="20" class="mr-1" />
|
||||
<h1 class="text-lg m-0">
|
||||
{{ appStore.title }}
|
||||
</h1>
|
||||
</div>
|
||||
<div>v0.0.1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center w-full overflow-hidden">
|
||||
<div
|
||||
class="login-box w-[920px] h-[560px] relative mx-8 grid md:grid-cols-2 rounded overflow-hidden border border-blue-100"
|
||||
>
|
||||
<div class="relative hidden md:block w-full h-full overflow-hidden bg-[#09f] px-4">
|
||||
<img src="@/assets/td.svg" :alt="appStore.title" class="w-full h-full select-none" />
|
||||
</div>
|
||||
<div class="relative p-20 px-8 md:px-14 bg-white shadow-sm">
|
||||
<div class="text-2xl">欢迎登陆</div>
|
||||
<div class="text-base text-gray-500 mt-2">{{ meridiem }}好，欢迎登陆{{ appStore.title }}!</div>
|
||||
<a-form ref="formRef" :model="model" :rules="formRules" layout="vertical" class="mt-8">
|
||||
<a-form-item field="username" label="账号" hide-asterisk>
|
||||
<a-input v-model="model.username" placeholder="请输入账号/手机号/邮箱" allow-clear>
|
||||
<template #prefix>
|
||||
<i class="icon-park-outline-user" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="password" label="密码" hide-asterisk>
|
||||
<a-input-password v-model="model.password" placeholder="请输入密码" allow-clear>
|
||||
<template #prefix>
|
||||
<i class="icon-park-outline-lock" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-space :size="16" direction="vertical">
|
||||
<div class="flex items-center justify-between">
|
||||
<a-checkbox checked="rememberPassword">记住我</a-checkbox>
|
||||
<a-link @click="onForgetPasswordClick">忘记密码?</a-link>
|
||||
</div>
|
||||
<a-button type="primary" html-type="submit" long class="mt-2" :loading="loading" @click="onSubmitClick">
|
||||
立即登录
|
||||
</a-button>
|
||||
<p type="text" long class="text-gray-400 text-center m-0">暂不支持其他方式登录</p>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-slate-500 py-8 text-center h-20">Copyright © {{ appStore.title }}, 版权所有</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@
|
|||
{
|
||||
"meta": {
|
||||
"sort": 10201,
|
||||
"title": "测试页面1",
|
||||
"title": "表格组件",
|
||||
"icon": "icon-park-outline-add-subtract"
|
||||
},
|
||||
"parentMeta": {
|
||||
"sort": 10201,
|
||||
"title": "测试分类",
|
||||
"title": "内置组件",
|
||||
"icon": "icon-park-outline-add-subtract"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{
|
||||
"meta": {
|
||||
"sort": 10202,
|
||||
"title": "测试页面2",
|
||||
"title": "表单组件",
|
||||
"icon": "icon-park-outline-aperture-priority"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
|
||||
<script setup lang="tsx">
|
||||
import { ContentType, api } from "@/api";
|
||||
import { useTable } from "@/components";
|
||||
import { Table, useTable } from "@/components";
|
||||
|
||||
const table = useTable({
|
||||
data: async (model, paging) => [],
|
||||
data: async (model, paging) => ({ data: [{}], meta: { total: 0 } }),
|
||||
columns: [
|
||||
{
|
||||
title: "姓名",
|
||||
|
|
|
|||
Loading…
Reference in New Issue