登录页修改
This commit is contained in:
parent
af6bf39cab
commit
6a7be0f67d
BIN
src/assets/images/login_left.png
Normal file
BIN
src/assets/images/login_left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 473 KiB |
@ -1,95 +1,93 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginRef" class="login-form" :model="loginForm" :rules="loginRules" :hide-required-asterisk="true">
|
||||
<div class="login-header">
|
||||
<div class="login-logo">
|
||||
<img src="@/assets/images/logo_new.png" alt="系统Logo" />
|
||||
</div>
|
||||
<div class="login-split"></div>
|
||||
<div class="login-title">
|
||||
<h1>{{ oem.appname }}</h1>
|
||||
<div class="login-container">
|
||||
<div class="left_img"></div>
|
||||
<div class="login-form">
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" :hide-required-asterisk="true">
|
||||
<div class="login-header">
|
||||
<div class="login-logo">
|
||||
<img src="@/assets/images/logo_new.png" alt="系统Logo" />
|
||||
</div>
|
||||
<div class="login-split"></div>
|
||||
<div class="login-title">
|
||||
<h1>{{ oem.appname }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab切换容器 -->
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="login-tabs">
|
||||
<!-- 工号登录 Tab -->
|
||||
<el-tab-pane label="账号密码登录" name="first">
|
||||
<el-form-item label="医疗机构" prop="loginParam.loginYLJG" class="custom-select">
|
||||
<el-select v-model="loginForm.loginParam.loginYLJG" placeholder="" style="width: 100%" class="no-border"
|
||||
@change="handleChange">
|
||||
<el-option v-for="item in selectOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户工号" prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="" class="no-border">
|
||||
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="登录密码" prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder=""
|
||||
class="no-border" @keyup.enter="handleLogin">
|
||||
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验 证 码 :" v-if="captchaEnabled">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="" style="width: 53%"
|
||||
class="no-border" @keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<svg-icon icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%;">
|
||||
<el-button :loading="loading" type="primary" class="login-btn" style="width: 100%;"
|
||||
@click.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="扫码登录" name="second">
|
||||
<div class="tab-placeholder">
|
||||
<el-icon class="placeholder-icon">
|
||||
<!-- <Sms /> -->
|
||||
</el-icon>
|
||||
<p>正在加载二维码...</p>
|
||||
<el-button type="success" icon="wechat" class="wechat-login-btn">刷新二维码</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="UKEY登录" name="third">
|
||||
<div class="tab-placeholder">
|
||||
<el-icon class="placeholder-icon">
|
||||
<!-- <Wechat /> -->
|
||||
</el-icon>
|
||||
<p>UKEY登录功能开发中...</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
|
||||
<div class="el-login-footer">
|
||||
<span>版权所有(R){{ oem.copyrightyear }} {{ oem.compay }} <br />
|
||||
电话:{{ oem.phone }} E-mail:{{ oem.Email }} version:{{ oem.version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab切换容器 -->
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="login-tabs">
|
||||
<!-- 工号登录 Tab -->
|
||||
<el-tab-pane label="账号密码登录" name="first">
|
||||
<el-form-item label="医疗机构:" prop="loginParam.loginYLJG" class="custom-select">
|
||||
<el-select v-model="loginForm.loginParam.loginYLJG" placeholder="请选择医疗机构" style="width: 100%"
|
||||
@change="handleChange">
|
||||
<template #prefix>
|
||||
<svg-icon icon-class="international" class="el-input__icon input-icon" />
|
||||
</template>
|
||||
<el-option v-for="item in selectOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户工号:" prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
|
||||
<template #prefix>
|
||||
<svg-icon icon-class="user" class="el-input__icon input-icon" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="登录密码:" prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
|
||||
@keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<svg-icon icon-class="password" class="el-input__icon input-icon" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验 证 码 :" v-if="captchaEnabled">
|
||||
<el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 53%"
|
||||
@keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<svg-icon icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%;">
|
||||
<el-button :loading="loading" size="large" type="primary" class="login-btn" style="width: 100%;"
|
||||
@click.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="扫码登录" name="second">
|
||||
<div class="tab-placeholder">
|
||||
<el-icon class="placeholder-icon">
|
||||
<!-- <Sms /> -->
|
||||
</el-icon>
|
||||
<p>正在加载二维码...</p>
|
||||
<el-button type="success" icon="wechat" class="wechat-login-btn">刷新二维码</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="UKEY登录" name="third">
|
||||
<div class="tab-placeholder">
|
||||
<el-icon class="placeholder-icon">
|
||||
<!-- <Wechat /> -->
|
||||
</el-icon>
|
||||
<p>UKEY登录功能开发中...</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
|
||||
<div class="el-login-footer">
|
||||
<span>版权所有(R){{ oem.copyrightyear }} {{ oem.compay }} 电话:{{ oem.phone }} E-mail:{{ oem.Email }} version:{{
|
||||
oem.version
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -248,43 +246,65 @@ getCode();
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background: #02a5ff;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.login-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
/* 关键1：替换固定百分比宽度为最大宽度+自适应，避免缩放时过度拉伸 */
|
||||
width: clamp(800px, 70%, 1400px);
|
||||
max-width: 1400px;
|
||||
min-width: 800px;
|
||||
height: 80vh;
|
||||
min-height: 500px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
width: 480px;
|
||||
padding: 35px 35px 5px 35px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-input {
|
||||
height: 40px;
|
||||
.left_img {
|
||||
background-image: url(../assets/images/login_left.png);
|
||||
background-size: 100% 100%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
}
|
||||
.login-form {
|
||||
flex: 1;
|
||||
min-width: 350px;
|
||||
height: 100%;
|
||||
padding: clamp(40px, 8%, 100px);
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
.el-form-item:not(:last-child) {
|
||||
border-bottom: 1px solid #ccc
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 0px;
|
||||
.no-border {
|
||||
--el-input-border-color: transparent !important;
|
||||
--el-input-hover-border-color: transparent !important;
|
||||
--el-input-focus-border-color: transparent !important;
|
||||
--el-select-input-border-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.no-border :deep(.el-input__wrapper),
|
||||
.no-border :deep(.el-select__wrapper) {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 40px;
|
||||
float: right;
|
||||
|
||||
img {
|
||||
@ -296,17 +316,23 @@ getCode();
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: linear-gradient(#00d3f9, #00b1f3);
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Logo和标题样式 */
|
||||
@ -314,11 +340,14 @@ getCode();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
/* 缩放时标题区域自适应 */
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.login-logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.login-split {
|
||||
@ -330,28 +359,40 @@ getCode();
|
||||
|
||||
.login-title h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #1989fa;
|
||||
font-size: clamp(18px, 2vw, 24px);
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Tab容器样式（修复冲突） */
|
||||
/* Tab容器样式 */
|
||||
.login-tabs {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: clamp(280px, 70%, 350px);
|
||||
min-height: 280px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1px 10px 10px;
|
||||
background: transparent;
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
width: 33.33% !important;
|
||||
|
||||
&.is-active {
|
||||
border-bottom: 2px solid #00d3f9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-tabs__nav-prev),
|
||||
:deep(.el-tabs__nav-next) {
|
||||
display: none !important; // 隐藏Tab左右箭头
|
||||
@ -363,8 +404,7 @@ getCode();
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
margin-top: 20px;
|
||||
/* 可根据需求调整数值 */
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Tab占位样式 */
|
||||
@ -375,22 +415,20 @@ getCode();
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
color: #666;
|
||||
height: calc(100% - 40px); // 适配Tab容器高度
|
||||
/* 适配Tab容器高度，防止溢出 */
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 48px;
|
||||
font-size: clamp(36px, 8vw, 48px);
|
||||
/* 图标大小自适应 */
|
||||
margin-bottom: 20px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.wechat-login-btn {
|
||||
margin-top: 20px;
|
||||
width: 200px;
|
||||
width: clamp(150px, 40%, 200px);
|
||||
/* 按钮宽度自适应 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏必填项星号 */
|
||||
:deep(.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap .el-form-item__asterisk) {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -237,7 +237,7 @@ const rowHandle = (row) => {
|
||||
{ title: '标本送检', time: row.sendPackTime },
|
||||
{ title: '标本签收', time: row.signInTime },
|
||||
{ title: '上机检验', time: row.operdatetime },
|
||||
{ title: '结果审核', time: row.confirmtime },
|
||||
{ title: '结果审核', time: row.reportTime },
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
</div>
|
||||
<div class="leftMain_middle_right">
|
||||
<div class="leftMain_middle_rightIn">
|
||||
<h3>当日送检样本情况</h3>
|
||||
<h3>当月标本全流程监控情况</h3>
|
||||
<div class="biaoge biaoge_pai">
|
||||
<div class="biaoge_paiIn">
|
||||
<ul>
|
||||
@ -223,6 +223,7 @@ const getEcharts1 = (data: any) => {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
minInterval: 1,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
@ -362,7 +363,8 @@ const getEcharts3 = () => {
|
||||
}],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
||||
name: '单位：个',
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ['none', 'arrow'],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user