init
This commit is contained in:
hu xiaotong
@@ -38,7 +38,9 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">快速链接</h3>
|
||||
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
|
||||
快速链接
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
@@ -128,7 +130,9 @@ const Footer: React.FC = () => {
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">联系我们</h3>
|
||||
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
|
||||
联系我们
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
<li className="text-[#9B8579] flex items-center">
|
||||
<i className="fas fa-envelope mr-2 text-[#C17F59]"></i>
|
||||
|
||||
@@ -1,125 +1,157 @@
|
||||
import React from "react";
|
||||
|
||||
interface LoginModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 transition-opacity z-50" aria-hidden="true">
|
||||
<div className="absolute inset-0 bg-black opacity-75"></div>
|
||||
</div>
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
<div className="inline-block align-bottom bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
|
||||
<div className="absolute top-4 right-4 z-50">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-full text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none transition-colors duration-200"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<i className="fas fa-times text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
||||
<h3 className="text-2xl leading-6 font-bold text-white mb-6 text-center">
|
||||
登录账号
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<div className="mb-4">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-1">
|
||||
电子邮箱
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-400 mb-1">
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
|
||||
placeholder="输入密码"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember-me"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded"
|
||||
/>
|
||||
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-400">
|
||||
记住我
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer">
|
||||
忘记密码?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-yellow-500 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-700"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-gray-900 text-gray-400">
|
||||
或使用以下方式登录
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
<i className="fab fa-weixin text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
<i className="fab fa-qq text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
<i className="fab fa-weibo text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
还没有账号?{" "}
|
||||
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer">
|
||||
立即注册
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div
|
||||
className="fixed inset-0 transition-opacity z-50"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div className="absolute inset-0 bg-black opacity-75"></div>
|
||||
</div>
|
||||
<span
|
||||
className="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true"
|
||||
>
|
||||
​
|
||||
</span>
|
||||
<div className="inline-block align-bottom bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
|
||||
<div className="absolute top-4 right-4 z-50">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-full text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none transition-colors duration-200"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<i className="fas fa-times text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
||||
<h3 className="text-2xl leading-6 font-bold text-white mb-6 text-center">
|
||||
登录账号
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-400 mb-1"
|
||||
>
|
||||
电子邮箱
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-400 mb-1"
|
||||
>
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
|
||||
placeholder="输入密码"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember-me"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded"
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember-me"
|
||||
className="ml-2 block text-sm text-gray-400"
|
||||
>
|
||||
记住我
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"
|
||||
>
|
||||
忘记密码?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-yellow-500 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-700"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-gray-900 text-gray-400">
|
||||
或使用以下方式登录
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
<i className="fab fa-weixin text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
<i className="fab fa-qq text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
<i className="fab fa-weibo text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
还没有账号?{" "}
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"
|
||||
>
|
||||
立即注册
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginModal;
|
||||
export default LoginModal;
|
||||
|
||||
Reference in New Issue
Block a user