1
This commit is contained in:
dengqichen
parent
99299fb91c
commit
0ebbf82ae7
@ -44,41 +44,102 @@
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 输入框和下拉框通用样式 */
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.2s;
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
border-radius: 6px !important;
|
||||
border: 1px solid #e5e7eb !important;
|
||||
background-color: #f9fafb !important;
|
||||
transition: all 0.2s ease-in-out !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
border-color: #cbd5e0;
|
||||
border-color: #d1d5db !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: #3182ce;
|
||||
box-shadow: 0 0 0 1px #3182ce;
|
||||
border-color: #2563eb !important;
|
||||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* 下拉框特殊样式 */
|
||||
:global(.ant-select-selector) {
|
||||
height: 40px !important;
|
||||
padding: 4px 11px !important;
|
||||
border-radius: 6px !important;
|
||||
border: 1px solid #e5e7eb !important;
|
||||
background-color: #f9fafb !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
:global(.ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
|
||||
border-color: #d1d5db !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
:global(.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector) {
|
||||
border-color: #2563eb !important;
|
||||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
:global(.ant-select-selection-item) {
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
/* 下拉框选项样式 */
|
||||
:global(.ant-select-dropdown) {
|
||||
padding: 4px !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
:global(.ant-select-item) {
|
||||
padding: 8px 12px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
:global(.ant-select-item-option-selected) {
|
||||
background-color: #f3f4f6 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
:global(.ant-select-item-option-active) {
|
||||
background-color: #f9fafb !important;
|
||||
}
|
||||
|
||||
/* 登录按钮样式 */
|
||||
.loginButton {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
background-color: #2563eb !important;
|
||||
border: none !important;
|
||||
border-radius: 6px !important;
|
||||
color: white !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 14px !important;
|
||||
transition: all 0.2s ease-in-out !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.loginButton:hover {
|
||||
background-color: #1a1a1a;
|
||||
background-color: #1d4ed8 !important;
|
||||
}
|
||||
|
||||
.loginButton:active {
|
||||
background-color: #1e40af !important;
|
||||
}
|
||||
|
||||
.loginButton:disabled {
|
||||
background-color: #e2e8f0;
|
||||
cursor: not-allowed;
|
||||
background-color: #e5e7eb !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
:global(.ant-btn-loading-icon) {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
@ -82,10 +82,8 @@ const Login: React.FC = () => {
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<blockquote className="text-2xl font-medium">
|
||||
"这个平台帮助我们显著提升了部署效率，让团队可以更专注于业务开发。"
|
||||
"平台帮助我们显著提升了部署效率，让团队可以更专注于业务开发。"
|
||||
</blockquote>
|
||||
<p className="text-lg">张工</p>
|
||||
<p className="text-zinc-400">高级运维工程师</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -94,6 +92,7 @@ const Login: React.FC = () => {
|
||||
<div className={styles.loginBox}>
|
||||
<div className={styles.logo}>
|
||||
<h1>管理系统</h1>
|
||||
<p className="text-gray-500 mt-2">输入您的账号密码登录系统</p>
|
||||
</div>
|
||||
<Form<LoginForm>
|
||||
form={form}
|
||||
@ -101,18 +100,23 @@ const Login: React.FC = () => {
|
||||
onFinish={handleFinish}
|
||||
autoComplete="off"
|
||||
size="large"
|
||||
layout="vertical"
|
||||
>
|
||||
<Form.Item
|
||||
name="tenantId"
|
||||
rules={[{required: true, message: '请选择租户!'}]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择租户"
|
||||
placeholder="系统管理租户"
|
||||
options={tenants.map(tenant => ({
|
||||
label: tenant.name,
|
||||
value: tenant.code
|
||||
}))}
|
||||
className={styles.input}
|
||||
dropdownStyle={{
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@ -121,7 +125,7 @@ const Login: React.FC = () => {
|
||||
rules={[{required: true, message: '请输入用户名!'}]}
|
||||
>
|
||||
<Input
|
||||
placeholder="用户名"
|
||||
placeholder="admin"
|
||||
className={styles.input}
|
||||
/>
|
||||
</Form.Item>
|
||||
@ -131,7 +135,7 @@ const Login: React.FC = () => {
|
||||
rules={[{required: true, message: '请输入密码!'}]}
|
||||
>
|
||||
<Input.Password
|
||||
placeholder="密码"
|
||||
placeholder="········"
|
||||
className={styles.input}
|
||||
/>
|
||||
</Form.Item>
|
||||
@ -151,11 +155,11 @@ const Login: React.FC = () => {
|
||||
|
||||
<div className="text-center text-sm text-gray-500 mt-4">
|
||||
登录即表示您同意我们的
|
||||
<a href="#" className="text-blue-600 hover:text-blue-800 mx-1">
|
||||
<a href="#" className="text-[#2563eb] hover:text-[#1d4ed8] mx-1">
|
||||
服务条款
|
||||
</a>
|
||||
和
|
||||
<a href="#" className="text-blue-600 hover:text-blue-800 mx-1">
|
||||
<a href="#" className="text-[#2563eb] hover:text-[#1d4ed8] mx-1">
|
||||
隐私政策
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user