style(login): 重构登录页面UI界面提升用户体验
- 将单列布局改为左右分栏设计，左侧展示品牌信息右侧放置登录表单 - 新增品牌面板包含动态背景效果、公司标识和功能特性展示区域 - 优化登录表单位于右侧卡片式容器内，提升视觉层次和交互体验 - 更新表单样式包括输入框、下拉选择器和开关组件的现代化设计 - 调整底部版权信息布局并优化响应式适配不同屏幕尺寸 - 重新设计按钮样式增加渐变效果和悬停动画反馈
This commit is contained in:
@@ -1,170 +1,171 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login-wrapper">
|
||||||
<!-- 顶部 -->
|
<!-- 左侧品牌区 -->
|
||||||
<el-form
|
<div class="brand-panel">
|
||||||
ref="loginRef"
|
<div class="brand-bg">
|
||||||
:model="loginForm"
|
<div class="orb orb-1"></div>
|
||||||
:rules="loginRules"
|
<div class="orb orb-2"></div>
|
||||||
class="login-form"
|
<div class="orb orb-3"></div>
|
||||||
>
|
|
||||||
<div class="el-login-top">
|
|
||||||
<el-image :src="logoNew" />
|
|
||||||
</div>
|
</div>
|
||||||
<h1 class="title">
|
<div class="brand-content">
|
||||||
{{ currentTenantName || settings.systemName }}信息管理系统
|
<div class="brand-logo">
|
||||||
</h1>
|
<el-image :src="logoNew" class="brand-logo-img" />
|
||||||
<p class="login-subtitle">
|
</div>
|
||||||
请使用您的账号密码安全登录系统
|
<h1 class="brand-title">
|
||||||
</p>
|
{{ currentTenantName || settings.systemName }}
|
||||||
<el-form-item prop="username">
|
</h1>
|
||||||
<p class="label">
|
<p class="brand-subtitle">信息管理系统</p>
|
||||||
用户名
|
<div class="brand-features">
|
||||||
</p>
|
<div class="feature-item">
|
||||||
<el-input
|
<div class="feature-icon">
|
||||||
v-model="loginForm.username"
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
type="text"
|
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="feature-text">
|
||||||
|
<span class="feature-label">安全可靠</span>
|
||||||
|
<span class="feature-desc">全方位数据安全保障</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="feature-text">
|
||||||
|
<span class="feature-label">高效便捷</span>
|
||||||
|
<span class="feature-desc">智能化医疗业务流程</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="feature-text">
|
||||||
|
<span class="feature-label">协同办公</span>
|
||||||
|
<span class="feature-desc">多科室多角色无缝协作</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-footer">
|
||||||
|
<p>技术支持：上海经创贺联信息技术有限公司</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧登录区 -->
|
||||||
|
<div class="login-panel">
|
||||||
|
<div class="login-card">
|
||||||
|
<div class="login-header">
|
||||||
|
<h2 class="login-title">欢迎回来</h2>
|
||||||
|
<p class="login-desc">请使用您的账号密码安全登录系统</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-form
|
||||||
|
ref="loginRef"
|
||||||
|
:model="loginForm"
|
||||||
|
:rules="loginRules"
|
||||||
|
class="login-form"
|
||||||
size="large"
|
size="large"
|
||||||
auto-complete="off"
|
|
||||||
placeholder="账号"
|
|
||||||
@input="handleUsernameChange"
|
|
||||||
>
|
>
|
||||||
<template #prefix>
|
<el-form-item prop="username">
|
||||||
<svg-icon
|
<label class="field-label">用户名</label>
|
||||||
icon-class="user"
|
<el-input
|
||||||
class="el-input__icon input-icon"
|
v-model="loginForm.username"
|
||||||
/>
|
type="text"
|
||||||
</template>
|
auto-complete="off"
|
||||||
</el-input>
|
placeholder="请输入账号"
|
||||||
</el-form-item>
|
class="premium-input"
|
||||||
<el-form-item prop="password">
|
@input="handleUsernameChange"
|
||||||
<p class="label">
|
|
||||||
密码
|
|
||||||
</p>
|
|
||||||
<el-input
|
|
||||||
v-model="loginForm.password"
|
|
||||||
:type="passwordVisible ? 'text' : 'password'"
|
|
||||||
size="large"
|
|
||||||
auto-complete="off"
|
|
||||||
placeholder="密码"
|
|
||||||
@keyup.enter="handleLogin"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<svg-icon
|
|
||||||
icon-class="password"
|
|
||||||
class="el-input__icon input-icon"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #suffix>
|
|
||||||
<span
|
|
||||||
class="password-toggle"
|
|
||||||
style="cursor: pointer; color: #606266; font-size: 14px; padding: 0 10px;"
|
|
||||||
@click="togglePasswordVisibility"
|
|
||||||
>
|
>
|
||||||
{{ passwordVisible ? '隐藏' : '显示' }}
|
<template #prefix>
|
||||||
</span>
|
<svg-icon icon-class="user" class="input-icon" />
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="tenantId">
|
|
||||||
<p class="label">
|
<el-form-item prop="password">
|
||||||
医疗机构
|
<label class="field-label">密码</label>
|
||||||
</p>
|
<el-input
|
||||||
<el-select
|
v-model="loginForm.password"
|
||||||
v-model="loginForm.tenantId"
|
:type="passwordVisible ? 'text' : 'password'"
|
||||||
size="large"
|
auto-complete="off"
|
||||||
placeholder="请选择医疗机构"
|
placeholder="请输入密码"
|
||||||
clearable
|
class="premium-input"
|
||||||
filterable
|
@keyup.enter="handleLogin"
|
||||||
>
|
>
|
||||||
<el-option
|
<template #prefix>
|
||||||
v-for="item in tenantOptions"
|
<svg-icon icon-class="password" class="input-icon" />
|
||||||
:key="item.value"
|
</template>
|
||||||
:label="item.label"
|
<template #suffix>
|
||||||
:value="item.value"
|
<span
|
||||||
/>
|
class="password-toggle"
|
||||||
</el-select>
|
@click="togglePasswordVisibility"
|
||||||
</el-form-item>
|
>
|
||||||
<el-form-item prop="tenantId">
|
{{ passwordVisible ? '隐藏' : '显示' }}
|
||||||
<span
|
</span>
|
||||||
class="descriptions-item-label"
|
</template>
|
||||||
style="margin: 0 10px 0 0"
|
</el-input>
|
||||||
>连接医保</span>
|
</el-form-item>
|
||||||
<el-switch
|
|
||||||
v-model="loginForm.invokeYb"
|
<el-form-item prop="tenantId">
|
||||||
size="large"
|
<label class="field-label">医疗机构</label>
|
||||||
@change="topNavChange"
|
<el-select
|
||||||
/>
|
v-model="loginForm.tenantId"
|
||||||
</el-form-item>
|
placeholder="请选择医疗机构"
|
||||||
<!--<el-form-item prop="code" v-if="captchaEnabled">
|
clearable
|
||||||
<el-input
|
filterable
|
||||||
v-model="loginForm.code"
|
class="premium-select"
|
||||||
size="large"
|
>
|
||||||
auto-complete="off"
|
<el-option
|
||||||
placeholder="验证码"
|
v-for="item in tenantOptions"
|
||||||
style="width: 63%"
|
:key="item.value"
|
||||||
@keyup.enter="handleLogin"
|
:label="item.label"
|
||||||
>
|
:value="item.value"
|
||||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
/>
|
||||||
</el-input>
|
</el-select>
|
||||||
<div class="login-code">
|
</el-form-item>
|
||||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
|
||||||
</div>
|
<el-form-item class="switch-item">
|
||||||
</el-form-item>
|
<div class="switch-row">
|
||||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
|
<span class="switch-label">连接医保</span>
|
||||||
<el-form-item style="width: 100%">
|
<el-switch
|
||||||
<el-button
|
v-model="loginForm.invokeYb"
|
||||||
:loading="loading"
|
@change="topNavChange"
|
||||||
size="large"
|
/>
|
||||||
type="primary"
|
</div>
|
||||||
style="width: 100%"
|
</el-form-item>
|
||||||
@click.prevent="handleLogin"
|
|
||||||
>
|
<el-form-item>
|
||||||
<span v-if="!loading">登 录</span>
|
<el-button
|
||||||
<span v-else-if="!signIng">登 录 中...</span>
|
:loading="loading"
|
||||||
<span v-else>连接医保中...</span>
|
type="primary"
|
||||||
</el-button>
|
class="login-btn"
|
||||||
<div
|
@click.prevent="handleLogin"
|
||||||
v-if="register"
|
>
|
||||||
style="float: right"
|
<span v-if="!loading" class="btn-text">登 录</span>
|
||||||
>
|
<span v-else-if="!signIng" class="btn-text">登录中...</span>
|
||||||
<router-link
|
<span v-else class="btn-text">连接医保中...</span>
|
||||||
class="link-type"
|
</el-button>
|
||||||
:to="'/register'"
|
</el-form-item>
|
||||||
>
|
</el-form>
|
||||||
立即注册
|
|
||||||
</router-link>
|
<div class="login-footer-info">
|
||||||
</div>
|
<p class="version-info">
|
||||||
</el-form-item>
|
前端 v{{ formattedFrontendVersion }}
|
||||||
<div class="footer">
|
<span v-if="backendVersion"> · 后端 v{{ formattedBackendVersion }}</span>
|
||||||
© 2025 {{ currentTenantName || settings.systemName }}信息管理系统
|
</p>
|
||||||
| 前端版本 {{ formattedFrontendVersion }}
|
<p class="copyright">
|
||||||
<span v-if="backendVersion">
|
© 2025 {{ currentTenantName || settings.systemName }}信息管理系统
|
||||||
| 后端版本 {{ formattedBackendVersion }}
|
</p>
|
||||||
</span>
|
|
||||||
<!-- 公司版权信息（新增） -->
|
|
||||||
<div class="company-copyright">
|
|
||||||
技术支持：上海经创贺联信息技术有限公司
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!-- 底部 -->
|
|
||||||
|
|
||||||
<div class="el-login-footer">
|
|
||||||
<span>
|
|
||||||
<el-link
|
|
||||||
:underline="false"
|
|
||||||
href="https://open.tntlinking.com/communityTreaty"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Copyright © 2025 湖北天天数链技术有限公司 本系统软件源代码许可来源于
|
|
||||||
天天开源软件（社区版）许可协议 https://open.tntlinking.com/communityTreaty
|
|
||||||
</el-link>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {computed, getCurrentInstance, onMounted, ref, watch, nextTick} from 'vue';
|
import {computed, getCurrentInstance, onMounted, ref, watch, nextTick} from 'vue';
|
||||||
import settings from '@/settings';
|
import settings from '@/settings';
|
||||||
@@ -547,7 +548,6 @@ if (loginForm.value.username) {
|
|||||||
getTenantList(loginForm.value.username);
|
getTenantList(loginForm.value.username);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -557,164 +557,384 @@ html, body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login {
|
.login-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
background: #f8f9fa;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding-bottom: 100px; /* 为底部固定footer留出空间 */
|
overflow: hidden;
|
||||||
//background-image: url("../assets/images/login-background.jpg");
|
|
||||||
background-size: cover;
|
|
||||||
}
|
}
|
||||||
.title {
|
.brand-panel {
|
||||||
margin: 10px auto 15px auto;
|
position: relative;
|
||||||
text-align: center;
|
flex: 0 0 55%;
|
||||||
color: #000;
|
|
||||||
font-family: 'Microsoft Yahei,STHeiti,Simsun,STSong,Helvetica Neue,Helvetica,Arial,sans-serif';
|
|
||||||
}
|
|
||||||
.label{
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-options {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
padding: 60px 80px;
|
||||||
margin: 8px 0 10px 0;
|
overflow: hidden;
|
||||||
width: 100%; /* 确保容器占满宽度 */
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
.brand-bg {
|
||||||
.remember-me {
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #0e7490 100%);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.orb {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(80px);
|
||||||
|
opacity: 0.35;
|
||||||
|
animation: float 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.orb-1 {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background: #22d3ee;
|
||||||
|
top: -100px;
|
||||||
|
right: -80px;
|
||||||
|
}
|
||||||
|
.orb-2 {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: #6366f1;
|
||||||
|
bottom: -50px;
|
||||||
|
left: -60px;
|
||||||
|
animation-delay: -4s;
|
||||||
|
}
|
||||||
|
.orb-3 {
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
background: #06b6d4;
|
||||||
|
top: 50%;
|
||||||
|
left: 40%;
|
||||||
|
animation-delay: -8s;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
33% { transform: translate(30px, -20px) scale(1.05); }
|
||||||
|
66% { transform: translate(-20px, 15px) scale(0.95); }
|
||||||
|
}
|
||||||
|
.brand-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.brand-logo-img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.brand-title {
|
||||||
|
font-size: 42px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 2px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--text);
|
line-height: 1.2;
|
||||||
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
.brand-subtitle {
|
||||||
.forgot-password {
|
font-size: 20px;
|
||||||
font-size: 14px;
|
font-weight: 300;
|
||||||
color: var(--primary);
|
opacity: 0.85;
|
||||||
cursor: pointer;
|
margin: 8px 0 0 0;
|
||||||
text-align: right; /* 确保文本右对齐 */
|
letter-spacing: 4px;
|
||||||
margin-left: auto; /* 确保元素右对齐 */
|
|
||||||
}
|
}
|
||||||
.footer {
|
.brand-features {
|
||||||
margin-top: 32px;
|
margin-top: 56px;
|
||||||
font-size: 12px;
|
display: flex;
|
||||||
color: var(--text-secondary);
|
flex-direction: column;
|
||||||
}
|
gap: 28px;
|
||||||
|
}
|
||||||
.login-subtitle {
|
.feature-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
transform: translateX(8px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(34, 211, 238, 0.15);
|
||||||
|
color: #22d3ee;
|
||||||
|
svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.feature-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
.feature-label {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.feature-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.brand-footer {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.5;
|
||||||
|
padding-top: 32px;
|
||||||
|
p { margin: 0; }
|
||||||
|
}
|
||||||
|
.login-panel {
|
||||||
|
flex: 0 0 45%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px;
|
||||||
|
background: #f8fafc;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -200px;
|
||||||
|
right: -200px;
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(14, 116, 144, 0.06) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -150px;
|
||||||
|
left: -150px;
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-card {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 48px 40px 36px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 10px 40px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
.login-header {
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
.login-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f172a;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
.login-desc {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--text-secondary);
|
color: #94a3b8;
|
||||||
margin-bottom: 20px;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.login-form {
|
.login-form {
|
||||||
border-radius: 16px;
|
.el-form-item {
|
||||||
box-shadow: 0 4px 12px var(--shadow);
|
margin-bottom: 22px;
|
||||||
border: 1px solid var(--border);
|
}
|
||||||
background: #ffffff;
|
}
|
||||||
|
.field-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #334155;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
:deep(.premium-input .el-input__wrapper) {
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 1.5px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 4px 16px;
|
||||||
|
height: 48px;
|
||||||
|
box-shadow: none;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
&:hover {
|
||||||
|
border-color: #0ea5e9;
|
||||||
|
}
|
||||||
|
&.is-focus {
|
||||||
|
border-color: #0ea5e9;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.premium-input .el-input__inner) {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #0f172a;
|
||||||
|
&::placeholder {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.premium-input .el-input__prefix) {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
:deep(.premium-select .el-select__wrapper) {
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 1.5px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 4px 16px;
|
||||||
|
height: 48px;
|
||||||
|
box-shadow: none;
|
||||||
|
font-size: 15px;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
&:hover {
|
||||||
|
border-color: #0ea5e9;
|
||||||
|
}
|
||||||
|
&.is-focus, &.is-focused {
|
||||||
|
border-color: #0ea5e9;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.password-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #0ea5e9;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
user-select: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
&:hover {
|
||||||
|
color: #0284c7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.switch-item {
|
||||||
|
margin-bottom: 16px !important;
|
||||||
|
}
|
||||||
|
.switch-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
}
|
||||||
padding: 40px;
|
.switch-label {
|
||||||
padding: 25px 25px 5px 25px;
|
font-size: 14px;
|
||||||
text-align: center;
|
color: #475569;
|
||||||
.el-input {
|
font-weight: 500;
|
||||||
height: 50px; // 修改输入框高度
|
}
|
||||||
input {
|
.login-btn {
|
||||||
height: 50px; // 修改输入框高度
|
width: 100%;
|
||||||
font-size: 18px; // 修改输入框内文字大小
|
height: 50px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
border: none;
|
||||||
|
background: linear-gradient(135deg, #0ea5e9, #06b6d4);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, #0284c7, #0891b2);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35);
|
||||||
|
&::before {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.input-icon {
|
&:active {
|
||||||
height: 49px; // 调整图标高度以适应输入框高度
|
transform: translateY(0);
|
||||||
width: 14px;
|
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
|
||||||
margin-left: 0px;
|
}
|
||||||
|
.btn-text {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.login-tip {
|
.login-footer-info {
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #bfbfbf;
|
margin-top: 28px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #f1f5f9;
|
||||||
}
|
}
|
||||||
.login-code {
|
.version-info {
|
||||||
width: 33%;
|
|
||||||
height: 50px; // 调整验证码区域高度以适应输入框高度
|
|
||||||
float: right;
|
|
||||||
img {
|
|
||||||
cursor: pointer;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-login-top {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto 10px;
|
|
||||||
.el-image {
|
|
||||||
max-width: 120px;
|
|
||||||
max-height: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-login-footer {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 30px;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
color: #000;
|
|
||||||
font-family: Arial;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 1px;
|
color: #94a3b8;
|
||||||
background-color: #f1f1f1;
|
margin: 0 0 4px 0;
|
||||||
z-index: 100; /* 确保footer在最上层 */
|
}
|
||||||
span {
|
.copyright {
|
||||||
margin: 0 10px;
|
font-size: 12px;
|
||||||
|
color: #cbd5e1;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.brand-panel {
|
||||||
|
flex: 0 0 45%;
|
||||||
|
padding: 40px 40px;
|
||||||
|
}
|
||||||
|
.brand-title {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.login-panel {
|
||||||
|
flex: 0 0 55%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.login-code-img {
|
@media (max-width: 768px) {
|
||||||
height: 50px; // 调整验证码图片高度以适应输入框高度
|
.login-wrapper {
|
||||||
padding-left: 12px;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
:deep(.el-input__wrapper) {
|
.brand-panel {
|
||||||
background-color: #f5f7fa !important;
|
flex: none;
|
||||||
border-color: #e4e7ed !important;
|
min-height: 280px;
|
||||||
border-radius: 10px !important;
|
padding: 40px 32px;
|
||||||
font-size: 18px !important;
|
}
|
||||||
height: 50px !important; // 修改输入框高度
|
.brand-features {
|
||||||
}
|
flex-direction: row;
|
||||||
:deep(.el-button--large) {
|
gap: 12px;
|
||||||
font-size: 20px !important; // 增加按钮内文字大小
|
margin-top: 24px;
|
||||||
height: 50px !important; // 增加按钮高度
|
overflow-x: auto;
|
||||||
padding: 10px 20px !important; // 调整按钮内边距
|
}
|
||||||
border-radius: 10px !important;
|
.feature-item {
|
||||||
}
|
min-width: 180px;
|
||||||
:deep(.el-input__suffix-inner .el-input__icon) {
|
padding: 12px;
|
||||||
width: 24px !important; // 调整图标的宽度
|
}
|
||||||
height: 24px !important; // 调整图标的高度
|
.brand-footer {
|
||||||
font-size: 24px !important; // 调整图标的字体大小
|
display: none;
|
||||||
color: #606266 !important; // 确保图标颜色可见
|
}
|
||||||
cursor: pointer !important; // 确保鼠标悬停时显示指针
|
.login-panel {
|
||||||
}
|
flex: 1;
|
||||||
|
padding: 24px 20px 40px;
|
||||||
:deep(.password-toggle) {
|
}
|
||||||
line-height: 50px !important; // 确保文字垂直居中
|
.login-card {
|
||||||
user-select: none; // 禁止选中文字
|
padding: 32px 24px 24px;
|
||||||
}
|
border-radius: 16px;
|
||||||
:deep(.el-select__wrapper) {
|
box-shadow: none;
|
||||||
background-color: #f5f7fa !important;
|
}
|
||||||
border-color: #e4e7ed !important;
|
|
||||||
border-radius: 10px !important;
|
|
||||||
font-size: 18px !important;
|
|
||||||
height: 50px !important; // 修改输入框高度
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-form-item) {
|
|
||||||
margin-bottom: 15px !important; // 减小输入框之间的距离
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user