.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) + -240px) 0 auto; } .u-section-1 .u-image-2 { width: 381px; height: 134px; margin: -243px auto 0; } .u-section-1 .u-image-3 { width: 74px; height: 74px; margin: -90px 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: 698px; min-height: 856px; height: auto; background-position: 50% 50%; background-repeat: no-repeat; background-image: url("../images/web-151.png"); background-size: cover; margin: -725px auto 0; } .u-section-1 .u-container-layout-1 { padding: 0; } .u-section-1 .u-image-12 { width: 367px; height: 68px; margin: 83px auto 0; } .u-section-1 .u-form-1 { height: 586px; width: 532px; margin: 9px auto 0; } .u-section-1 .u-form-group-1 { margin-left: 0; } .u-section-1 .u-input-1 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-2 { margin-left: 0; } .u-section-1 .u-input-2 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-3 { margin-left: 0; } .u-section-1 .u-input-3 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-4 { margin-left: 0; } .u-section-1 .u-input-4 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-5 { margin-left: 0; } .u-section-1 .u-input-5 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-6 { margin-left: 0; } .u-section-1 .u-input-6 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-7 { margin-left: 0; } .u-section-1 .u-input-7 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-8 { margin-left: 0; } .u-section-1 .u-input-8 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-form-group-9 { margin-left: 0; } .u-section-1 .u-input-9 { font-weight: 600; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } .u-section-1 .u-btn-1 { letter-spacing: 0px; background-image: linear-gradient(#fcc75a, #ee6622); font-size: 1.5rem; font-weight: 600; text-transform: none; --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); padding: 13px 57px 14px 55px; } .u-section-1 .u-text-1 { margin-left: 0; line-height: 0.72; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 0; margin-top: 20px !important; } .u-section-1 .u-btn-2 { font-size: 1.125rem; width: 100%; transition-duration: 0.5s; text-transform: none; line-height: 1; text-decoration: underline !important; transform: rotate(0deg) scale(1) translateX(0px) translateY(0px); padding: 0; } .u-section-1 .u-image-13 { width: 143px; height: 143px; margin: -116px auto 60px calc(((100% - 1140px) / 2) + -99px); } @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; width: 134px; height: 134px; margin-top: 56px; margin-right: calc(((100% - 940px) / 2) + -11px); } .u-section-1 .u-image-2 { width: 305px; height: 107px; margin-top: -174px; } .u-section-1 .u-image-3 { margin-top: 37px; margin-left: calc(((100% - 940px) / 2) + -17px); } .u-section-1 .u-image-4 { width: 127px; height: 127px; margin-top: 137px; margin-left: calc(((100% - 940px) / 2) + -17px); } .u-section-1 .u-image-5 { margin-top: -469px; margin-left: calc(((100% - 940px) / 2) + 14px); } .u-section-1 .u-image-6 { margin-top: 507px; margin-left: calc(((100% - 940px) / 2) + 22px); } .u-section-1 .u-image-7 { width: 143px; height: 143px; margin-top: -302px; margin-right: calc(((100% - 940px) / 2) + -32px); } .u-section-1 .u-image-8 { width: 139px; height: 139px; margin-top: 16px; margin-right: calc(((100% - 940px) / 2) + -28px); } .u-section-1 .u-image-9 { margin-top: -401px; margin-right: calc(((100% - 940px) / 2) + -28px); } .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: 108px; margin-left: calc(((100% - 940px) / 2) + -114px); } .u-section-1 .u-image-11 { margin-top: -420px; height: auto; } .u-section-1 .u-form-1 { --radius: 36px; } .u-section-1 .u-btn-1 { border-style: solid; width: 100%; } .u-section-1 .u-image-13 { margin-left: calc(((100% - 940px) / 2) + -99px); } } @media (max-width: 991px) { .u-section-1 .u-image-1 { margin-right: calc(((100% - 720px) / 2) + -11px); } .u-section-1 .u-image-3 { margin-left: calc(((100% - 720px) / 2) + -17px); } .u-section-1 .u-image-4 { margin-left: calc(((100% - 720px) / 2) + -17px); } .u-section-1 .u-image-5 { margin-left: calc(((100% - 720px) / 2) + 14px); } .u-section-1 .u-image-6 { margin-left: calc(((100% - 720px) / 2) + 22px); } .u-section-1 .u-image-7 { margin-right: calc(((100% - 720px) / 2) + -32px); } .u-section-1 .u-image-8 { margin-right: calc(((100% - 720px) / 2) + -28px); } .u-section-1 .u-image-9 { margin-right: calc(((100% - 720px) / 2) + -28px); } .u-section-1 .u-image-10 { margin-left: calc(((100% - 720px) / 2) + -114px); } .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) + -11px); } .u-section-1 .u-image-3 { margin-left: calc(((100% - 540px) / 2) + -17px); } .u-section-1 .u-image-4 { margin-left: calc(((100% - 540px) / 2) + -17px); } .u-section-1 .u-image-5 { margin-top: -299px; margin-left: calc(((100% - 540px) / 2)); } .u-section-1 .u-image-6 { margin-top: 337px; margin-left: calc(((100% - 540px) / 2) + 22px); } .u-section-1 .u-image-7 { margin-right: calc(((100% - 540px) / 2) + -32px); } .u-section-1 .u-image-8 { margin-right: calc(((100% - 540px) / 2) + -28px); } .u-section-1 .u-image-9 { margin-right: calc(((100% - 540px) / 2) + -28px); } .u-section-1 .u-image-10 { margin-left: calc(((100% - 540px) / 2) + -114px); } .u-section-1 .u-image-11 { width: 540px; } .u-section-1 .u-text-1 { font-size: 1rem; } .u-section-1 .u-image-13 { margin-left: calc(((100% - 540px) / 2) + -99px); } } @media (max-width: 575px) { .u-section-1 .u-image-1 { margin-right: calc(((100% - 340px) / 2) + -11px); } .u-section-1 .u-image-3 { margin-left: calc(((100% - 340px) / 2) + -17px); } .u-section-1 .u-image-4 { margin-left: calc(((100% - 340px) / 2) + -17px); } .u-section-1 .u-image-5 { margin-left: calc(((100% - 340px) / 2)); } .u-section-1 .u-image-6 { margin-left: calc(((100% - 340px) / 2) + 22px); } .u-section-1 .u-image-7 { margin-right: calc(((100% - 340px) / 2) + -32px); } .u-section-1 .u-image-8 { margin-right: calc(((100% - 340px) / 2) + -28px); } .u-section-1 .u-image-9 { margin-right: calc(((100% - 340px) / 2) + -28px); } .u-section-1 .u-image-10 { margin-left: calc(((100% - 340px) / 2) + -114px); } .u-section-1 .u-image-11 { width: 340px; } .u-section-1 .u-image-12 { width: 340px; height: 63px; } .u-section-1 .u-form-1 { width: 340px; } .u-section-1 .u-image-13 { margin-left: calc(((100% - 340px) / 2) + -99px); } } .u-section-1 .u-btn-2, .u-section-1 .u-btn-2:before, .u-section-1 .u-btn-2 > .u-container-layout:before { transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position; } .u-section-1 .u-btn-2.u-btn-2.u-btn-2:hover { transform: scale(1.1) translateX(0px) translateY(0px) !important; } .u-section-1 .u-btn-2 { border-color: transparent !important; } .u-section-1 .u-btn-2.u-btn-2.u-btn-2.hover { transform: scale(1.1) translateX(0px) translateY(0px) !important; } .u-section-1 .u-btn-2 { border-color: transparent !important; } /* 为所有按钮添加悬停放大和点击缩小效果 */ .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"], input[type="tel"], select { transition: all 0.3s ease; } input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="tel"]:hover, select:hover { transform: scale(1.05); } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus { transform: scale(1.05); outline: none; /* 移除默认的聚焦轮廓 */ } /* 为所有输入框添加文字居中样式 */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select { text-align: center; } /* 密码输入框容器样式 */ .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; } /* 设置所有输入框的高度为60px */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select { height: 60px !important; } /* 调整select下拉框的箭头位置,使其垂直居中 */ .u-form-select-wrapper .u-caret { top: 50%; transform: translateY(-50%); } /* Footer样式 */ .footer-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; padding: 0; height: 20px; } .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; } .copyright-text { display: flex; align-items: center; justify-content: center; gap: 5px; color: rgba(255, 255, 255, 0.7); font-size: 12px; margin: 0; } .copyright-icon { display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.7); } /* 响应式调整 */ @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; } } /* 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; } }