调整背景和表单位置

08893785 · zhangzhongjie · 6fce115d · 08893785 · 6fce115d · 08893785
Commit 08893785 authored Dec 05, 2019 by zhangzhongjie
Show whitespace changes
Inline Side-by-side

Showing with 38 additions and 5 deletions

login.css css/login.css +33 -4

log_bg.png img/log_bg.png +0 -0

login.html login.html +5 -1

No files found.
--- a/css/login.css
+++ b/css/login.css
@@ -25,8 +25,9 @@ ul{list-style: none;}
    bottom: 0;
    top: 0;
    z-index: -2;
+    overflow: hidden;
    background-image: url('../img/log_bg.png');
-    background-size:100%;
+    background-size:100% 100%;
    background-position: center;
    background-repeat: no-repeat;
 }
@@ -34,12 +35,13 @@ ul{list-style: none;}
    width:100%;
    height: 100%;
 } */
-.log-box{
+/* 登录框 */
+/* .log-box{
    background: #ffffff;
    position: absolute;
-    left:100px;
+    right:100px;
    top:100px;
-}
+} */
 .log-box::after{
    content: '';
    display: block;
@@ -50,6 +52,13 @@ ul{list-style: none;}
    background: #ffffff;
    padding:50px;
    border-radius: 20px;
+    right:254px;
+    top:239px;
+    -webkit-box-shadow: 0px 4px 9px #555;
+    -ms-box-shadow: 0px 4px 9px #555;
+    -o-box-shadow: 0px 4px 9px #555;
+    -moz-box-shadow: 0px 4px 9px #555;
+    box-shadow: 0px 4px 9px #555;
 }
 .log-box .log-col{
    -webkit-box-shadow:0px 2px 2px #f2f1f7;
@@ -121,3 +130,22 @@ ul{list-style: none;}
    line-height: 40px;
    margin-bottom:0 ;
 }
+/* 背景logo */
+.lg-bg .logo-pro{
+    position: absolute;
+    left: 60px;
+    top: 60px;
+}
+.lg-bg .logo-pro div:first-child{
+    font-size: 30px;
+    margin-bottom: 12px;
+}
+.lg-bg .logo-pro div:last-child{
+    font-size: 14px;
+}
+@media screen and (max-width: 799px){
+    .log-box .form{
+        right:0;
+        top:0;
+    }
+}
\ No newline at end of file
--- a/img/log_bg.png
+++ b/img/log_bg.png
--- a/login.html
+++ b/login.html
@@ -10,10 +10,14 @@
 <body>  
    <div class="lg-bg">
        <!-- <img src="./img/log_bg.png" alt=""> -->
+        <div class="logo-pro bailun-color">
+            <div>PRO产品库</div>
+            <div>PRO PRODUCT LIBRARY</div>
+        </div>
    </div>
    <div class="log-box">
        <div class="form">
-                <div class="pro bailun-color">百伦ERP</div>
+                <div class="pro bailun-color">欢迎</div>
                <div class="welcome bailun-color">Welcome back</div>
            <form>
                <div class="uname log-col">