#header { position: relative; } .hand { cursor: pointer; } .text-center { text-align: center; } .relative { position: relative; } .hide { display: none; } .margin-top-10 { margin-top: 10px; } .modal-login-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0, 0, 0, 0.7); } .modal-login { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: block; width: auto; height: 500px; /*overflow: hidden;*/ position: absolute; top: calc(50% - 250px); left: calc(50% - 450px); border-radius: 30px; background-color: #fff; box-shadow: 0px 3px 38px rgba(181, 181, 181, 0.71); } .inline-block { display: inline-block; } .modal-login .login-left { float: left; width: 350px; height: 500px; background: url('/img/img1/login/login-left-1.jpg?ver=1.0.0') left 0px no-repeat; border-radius: 30px 0px 0px 30px; } .modal-login .login-left p { height: 23px; font-size: 16px; line-height: 28px; color: #ffffff; margin-top: 37px; padding-left: 60px; } .modal-login .login-left p img { margin-right: 10px; vertical-align: middle; } .modal-login .login-right { float: left; width: 550px; height: 500px; position: relative; } .modal-login .login-right .line { border-top: 1px solid rgba(221, 221, 221, 1); margin: 0 50px; } .modal-login .login-right .cricle{ cursor: pointer; width: 344px; height: 68px; line-height: 68px; border-radius: 34px; vertical-align: middle; text-align:center; color: #ffffff; font-size: 18px; margin: 0px auto; } .modal-login .login-right .cricle img{ margin-right: 20px; } .icon-qq { background-color: #28B7F7; } .icon-qq img{ vertical-align: -11px; } .icon-qq:hover { box-shadow: 0px 20px 20px 0px rgba(40, 183, 247, 0.3); } .icon-weixin { margin-top: 40px!important; background-color: #4CAF50; } .icon-weixin img{ vertical-align: -10px; } .icon-weixin:hover { box-shadow: 0px 20px 20px 0px rgba(76,175,80,0.3); } /* ���桁ご�閞≦�� */ .modal-user { position: absolute; right: -6px; top: -16px; z-index: 11111; margin-top: 60px; width: 311px; height: 303px; opacity: 1; padding: 14px 14px 0; border-radius: 8px; background: rgba(255, 255, 255, 1); box-shadow: 0px 3px 10px rgba(181, 181, 181, 0.76); } .modal-user .top1 { position: relative; text-align: left; padding-left: 40px; padding-bottom: 6px; border-bottom: 1px solid rgba(238, 238, 238, 1); } .modal-user .top1 .name { color: #747373; font-size: 14px; } .modal-user .top1 .ID { color: #999999; font-size: 12px; } .modal-user .title { line-height: 28px; font-weight: bold; font-size: 16px; color: #333333; margin-top: 12px; padding: 0; width: auto; height: auto; border: none; margin-bottom: 0px; } .font-type-2 { margin-top: 6px; font-size: 14px; line-height: 25px; color: #666666; } .font-type-3 { margin-top: 11px; font-size: 12px; line-height: 21px; color: #A7A7A7; } .font-type-4 { height: 22px; line-height: 28px; font-size: 16px; color: #FF0606; text-align: center; } .font-type-5 { font-size: 20px; color: #F9A643; text-align: center; height: 28px; line-height: 23px; margin-top: 20px; } .font-type-6 { cursor: pointer; position: relative; margin-top: 20px; font-size: 20px; color: #fff; text-align: center; width: 280px; height: 44px; line-height: 44px; padding-left: 30px; border-radius: 21px; background: linear-gradient(5deg, rgba(255, 192, 0, 1) 0%, rgba(255, 179, 137, 1) 100%); background: -moz-linear-gradient(5deg, rgba(255, 192, 0, 1) 0%, rgba(255, 179, 137, 1) 100%); background: -webkit-gradient(5deg, rgba(255, 192, 0, 1) 0%, rgba(255, 179, 137, 1) 100%); background: -webkit-linear-gradient(5deg, rgba(255, 192, 0, 1) 0%, rgba(255, 179, 137, 1) 100%); background: -o-linear-gradient(5deg, rgba(255, 192, 0, 1) 0%, rgba(255, 179, 137, 1) 100%); background: -ms-linear-gradient(5deg, rgba(255, 192, 0, 1) 0%, rgba(255, 179, 137, 1) 100%); background: linear-gradient(5deg, rgba(255, 192, 0, 1) 0%, rgba(255, 179, 137, 1) 100%); } .font-type-6 img:nth-child(1) { position: absolute; left: -14px; top: -25px; } .font-type-6 img:nth-child(3) { position: absolute; top: 15px; right: 32px; } .border-bottom { border-bottom: 1px solid rgba(238, 238, 238, 1); } .padding-bottom-20 { padding-bottom: 20px; } .modal-user .footer { height: 44px; line-height: 44px; font-size: 12px; color: #999999; text-align: right; padding-right: 14px; margin-left: -14px; margin-right: -14px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #F3F3F3; } .modal-user .user-cricle { position: absolute; overflow: hidden; width: 32px; height: 32px; left: 0; border-radius: 50%; background-color: #333333; } #user-icon { display: inline-block; height: 39px; } .modal-user .triangle { width: 40px; position: absolute; top: -10px; left: 28%; text-align: center; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 0px solid transparent; border-bottom: 19px solid #ffffff; } /* �糸�羈������� */ #header .head-item-3 { text-align: right; vertical-align: top; position: absolute; right: 5px; top: 25px; } #header .head-item-3 .btn { outline: none; border: none; font-size: 15px; height: 36px; border-radius: 18px; } #header .head-item-3 .btn-vip { width: 120px; color: #fff; /*margin-left: 88px;*/ margin-left: 0; /*background: linear-gradient(to right, #FFC000, #FFB389);*/ /*background: -ms-linear-gradient(right, #FFC000, #FFB389);*/ /*background: -moz-linear-gradient(right, #FFC000, #FFB389);*/ /*background: -o-linear-gradient(right, #FFC000, #FFB389);*/ background:linear-gradient(180deg,rgba(255,190,49,1) 0%,rgba(255,115,45,1) 100%); /*background: linear-gradient(to right, rgba(241,157,38,0.99), rgba(253,100,79,1));*/ background: -ms-linear-gradient(right, rgba(241,157,38,0.99), rgba(253,100,79,1)); background: -moz-linear-gradient(right, rgba(241,157,38,0.99), rgba(253,100,79,1)); background: -o-linear-gradient(right, rgba(241,157,38,0.99), rgba(253,100,79,1)); } #header .head-item-3 .btn-vip:hover{ background:linear-gradient(0deg,rgba(242,158,38,1) 0%,rgba(253,100,79,1) 100%); } #header .head-item-3 .btn-vip img{ vertical-align: -2px; } #header .head-item-3 .btn-login-register { width: 110px; margin-left: 15px; color: #1EC6D3; background-color: #fff; border: 1px solid #1EC6D3; } #header .head-item-3 .btn-login-register:hover{ background-color: #00a9c3; color: #ffffff; } /* ��膣� */ #header .head-item-2 { display: none; position: absolute; margin-top: -2px; margin-left: 73px; width: 354px; height: 40px; border: 1px solid #1EC6D3; border-radius: 20px; vertical-align: top; line-height: 38px; left: 426px; top: 14px; } #header .head-item-2 .left { width: 70px; height: 100px; font-size: 14px; color: #666666; vertical-align: top; padding-left: 10px; } #header .head-item-2 input { border: none; outline: none; width: 202px; color: #BCBBBB; vertical-align: top; line-height: 38px; padding-left: 10px; border-left: 1px solid #f1f1f1; } #header .head-item-2 .search { width: 70px; height: 38px; position: absolute; right: 0; top: -2px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; background-color: #1EC6D3; } .logo-hover { display: none; }
记20201217-前端代码
最新推荐文章于 2024-08-08 11:48:45 发布