.u-section-1 { background-position: 50% 50%; background-repeat: no-repeat; background-image: url("../images/web-15.png"); background-size: cover; min-height: 100vh; } .u-section-1 .u-group-1 { min-height: 860px; height: auto; background-position: 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(to bottom, #fcc75a, rgba(0, 0, 0, 1)); background-size: cover; width: 970px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); --radius: 50px; margin: 22px auto 0 calc(((100% - 1140px) / 2) + -123px); } .u-section-1 .u-container-layout-1 { padding: 0; } .u-section-1 .u-text-1 { font-weight: 700; font-size: 2.25rem; margin: 19px auto 0 286px; } .u-section-1 .u-text-2 { letter-spacing: 28px; margin: -34px auto 0 421px; } .u-section-1 .u-table-1 { margin-top: 19px; margin-bottom: 0; } .u-block-3f10-11 { background-image: none; } .u-section-1 .u-table-header-1 { text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 1.25rem; background-image: none; } .u-section-1 .u-table-cell-1 { text-transform: uppercase; font-weight: 700; letter-spacing: 0; font-size: 1.125rem; } .u-section-1 .u-table-cell-2 { background-image: none; } .u-section-1 .u-table-cell-3 { background-image: none; } .u-section-1 .u-table-cell-4 { background-image: none; } .u-section-1 .u-table-cell-5 { background-image: none; } .u-section-1 .u-table-cell-6 { background-image: none; font-weight: 700; } .u-section-1 .u-table-body-1 { line-height: 1.6; background-image: none; font-size: 1.25rem; } .u-section-1 .u-table-cell-7 { font-size: 1.125rem; font-weight: 800; background-image: none; } .u-section-1 .u-table-cell-8 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-9 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-10 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-11 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-12 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-13 { font-weight: 800; font-size: 1.125rem; background-image: none; } .u-section-1 .u-table-cell-14 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-15 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-16 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-17 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-18 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-19 { font-weight: 800; font-size: 1.125rem; background-image: none; } .u-section-1 .u-table-cell-20 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-21 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-22 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-23 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-24 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-25 { font-weight: 800; font-size: 1.125rem; } .u-section-1 .u-table-cell-26 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-27 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-28 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-29 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-30 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-31 { font-weight: 800; font-size: 1.125rem; } .u-section-1 .u-table-cell-32 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-33 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-34 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-35 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-36 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-37 { font-weight: 800; font-size: 1.125rem; } .u-section-1 .u-table-cell-38 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-39 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-40 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-41 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-42 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-43 { font-weight: 800; font-size: 1.125rem; } .u-section-1 .u-table-cell-44 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-45 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-46 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-47 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-48 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-49 { font-weight: 800; font-size: 1.125rem; } .u-section-1 .u-table-cell-50 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-51 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-52 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-53 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-54 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-55 { font-weight: 800; font-size: 1.125rem; } .u-section-1 .u-table-cell-56 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-57 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-58 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-59 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-60 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-61 { font-weight: 800; font-size: 1.125rem; } .u-section-1 .u-table-cell-62 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-63 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-64 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-65 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-66 { font-weight: 700; font-size: 1.125rem; } .u-block-3f10-57 { background-image: none; } .u-section-1 .u-form-1 { height: 85px; margin: 0 400px 0 0; } .u-section-1 .u-input-1 { height: 63px; --radius: 50px; font-size: 1rem; } .u-section-1 .u-btn-1 { background-image: linear-gradient(#31cdee, #0962a4); --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); font-size: 1.25rem; font-style: normal; padding: 17px 67px 18px 66px; transition: transform 0.3s ease, box-shadow 0.3s ease; transform-origin: center; } .u-section-1 .u-btn-1:hover { transform: scale(1.05); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); } .u-section-1 .u-btn-1:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .u-section-1 .u-group-2 { width: 324px; min-height: 56px; height: auto; margin: -72px 0 0 auto; } .u-section-1 .u-container-layout-2 { padding-left: 30px; padding-right: 30px; } .u-section-1 .u-text-3 { font-size: 1.5rem; letter-spacing: 0px; margin: 0 0 0 auto; } .u-section-1 .u-table-2 { width: 958px; margin: 16px auto 0; } .u-block-3f10-177 { background-image: none; } .u-section-1 .u-table-header-2 { text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 1.25rem; background-image: none; } .u-section-1 .u-table-cell-67 { text-transform: uppercase; font-weight: 700; letter-spacing: 0; font-size: 1.125rem; } .u-section-1 .u-table-cell-68 { background-image: none; } .u-section-1 .u-table-cell-69 { background-image: none; } .u-section-1 .u-table-cell-70 { background-image: none; } .u-section-1 .u-table-cell-71 { background-image: none; } .u-section-1 .u-table-cell-72 { background-image: none; font-weight: 700; } .u-section-1 .u-table-body-2 { line-height: 1.6; background-image: none; font-size: 1.25rem; } .u-section-1 .u-table-cell-73 { font-size: 1.125rem; font-weight: 800; background-image: none; } .u-section-1 .u-table-cell-74 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-75 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-76 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-77 { font-weight: 700; font-size: 1.125rem; } .u-section-1 .u-table-cell-78 { font-weight: 700; font-size: 1.125rem; } .u-block-3f10-196 { background-image: none; } .u-section-1 .u-group-3 { min-height: 269px; height: auto; background-position: 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(to bottom, #fcc75a, #ee6622); background-size: cover; --radius: 50px; width: 390px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); margin: -860px calc(((100% - 1140px) / 2) + -116px) 0 auto; } .u-section-1 .u-container-layout-3 { padding: 0; } .u-section-1 .u-text-4 { font-size: 1.875rem; font-weight: 400; margin: 26px auto 0; } .u-section-1 .u-countdown-1 { margin: 13px auto 0; padding: 0; } .u-section-1 .u-countdown-item-1 { padding-top: 0; } .u-section-1 .u-countdown-counter-1 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-label-1 { font-weight: 600; text-transform: uppercase; font-size: 1rem; } .u-section-1 .u-countdown-separator-1 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-item-2 { padding-top: 0; } .u-section-1 .u-countdown-counter-2 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-label-2 { font-weight: 600; text-transform: uppercase; font-size: 1rem; } .u-section-1 .u-countdown-separator-2 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-item-3 { padding-top: 0; } .u-section-1 .u-countdown-counter-3 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-label-3 { font-weight: 600; text-transform: uppercase; font-size: 1rem; } .u-section-1 .u-countdown-separator-3 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-item-4 { padding-top: 0; } .u-section-1 .u-countdown-counter-4 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-label-4 { font-weight: 600; text-transform: uppercase; font-size: 1rem; } .u-section-1 .u-countdown-separator-4 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-item-5 { padding-top: 0; } .u-section-1 .u-countdown-counter-5 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-label-5 { font-weight: 600; text-transform: uppercase; font-size: 1rem; } .u-section-1 .u-countdown-separator-5 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-item-6 { padding-top: 0; } .u-section-1 .u-countdown-counter-6 { font-size: 2.25rem; letter-spacing: 2px; line-height: 1; font-weight: 700; } .u-section-1 .u-countdown-label-6 { font-weight: 600; text-transform: uppercase; font-size: 1rem; } .u-section-1 .u-btn-2 { background-image: linear-gradient(#31cdee, #0962a4); box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); --radius: 50px; font-size: 1.25rem; font-weight: 700; margin: 16px auto 0 18px; padding: 20px 37px 21px 36px; } .u-section-1 .u-btn-3 { background-image: linear-gradient(#31cdee, #0962a4); box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); --radius: 50px; font-size: 1.25rem; font-weight: 700; margin: -73px 19px 0 auto; padding: 20px 37px 21px 36px; } .u-section-1 .u-group-4 { min-height: 353px; height: auto; background-position: 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(to bottom, #fcc75a, #ee6622); background-size: cover; --radius: 50px; width: 390px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); margin: 9px calc(((100% - 1140px) / 2) + -115px) 0 auto; } .u-section-1 .u-container-layout-4 { padding: 0; } .u-section-1 .u-text-5 { font-size: 1.875rem; font-weight: 400; margin: 40px auto 0; } .u-section-1 .u-text-6 { font-size: 0.875rem; margin: 39px 20px 0; } .u-section-1 .u-btn-4 { background-image: none; padding: 0; } .u-section-1 .u-group-5 { min-height: 220px; height: auto; background-position: 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(to bottom, #fcc75a, #ee6622); background-size: cover; --radius: 50px; width: 390px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); margin: 9px calc(((100% - 1140px) / 2) + -116px) 60px auto; } .u-section-1 .u-container-layout-5 { padding: 0; } .u-section-1 .u-group-6 { min-height: 114px; width: 203px; height: auto; --radius: 20px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); margin: 35px auto 0 47px; } .u-section-1 .u-container-layout-6 { padding-left: 30px; padding-right: 30px; } .u-section-1 .u-btn-5 { --radius: 50px; font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 1px; background-image: linear-gradient(#31cdee, #0962a4); box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); margin: -102px 54px 0 auto; padding: 25px 8px 26px 7px; } .u-section-1 .u-text-7 { font-size: 1.125rem; font-weight: 400; letter-spacing: 1px; width: 306px; margin: 39px auto 0; } /* 调整表格行高度 */ .u-section-1 .u-table-body-1 tr { height: calc(100%) !important; /* 减少5px高度 */ } .u-section-1 .u-table-header-1 tr { height: calc(100%) !important; /* 减少5px高度 */ } .u-section-1 .u-table-body-2 tr { height: calc(100%) !important; /* 减少5px高度 */ } .u-section-1 .u-table-header-2 tr { height: calc(100%) !important; /* 减少5px高度 */ } /* 确保单元格内容垂直居中 */ .u-section-1 .u-table-cell { vertical-align: middle; padding-top: 8.5px !important; padding-bottom: 8.5px !important; } /* 刷新倒计时样式 */ .refresh-timer { display: inline-block; font-size: 0.75rem; color: #31cdee; background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 2px 6px; margin-left: 8px; vertical-align: middle; font-weight: bold; letter-spacing: 2px; /* 减小字母间距 */ white-space: nowrap; /* 防止换行 */ } /* 公告样式 */ #competition-announcement { color: #000000 !important; /* 黑色字体 */ cursor: default !important; /* 默认鼠标指针 */ text-decoration: none !important; /* 移除下划线 */ pointer-events: none; /* 禁用鼠标事件 */ display: block; white-space: pre-wrap; word-break: break-word; padding: 10px; max-height: 300px; overflow-y: auto; } /* 按钮悬停和点击效果 */ .u-section-1 .u-btn-1, .u-section-1 .u-btn-2, .u-section-1 .u-btn-3, .u-section-1 .u-btn-5 { transition: transform 0.3s ease, box-shadow 0.3s ease; transform-origin: center; } .u-section-1 .u-btn-1:hover, .u-section-1 .u-btn-2:hover, .u-section-1 .u-btn-3:hover, .u-section-1 .u-btn-5:hover { transform: scale(1.05); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); } .u-section-1 .u-btn-1:active, .u-section-1 .u-btn-2:active, .u-section-1 .u-btn-3:active, .u-section-1 .u-btn-5:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } @media (max-width: 1199px) { .u-section-1 { min-height: 1826px; } .u-section-1 .u-group-1 { --radius: 39px; --bottom-right-radius: 36px; --bottom-left-radius: 36px; --top-left-radius: 50px; --top-right-radius: 50px; margin-top: 37px; margin-left: auto; height: auto; } .u-section-1 .u-group-2 { height: auto; } .u-section-1 .u-group-3 { --radius: 39px; --bottom-right-radius: 36px; --bottom-left-radius: 36px; width: 472px; margin-top: 9px; margin-right: auto; margin-left: calc(((100% - 940px) / 2) + -15px); height: auto; } .u-section-1 .u-text-4 { font-weight: 700; font-size: 1rem; } .u-section-1 .u-group-4 { --radius: 39px; --bottom-right-radius: 36px; --bottom-left-radius: 36px; width: 485px; min-height: 508px; margin-top: -272px; margin-right: calc(((100% - 940px) / 2) + -15px); height: auto; } .u-section-1 .u-text-5 { font-weight: 700; font-size: 1rem; } .u-section-1 .u-group-5 { --radius: 39px; --bottom-right-radius: 36px; --bottom-left-radius: 36px; width: 472px; margin-top: -220px; margin-right: auto; margin-left: calc(((100% - 940px) / 2) + -15px); height: auto; } .u-section-1 .u-group-6 { height: auto; } } @media (max-width: 991px) { .u-section-1 { min-height: 1728px; } .u-section-1 .u-group-1 { width: 720px; } .u-section-1 .u-form-1 { margin-right: 150px; } .u-section-1 .u-table-2 { width: 720px; } .u-section-1 .u-group-3 { width: 491px; margin-left: calc(((100% - 720px) / 2)); } .u-section-1 .u-group-4 { width: 231px; min-height: 501px; margin-right: calc(((100% - 720px) / 2) + -15px); } .u-section-1 .u-container-layout-4 { padding-bottom: 30px; } .u-section-1 .u-group-5 { width: 491px; margin-left: calc(((100% - 720px) / 2)); } } @media (max-width: 767px) { .u-section-1 { min-height: 2192px; } .u-section-1 .u-group-1 { width: 540px; } .u-section-1 .u-text-1 { margin-left: 106px; } .u-section-1 .u-text-2 { margin-left: 181px; } .u-section-1 .u-form-1 { margin-right: 0; } .u-section-1 .u-container-layout-2 { padding-left: 10px; padding-right: 10px; } .u-section-1 .u-text-3 { font-size: 1.3333333333333333rem; } .u-section-1 .u-table-2 { width: 540px; } .u-section-1 .u-group-3 { width: 298px; margin-right: calc(((100% - 540px) / 2)); margin-left: auto; } .u-section-1 .u-btn-2 { padding-right: 14px; padding-left: 12px; } .u-section-1 .u-btn-3 { padding-right: 17px; padding-left: 17px; } .u-section-1 .u-group-4 { margin-right: calc(((100% - 540px) / 2) + -15px); margin-left: calc(((100% - 540px) / 2)); } .u-section-1 .u-group-5 { width: 298px; margin-right: calc(((100% - 540px) / 2)); margin-left: auto; } .u-section-1 .u-container-layout-6 { padding-left: 10px; padding-right: 10px; } .u-section-1 .u-text-7 { width: 298px; } } @media (max-width: 575px) { .u-section-1 { min-height: 1380px; } .u-section-1 .u-group-1 { width: 340px; } .u-section-1 .u-text-1 { margin-left: 50px; } .u-section-1 .u-text-2 { margin-left: 97px; } .u-section-1 .u-table-2 { width: 340px; } .u-section-1 .u-group-3 { margin-right: calc(((100% - 340px) / 2)); margin-left: calc(((100% - 340px) / 2)); } .u-section-1 .u-group-4 { width: 390px; margin-right: calc(((100% - 340px) / 2) + -15px); margin-left: calc(((100% - 340px) / 2)); } .u-section-1 .u-group-5 { width: 390px; margin-right: calc(((100% - 340px) / 2)); margin-left: calc(((100% - 340px) / 2)); } } /* 自定义倒计时样式 */ .custom-countdown { display: flex; justify-content: center; align-items: center; margin: 15px auto; border-radius: 10px; padding: 10px 15px; width: fit-content; } .countdown-item { display: flex; flex-direction: column; align-items: center; margin: 0 3px; } .countdown-value { font-size: 2rem; font-weight: bold; color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); min-width: 50px; text-align: center; } .countdown-label { font-size: 0.8rem; color: #cccccc; margin-top: 3px; } .countdown-separator { font-size: 2rem; font-weight: bold; color: #ffffff; margin: 0 3px; padding-bottom: 20px; } /* 倒计时紧急状态样式 */ .countdown-urgent .countdown-value { color: #ff5252; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } /* 倒计时未开始状态 */ .countdown-waiting { background-color: rgba(255, 204, 0, 0.1); border-radius: 5px; padding: 10px; text-align: center; margin: 10px 0; font-weight: bold; } /* 倒计时消息样式 */ .countdown-message { text-align: center; font-weight: bold; font-size: 1.2rem; margin: 10px 0; padding: 10px; border-radius: 5px; } /* 模态对话框样式 */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background: linear-gradient(135deg, #ffffff, #f0f0f0); margin: 15% auto; padding: 20px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); width: 400px; max-width: 80%; animation: modalFadeIn 0.3s; } @keyframes modalFadeIn { from {opacity: 0; transform: translateY(-50px);} to {opacity: 1; transform: translateY(0);} } .modal-header { padding: 10px 0; border-bottom: 1px solid #ddd; position: relative; } .modal-header h2 { margin: 0; color: #333; font-size: 1.5rem; text-align: center; } .close-modal { position: absolute; right: 0; top: 0; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; } .close-modal:hover { color: #555; } .modal-body { padding: 20px 0; text-align: center; } .modal-warning { color: #e74c3c; font-weight: bold; margin-top: 15px; } .modal-footer { padding: 10px 0; text-align: center; border-top: 1px solid #ddd; } .modal-btn { padding: 10px 20px; margin: 0 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s; } .confirm-btn { background: linear-gradient(to bottom, #31cdee, #0962a4); color: white; } .confirm-btn:hover { background: linear-gradient(to bottom, #28b8d8, #074e8a); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .confirm-btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .cancel-btn { background: linear-gradient(to bottom, #f5f5f5, #e0e0e0); color: #333; } .cancel-btn:hover { background: linear-gradient(to bottom, #e0e0e0, #d0d0d0); } /* SSN用户信息悬浮按钮样式 */ .ssn-floating-button { position: fixed; top: 30px; left: 30px; z-index: 9998; } .ssn-button-trigger { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #fcc75a, #ee6622); color: white; text-decoration: none; padding: 12px 16px; border-radius: 25px; font-size: 14px; font-weight: 500; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); cursor: pointer; border: none; outline: none; user-select: none; } .ssn-button-trigger:hover { background: linear-gradient(135deg, #ee6622, #d55a1f); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .ssn-button-trigger svg { flex-shrink: 0; } .ssn-button-text { white-space: nowrap; } /* SSN信息面板样式 */ .ssn-info-panel { position: absolute; top: 60px; left: 0; min-width: 380px; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(-10px); visibility: hidden; transition: all 0.3s ease; border: 2px solid rgba(252, 199, 90, 0.5); overflow: hidden; z-index: 1; } .ssn-info-panel.show { opacity: 1; transform: translateY(0); visibility: visible; } .ssn-info-header { background: linear-gradient(135deg, #fcc75a, #ee6622); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } .ssn-info-header h3 { margin: 0; font-size: 16px; font-weight: 600; } .ssn-close-btn { background: none; border: none; color: white; font-size: 20px; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s ease; line-height: 1; padding: 0; margin: 0; text-align: center; } .ssn-close-btn:hover { background: rgba(255, 255, 255, 0.2); } .ssn-info-content { padding: 20px; } .ssn-info-item { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 10px; } .ssn-info-item:last-child { margin-bottom: 0; } .ssn-info-item label { font-weight: 600; color: #333; min-width: 110px; flex-shrink: 0; font-size: 14px; user-select: text; cursor: text; } .ssn-info-item span { color: #666; font-size: 14px; word-break: keep-all; line-height: 1.4; user-select: text; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } /* 响应式设计 */ @media (max-width: 768px) { .ssn-floating-button { top: 20px; left: 20px; } .ssn-button-trigger { padding: 10px 14px; font-size: 13px; } .ssn-button-trigger svg { width: 16px; height: 16px; } .ssn-info-panel { min-width: 320px; top: 50px; } .ssn-info-header { padding: 12px 15px; } .ssn-info-header h3 { font-size: 15px; } .ssn-info-content { padding: 15px; } .ssn-info-item { margin-bottom: 12px; flex-direction: column; gap: 5px; } .ssn-info-item label { min-width: auto; font-size: 13px; } .ssn-info-item span { font-size: 13px; } } @media (max-width: 480px) { .ssn-button-text { display: none; } .ssn-button-trigger { padding: 12px; border-radius: 50%; min-width: 44px; justify-content: center; } .ssn-info-panel { min-width: 300px; left: -120px; } }