|
|
@@ -37,13 +37,110 @@
|
|
|
height: 100vh;
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
+ .login-content .nav{
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .login-content .nav .nav-left{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .login-content .nav .nav-left img{
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .login-content .nav .nav-left span{
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
+ position: relative;
|
|
|
+ top:-10px;
|
|
|
+ }
|
|
|
+ .login-content .nav .nav-right{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .login-content .nav-right li{
|
|
|
+ float: left;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #838383;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .login-content .nav-right ul > li:hover{
|
|
|
+ color: #ff5c00;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .login-content .nav-right .change-lang{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .login-content .change-lang:hover .lang-list{
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ }
|
|
|
+ .login-content .nav-right .change-lang::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 5px solid #838383;
|
|
|
+ border-right: 5px solid transparent;
|
|
|
+ border-left: 5px solid transparent;
|
|
|
+ border-bottom: 5px solid transparent;
|
|
|
+ position: absolute;
|
|
|
+ top: 18px;
|
|
|
+ right: -13px;
|
|
|
+ }
|
|
|
+ .login-content .change-lang li{
|
|
|
+ float: none;
|
|
|
+ }
|
|
|
+ .login-content .change-lang .lang-list{
|
|
|
+ background-color: #fff;
|
|
|
+ width: 150px;
|
|
|
+ height: 210px;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: absolute;
|
|
|
+ top: 45px;
|
|
|
+ right: 0;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .login-content .lang-list li{
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
/* 登录内容区域 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container clearfix">
|
|
|
<div class="img-side"></div>
|
|
|
- <div class="login-content"></div>
|
|
|
+ <div class="login-content">
|
|
|
+ <div class="nav clearfix">
|
|
|
+ <div class="nav-left">
|
|
|
+ <img src="./img/xiaomi/logo-mi2.png" alt="logo">
|
|
|
+ <span>小米账号</span>
|
|
|
+ </div>
|
|
|
+ <div class="nav-right">
|
|
|
+ <ul>
|
|
|
+ <li>用户协议</li>
|
|
|
+ <li>隐私政策</li>
|
|
|
+ <li>帮助中心</li>
|
|
|
+ <li>|</li>
|
|
|
+ <li class="change-lang">
|
|
|
+ 简体中文
|
|
|
+ <div class="lang-list">
|
|
|
+ <ul>
|
|
|
+ <li>中文(繁體)</li>
|
|
|
+ <li>English</li>
|
|
|
+ <li>བོད་སྐད་</li>
|
|
|
+ <li>ئۇيغۇرچە</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="login-box"></div>
|
|
|
+ <div class="footer"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
