/* pc */ @media screen and (min-width: 1025px) { .mobile-test { display: none; } header { width: 100%; height: 70px; background-color: #212832; font-size: 14px; } .header { position: fixed; width: 100%; height: 70px; background-color: #212832; font-size: 14px; z-index: 9998; } .header-container { max-width: 1200px; top: 0; margin: 0 auto; padding: 0; background-color: #212832; } .header-container a { color: #fff; } .logo { display: block; float: left; width: 201px; height: 35px; margin-top: 16px; } .menu-items { float: left; } .menu-items>li { position: relative; float: left; padding: 0 15px; height: 100%; color: #fff; font-size: 14px; line-height: 70px; position: relative; cursor: pointer; } .menu-items>li h3 { height: 70px; line-height:70px; font-size: 16px; margin: 0; } .menu-items-active { display: block; } .menu-items>li:hover, .menu-items>li.active { background: rgba(114, 150, 196, 0.1); } .menu-items>li:hover h3 a, .menu-items>.active h3 a { color: #2C8AFF; } .menu-items>li:hover::after, .menu-items>.active::after { content: ''; width: 100%; height: 2px; position: absolute; top: 0; left: 0; background-color: #2C8AFF; } /* login and register */ .contact-and-login { position: relative; float: right; margin-left: 17px; height: 100%; font-size: 14px; } .nologin { float: left; height: 67px; color: #fff; } .contact-and-login a:hover { color: #fff; } .loginbtn, .regist { display: inline-block; width: 70px; height: 30px; margin: 20px 5px; text-align: center; line-height: 30px; border-radius: 4px; } .loginbtn { background-color: #2C8AFF; } .regist { border: 1px solid #fff; } /* logined */ .logined { float: left; width: 65px; height: 70px; margin-left: 50px; display: flex; justify-content: space-between; align-items: center; } .logined .logo, .logined .logo>img { width: 40px; height: 40px; margin: 0; border-radius: 50%; } .logined .jiantou { margin-top: 10px; border-width: 7px; border-style: solid; border-color: #fff transparent transparent transparent; } .logined-con { display: none; position: absolute; padding: 15px; box-sizing: border-box; top: 70px; left: 0; width: 170px; height: 250px; border-radius: 0 0 3px 3px; background: #212832; color: #fff; line-height: 25px; z-index: 8888; } .logined .name { font-size: 14px; padding: 5px 0; } .logined-con .line { width: 100%; height: 1px; margin: 8px 0; background-color: #414141; } .logined-con .balance>p { font-size: 12px; color: #bfbfbf; } .logined-con .acount>p span { color: #ca1d18; } .logined-con .exit-refresh { display: flex; justify-content: space-between; } } /* moblie */ @media screen and (max-width: 1024px) { .pc-test, .menu-items { display: none; } .menu-items-active, .mobile-test { display: block; margin-top: -1px; } header { width: 100%; height: 70px; z-index: 9999; } header .header-container { position: fixed; width: 100%; background-color: #212832; z-index: 9999; } .header-container a { color: #fff; } header .header-container .logo { display: block; float: left; width: 160px; margin-top: 20px; margin-left: 10px; } header .header-container .logo img { width: 100%; } .header-container .menu-items { width: 100%; height: auto; position: absolute; right: 0; top: 70px; background-color: #22262A; } .menu-items>li { position: relative; clear: both; width: 100%; height: 64px; font-size: 14px; box-sizing: border-box; line-height: 36px; border-bottom: 1px solid rgba(237, 237, 237, .2); position: relative; color: #fff; } .menu-items>li:nth-last-child(1) { border: 0; } .menu-items>li h3 { margin: 0; font-size: 16px; } .menu-items>li a { display: block; height: 64px; line-height: 64px; padding-left: 20px; } .login-and-register, .login-after { height: 32px; line-height: 32px; float: right; margin-top: 20px; color: #fff; } .login-and-register { border-radius: 18px; background-color: #393C40; padding: 0 11px; } .login-and-register>a, .login-and-register>span, .login-after { color: #fff; font-size: 14px; } .login-after>a { color: #fff; font-size: 14px; } .menuBtn { float: right; margin: 25px 15px; height: 20px; width: 20px; background: url(../images/menuBtn.png) no-repeat center; background-size: 100%; } }