|
|
@@ -1,60 +1,81 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <div class="box">
|
|
|
- <h1>{{ systemTitle }}</h1>
|
|
|
- <el-form class="form">
|
|
|
- <el-input
|
|
|
- v-model="form.codeRs"
|
|
|
- maxlength="50"
|
|
|
- autocomplete="off"
|
|
|
- placeholder="工号"
|
|
|
- size="large"
|
|
|
- @keyup.enter="submit"
|
|
|
- >
|
|
|
- <template #prepend>
|
|
|
- <i class="sfont system-xingmingyonghumingnicheng"></i>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- <el-input
|
|
|
- :class="showPwd ? '' : 'security'"
|
|
|
- ref="password"
|
|
|
- v-model="form.password"
|
|
|
- autocomplete="off"
|
|
|
- maxlength="50"
|
|
|
- placeholder="密码（默认密码为：123456）"
|
|
|
- size="large"
|
|
|
- @keyup.enter="submit"
|
|
|
- >
|
|
|
- <template #prepend>
|
|
|
- <i class="sfont system-mima"></i>
|
|
|
- </template>
|
|
|
- <template #append>
|
|
|
- <el-icon @click="showPwd = !showPwd">
|
|
|
- <View v-if="showPwd" />
|
|
|
- <Hide v-else />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- <div style="margin-bottom: 10px; text-align: right">
|
|
|
- <el-button link type="primary" @click="clickForgotPassword"
|
|
|
- >忘记密码?
|
|
|
- </el-button>
|
|
|
+ <div class="top-area">
|
|
|
+ <div class="logo-box">
|
|
|
+ <div class="logo-img">
|
|
|
+ <img
|
|
|
+ src="../../assets/login/logo.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 40px; height: 40px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="logo-text">江科医疗</div>
|
|
|
+ </div>
|
|
|
+ <div class="title-area">沭阳铭和医院医疗信息管理平台</div>
|
|
|
+ </div>
|
|
|
+ <div class="center-area">
|
|
|
+ <div class="center-area-left"></div>
|
|
|
+ <div class="center-area-right">
|
|
|
+ <div class="area-right-shadow">
|
|
|
+ <div class="shadow-img"></div>
|
|
|
+ </div>
|
|
|
+ <div class="box-input-area">
|
|
|
+ <h1>住院登录</h1>
|
|
|
+ <el-form class="form">
|
|
|
+ <el-input
|
|
|
+ v-model="form.codeRs"
|
|
|
+ maxlength="50"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="工号"
|
|
|
+ size="large"
|
|
|
+ @keyup.enter="submit"
|
|
|
+ >
|
|
|
+ <template #prepend>
|
|
|
+ <i class="sfont system-xingmingyonghumingnicheng"></i>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-input
|
|
|
+ :class="showPwd ? '' : 'security'"
|
|
|
+ ref="password"
|
|
|
+ v-model="form.password"
|
|
|
+ autocomplete="off"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="密码（默认密码为：123456）"
|
|
|
+ size="large"
|
|
|
+ @keyup.enter="submit"
|
|
|
+ >
|
|
|
+ <template #prepend>
|
|
|
+ <i class="sfont system-mima"></i>
|
|
|
+ </template>
|
|
|
+ <template #append>
|
|
|
+ <el-icon class="password-icon" @click="showPwd = !showPwd">
|
|
|
+ <View v-if="showPwd" />
|
|
|
+ <Hide v-else />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <div style="margin-bottom: 10px; text-align: left">
|
|
|
+ <el-button link type="primary" @click="clickForgotPassword"
|
|
|
+ >忘记密码?
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ size="large"
|
|
|
+ style="width: 100%"
|
|
|
+ type="primary"
|
|
|
+ @click="submit"
|
|
|
+ >登录
|
|
|
+ </el-button>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- <div class="hospital-name">
|
|
|
+ {{ SYSTEM_CONFIG.HOSPITAL_NAME }}
|
|
|
+ <i>·</i>
|
|
|
+ <span>
|
|
|
+ {{ SYSTEM_CONFIG.HOSPITAL_CODE }}
|
|
|
+ </span>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
- <el-button
|
|
|
- size="large"
|
|
|
- style="width: 100%"
|
|
|
- type="primary"
|
|
|
- @click="submit"
|
|
|
- >登录
|
|
|
- </el-button>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <div class="hospital-name">
|
|
|
- {{ SYSTEM_CONFIG.HOSPITAL_NAME }}
|
|
|
- <i>·</i>
|
|
|
- <span>
|
|
|
- {{ SYSTEM_CONFIG.HOSPITAL_CODE }}
|
|
|
- </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -145,71 +166,152 @@ onMounted(() => {
|
|
|
position: relative;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
- background-color: #eef0f3;
|
|
|
+ // background-color: #eef0f3;
|
|
|
+ background: url(../../assets/login/bg.png);
|
|
|
+
|
|
|
+ .top-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 30%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #f7f7f7;
|
|
|
+ position: relative;
|
|
|
+ // text-shadow: 1px 1px 2px rgb(233, 233, 233);
|
|
|
+ .logo-box {
|
|
|
+ width: 300px;
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // background-color: antiquewhite;
|
|
|
+ .logo-img {
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // background: url(../../assets/login/logo.png) no-repeat;
|
|
|
+ }
|
|
|
+ .logo-text {
|
|
|
+ // font-weight: bold;
|
|
|
+ text-shadow: 1px 1px 2px rgb(233, 233, 233);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-area {
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .box {
|
|
|
- width: 500px;
|
|
|
+ .center-area {
|
|
|
+ width: 75%;
|
|
|
+ height: 60%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f7f7f7;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
- top: 50%;
|
|
|
- background: white;
|
|
|
- border-radius: 8px;
|
|
|
+ top: 60%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- height: 440px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow:
|
|
|
- 0 6px 20px 5px rgba(152, 152, 152, 0.1),
|
|
|
- 0 16px 24px 2px rgba(117, 117, 117, 0.14);
|
|
|
+ padding: 0 10px;
|
|
|
|
|
|
- h1 {
|
|
|
- margin-top: 80px;
|
|
|
- text-align: center;
|
|
|
+ .center-area-left {
|
|
|
+ width: 49.5%;
|
|
|
+ height: 75%;
|
|
|
+ border-right: 2px solid #eaeaea;
|
|
|
+ background: url(../../assets/login/login_banner_ele.png) no-repeat;
|
|
|
+ // background-color: #409eff;
|
|
|
}
|
|
|
+ .center-area-right {
|
|
|
+ width: 49.5%;
|
|
|
+ height: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .form {
|
|
|
- width: 80%;
|
|
|
- margin: 50px auto 15px;
|
|
|
-
|
|
|
- .el-input {
|
|
|
- margin-bottom: 20px;
|
|
|
+ .area-right-shadow {
|
|
|
+ width: 70px;
|
|
|
+ height: 440px;
|
|
|
+ // background-color: aquamarine;
|
|
|
+ .shadow-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url(../../assets/login/login_shadow.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .password-icon {
|
|
|
- cursor: pointer;
|
|
|
- color: #409eff;
|
|
|
- }
|
|
|
- }
|
|
|
+ .box-input-area {
|
|
|
+ width: 500px;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 70%;
|
|
|
+ // top: 50%;
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ // transform: translate(-50%, -50%);
|
|
|
+ height: 440px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow:
|
|
|
+ 0 6px 20px 5px rgba(152, 152, 152, 0.1),
|
|
|
+ 0 16px 24px 2px rgba(117, 117, 117, 0.14);
|
|
|
|
|
|
- .fixed-top-right {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 10px;
|
|
|
- }
|
|
|
+ h1 {
|
|
|
+ margin-top: 80px;
|
|
|
+ text-align: center;
|
|
|
+ color: #4098de;
|
|
|
+ }
|
|
|
|
|
|
- .hospital-name {
|
|
|
- position: absolute;
|
|
|
- right: 10%;
|
|
|
- bottom: 20px;
|
|
|
- color: rgb(100, 100, 100);
|
|
|
- font-size: 13px;
|
|
|
-
|
|
|
- i {
|
|
|
- margin-left: 4px;
|
|
|
- font-weight: bold;
|
|
|
- color: gray;
|
|
|
- }
|
|
|
+ .form {
|
|
|
+ width: 80%;
|
|
|
+ margin: 50px auto 15px;
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .password-icon {
|
|
|
+ cursor: pointer;
|
|
|
+ // color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fixed-top-right {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hospital-name {
|
|
|
+ position: absolute;
|
|
|
+ right: 10%;
|
|
|
+ bottom: 20px;
|
|
|
+ color: rgb(100, 100, 100);
|
|
|
+ font-size: 13px;
|
|
|
+
|
|
|
+ i {
|
|
|
+ margin-left: 4px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: gray;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- color: rgb(112, 112, 112);
|
|
|
- margin-left: 4px;
|
|
|
- font-size: 10px;
|
|
|
+ span {
|
|
|
+ color: rgb(112, 112, 112);
|
|
|
+ margin-left: 4px;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 750px) {
|
|
|
- .container .box {
|
|
|
+ .container .box-input-area {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
box-shadow: none;
|
