|
|
@@ -197,8 +197,93 @@
|
|
|
font-size: 20px;
|
|
|
color: rgba(0, 0, 0, 0.4);
|
|
|
}
|
|
|
+ .login-content .login-info{
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ }
|
|
|
+ .login-content .login-info a{
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
+ }
|
|
|
+ .login-content .login-btn{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .login-content .login-btn button{
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ height: 60px;
|
|
|
+ background-color: #ff6900;
|
|
|
+ width: 100%;
|
|
|
+ border: 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ opacity: .5;
|
|
|
+ }
|
|
|
+ .login-content .login-btn button:hover{
|
|
|
+ opacity: .4;
|
|
|
+ }
|
|
|
+ .login-content .login-ctr{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .login-content .login-ctr span{
|
|
|
+ font-size: 17px;
|
|
|
+ color: #ff5c00;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .login-content .login-ctr span:last-child{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .login-content .login-other{
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .login-content .login-other p{
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #aaa;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .login-content .login-other li{
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #aaa;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 46px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 10px;
|
|
|
+ color: #f9f9f9;
|
|
|
+ }
|
|
|
+ .login-content .login-other li .iconfont{
|
|
|
+ font-size: 35px;
|
|
|
+ }
|
|
|
+ .login-content .login-other li:nth-child(1){
|
|
|
+ background-color: #1989fa;
|
|
|
+ }
|
|
|
+ .login-content .login-other li:nth-child(2){
|
|
|
+ background-color: #50B674;
|
|
|
+ }
|
|
|
+ .login-content .login-other li:nth-child(3){
|
|
|
+ background-color: #18acfc;
|
|
|
+ }
|
|
|
+ /* .login-content .login-other li:nth-child(3) .iconfont{
|
|
|
+ font-size: 12px;
|
|
|
+ } */
|
|
|
+ .login-content .login-other li:nth-child(4){
|
|
|
+ background-color: #ea5d5c;
|
|
|
+ }
|
|
|
/* 登录框 end */
|
|
|
/* 登录内容区域 end */
|
|
|
+
|
|
|
+ .footer{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -252,12 +337,43 @@
|
|
|
<i class="iconfont icon-yincangbukejian"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="login-info"></div>
|
|
|
- <div class="login-btn"></div>
|
|
|
- <div class="login-ctr"></div>
|
|
|
- <div class="login-other"></div>
|
|
|
+ <div class="login-info">
|
|
|
+ <input type="checkbox">
|
|
|
+ <span>
|
|
|
+ 已阅读并同意小米账号
|
|
|
+ <a href="#">使用协议</a>
|
|
|
+ 和
|
|
|
+ <a href="#">隐私政策</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="login-btn">
|
|
|
+ <button>登录</button>
|
|
|
+ </div>
|
|
|
+ <div class="login-ctr clearfix">
|
|
|
+ <span>忘记密码?</span>
|
|
|
+ <span>手机号登录</span>
|
|
|
+ </div>
|
|
|
+ <div class="login-other">
|
|
|
+ <p>其他方式登录</p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-alipay"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-wechat"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-qq"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-weibo"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <p>小米公司版权所有-京ICP备10046444-<u>京公网安备11010802020134号</u>-京ICP证110507号</p>
|
|
|
</div>
|
|
|
- <div class="footer"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
