/*b   */ .row {margin-left: 0; margin-right: 0; } .row>[class*='col-'], .container-fluid {padding-right: 0; padding-left: 0; } .demo {border: 1px solid #e2b709; word-wrap: break-word; } /*头部*/ .home_box1 {margin-top: 1.5rem !important; padding-left: 0rem; padding-right: 0rem; -moz-box-shadow: 0rem 0rem 1rem #EAE9E9; -webkit-box-shadow: 0rem 0rem 1rem #EAE9E9; box-shadow: 0rem 0rem 1rem #EAE9E9; border: 1px red solid; } /*隐藏*/ .yd_top1_f, .wxtz_box1_m_f, .yd_dh1_f, .yd_bottom_txt1_f, .ks_top2_f {display: none } /*首页头部下载区域*/ .home_xiazai1_f {overflow: hidden; margin-left: auto; width: 103rem; border: 0px blue solid; } .home_xiazai1_f .home_g_w_rwm_f {float: left; width: 181px; height: 182px; padding: 1.3rem 0 0 4rem; background: url(../images/home_btn04_f.png) no-repeat; background-size: 100% 100%; border: 0px #fff solid; } /**/ /* 方： .qr-scanner {background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.1) 75%, rgba(32, 255, 77, 0.1) 76%, transparent 77%, transparent); background-size: 3rem 3rem; background-position: -1rem -1rem; width: 100%; height: 100%; position: relative; background-color: #fff; }*/ .home_xiazai1_f .qr-scanner .box {width: 100px; height: 100px; position: relative; left: 47%; top: 50%; transform: translate(-50%, -0%); overflow: hidden; border: 0.1rem solid rgba(0, 255, 51, 0.2); background-repeat: no-repeat !important; background-size: 90% 90% !important; margin-top: 27px; } .home_xiazai1_f .qr-scanner .line {height: calc(100% - 2px); width: 100%; background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #4872C7 211%); border-bottom: 3px solid #fff; transform: translateY(-100%); animation: radar-beam 2s infinite; animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99); animation-delay: 1.4s; } .home_xiazai1_f .qr-scanner .box:after, .home_xiazai1_f .qr-scanner .box:before, .home_xiazai1_f .qr-scanner .angle:after, .home_xiazai1_f .qr-scanner .angle:before {content: ''; display: block; position: absolute; width: 3vw; height: 3vw; border: 0.2rem solid transparent; } .home_xiazai1_f .qr-scanner .box:after, .home_xiazai1_f .qr-scanner .box:before {top: 0; border-top-color: #0e0e0e; } .home_xiazai1_f .qr-scanner .angle:after, .home_xiazai1_f .qr-scanner .angle:before {bottom: 0; border-bottom-color: #0e0e0e; } .home_xiazai1_f .qr-scanner .box:before, .home_xiazai1_f .qr-scanner .angle:before {left: 0; border-left-color: #0e0e0e; } .home_xiazai1_f .qr-scanner .box:after, .home_xiazai1_f .qr-scanner .angle:after {right: 0; border-right-color: #0e0e0e; } @keyframes radar-beam {0% {transform: translateY(-100%); } 100% {transform: translateY(0); } } /*首页-苹果 安卓  PC下载*/ .home_xiazai1_ios_f {float: left; overflow: hidden; width: 13.7rem; margin-left: 1.3rem; margin-top: 1.9rem; border: 0px #fff solid } .home_xiazai1_ios_f a {float: left; width: 100%; height: 13.5rem; background: url(../images/home_btn01_f.png) no-repeat; background-size: 100% auto; text-indent: -80rem } .home_xiazai1_ios_f a:hover {float: left; width: 100%; height: 13.5rem; background: url(../images/home_btn01_f.png) no-repeat 0 -13.7rem; background-size: 100% auto; text-indent: -80rem } .home_xiazai1_android_f {float: left; overflow: hidden; width: 13.7rem; margin-left: 1.3rem; margin-top: 1.9rem; border: 0px #fff solid } .home_xiazai1_android_f a {float: left; width: 100%; height: 13.5rem; background: url(../images/home_btn02_f.png) no-repeat; background-size: 100% auto; text-indent: -80rem } .home_xiazai1_android_f a:hover {float: left; width: 100%; height: 13.5rem; background: url(../images/home_btn02_f.png) no-repeat 0.1rem -13.7rem; background-size: 100% auto; text-indent: -80rem } .home_xiazai1_pc_f {float: left; overflow: hidden; width: 13.7rem; margin-left: 1.3rem; margin-top: 1.9rem; border: 0px #fff solid } .home_xiazai1_pc_f a {float: left; width: 100%; height: 13.5rem; background: url(../images/home_btn03_f.png) no-repeat; background-size: 100% auto; text-indent: -80rem } .home_xiazai1_pc_f a:hover {float: left; width: 100%; height: 13.5rem; background: url(../images/home_btn03_f.png) no-repeat 0 -13.7rem; background-size: 100% auto; text-indent: -80rem } /*首页-头图客服二维码*/ .home_header_rwm1_f {overflow: hidden; text-align: center; background: rgba(0, 0, 0, 0.5); padding: 2rem 0rem 1rem 2rem; color: #fff; width: 38.2rem; float: right; border: 0px #e2ac48 solid } .home_header_rwm1_f ul {} .home_header_rwm1_f ul li {float: left; line-height: 2.5rem; font-size: 1.3rem; margin-right: 2rem; } .home_header_rwm1_f ul li img {width: 10rem; margin-bottom: 0.5rem; } /*首页下载按钮提示-弹出代码*/ .custom-tooltip {position: relative; } .custom-tooltip::after {content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #2c3e50; color: white; padding: 8px 12px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity 0.3s; } .custom-tooltip:hover::after {opacity: 1; } /*新首页-怀旧版-风格20年前老封神风格*/ .home_box1_f {width: 100%; overflow: hidden; border: 0px blue solid } .home_box2_f {width: 100%; overflow: hidden; background: url(../images/list_bj1_f.jpg) no-repeat; background-size: 100% 3181px; border: 0px red solid } .home_box1_content1_f {width: 1200px; height: auto; margin: 0 auto; overflow: hidden; border: 0px blue solid } .home_header1_f {width: 100%; margin: 0 auto; background: url(../images/list_top_xian1_f.png) no-repeat; background-size: 100% 100%; overflow: hidden; height: 9.5rem; border: 0px #fff solid } .home_header1_logo_f {float: left; width: 27.8rem; margin-top: 0.6rem; margin-left: 2rem; border: 0px #fff solid } .home_header1_logo_f img {width: 100%; border: 0px red solid } .home_header1_nav1_f {float: right; overflow: hidden; border: 0px red solid } /*首页头部导航1*/ /*方备注。*/ .home_header1_nav1_f .collapse {height: 9.5rem; border: 0px red solid } .home_header1_nav1_f .navbar-default {background-color: transparent !important; border-color: transparent !important; } .home_header1_nav1_f .navbar-default .navbar-nav>li>a {color: #fff; font-size: 2rem; height: 9.5rem; margin-left: 11rem; } .home_header1_nav1_f .navbar-default .navbar-nav>li>a:hover {background: #ffd600; color: #000; } .home_header1_nav1_f .navbar-default .navbar-nav>.open>a:hover {color: #49380d; background-color: #cabd89 !important; } .home_header1_nav1_f .dropdown-toggle {background: #49380d !important; } .home_header1_nav1_f .dropdown-menu {background-color: #49380d; } .home_header1_nav1_f .dropdown-menu>li>a {color: inherit; } .home_header1_nav1_f .dropdown-menu>li>a:hover {background: #cabd89; color: #49380d; } .home_header1_nav1_f .navbar-default .navbar-nav>.active>a {background-color: #ffd600; color: #000 !important; font-weight: bold; } .home_header1_nav1_f .navbar-default .navbar-brand {color: #cabd89; } .home_header1_nav1_f .navbar-default .navbar-brand:hover {color: #cabd89; font-weight: bold; } .home_header1_nav1_f .nav>li>a {position: relative; display: block; padding: 10px 15px; } .home_header1_nav1_f .navbar-nav>li>a {padding-top: 38px; padding-bottom: 15px; } .home_header1_nav1_f .navbar-collapse {padding-right: 15px; padding-left: 0px; } /*会员内容*/ .user_box1_f {width: 100%; height: auto; background: url(../images/list_bj1_f.jpg) no-repeat center top; background-size: 100% 3181px; overflow: hidden; border: 0px red solid; } .user_a_box1_f {margin: 0 auto; width: 1200px; height: auto; overflow: hidden; background: #fff; border-radius: 1.9rem; border: 1px #b2b2b2 solid; } .user_a_box1_height1_f {margin-top: 13rem } .user_info1_f {width: 100%; height: 14.5rem; background: url(../images/user_zhanghaobj.png) no-repeat; background-size: 100% 100%; margin-top: 2.2rem; padding: 2.7rem 2rem 0 2rem; } .user_info1_img1_f {float: left; width: 9rem; height: 9rem; border: 0px red solid } .user_info1_img1_f img {width: 100%; height: 100%; } .user_info1_txt1_f {float: left; height: 9rem; margin-left: 2rem; border: 0px red solid } .user_info1_txt1_f p {} .user_info1_txt1_f p:nth-of-type(1) {font-weight: bold; font-size: 2rem; margin-top: 0.8rem } .user_info1_txt1_f p:nth-of-type(1) i {font-style: normal; color: #0e0e0e } .user_info1_txt1_f p:nth-of-type(1) em {font-style: normal; color: #e16410 } .user_info1_txt1_f p:nth-of-type(1) span {margin-left: 1.2rem; } .user_info1_txt1_f p:nth-of-type(1) span:hover {opacity: 0.9; transform: translateY(-2px); } .user_info1_txt2_f {float: left; height: 9rem; margin-left: 2rem; border: 0px red solid } .user_info1_txt2_f p {} .user_info1_txt2_f p {font-weight: bold; font-size: 2rem; margin-top: 3rem } .user_info1_txt2_f p i {font-style: normal; color: #0e0e0e } .user_info1_txt2_f p span {margin-left: 1.6rem; } .user_info1_txt2_f p em {font-style: normal; } .user_info1_txt2_f p em a {color: #e16410 } .user_info1_txt2_f p em a:hover {color: red } /*代金券box*/ .user_djq1_f {width: 1200px; margin: 0 auto; margin-top: 2rem; border: 0px red solid } .user_djq1_content1_f {} .user_djq1_content1_f ul {} .user_djq1_content1_f ul li {width: 20.2rem; height: 26.5rem; padding-top: 0.9rem; border-radius: 1rem; float: left; margin-right: 2rem; margin-bottom: 0rem; border: 0px #d1d1d1 solid } .user_djq1_content1_f ul li:nth-child(3n) {float: right; margin-right: 0; } .user_djq1_content1_f ul li>i {font-style: normal; background: red; height: 2.8rem; line-height: 2.8rem; font-size: 1.5rem; color: #fff; display: inline-block; position: relative; margin-top: 0px; margin-right: 0.8rem; z-index: 999; float: right; padding: 0 1rem; border-radius: 3rem 0 0 3rem; -moz-box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000; } .user_djq1_content1_f ul li p:nth-of-type(1) {width: 18.6rem; height: 19.2rem; background: url(../images/boxx.png) no-repeat center 0; margin: 0 auto; position: relative; margin-top: 0px; border: 0px blue solid } .user_djq1_content1_f ul li p:nth-of-type(1) b {display: inline-block; width: 100%; text-align: center; margin-top: 0.2rem; border: 0px red solid } .user_djq1_content1_f ul li p:nth-of-type(1) b img {width: 13.8rem; height: 10.4rem } .user_djq1_content1_f ul li p:nth-of-type(1)>em {font-style: normal; display: block; width: 100%; position: relative; margin-top: -5px; margin-left: 1.4rem; font-size: 1.6rem; color: #741b07; font-weight: bold; border: 0px blue solid } .user_djq1_content1_f ul li p:nth-of-type(1) span {text-align: center; color: #fff; display: inline-block; width: 100%; font-size: 1.6rem; line-height: 3.5rem; height: 3.5rem; font-weight: bold; border: 0px #fff solid } .user_djq1_content1_f ul li p:nth-of-type(2) {text-align: center; border: 0px red solid } /*.user_djq1_content1_f ul li p:nth-of-type(2) i{font-style:normal; width:100%; display:inline-block; font-size:1.6rem; height:4.8rem; line-height:4.8rem; border:0px blue solid}*/ .user_djq1_content1_f ul li p:nth-of-type(2) em {font-style: normal; width: 100%; display: inline-block; width: 16.3rem; height: 4.3rem; line-height: 4.3rem; border-radius: 3rem; font-size: 1.8rem; font-weight: bold; -moz-box-shadow: 0px 2px 5px #333333; -webkit-box-shadow: 0px 2px 5px #333333; box-shadow: 0px 2px 5px #333333; margin-top: 1rem; background: #f6b43d; border: 0px #000 solid } .user_djq1_content1_f ul li:hover {-moz-box-shadow: 0px 0px 10px #333333; -webkit-box-shadow: 0px 0px 10px #333333; box-shadow: 0px 0px 10px #333333; border: 1px #ddd solid; cursor: pointer; } /* 【方：子块】 */ .inner-block {transition: all 0.4s ease; } /* **** */ .user_djq1_content1_f ul li:hover .inner-block {background-color: #fdee4f; /*  */ border-color: #ffd54f; border-style: solid; transform: translateX(0px); /*  */ -moz-box-shadow: 0px 2px 5px #333333; -webkit-box-shadow: 0px 2px 5px #333333; box-shadow: 0px 2px 5px #333333; } /*代金券 支付代码原始代码已写全*/ .container {max-width: 100%; margin: 0 auto; background: white; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); overflow: hidden; } /*        .header {background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; padding: 24px 30px; text-align: center; } .header h1 {font-size: 24px; margin-bottom: 8px; font-weight: 600; } .header p {opacity: 0.9; font-size: 14px; }*/ .content {display: flex; min-height: 500px; } /* 左侧代金券区域 */ .voucher-section {padding: 0px; border-right: 0px solid #eee; width: 57%; } .section-title {font-size: 18px; font-weight: 600; margin-bottom: 20px; color: #000; display: flex; align-items: center; } .section-title::before {content: ""; display: inline-block; width: 4px; height: 16px; background: #e16410; margin-right: 10px; border-radius: 2px; } .voucher-list {display: flex; flex-direction: column; gap: 16px; } .voucher-item {background: white; border: 3px solid #fff; /*    border: 3px solid #e8e8e8;*/ border-radius: 12px; padding: 0px 0px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; width: 32%; float: left; margin-bottom: 20px; margin-right: 5px; } .voucher-item:hover {transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .voucher-item.selected {border-color: #eb6c05; /*    background-color: rgba(106, 17, 203, 0.03);*/ background: #f5f5f5; } /*.voucher-item.selected::after {content: "✓"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: #6a11cb; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; }*/ .voucher-name {font-weight: 600; font-size: 16px; margin-bottom: 6px; color: #2c3e50; } .voucher-description {font-size: 13px; color: #7f8c8d; line-height: 1.4; } /* 右侧支付区域 */ .payment-section {flex: 1; padding: 30px; display: flex; flex-direction: column; } .amount-display {background: linear-gradient(135deg, #fdfcfb 0%, #f5f7fa 100%); border-radius: 12px; padding: 25px; text-align: center; margin-bottom: 30px; border: 1px solid #eef2f7; } .amount-label {font-size: 16px; color: #000; margin-bottom: 10px; font-weight: bold; } .amount-value {font-size: 42px; font-weight: 700; color: #2c3e50; line-height: 1; } .amount-value::before {content: "¥"; font-size: 28px; vertical-align: top; margin-right: 4px; } .payment-methods {/*    flex-grow: 1;*/ } .payment-title {font-size: 18px; font-weight: 600; margin-bottom: 20px; color: #2c3e50; } .payment-options {display: flex; flex-direction: column; gap: 16px; } .payment-option {border: 3px solid #e8e8e8; border-radius: 12px; padding: 18px 20px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; } .payment-option:hover {border-color: #c8c8c8; } .payment-option.selected {border-color: #fbec44; background-color: rgba(106, 17, 203, 0.03); } .payment-icon {width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 16px; font-size: 20px; font-weight: bold; } .wechat .payment-icon {background-color: #07c160; color: white; } .alipay .payment-icon {background-color: #1677ff; color: white; } .payment-text {flex-grow: 1; } .payment-name {font-weight: 600; margin-bottom: 4px; color: #2c3e50; } .payment-desc {font-size: 13px; color: #7f8c8d; } .confirm-btn {background: #ffd600; color: #000; border: none; border-radius: 30px; padding: 18px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; margin-top: 20px; } .confirm-btn:hover {opacity: 0.9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(106, 17, 203, 0.2); } .confirm-btn:disabled {background: #cccccc; cursor: not-allowed; transform: none; box-shadow: none; } /* 响应式设计 */ @media (max-width: 768px) {.content {flex-direction: column; } .voucher-section {border-right: none; border-bottom: 1px solid #eee; } } /*内容页___第五屏 尾部*/ .show_footer_box1_f {margin: 0 auto; width: 1200px; overflow: hidden; border: 0px blue solid; } .show_e_box1_f {width: 100%; height: 225px; line-height: 199px; overflow: hidden; margin-top: 5rem; background: url(../images/show_bottom_bj1_f.jpg) no-repeat; background-size: 100% 100%; border: 0px red solid; } .show_e_box1_height1_f {height: 19rem } .show_e_box1_f .show_e_logo_f {width: 50%; float: left; text-align: left; padding-right: 4.5rem; margin-top: 1rem; border: 0px red solid; } .show_e_box1_f img {} .show_e_box1_f ul {float: left; width: 50%; margin-top: 5.8rem; font-size: 1.5rem; color: #cabd89; padding-left: 5%; line-height: 2.6rem; border: 0px red solid; } .show_e_box1_f ul li a {color: #cabd89; } /*游戏角色选择器*/ .user_djq2_f {margin-top: 1.8rem; border: 0px red solid } .fang_game-name1_f {float: left; font-size: 1.5rem } /* 主容器 */ .fang_container {display: inline-block; text-align: center; } /* 当前选择显示 */ .fang_selected {font-size: 15px; font-weight: bold; color: #333; margin: 0px 0; padding: 0px 0px; border-radius: 4px; border: 0px solid red; float: left; } .fang_empty {color: #000; font-weight: normal; } /* 打开弹窗按钮 */ .fang_btn {color: white; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.3s; float: left; background: none; position: relative; margin-top: -5px; margin-left: 1.2rem; } .fang_btn:hover {opacity: 0.9; transform: translateY(-2px); } /* 弹窗遮罩 */ .fang_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; } .fang_modal.active {display: flex; } /* 弹窗内容 */ .fang_modal_content {background: white; border-radius: 15px; padding: 20px; width: 90%; max-width: 400px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); border: 0px red solid; height: 230px; } .fang_modal_title {margin: 0 0 15px 0; color: #000; font-size: 18px; border-bottom: 2px #adadad solid; } .fang_modal_title span {border-bottom: 3px #e16534 solid; display: inline-block; padding: 0 2rem; height: 5.5rem; line-height: 5.5rem; font-weight: bold; } /* 下拉选择 */ .fang_select {width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 18px; font-size: 14px; margin-bottom: 15px; background: #dddddd; } .fang_select:focus {outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1); } /* 弹窗按钮组 */ .fang_modal_btns {display: flex; gap: 10px; } .fang_confirm, .fang_cancel {flex: 1; padding: 8px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.2s; } .fang_confirm {background: #ffd600; color: #000; } .fang_confirm:disabled {background: #ccc; cursor: not-allowed; } .fang_confirm:not(:disabled):hover {background: #ffd600; } .fang_cancel {background: #f5f5f5; color: #666; border: 1px solid #ddd; } .fang_cancel:hover {background: #e9e9e9; } /*充值说明*/ .user_czsm1_f {padding: 2rem; background: #f5f5f5; margin: 2rem; border-radius: 1.5rem; border: 0px red solid } .user_czsm1_f h2 {font-size: 1.8rem; font-weight: bold } .user_czsm1_f ul {margin-top: 1rem; font-size: 1.4rem } .user_czsm1_f ul li {line-height: 2.5rem } .user_czsm1_f ul li span {color: #ff0000 } /*用户登录*/ /* 主容器 */ .fang_login1_container {display: inline-block; } /* 打开按钮 */ .fang_login1_open_btn {color: #e16410; border: none; border-radius: 6px; font-size: 20px; cursor: pointer; transition: 0.3s; background: none; padding: 0 !important; } .fang_login1_open_btn:hover {opacity: 0.9; transform: translateY(-2px); } /* 弹窗遮罩 */ .fang_login1_modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* 黑色透明50% */ z-index: 9999; align-items: center; justify-content: center; padding: 20px; } .fang_login1_modal.active {display: flex; animation: fang_login1_fadeIn 0.3s ease; } /* 登录框 */ .fang_login1_box {background: white; border-radius: 12px; width: 100%; max-width: 360px; padding: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: fang_login1_slideUp 0.3s ease; } /* 标题 */ .fang_login1_title {text-align: center; color: #000; font-size: 20px; margin: 0 0 24px 0; font-weight: 600; } /* 输入框组 */ .fang_login1_input_group {position: relative; margin-bottom: 20px; } .fang_login1_input {width: 100%; padding: 14px 50px 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; color: #333; background: #fafafa; transition: all 0.3s; box-sizing: border-box; } .fang_login1_input:focus {outline: none; border-color: #ffd600; background: white; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .fang_login1_input::placeholder {color: #999; } /* 密码显示按钮 */ .fang_login1_toggle_pwd {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #666; font-size: 18px; cursor: pointer; padding: 5px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: 0.3s; } .fang_login1_toggle_pwd:hover {background: #f0f0f0; color: #333; } .fang_login1_toggle_pwd.active {color: #667eea; } /* 按钮组 */ .fang_login1_btn_group {display: flex; gap: 12px; margin-top: 30px; justify-content: center; /* 下方中间 */ } .fang_login1_submit, .fang_login1_close {padding: 12px 28px; font-size: 16px; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; min-width: 120px; } .fang_login1_submit {background: #ffd600; color: #000; } .fang_login1_submit:hover {opacity: 0.9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3); } .fang_login1_close {background: #f5f5f5; color: #666; border: 2px solid #e0e0e0; } .fang_login1_close:hover {background: #e8e8e8; color: #333; } /* 响应式设计 */ @media (max-width: 768px) {.fang_login1_box {padding: 24px; max-width: 320px; } .fang_login1_title {font-size: 22px; margin-bottom: 20px; } .fang_login1_input {font-size: 18px; padding: 16px 55px 16px 20px; } .fang_login1_toggle_pwd {font-size: 20px; width: 32px; height: 32px; right: 20px; } .fang_login1_submit, .fang_login1_close {font-size: 18px; padding: 0 24px; min-width: 130px; height: 53.7px; line-height: 53.7px; } .fang_login1_submit {margin-bottom: 10px } .fang_login1_btn_group {gap: 10px; } } @media (max-width: 480px) {.fang_login1_box {padding: 20px; max-width: 280px; } .fang_login1_btn_group {flex-direction: column; gap: 12px; } .fang_login1_submit, .fang_login1_close {width: 100%; min-width: auto; } } /* 动画 */ @keyframes fang_login1_fadeIn {from {opacity: 0; } to {opacity: 1; } } @keyframes fang_login1_slideUp {from {opacity: 0; transform: translateY(30px); } to {opacity: 1; transform: translateY(0); } }