登录页面

CallCenterWeb.UI/css/login.css

@@ -6,30 +6,15 @@ html {
 	position: relative;
 	height: 100%;
 }
-.signin_bg {
-	/*position: absolute;
-	left: 0;
-	top: 0;*/
-
-}
-.signin .col-md-5{
+/* .signin .col-md-5{
 	width: 50%;
-}
-.signin_bg .signin_bg_left{
-	position: absolute;
-	left: 0;
-	top: 0;
-	background: url(../img/login_bg.png) no-repeat left top;
+} */
+.container{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: url(../img/login_background.png) no-repeat left top;
 	background-size: 100% 100%;
-	height: 100%;	
-}
-.signin_bg_mask{
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 50%;
-	/*background-color: rgba(0,0,0,.5);*/
-	height: 100%;	
 }
 
 .signin_left {
@@ -65,13 +50,11 @@ html {
 }
 
 .signin_right{
-	width: 100%;
-}
-.signin_right .signin_panel{
-	float: right;
-	text-align: center;
-	margin-top: 27.21%;
-	width: 65%;
+	position: absolute;
+	top: 18%;
+	right: 8.1%;
+	width: 610px;
+	height: 600px;
 }
 /*.signin_right .signin_panel h1{
 	font-size: 24px;
@@ -79,29 +62,68 @@ html {
 	margin: 0 0 19.46% 0;
 	font-weight: 600;
 }*/
-.logo_title span{
-	font-size: 24px;
+
+.signin_panel .logo_title{
+	margin-left: 25px;
+	width: 100%;
+	font-size: 0;
+}
+
+/* .logo_title>img,.logo_title span{
+} */
+
+.logo_img{
+	display: inline-block;
+	vertical-align: top;
+}
+
+.logo_content{
+	display: inline-block;
+	vertical-align: top;
+}
+
+.logo_text span{
+	font-size: 45px;
+	line-height: 45px;
 	font-family: '华文仿宋';
 	font-weight: 600;
 	margin-left: 15px;
-	
+	color: rgb(255, 255, 255);
 }
-.logo_title>img,.logo_title span{
-	vertical-align: middle;
+
+.logo_footer{
+	margin-left: 15px;
+	/* height: 10px; */
+	/* border: 1px solid rgb(255, 255, 255); */
+	width: 470px;
+	height: 15px;
+	margin-top: -3px;
+	background: url(../img/logo_footer.png) no-repeat;
+	background-position: -95px -145px;
 }
-.logo_title{
-		margin: 0 0 19.46% 0;
+
+/* .logo_footer > img {
+	background-position: 0 -20px;
+} */
+
+.sigin_wrapper{
+	margin-top: 5.1%;
+	width: 610px;
+	height: 480px;
+	padding: 60px 65px 0 65px;
+	background: rgb(255, 255, 255);
+	border-radius: 30px;
 }
 .signin_panel .signin_user,
 .signin_panel .signin_password,
 .signin_panel .signin_seat{
-	margin-bottom: 11px;
 	position: relative;
+	margin-bottom: 25px;
 }
 .signin_icons{
 	position: absolute;
-	left: 13.5px;
-	top: 11.5px;
+	left: 20px;
+	top: 19px;
 	width: 17px;
 	height: 17px;
 	display: inline-block;
@@ -114,11 +136,23 @@ html {
 	background-position: 0 -16px;
 	height: 15px;
 }
+
+.keyboard_icons{
+	position: absolute;
+	right: 20px;
+	top: 15px;
+	width: 40px;
+	height: 25px;
+	display: inline-block;
+	background: url(../img/keyboard_icons.png) left top no-repeat;
+}
+
 .signin_panel .form-control{
-	padding-left: 44px;
-	height: 40px;
-	line-height: 40px;
+	padding-left: 57px;
+	height: 55px;
+	line-height: 55px;
 	font-size: 16px;
+	font-family: SourceHanS;
 	color: #000;
 }
 
@@ -186,17 +220,17 @@ html {
 
 
 .btns{
-    width: 100%;
+    width: 470px;
     background-color: #d1141b;
     color: #fff;
-    height: 40px;
-    line-height: 40px;
+    height: 60px;
+    line-height: 60px;
     text-align: center;
     border: 0;
     outline: none;
-    border-radius: 40px;
+    border-radius: 10px;
     cursor: pointer;
-    margin-top: 40px;
+    margin-top: 55px;
     margin-bottom: 12px;
     font-size: 16px;
     letter-spacing: 6px;
@@ -217,18 +251,6 @@ html {
     color: #1582b4;
 }
 
-.signfooter {
-   margin-top: 60%;
-}
-
-.signfooter p{
-    height: 14px;
-    color: #a1a1a1;
-    line-height: 14px;
-    margin-bottom: 0;
-    font-family: 'Calibri';
-}
-
 ._success{
     border-color: #c91e32!important;
 }
@@ -263,23 +285,11 @@ input:-ms-input-placeholder, textarea:-ms-input-placeholder {
 	
 }
 @media only screen and (max-width: 1366px) {
-	body.signin{
-		height: 100%;
-	}
-	div.signfooter{
-		margin-top: 20%;
-	}
 }
 @media only screen and (max-width: 1200px) {
 	
 }
 @media only screen and (max-width: 992px) {
-	body.signin .col-md-5 {
-    	width: 100%;
-	}
-	div.signin_bg_mask {
-    	width: 100%;
-	}
 	div.signin_left{
 		display: none;
 	}
@@ -287,31 +297,13 @@ input:-ms-input-placeholder, textarea:-ms-input-placeholder {
 		display: none;
 	}
 	div.signin_right .signin_panel {
-	    margin: 10% auto 0 auto;
+	    /* margin: 10% auto 0 auto; */
 	    float: none;
-	    color: #fff;
-    }
-    .rpassword label,.fpassword a,div.fregister span,div.signfooter p{
-    	color: #fff;
+	    /* color: #fff; */
     }
-    div.signfooter{
-		margin-top: 20%;
-	}
 }
 @media only screen and (max-width: 768px) {
-	div.signin .col-md-5 {
-    	width: 100%;
-	}
-	div.signin_bg_mask {
-    	width: 100%;
-	}
 	div.signin_left{
 		display: none;
 	}
-	div.signin_right .signin_panel {
-	    margin-top: 10%;
-    }
-    div.signfooter{
-		margin-top: 20%;
-	}
 }

CallCenterWeb.UI/login.html

@@ -14,90 +14,60 @@
     <!--[if lt IE 9]>
     <meta http-equiv="refresh" content="0;ie.html" />
     <![endif]-->
-    <style>
-    	.signin_left{
-    		position: relative;
-    	}
-    	.left_word{
-    		position: absolute;
-    		height: 100%;
-    		width: 50%;
-    	}
-    	.left_word>div{
-		    position: absolute;
-		    right: 0;
-		    bottom: 23%
-    	}
-    	
-    	.left_word>div h2 + p{
-			margin-top: 22.163%;
-			margin-bottom: 22.163%;
-			font-size: 18px;
-		}
-		.signin_left h3{
-			font-size: 24px;
-			color: #006967;
-			margin-bottom: 2.5%;
-		}
-		.signin_left h3 + p{
-			line-height: 30px;
-			font-size: 18px;
-		}
-    	
-    </style>
-    
     
 </head>
 
 <body class="signin">
-    <div class="signin_bg row">
-        <div class="signin_bg_left col-md-5"></div>
-        <div class="signin_bg_mask"></div>
-           <div class="left_word">
-           	<!--<div>
-           		  	 <h3>用心做，更出色</h3>
-                <p>致力于临床实验技术的普及和提高，为人类健康服务</p>
-           	</div>-->
-           </div>
-    </div>
     <div class="container">
         <div class="row clearfix">
-            <div class="signin_left col-md-5"></div>
+            <!-- <div class="signin_left col-md-5"></div> -->
             <div class="signin_right col-md-5">
                 <div class="signin_panel">
                 	<div class="logo_title">
-                		<img src="img/snLogo.png" alt=""width="50px" height="50px"/>
-                		<span>双汇客服中心管理系统</span>
-                	</div>
-                    <div class="signin_user">
-                        <i class="signin_icons"></i>
-                        <input class="form-control" type="text" placeholder="请输入您的管理账号" id="user" autofocus autocomplete="off">
-                        <i class="ts user_ts"></i>
-                    </div>
-                    <div class="signin_seat">
-                        <i class="signin_icons"></i>
-                        <input class="form-control" type="text" placeholder="请输入分机号" id="userSeat" autocomplete="off">
-                    </div>
-                    <div class="signin_password">
-                        <i class="signin_icons"></i>
-                        <input class="form-control" type="password" placeholder="请输入您的密码" id="password" autocomplete="off">
-                        <i class="ts password_ts"></i>
+                        <div class="logo_img">
+                            <img src="img/logo_shuanghui.png" alt="" width="85px" height="60px"/>
+                        </div>
+                        <div class="logo_content">
+                            <div class="logo_text">
+                                <span>双汇客服中心管理系统</span>
+                            </div>
+                            <div class="logo_footer">
+                                <!-- <img src="img/logo_footer.png" alt="" width="470px" height="20px" /> -->
+                            </div>
+                        </div>
                     </div>
-                    <div class="clearfix singin_rpassword">
-                        <div class="rpassword">
-                            <label for="rpassword">
-                                <input type="checkbox" id="rpassword">
-                                <span class="checkbox_icon"></span>
-                                	记住密码
-                            </label>
+                    <div class="sigin_wrapper">
+                        <div class="signin_user">
+                            <i class="signin_icons"></i>
+                            <input class="form-control" type="text" placeholder="请输入您的管理账号" id="user" autofocus autocomplete="off">
+                            <i class="ts user_ts"></i>
+                        </div>
+                        <div class="signin_seat">
+                            <i class="signin_icons"></i>
+                            <input class="form-control" type="text" placeholder="请输入分机号" id="userSeat" autocomplete="off">
+                        </div>
+                        <div class="signin_password">
+                            <i class="signin_icons"></i>
+                            <i class="keyboard_icons"></i>
+                            <input class="form-control" type="password" placeholder="请输入您的密码" id="password" autocomplete="off">
+                            <i class="ts password_ts"></i>
                         </div>
+                        <div class="clearfix singin_rpassword">
+                            <div class="rpassword">
+                                <label for="rpassword">
+                                    <input type="checkbox" id="rpassword">
+                                    <span class="checkbox_icon"></span>
+                                        记住密码
+                                </label>
+                            </div>
+                        </div>
+                        <div class="btns" type="button">登录</div>
                     </div>
-                    <div class="btns" type="button">登录</div>
-                    <div class="signfooter">
+                    <!-- <div class="signfooter">
                         <a href="ExeWork/LeCallCenterSetup.exe">下载客户端|</a>
                         <a href="ExeWork/Microsoft.NET4.5.2.exe">下载安装环境|</a>
                         <a href="ExeWork/vc_redist.x86.exe">安装包异常补充包</a>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>