.header{ width: 100%; height: 60px; position: fixed; top: 0; left: 0; z-index: 9999; background-color: #2b2c31; } .header_core{ height: 60px; display: flex; align-items: center; justify-content: space-between; } .header_left{ height: 100%; display: flex; align-items: center; } .header_left img{ width: 125px; margin-right: 60px; } .header_left ul{ display: flex; align-items: center; justify-content: space-around; width: 586px; } .header_left ul a{ font-size: 14px; color: #fff; } .header_right{ height: 100%; display: flex; align-items: center; } .header_right input{ width: 100px; height: 30px; background: #6e44e6; border: none; border-radius: 100px; font-size: 14px; color: #ffffff; text-align: center; line-height: 30px; margin-right: 40px; } .header_sign{ margin-right: 16px; height: 22px; line-height: 22px; } .header_sign span{ margin-right: 16px; font-size: 14px; } .header_sign span:first-child { color: #fff; } .header_sign span:last-child{ color: #949494; } .header_phone{ color: #fff; margin-right: 34px; padding-left: 16px; border-left: 1px solid #d2d2d2; font-size: 14PX; } .icon-dianhua{ border: #fff; } .header::after{ content: ''; width: 100%; height: 1px; left: 0; bottom: 0; position: absolute; background: linear-gradient(90deg, #2117a8, #8117f7); } .search{ height: 100px; width: 100%; padding: 15px 0px; background-color: #111; margin-top: 60px; box-sizing: border-box; } .search_bar{ display: flex; align-items: center; width: 546px; height: 40px; margin: 0 auto; position: relative; } .search_bar input{ width: 700px; border: none; height: 100%; text-indent: 20px; font-size: 14px; background-color: #ffffff; border-radius: 20px 0 0 20px; } .search_bar span{ position: absolute; display: inline-block; width: 60px; height: 100%; background-color: #6E44E6; border-radius: 0 20px 20px 0; padding-top: 3px; padding-left: 12px; right: -60px; box-sizing: border-box; } .icon-sousuo{ color: #fff; font-size: 30px !important; } .search_keywords{ display: flex; justify-content: center; margin-top: 14px; } .search_keywords li{ height: 16px; line-height: 16px; padding-right: 15px; margin-right: 15px; border-right: 1px solid #d2d2d2; } .search_keywords li a{ font-size: 12px; color: #fff; } .login{ height: 790px; width: 100%; background-color: #1B1E2A; } .login_core{ display: flex; align-items: center; flex-direction: column; height: 790px; background-color: #1B1E2A; } .login_top{ display: flex; align-items: center; justify-content: space-around; flex-direction: column; width: 426px; padding-top: 60px; margin: 0 auto; } .login_top img{ width: 142px; } .login_top .tab{ display: flex; margin-top: 30px; height: 46px; } .login_top .tab .tab1{ width: 213px; color: #fff; background-color: #704aff; height: 100%; font-size: 18px; text-align: center; border-radius: 5px 0 0 5px; line-height: 46px; } .login_top .tab .tab2{ width: 213px; color: #fff; background-color: #262939; height: 100%; text-align: center; border-radius: 0 5px 5px 0; font-size: 18px; line-height: 46px; } .login_bottom{ box-sizing: border-box; margin-top: 40px; height: 462px; width: 426px; } .username{ box-sizing: border-box; padding-left: 17px; width: 100%; background-color: #363852; height: 46px; border: none; border-radius: 5px; } .password{ box-sizing: border-box; padding-left: 17px; width: 100%; background-color: #363852; height: 46px; border: none; border-radius: 5px; margin-top: 25px; } .verify{ width: 100%; height: 46px; margin-top: 25px; display: flex; justify-content: space-between; } .verify input{ width: 198px; height: 100%; padding-left: 17px; box-sizing: border-box; background-color: #363852; border: none; border-radius: 5px; } .verify p{ width: 198px; height: 100%; padding-left: 17px; box-sizing: border-box; background-color: #363852; border: none; border-radius: 5px; } .rmfPw{ display: flex; justify-content: space-between; margin-top: 16px; width: 100%; height: 46px; box-sizing: border-box; margin-left: 0; } .rmfPw p{ color: #a1a2b3; font-size: 14px; } .loginBtn{ width: 426px; height: 50px; line-height: 50px; background: #704AFF; border-radius: 25px; font-size: 18px; letter-spacing: 10px; margin-top: 50px; font-size: 18px; color: #fff; text-align: center; } .thirdLogin{ display: flex; justify-content: center; margin-top: 44px; width: 100%; height: 20px; box-sizing: border-box; } .thirdLogin .linecontent{ margin: 0 27px; height: 20px; font-size: 14px; color: #a1a2b3; } .thirdLogin .lineLeft{ margin-top: 9.5px; display: inline-block; width: 170px; height: 1px; background: #363852; } .thirdLogin .lineright{ margin-top: 9.5px; display: inline-block; width: 170px; height: 1px; background: #363852; } .icons{ margin-top: 28px; display: flex; justify-content: space-around; } .icons p i{ color: #363852; font-size: 40px; } .icon-qq{ margin-right: 60px; } .footer{ height: 227px; background-color: #262939; } .footer_top{ display: flex; height: 167px; padding-top: 24px; box-sizing: border-box; } .footer_top .img{ width: 149px; height: 65px; color: rgba(255, 255, 255, 0.616); margin-left: 90px; margin-right: 96px; } .footer_top UL{ margin-top: 10px; margin-right: 80PX; } .footer_top UL li{ font-size: 14px; color: #9E9E9E; margin-bottom: 15px; } .footer_top UL li:first-child{ color: #fff; margin-bottom: 20px; } .footer_top p { margin-right: 66px; height: 123px; width: 100px; text-align: center; } .footer_top p img{ width: 100px; height: 100px; } .footer_top p:last-child{ margin-right: 0; } .footer_top span{ display: block; color: #9E9E9E; } .footer_bottom{ height: 60px; background-color: #1c1c1c; color: #939393; font-size: 12px; text-align: center; line-height: 60px; }