|
|
@@ -4,6 +4,7 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5060986_7zh4h7ev0jm.css">
|
|
|
<style>
|
|
|
/* css reset */
|
|
|
*{
|
|
|
@@ -113,7 +114,9 @@
|
|
|
height: 570px;
|
|
|
padding: 40px 45px;
|
|
|
box-sizing: border-box;
|
|
|
- background-color: #999;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
position: absolute;
|
|
|
top:50%;
|
|
|
left: 50%;
|
|
|
@@ -138,6 +141,30 @@
|
|
|
background-color: #ff5c00;
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
+ .login-content .qr-content{
|
|
|
+ opacity: .5;
|
|
|
+ }
|
|
|
+ .login-content .qr-content:hover{
|
|
|
+ opacity: 1;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .login-content .qr-bg{
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top:64px solid #ff5c00;
|
|
|
+ border-left:64px solid transparent;
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .login-content .qr-img{
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ }
|
|
|
+ .login-content .qr-img img{
|
|
|
+ width: 45px;
|
|
|
+ }
|
|
|
/* 登录框 end */
|
|
|
/* 登录内容区域 end */
|
|
|
</style>
|
|
|
@@ -177,8 +204,16 @@
|
|
|
<div class="tab-item active">登录</div>
|
|
|
<div class="tab-item ">注册</div>
|
|
|
</div>
|
|
|
+ <div class="qr-content">
|
|
|
+ <div class="qr-bg"></div>
|
|
|
+ <div class="qr-img">
|
|
|
+ <img src="./img/xiaomi/qr-code.png" alt="qrcode">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="login-inp">
|
|
|
+ <i class="iconfont icon-AIduihua"></i>
|
|
|
</div>
|
|
|
- <div class="login-inp"></div>
|
|
|
<div class="login-info"></div>
|
|
|
<div class="login-btn"></div>
|
|
|
<div class="login-ctr"></div>
|
