feat(admin): 登录表单恢复Art Design Pro原版样式(紧凑40px/左对齐/无图标),左侧保留品牌区
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -14,13 +14,12 @@
|
|||||||
:rules="rules"
|
:rules="rules"
|
||||||
:key="formKey"
|
:key="formKey"
|
||||||
@keyup.enter="handleSubmit"
|
@keyup.enter="handleSubmit"
|
||||||
class="login-form"
|
style="margin-top: 25px"
|
||||||
>
|
>
|
||||||
<ElFormItem prop="username">
|
<ElFormItem prop="username">
|
||||||
<ElInput
|
<ElInput
|
||||||
class="custom-height"
|
class="custom-height"
|
||||||
:placeholder="$t('login.placeholder.username')"
|
:placeholder="$t('login.placeholder.username')"
|
||||||
:prefix-icon="User"
|
|
||||||
v-model.trim="formData.username"
|
v-model.trim="formData.username"
|
||||||
/>
|
/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
@@ -28,7 +27,6 @@
|
|||||||
<ElInput
|
<ElInput
|
||||||
class="custom-height"
|
class="custom-height"
|
||||||
:placeholder="$t('login.placeholder.password')"
|
:placeholder="$t('login.placeholder.password')"
|
||||||
:prefix-icon="Lock"
|
|
||||||
v-model.trim="formData.password"
|
v-model.trim="formData.password"
|
||||||
type="password"
|
type="password"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
@@ -37,7 +35,7 @@
|
|||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
|
|
||||||
<!-- 推拽验证 -->
|
<!-- 推拽验证 -->
|
||||||
<div class="relative pb-5 mt-4">
|
<div class="relative pb-5 mt-6">
|
||||||
<div
|
<div
|
||||||
class="relative z-[2] overflow-hidden select-none rounded-lg border border-transparent tad-300"
|
class="relative z-[2] overflow-hidden select-none rounded-lg border border-transparent tad-300"
|
||||||
:class="{ '!border-[#FF4E4F]': !isPassing && isClickPass }"
|
:class="{ '!border-[#FF4E4F]': !isPassing && isClickPass }"
|
||||||
@@ -49,10 +47,8 @@
|
|||||||
textColor="#4D5875"
|
textColor="#4D5875"
|
||||||
:successText="$t('login.sliderSuccessText')"
|
:successText="$t('login.sliderSuccessText')"
|
||||||
progressBarBg="var(--main-color)"
|
progressBarBg="var(--main-color)"
|
||||||
background="#E8EEF6"
|
background="#F1F1F4"
|
||||||
handlerBg="#FFFFFF"
|
handlerBg="#FFFFFF"
|
||||||
:height="56"
|
|
||||||
radius="10px"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
@@ -69,7 +65,7 @@
|
|||||||
}}</ElCheckbox>
|
}}</ElCheckbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-6">
|
<div style="margin-top: 30px">
|
||||||
<ElButton
|
<ElButton
|
||||||
class="w-full custom-height"
|
class="w-full custom-height"
|
||||||
type="primary"
|
type="primary"
|
||||||
@@ -89,7 +85,6 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import AppConfig from '@/config'
|
import AppConfig from '@/config'
|
||||||
import { User, Lock } from '@element-plus/icons-vue'
|
|
||||||
import { useUserStore } from '@/store/modules/user'
|
import { useUserStore } from '@/store/modules/user'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { HttpError } from '@/utils/http/error'
|
import { HttpError } from '@/utils/http/error'
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
@reference '@styles/core/tailwind.css';
|
@reference '@styles/core/tailwind.css';
|
||||||
|
|
||||||
/* 授权页右侧区域(客迹V1:固定浅色,不随暗色主题变化) */
|
/* 授权页右侧区域(表单样式恢复 Art Design Pro 原版观感) */
|
||||||
.auth-right-bg {
|
.auth-right-bg {
|
||||||
/* 覆盖 Element Plus 暗色变量,防止 html.dark 时表单控件变暗 */
|
/* 固定浅色:覆盖暗色变量,防止 html.dark 时表单控件变暗 */
|
||||||
--el-bg-color: #ffffff;
|
--el-bg-color: #ffffff;
|
||||||
--el-bg-color-overlay: #ffffff;
|
--el-bg-color-overlay: #ffffff;
|
||||||
--el-fill-color-blank: #ffffff;
|
--el-fill-color-blank: #ffffff;
|
||||||
@@ -12,13 +12,12 @@
|
|||||||
--el-border-color: #dcdfe6;
|
--el-border-color: #dcdfe6;
|
||||||
--el-border-color-light: #e4e7ed;
|
--el-border-color-light: #e4e7ed;
|
||||||
--el-border-color-lighter: #ebeef5;
|
--el-border-color-lighter: #ebeef5;
|
||||||
/* 滑块暗色边框环修正(ArtDragVerify 内部使用) */
|
|
||||||
--default-border-dashed: #dbdfe9;
|
--default-border-dashed: #dbdfe9;
|
||||||
background-color: #f7f8fa;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-right-wrap {
|
.auth-right-wrap {
|
||||||
@apply absolute inset-0 w-[440px] h-[680px] py-[5px] m-auto overflow-hidden
|
@apply absolute inset-0 w-[440px] h-[650px] py-[5px] m-auto overflow-hidden
|
||||||
max-sm:px-7 max-sm:w-full
|
max-sm:px-7 max-sm:w-full
|
||||||
animate-[slideInRight_0.6s_cubic-bezier(0.25,0.46,0.45,0.94)_forwards]
|
animate-[slideInRight_0.6s_cubic-bezier(0.25,0.46,0.45,0.94)_forwards]
|
||||||
max-md:animate-none;
|
max-md:animate-none;
|
||||||
@@ -28,24 +27,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@apply text-[#1A1A1A] text-[32px] font-semibold text-center;
|
@apply text-[#262626] text-4xl font-semibold max-md:text-3xl max-sm:pt-10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-title {
|
.sub-title {
|
||||||
@apply mt-[10px] text-[#8A94A6] text-[15px] text-center;
|
@apply mt-[10px] text-[#6b7280] text-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-height {
|
.custom-height {
|
||||||
@apply !h-[56px];
|
@apply !h-[40px];
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
margin-top: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滑块去内部边框,高度宽度与输入框严格一致(56px/440px) */
|
|
||||||
:deep(.drag_verify) {
|
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user