登录样式更改

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "thmz",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

src/main/resources/application-dev.yml

@@ -36,9 +36,9 @@ spring:
       max-request-size: 1000MB
   datasource:
     his:
-      jdbc-url: "jdbc:sqlserver://172.16.32.179:1433;databaseName=thxyhisdb"
+      jdbc-url: "jdbc:sqlserver://localhost:1433;databaseName=demohisdb"
       username: "sa"
-      password:
+      password: "sqlserver9527"
       driver-class-name: "com.microsoft.sqlserver.jdbc.SQLServerDriver"
     durid:
       #type: com.alibaba.druid.pool.DruidDataSource

src/main/resources/static/css/bootstrap/css/bootstrap.css

@@ -1608,8 +1608,8 @@ pre code {
   margin-left: auto;
 }
 .row {
-  margin-right: -15px;
-  margin-left: -15px;
+  /*margin-right: -15px;*/
+  /*margin-left: -15px;*/
 }
 .row-no-gutters {
   margin-right: 0;
@@ -2739,6 +2739,8 @@ textarea.form-control {
 }
 .form-group {
   margin-bottom: 15px;
+  display: table;
+  border-collapse: separate;
 }
 .radio,
 .checkbox {

src/main/resources/static/css/font-awesome/css/style.css

@@ -1,5 +1,7 @@
 
 body {
+	height: 100%;
+	width: 100%;
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     font-weight: 300;
@@ -82,9 +84,159 @@ img { max-width: 100%; }
 /***** Top content *****/
 
 .inner-bg {
-    padding: 100px 0 170px 0;
+    /*padding: 100px 0 170px 0;*/
+	height: 100%;
+	width: 100%;
+}
+
+.top-area{
+	width: 100%;
+	height: 30%;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 32px;
+	color: #f7f7f7;
+	font-weight: 500;
 }
 
+.top-area-logo{
+	width: 300px;
+	height: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 20px;
+	left: 5px;
+	color: #FFFFFF;
+
+	.logo-text{
+		/*font-weight: 500;*/
+		font-size: 32px;
+		color: #f7f7f7;
+		text-shadow: 1px 1px 2px rgb(233, 233, 233);
+	}
+
+}
+
+.title-area{
+
+}
+
+.center-area {
+	width: 75%;
+	height: 60%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #f7f7f7;
+	position: absolute;
+	left: 50%;
+	top: 60%;
+	transform: translate(-50%, -50%);
+	padding: 0 10px;
+
+	.center-area-left {
+		width: 49.5%;
+		height: 75%;
+		border-right: 2px solid #eaeaea;
+		background: url(../../../images/login/login_banner_ele.png) no-repeat;
+		/*background: url() no-repeat;*/
+
+	// background-color: #409eff;
+	}
+	.center-area-right {
+		width: 49.5%;
+		height: 90%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.area-right-shadow {
+			width: 70px;
+			height: 440px;
+		// background-color: aquamarine;
+			.shadow-img {
+				width: 100%;
+				height: 100%;
+				background: url(../../../images/login/login_shadow.png);
+				background-size: 100% 100%;
+			}
+		}
+
+		.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);
+
+			h1 {
+				margin-top: 65px;
+				text-align: center;
+				color: #4098de;
+				font-size: 1.5em;
+				font-weight: bold;
+			}
+
+			.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;
+				}
+			}
+		}
+	}
+}
+
+.top-content {
+	height: 100%;
+	width: 100%;
+}
+
+
 .top-content .text {
 	color: #fff;
 }
@@ -134,8 +286,9 @@ img { max-width: 100%; }
 }
 
 .form-bottom {
-	padding: 25px 25px 30px 25px;
-	background: #eee;
+	padding: 40px;
+	padding-bottom: 20px;
+	/*background: #eee;*/
 	-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
 	text-align: left;
 }
@@ -173,7 +326,9 @@ img { max-width: 100%; }
 
 @media (max-width: 767px) {
 	
-	.inner-bg { padding: 60px 0 110px 0; }
+	.inner-bg {
+		padding: 60px 0 110px 0;
+	}
 
 }
 

src/main/resources/static/js/login.js

