适配底部栏

This commit is contained in:
GUjiYN 2024-01-20 18:08:48 +08:00
parent a92aa67868
commit e9315276d3
3 changed files with 87 additions and 85 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="relative h-screen w-full bg-gray-200"> <div class="relative min-h-screen w-full bg-gray-200">
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700"> <nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse"> <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
@ -14,7 +14,7 @@
</div> </div>
</nav> </nav>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="container mx-auto mt-20" > <div class="container mx-auto mt-20 mb-40" >
<div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10 dark:bg-gray-800 dark:border-gray-700"> <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10 dark:bg-gray-800 dark:border-gray-700">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">邮箱登录</h2> <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">邮箱登录</h2>
<form class="max-w-lg mx-auto w-auto"> <form class="max-w-lg mx-auto w-auto">
@ -50,7 +50,7 @@
</div> </div>
</div> </div>
</div> </div>
<Icp class="absolute bottom-0"/> <Icp class="fixed bottom-0"/>
</div> </div>
</template> </template>
<script setup> <script setup>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="relative h-screen w-full bg-gray-200"> <div class="relative min-h-screen w-full bg-gray-200">
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700"> <nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse"> <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
@ -14,8 +14,8 @@
</div> </div>
</nav> </nav>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="container mx-auto mt-20" > <div class="container mx-auto mt-20 mb-40" >
<div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10 dark:bg-gray-800 dark:border-gray-700"> <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">账号登录</h2> <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">账号登录</h2>
<form class="max-w-lg mx-auto w-auto"> <form class="max-w-lg mx-auto w-auto">
<div class="mb-5"> <div class="mb-5">
@ -55,7 +55,7 @@
</div> </div>
</div> </div>
</div> </div>
<Icp class="absolute bottom-0"/> <Icp class="fixed bottom-0"/>
</div> </div>
</template> </template>
<script setup> <script setup>

View File

@ -13,10 +13,11 @@
</button> </button>
</div> </div>
</nav> </nav>
<div class="flex items-center justify-center h-screen"> <div class="flex items-center justify-center">
<div class="flex flex-col w-1/4 space-y-10 bg-white border border-gray-200 shadow p-8"> <div class="container mx-auto mt-20 mb-40">
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mt-6">用户注册</h2> <div class="mx-auto w-1/4 bg-white border border-gray-200 shadow p-6">
<form class="w-full mx-auto flex flex-col space-y-2"> <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mt-2">用户注册</h2>
<form class="w-full mx-auto flex flex-col space-y-3">
<div> <div>
<label for="website-admin" class="block text-sm font-medium text-gray-900 dark:text-white">用户名</label> <label for="website-admin" class="block text-sm font-medium text-gray-900 dark:text-white">用户名</label>
<div class="flex"> <div class="flex">
@ -95,10 +96,11 @@
<input type="text" id="website-admin" class="rounded-none rounded-e-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"> <input type="text" id="website-admin" class="rounded-none rounded-e-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
</div> </div>
</form>
<a @click="registerUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mb-1 mx-8 px-10 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">立即注册</a> <a @click="registerUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mb-1 mx-8 px-10 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">立即注册</a>
</form>
</div> </div>
<div class="w-full absolute bottom-0"> </div>
<div class="w-full fixed bottom-0">
<Icp/> <Icp/>
</div> </div>
</div> </div>