.u-section-1 { background-image: url("../images/web-15.png"); background-repeat: no-repeat; background-position: 50% 50%; min-height: 100vh; } .u-section-1 .u-image-1 { width: 284px; height: 284px; margin: 0 calc(((100% - 1140px) / 2) + -239px) 0 auto; } .u-section-1 .u-image-2 { width: 381px; height: 134px; margin: -268px auto 0; } .u-section-1 .u-image-3 { width: 74px; height: 74px; margin: -65px auto 0 calc(((100% - 1140px) / 2) + -182px); } .u-section-1 .u-image-4 { width: 251px; height: 251px; margin: 0 auto 0 calc(((100% - 1140px) / 2) + -403px); } .u-section-1 .u-image-5 { width: 143px; height: 143px; margin: -228px auto 0 calc(((100% - 1140px) / 2) + -143px); } .u-section-1 .u-image-6 { width: 143px; height: 143px; margin: 160px auto 0 calc(((100% - 1140px) / 2) + -277px); } .u-section-1 .u-image-7 { width: 251px; height: 250px; margin: -140px calc(((100% - 1140px) / 2) + -392px) 0 auto; } .u-section-1 .u-image-8 { width: 249px; height: 249px; margin: -98px calc(((100% - 1140px) / 2) + -249px) 0 auto; } .u-section-1 .u-image-9 { width: 74px; height: 74px; margin: -305px calc(((100% - 1140px) / 2) + -161px) 0 auto; } .u-section-1 .u-image-10 { width: 284px; height: 284px; margin: -74px auto 0 calc(((100% - 1140px) / 2) + -173px); } .u-section-1 .u-image-11 { width: 795px; min-height: 831px; height: auto; background-position: 50% 50%; background-repeat: no-repeat; background-image: url("../images/web-17.png"); background-size: cover; margin: -771px auto 0; } .u-section-1 .u-container-layout-1 { padding: 0; } .u-section-1 .u-image-12 { width: 367px; height: 68px; margin: 140px auto 0; } .u-section-1 .u-form-1 { height: 498px; width: 570px; margin: 23px auto 0; } .u-section-1 .u-text-1 { margin-left: 0; font-weight: 700; letter-spacing: 9px; line-height: 1.2; margin-right: auto; } .u-section-1 .u-form-group-2 { margin-left: auto; margin-right: auto; } .u-section-1 .u-input-1 { background-image: none; --radius: 50px; height: 60px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); font-size: 1.125rem; } .u-section-1 .u-form-group-3 { margin-left: auto; margin-right: auto; } .u-section-1 .u-input-2 { background-image: none; --radius: 50px; height: 60px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); font-size: 1.125rem; } .u-section-1 .u-text-2 { margin-left: 0; font-weight: 700; letter-spacing: 9px; line-height: 1.2; margin-right: auto; } .u-section-1 .u-btn-1 { background-image: none; text-decoration: underline !important; letter-spacing: 0px; padding: 0; } .u-section-1 .u-text-3 { margin-left: 0; letter-spacing: 3px; margin-right: auto; } .u-section-1 .u-btn-2 { background-image: none; font-weight: 800; padding: 0; } .u-section-1 .u-form-group-6 { margin-left: auto; margin-right: auto; } .u-section-1 .u-btn-3 { --radius: 50px; font-weight: 800; margin-left: auto; margin-right: auto; background-image: linear-gradient(#fcc75a, #ee6622); font-size: 2.25rem; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); padding: 6px 68px 6px 67px; } .u-section-1 .u-btn-4 { margin: -429px calc(((100% - 1140px) / 2) + 19px) 0 auto; } .u-section-1 .u-image-13 { width: 143px; height: 143px; margin: 445px auto 60px calc(((100% - 1140px) / 2) + 172px); } @media (max-width: 1199px) { .u-section-1 { background-size: cover; } .u-section-1 .u-image-1 { --animation-custom_in-translate_x: 0px; --animation-custom_in-translate_y: 0px; --animation-custom_in-opacity: 1; --animation-custom_in-rotate: 360deg; --animation-custom_in-scale: 1; margin-top: 23px; margin-right: calc(((100% - 940px) / 2) + -14px); } .u-section-1 .u-image-2 { width: 147px; height: 52px; margin-top: -284px; margin-left: calc(((100% - 940px) / 2) + 383px); } .u-section-1 .u-image-3 { margin-top: 616px; margin-left: calc(((100% - 940px) / 2) + 21px); } .u-section-1 .u-image-4 { margin-top: -123px; margin-left: 0; } .u-section-1 .u-image-5 { margin-top: -614px; margin-left: calc(((100% - 940px) / 2) + 38px); } .u-section-1 .u-image-6 { margin-top: 30px; margin-left: calc(((100% - 940px) / 2)); } .u-section-1 .u-image-7 { margin-top: -344px; margin-right: calc(((100% - 940px) / 2) + -68px); } .u-section-1 .u-image-8 { width: 149px; height: 149px; margin-top: 140px; margin-right: calc(((100% - 940px) / 2)); } .u-section-1 .u-image-9 { margin-top: -334px; margin-right: calc(((100% - 940px) / 2)); } .u-section-1 .u-image-10 { --animation-custom_in-translate_x: 0px; --animation-custom_in-translate_y: 0px; --animation-custom_in-opacity: 0; --animation-custom_in-rotate: 0deg; --animation-custom_in-scale: 0.3; animation-duration: 120000ms; margin-top: 44px; margin-left: calc(((100% - 940px) / 2) + -33px); } .u-section-1 .u-image-11 { margin-top: -651px; height: auto; } .u-section-1 .u-btn-4 { margin-top: -791px; margin-right: calc(((100% - 940px) / 2)); margin-bottom: 60px; } .u-section-1 .u-image-13 { margin-left: calc(((100% - 940px) / 2) + 172px); } } @media (max-width: 991px) { .u-section-1 .u-image-1 { margin-top: -289px; margin-right: calc(((100% - 720px) / 2) + -239px); } .u-section-1 .u-image-2 { width: 208px; height: 74px; margin-top: 12px; margin-left: auto; } .u-section-1 .u-image-3 { margin-top: 171px; margin-left: calc(((100% - 720px) / 2) + -37px); } .u-section-1 .u-image-4 { margin-left: calc(((100% - 720px) / 2) + -403px); } .u-section-1 .u-image-5 { margin-left: calc(((100% - 720px) / 2) + -143px); } .u-section-1 .u-image-6 { margin-top: -414px; margin-left: calc(((100% - 720px) / 2) + 69px); } .u-section-1 .u-image-7 { margin-right: calc(((100% - 720px) / 2) + -392px); } .u-section-1 .u-image-8 { margin-right: calc(((100% - 720px) / 2) + -249px); } .u-section-1 .u-image-9 { margin-top: 50px; margin-right: calc(((100% - 720px) / 2) + -37px); } .u-section-1 .u-image-10 { margin-left: calc(((100% - 720px) / 2) + -284px); } .u-section-1 .u-image-11 { width: 720px; margin-top: -444px; } .u-section-1 .u-btn-4 { margin-top: -497px; margin-right: calc(((100% - 720px) / 2) + 60px); } .u-section-1 .u-image-13 { margin-left: calc(((100% - 720px) / 2) + 172px); } } @media (max-width: 767px) { .u-section-1 .u-image-1 { margin-right: calc(((100% - 540px) / 2) + -239px); } .u-section-1 .u-image-2 { margin-top: 9px; } .u-section-1 .u-image-3 { margin-top: -20px; margin-left: calc(((100% - 540px) / 2)); } .u-section-1 .u-image-4 { margin-left: calc(((100% - 540px) / 2) + -403px); } .u-section-1 .u-image-5 { margin-left: calc(((100% - 540px) / 2) + -143px); } .u-section-1 .u-image-6 { margin-top: 358px; margin-right: calc(((100% - 540px) / 2) + 65px); margin-left: auto; } .u-section-1 .u-image-7 { margin-top: 20px; margin-right: calc(((100% - 540px) / 2) + -392px); } .u-section-1 .u-image-8 { margin-right: calc(((100% - 540px) / 2) + -249px); } .u-section-1 .u-image-9 { margin-top: -612px; margin-right: calc(((100% - 540px) / 2)); } .u-section-1 .u-image-10 { margin-left: calc(((100% - 540px) / 2) + -284px); } .u-section-1 .u-image-11 { width: 540px; margin-top: 404px; } .u-section-1 .u-form-1 { width: 540px; } .u-section-1 .u-btn-4 { margin-top: -1378px; margin-right: calc(((100% - 540px) / 2) + -31px); } .u-section-1 .u-image-13 { margin-left: calc(((100% - 540px) / 2) + 172px); } } @media (max-width: 575px) { .u-section-1 .u-image-1 { margin-right: calc(((100% - 340px) / 2) + -239px); } .u-section-1 .u-image-2 { margin-top: 23px; } .u-section-1 .u-image-3 { margin-top: -23px; margin-left: calc(((100% - 340px) / 2) + -182px); } .u-section-1 .u-image-4 { margin-left: calc(((100% - 340px) / 2) + -403px); } .u-section-1 .u-image-5 { margin-left: calc(((100% - 340px) / 2) + -143px); } .u-section-1 .u-image-6 { margin-right: calc(((100% - 340px) / 2) + 65px); margin-left: calc(((100% - 340px) / 2) + -282px); } .u-section-1 .u-image-7 { margin-top: -344px; margin-right: calc(((100% - 340px) / 2) + -392px); } .u-section-1 .u-image-8 { margin-right: calc(((100% - 340px) / 2) + -249px); } .u-section-1 .u-image-9 { margin-right: calc(((100% - 340px) / 2) + -161px); } .u-section-1 .u-image-10 { margin-left: calc(((100% - 340px) / 2) + -284px); } .u-section-1 .u-image-11 { width: 340px; margin-top: -78px; } .u-section-1 .u-image-12 { width: 274px; height: 51px; margin-left: 33px; margin-right: 33px; } .u-section-1 .u-form-1 { width: 340px; } .u-section-1 .u-btn-4 { margin-top: -842px; margin-right: calc(((100% - 340px) / 2) + -34px); } .u-section-1 .u-image-13 { margin-left: calc(((100% - 340px) / 2) + 172px); } } /* 为所有按钮添加悬停放大和点击缩小效果 */ .u-btn, button, input[type="submit"] { transition: all 0.3s ease; } .u-btn:hover, button:hover, input[type="submit"]:hover { transform: scale(1.05); } .u-btn:active, button:active, input[type="submit"]:active { transform: scale(0.9); } /* 为所有输入框添加悬停和选中时的放大效果 */ input[type="text"], input[type="password"], input[type="email"] { transition: all 0.3s ease; } input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover { transform: scale(1.05); } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { transform: scale(1.05); outline: none; /* 移除默认的聚焦轮廓 */ } /* 为所有输入框和下拉框添加内容居中样式 */ .u-input { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; } /* 确保placeholder文字居中 */ .u-input::placeholder { text-align: center !important; } /* 下拉框文字居中 */ select.u-input { text-align-last: center !important; } /* 密码输入框容器样式 */ .password-container { position: relative; width: 100%; height: 60px; display: flex; align-items: center; } /* 密码显示/隐藏按钮样式 */ .password-toggle { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; } /* 眼睛图标样式 */ .eye-icon { width: 20px; height: 20px; opacity: 0.6; transition: opacity 0.3s ease; color: #666; } .eye-icon:hover { opacity: 1; } /* 调整密码输入框右侧padding,为图标留出空间 */ .password-container input[type="password"], .password-container input[type="text"] { width: 100%; padding: 0 45px !important; text-align: center !important; height: 60px !important; line-height: 60px !important; } /* 确保所有输入框文本居中 */ .u-input-1, .u-input-2 { text-align: center !important; padding: 0 45px !important; } .copyright-text { display: flex; align-items: center; justify-content: center; gap: 5px; color: rgba(255, 255, 255, 0.7); font-size: 12px; margin: 0; } /* Footer样式 */ .footer-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; height: 20px; } /* 调整footer容器高度 */ .u-footer { min-height: 20px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .u-sheet.u-valign-middle { min-height: 20px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* 确保页面底部没有多余空间 */ body { margin-bottom: 0 !important; min-height: 100vh; display: flex; flex-direction: column; } .u-body { margin-bottom: 0 !important; flex: 1; } /* 调整footer内文字样式 */ .beian-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease; font-size: 12px; } .beian-link:hover { color: #fff; } /* 响应式调整 */ @media (max-width: 767px) { .footer-content { flex-direction: column; height: auto; padding: 5px 0; gap: 5px; } .copyright-text { font-size: 10px; } .beian-link { font-size: 10px; } } .u-dialog-section-6 .u-image-1 { width: 545px; min-height: 644px; /* box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); */ height: auto; background-image: url("../images/web-151.png"); background-position: 50% 50%; margin: 273px auto 60px calc(((100% - 1140px) / 2) + 287px); } .u-dialog-section-6 .u-container-layout-1 { padding: 0; } .u-dialog-section-6 .u-text-1 { text-transform: none; font-weight: 700; line-height: 1; letter-spacing: 0px; width: 411px; text-shadow: 2px 2px 8px rgba(0,0,0,0.4); margin: 76px auto 0; } .u-dialog-section-6 .u-form-1 { height: 62px; width: 419px; margin: 41px auto 0; } .u-dialog-section-6 .u-input-1 { --radius: 50px; height: 60px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-dialog-section-6 .u-btn-1 { background-image: linear-gradient(var(--custom-color-4), var(--custom-color-5)); border-style: none; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); background-image: linear-gradient(#00ff00, #009245); padding: 17px 22px 17px 21px; } .u-dialog-section-6 .u-form-2 { height: 242px; width: 411px; margin: 41px auto 0; } .u-dialog-section-6 .u-input-2 { --radius: 50px; height: 60px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-dialog-section-6 .u-form-group-4 { margin-left: 0; } .u-dialog-section-6 .u-input-3 { --radius: 50px; height: 60px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-dialog-section-6 .u-btn-2 { background-image: linear-gradient(#fcc75a, #ee6622); border-style: none; letter-spacing: 2px; --radius: 50px; font-size: 1.125rem; font-weight: 800; width: 100%; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); text-transform: none; padding: 15px 0 16px; } .u-dialog-section-6 .u-icon-1 { width: 161px; height: 161px; left: auto; top: -28px; position: absolute; right: -54px; padding: 21px; } @media (max-width: 1199px) { .u-dialog-section-6 .u-image-1 { --radius: 25px; margin-top: 60px; margin-left: auto; } .u-dialog-section-6 .u-btn-1 { width: 100%; } .u-dialog-section-6 .u-form-2 { height: 242px; margin-left: 67px; margin-right: 67px; } .u-dialog-section-6 .u-icon-1 { --radius: 50px; } } @media (max-width: 991px) { .u-dialog-section-6 .u-form-1 { margin-top: 37px; margin-right: 92px; margin-left: 67px; } .u-dialog-section-6 .u-form-2 { margin-top: 45px; } } @media (max-width: 767px) { .u-dialog-section-6 .u-image-1 { width: 540px; } .u-dialog-section-6 .u-text-1 { margin-top: 77px; } .u-dialog-section-6 .u-form-1 { margin-top: -321px; margin-right: 90px; margin-left: 65px; } .u-dialog-section-6 .u-form-2 { height: 242px; margin-top: 333px; margin-left: auto; margin-right: auto; } } @media (max-width: 575px) { .u-dialog-section-6 .u-image-1 { width: 340px; } .u-dialog-section-6 .u-text-1 { width: auto; margin-top: 57px; margin-left: 20px; margin-right: 20px; } .u-dialog-section-6 .u-form-1 { height: 154px; width: 315px; margin-top: 33px; margin-left: 13px; margin-right: 13px; } .u-dialog-section-6 .u-form-2 { width: 315px; margin-top: 43px; } } .u-dialog-section-5 .u-image-1 { width: 833px; min-height: 491px; height: auto; background-image: url("../images/web-23.png"); background-position: 50% 50%; margin: 60px auto; } .u-dialog-section-5 .u-container-layout-1 { padding: 0; } .u-dialog-section-5 .u-text-1 { font-weight: 700; text-transform: none; width: 411px; line-height: 1; font-size: 2.25rem; margin: 44px auto 0; } .u-dialog-section-5 .u-image-2 { width: 4px; height: 300px; margin: 20px auto 0 361px; } .u-dialog-section-5 .u-text-2 { font-size: 1rem; font-weight: 700; margin: -292px 149px 0 462px; } .u-dialog-section-5 .u-text-3 { font-size: 1rem; font-weight: 700; font-style: normal; margin: -25px 516px 0 102px; } .u-dialog-section-5 .u-image-3 { background-image: url("../images/new1.jpg"); min-height: 206px; background-position: 50% 50%; width: 209px; height: auto; --radius: 15px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); margin: 29px auto 0 112px; } .u-dialog-section-5 .u-container-layout-2 { padding: 30px; } .u-dialog-section-5 .u-form-1 { height: 182px; margin: -228px 80px 0 393px; } .u-dialog-section-5 .u-input-1 { --radius: 50px; height: 60px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-dialog-section-5 .u-btn-1 { background-image: linear-gradient(#fcc75a, #ee6622); letter-spacing: 8px; --radius: 47px; width: 100%; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); text-transform: uppercase; font-weight: 800; padding: 17px 0; } .u-dialog-section-5 .u-form-2 { height: 102px; margin: -19px 80px 0 393px; } .u-dialog-section-5 .u-btn-2 { background-image: linear-gradient(#fcc75a, #ee6622); letter-spacing: 8px; --radius: 47px; width: 100%; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); text-transform: uppercase; font-weight: 800; padding: 17px 0; } .u-block-a57a-31 { height: 128px; margin: ; } .u-block-a57a-36 { --radius: 50px; } .u-dialog-section-5 .u-icon-1 { width: 79px; height: 79px; left: auto; top: 9px; position: absolute; right: 43px; padding: 0; } @media (max-width: 1199px) { .u-dialog-section-5 .u-image-1 { width: 833px; --radius: 34px; } .u-dialog-section-5 .u-text-1 { margin-top: 81px; } .u-dialog-section-5 .u-image-2 { width: 4px; margin-top: -621px; margin-left: 361px; } .u-dialog-section-5 .u-text-2 { width: 428px; margin-top: -329px; margin-right: 149px; margin-left: 461px; } .u-dialog-section-5 .u-text-3 { width: 428px; margin-top: 20px; margin-left: 102px; margin-right: 516px; } .u-dialog-section-5 .u-image-3 { margin-top: 305px; margin-left: 121px; height: auto; } .u-dialog-section-5 .u-form-1 { margin-top: -233px; margin-right: 89px; margin-left: 384px; } .u-dialog-section-5 .u-btn-1 { border-style: none; } .u-dialog-section-5 .u-form-2 { margin-top: -4px; margin-right: 89px; margin-left: 384px; } .u-block-a57a-31 { width: 128px; margin-top: -7px; } .u-dialog-section-5 .u-icon-1 { --radius: 50px; } } @media (max-width: 991px) { .u-dialog-section-5 .u-image-1 { width: 720px; } .u-dialog-section-5 .u-text-1 { margin-top: 79px; } .u-dialog-section-5 .u-image-2 { margin-top: -645px; } .u-dialog-section-5 .u-text-2 { margin-top: -335px; margin-right: 93px; margin-left: 405px; } .u-dialog-section-5 .u-text-3 { margin-left: 46px; margin-right: 460px; } .u-dialog-section-5 .u-image-3 { margin-top: 308px; margin-left: 87px; } .u-dialog-section-5 .u-form-1 { margin-top: -230px; margin-right: 87px; margin-left: 327px; } .u-dialog-section-5 .u-form-2 { margin-top: 10px; margin-right: 87px; margin-left: 327px; } .u-dialog-section-5 .u-icon-1 { top: 29px; right: 12px; } } @media (max-width: 767px) { .u-dialog-section-5 .u-image-1 { width: 540px; } .u-dialog-section-5 .u-text-1 { font-size: 1.5rem; margin-top: 110px; } .u-dialog-section-5 .u-image-2 { margin-top: -675px; } .u-dialog-section-5 .u-text-2 { margin-top: -366px; margin-right: 3px; margin-left: 315px; } .u-dialog-section-5 .u-text-3 { font-size: 1.125rem; margin-top: -25px; margin-left: 0; margin-right: 326px; } .u-dialog-section-5 .u-image-3 { min-height: 133px; width: 133px; margin-top: 381px; margin-left: 65px; } .u-dialog-section-5 .u-container-layout-2 { padding-left: 10px; padding-right: 10px; } .u-dialog-section-5 .u-form-1 { height: 146px; margin-top: -178px; margin-right: 46px; margin-left: 217px; } .u-dialog-section-5 .u-form-2 { margin-top: -14px; margin-right: 46px; margin-left: 217px; } .u-dialog-section-5 .u-icon-1 { top: 71px; right: 0; } } @media (max-width: 575px) { .u-dialog-section-5 .u-image-1 { min-height: 582px; margin-top: 364px; margin-right: initial; margin-left: initial; width: auto; } .u-dialog-section-5 .u-container-layout-1 { padding-bottom: 25px; } .u-dialog-section-5 .u-text-1 { width: auto; margin-top: 126px; margin-right: 26px; margin-left: 14px; } .u-dialog-section-5 .u-image-2 { margin-top: -788px; margin-left: 336px; } .u-dialog-section-5 .u-text-2 { width: auto; margin-top: 196px; margin-left: 0; margin-right: 0; } .u-dialog-section-5 .u-text-3 { width: auto; margin-top: -580px; margin-left: 20px; margin-right: 20px; } .u-dialog-section-5 .u-image-3 { min-height: 171px; margin-top: 601px; margin-left: 44px; } .u-dialog-section-5 .u-form-1 { height: 172px; margin-top: -198px; margin-right: 26px; margin-left: 175px; } .u-dialog-section-5 .u-form-2 { height: 88px; margin-top: -22px; margin-right: 26px; margin-left: 175px; } .u-dialog-section-5 .u-btn-2 { padding: 10px 32px 10px 30px; } .u-block-a57a-31 { margin-right: 212px; } .u-dialog-section-5 .u-icon-1 { top: 133px; right: -6px; } } /* Toast 容器 */ #toast-container { position: fixed; top: 10%; left: 50%; transform: translate(-50%, -50%); z-index: 100002; /* 确保在最上层 */ display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; /* 允许点击穿透 */ } /* 单个 Toast */ .toast { min-width: 250px; max-width: 350px; padding: 15px 20px; border-radius: 50px; color: #fff; font-family: Arial, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); opacity: 0.9; transition: opacity 0.5s ease, transform 0.5s ease; display: flex; align-items: center; justify-content: center; /* 居中文本 */ text-align: center; /* 居中文本 */ pointer-events: auto; /* 允许 Toast 接收事件 */ } /* 成功 Toast */ .toast.success { box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); background-image: linear-gradient(#00ff00, #009245); } /* 错误 Toast */ .toast.error { background-image: linear-gradient(#ff6474, #e01c4c); box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } /* 信息 Toast */ .toast.info { background-image: linear-gradient(#31cdee, #0962a4); box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } /* 淡出效果 */ .toast.fade-out { opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } /* 移动端隐藏footer */ @media (max-width: 767px) { .u-footer { display: none !important; } } /* 右下角悬浮按钮样式 */ .floating-button { position: fixed; bottom: 30px; right: 30px; z-index: 10000; transition: all 0.3s ease; } .floating-link { display: flex; align-items: center; justify-content: center; min-width: 180px; height: 50px; padding: 10px 20px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: white; text-decoration: none; border-radius: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; } .floating-text { opacity: 1; max-width: none; transition: all 0.3s ease; margin-left: 8px; } /* 悬停时的效果 */ .floating-button:hover .floating-link { background: rgba(0, 0, 0, 0.85); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); transform: translateY(-2px); } /* 点击效果 */ .floating-button:active .floating-link { transform: translateY(0) scale(0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* 添加一个学习图标 */ .floating-link::before { content: ""; font-size: 18px; line-height: 1; flex-shrink: 0; margin-right: 2px; } /* 响应式调整 */ @media (max-width: 768px) { .floating-button { bottom: 20px; right: 20px; } .floating-link { min-width: 160px; height: 45px; font-size: 12px; padding: 8px 16px; } .floating-link::before { font-size: 16px; } } @media (max-width: 480px) { .floating-button { bottom: 15px; right: 15px; } .floating-link { min-width: 140px; height: 40px; font-size: 11px; padding: 6px 14px; } .floating-link::before { font-size: 14px; } }