@@ -1,6 +1,13 @@
 var showOrHideFlag = true;
 $(function (){
-    $.backstretch("../../thmz/images/backgrounds/back3.jpg");
+    $.backstretch("../../thmz/images/login/bg.png");
+    $("body").height($(window).height());
+    $("body").width($(window).width());
+    $(window).resize(function () {
+        $("body").height($(window).height());
+        $("body").width($(window).width());
+    });
+
     $('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
     	$(this).removeClass('input-error');
     });

src/main/resources/templates/login.html

@@ -39,45 +39,38 @@
 <body>
 
 <!-- Top content -->
-<div class="top-content" style="margin-top: -100px;">
-
+<div class="top-content" style="margin-top: 0px;">
     <div class="inner-bg">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-8 col-sm-offset-2 text">
-                    <!--<h1><strong>长沙泰和医院</strong>门诊管理系统</h1>-->
-                    <h1><strong>云HIS</strong></h1>
-                    <div class="description">
-<!--                        <p>-->
-<!--                            长沙泰和医院是一家省级直属三级综合学科医院，医保/农合定点，全国诚信标杆医院-->
-<!--                            链接至<a href="http://192.168.200.4/"><strong>医院首页</strong></a>，祝您工作愉快-->
-<!--                        </p>-->
-                    </div>
+<!--        <div class="container">-->
+            <div class="top-area">
+                <div class="top-area-logo">
+                    <img  src="../../thmz/images/login/logo.png" style="width: 40px; height: 40px;margin-right: 20px">
+                    <div class="logo-text">江科医疗</div>
                 </div>
+                <div class="title-area">沭阳铭和医院医疗信息管理平台</div>
             </div>
-            <div class="row">
-                <div class="col-sm-6 col-sm-offset-3 form-box" style="margin-top: 0px;">
-                    <div class="form-top" style="padding: 0 25px 0px 25px;">
-                        <div class="form-top-left">
-                            <h3>云HIS</h3>
-                            <p>请输入您的工号和密码进行登录:</p>
-                        </div>
-                        <div class="form-top-right">
-                            <i class="fa fa-key"></i>
-                        </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>
                     <div class="form-bottom">
                         <form role="form"  method="post" class="login-form">
-                            <div class="form-group">
+                            <div class="input-group" style="margin-bottom: 15px">
+                                <span  class="input-group-addon" style="border: 3px solid #ddd;border-right:none;"><i class="fa fa-user"></i></span>
                                 <label class="sr-only" for="form-username">工号</label>
-                                <input type="text" name="form-username" autocomplete="off"   placeholder="工号" class="form-username form-control" id="form-username">
-                            </div>
-                            <div class="input-group " style="margin-bottom: 5px">
+                                <input type="text" name="form-username" autocomplete="off" placeholder="工号" class="form-username form-control" id="form-username">
+                             </div>
+                            <div class="input-group" style="margin-bottom: 15px">
+                                <span class="input-group-addon" style="border: 3px solid #ddd;border-right:none;"><i class="fa fa-lock"></i></span>
                                 <label class="sr-only" >密码</label>
-                               <input type="text"  autocomplete="off"  name="form-password" placeholder="密码" class="form-username form-control  hide-password" id="form-password">
+                                <input type="text"  autocomplete="off"  name="form-password" placeholder="密码" class="form-username form-control  hide-password" id="form-password">
                                 <span id="showOrHidePasswordId" class="input-group-addon" onclick="showOrHidePassword()" style="border: 3px solid #ddd;border-left:none;cursor: pointer"><i class="fa fa-eye"></i></span>
                             </div>
-                            <button type="button" id="loginButton" class="btn">登录!</button>
+                            <button style="background-color: #409EFF" type="button" id="loginButton" class="btn">登录</button>
                         </form>
                     </div>
                     <div class="alert alert-danger alert-dismissable hide" role="alert">
@@ -95,6 +88,10 @@
                 </div>
             </div>
         </div>
+                <div class="col-sm-6 col-sm-offset-3 form-box" style="margin-top: 0px;">
+
+            </div>
+<!--        </div>-->
     </div>
 </div>
 </body>