.main-page { width: 100%; min-height: 100vh; background-color: #f8fafd; overflow-y: auto; -webkit-overflow-scrolling: touch; } .logo-item { display: flex; align-items: center; } .top-box { width: 100%; height: 50vh; background: url("../../images/banner.png") no-repeat; background-size: 100% 100%; display: flex; align-items: center; } .title { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #222f60; } .title .name { background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 0.68rem; } .title .title-top { font-size: 0.6rem; } .title .title-btm { font-size: 0.338rem; margin-top: 0.98rem; } .text { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0.14rem 0; width: 100%; } .text .text-top { font-size: 0.338rem; color: #000; font-weight: 700; } .text .text-btm { font-size: 0.234rem; color: #707070; } .base-box, .journey-box, .latitude-box { width: 100%; display: flex; flex-direction: column; padding: 0.3rem 0.4rem; } .base-box .content, .journey-box .content, .latitude-box .content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem; } .base-box .content .item-box, .journey-box .content .item-box, .latitude-box .content .item-box { width: 48%; border-radius: 0.1rem; padding: 0.2rem; box-shadow: 0 0.02rem 0.08rem rgba(39, 90, 255, 0.08); margin-bottom: 0.2rem; display: flex; flex-direction: column; background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%); border: 0.01rem solid rgba(39, 90, 255, 0.1); transition: all 0.3s ease; position: relative; padding-bottom: 1.8rem; } .base-box .content .item-box:hover, .journey-box .content .item-box:hover, .latitude-box .content .item-box:hover { box-shadow: 0 0.04rem 0.16rem rgba(39, 90, 255, 0.12); transform: translateY(-0.02rem); border-color: rgba(39, 90, 255, 0.2); background: linear-gradient(135deg, #e8f2ff 0%, #ffffff 100%); } .base-box .content .item-box .item-title, .journey-box .content .item-box .item-title, .latitude-box .content .item-box .item-title { font-size: 0.26rem; font-weight: bold; color: #333; margin-bottom: 0.1rem; } .base-box .content .item-box .item-description, .journey-box .content .item-box .item-description, .latitude-box .content .item-box .item-description { font-size: 0.2rem; color: #666; margin-bottom: 0.15rem; line-height: 1.4; } .base-box .content .item-box .advantage-list, .journey-box .content .item-box .advantage-list, .latitude-box .content .item-box .advantage-list { display: block; } .base-box .content .item-box .advantage-list .advantage-item, .journey-box .content .item-box .advantage-list .advantage-item, .latitude-box .content .item-box .advantage-list .advantage-item { display: block; font-size: 0.156rem; color: #666; } .base-box .content .item-box .advantage-list .advantage-item .advantage-icon, .journey-box .content .item-box .advantage-list .advantage-item .advantage-icon, .latitude-box .content .item-box .advantage-list .advantage-item .advantage-icon { width: 0.18rem; height: 0.18rem; margin-right: 0.05rem; flex-shrink: 0; } .base-box .content .item-box .advantage-list .advantage-item .advantage-name, .journey-box .content .item-box .advantage-list .advantage-item .advantage-name, .latitude-box .content .item-box .advantage-list .advantage-item .advantage-name { color: #000; font-weight: 500; white-space: nowrap; font-size: 0.2rem; margin-right: 0.05rem; } .base-box .content .item-box .advantage-list .advantage-item .advantage-content, .journey-box .content .item-box .advantage-list .advantage-item .advantage-content, .latitude-box .content .item-box .advantage-list .advantage-item .advantage-content { font-size: 0.18rem; } .base-box .content .item-box .item-price, .journey-box .content .item-box .item-price, .latitude-box .content .item-box .item-price { width: calc(100% - 0.4rem); padding-top: 0.2rem; border-top: 0.02rem dashed #d4d6e1; font-size: 0.13rem; font-weight: bold; color: #d4d6e1; margin: 0.2rem 0; position: absolute; bottom: 0.6rem; } .base-box .content .item-box .item-price .price, .journey-box .content .item-box .item-price .price, .latitude-box .content .item-box .item-price .price { font-size: 0.38rem; color: #f52220; } .base-box .content .item-box .item-price .price-icon, .journey-box .content .item-box .item-price .price-icon, .latitude-box .content .item-box .item-price .price-icon { color: #f52220; font-size: 0.18rem; } .base-box .content .item-box .tag-list, .journey-box .content .item-box .tag-list, .latitude-box .content .item-box .tag-list { display: flex; flex-wrap: wrap; gap: 0.1rem; margin: 0.15rem 0; } .base-box .content .item-box .tag-list .tag-item, .journey-box .content .item-box .tag-list .tag-item, .latitude-box .content .item-box .tag-list .tag-item { padding: 0.04rem 0.12rem; font-size: 0.18rem; color: #aeb6bf; background-color: #fff; border: 0.02rem solid #c8d6e7; border-radius: 0.12rem; display: inline-block; } .base-box .content .item-box .item-button, .journey-box .content .item-box .item-button, .latitude-box .content .item-box .item-button { background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%); border-radius: 0.04rem; padding: 0.08rem 0; text-align: center; cursor: pointer; margin-top: auto; width: 100%; position: relative; bottom: -1.6rem; } .base-box .content .item-box .item-button .item-button-text, .journey-box .content .item-box .item-button .item-button-text, .latitude-box .content .item-box .item-button .item-button-text { color: #fff; font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */ } .partner { background-color: #f8f9fd; width: 100%; display: flex; flex-direction: column; padding: 0.3rem 0.4rem; } .partner .partner-scroll { width: 100%; max-width: 14rem; margin: 0 auto; padding: 0.15rem; background: #fff; border-radius: 0.16rem; margin-bottom: 0.3rem; } .partner .partner-scroll .logo-scroll-wrapper { width: 100%; height: 0.85rem; overflow: hidden; position: relative; } .partner .partner-scroll .logo-scroll-container { display: flex; height: 100%; animation: scroll linear infinite; white-space: nowrap; width: max-content; } .partner .partner-scroll .logo-item { flex: 0 0 auto; width: 1.68rem; height: 100%; margin-right: 0.2rem; background: #fff; border-radius: 0.04rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .partner .partner-scroll .logo-item img { width: 100%; height: 100%; object-fit: contain; } /* 关键:无缝循环滚动动画 */ @keyframes scroll { 0% { transform: translateX(0); } 100% { /* 因为图片重复了三份,所以移动33.33%实现无缝循环 */ transform: translateX(-33.33%); } } .footer { width: 100%; background: #f5f7fa; color: #fff; padding: 0.4rem 0.2rem; } .footer-content { max-width: 12rem; margin: 0 auto; } .footer { width: 100%; background: #f6f8fd; color: #333; padding: 0.6rem 0.2rem 0.4rem; position: relative; overflow: hidden; border-top: 0.01rem solid #e8edf5; } .footer:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; } .footer-content { max-width: 12.8rem; margin: 0 auto; position: relative; } /* 顶部信息区域 */ .footer-top { display: flex; flex-direction: column; align-items: flex-start; } .logo-footer { width: 2.4rem; height: 0.8rem; margin-bottom: 0.4rem; border-radius: 0.12rem; } .logo-footer img { width: 100%; height: 100%; } .footer-center { font-size: 0.24rem; padding: 0.3rem 0.2rem; background: #fff; border-radius: 0.16rem; box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.05); margin-top: 0.4rem; border: 0.01rem solid #eef2f9; width: 100%; } @media (min-width: 768px) { .footer-center { grid-template-columns: 1fr 1fr; gap: 0.3rem 0.6rem; } } .footer-center .contact-item { display: flex; align-items: flex-start; padding: 0.16rem 0.2rem; border-radius: 0.12rem; } .footer-center .contact-item .iconfont { width: 0.2rem; height: 0.2rem; margin-right: 0.12rem; margin-top: 0.02rem; color: #275AFF; flex-shrink: 0; font-size: 0.26rem; } .footer-center .contact-item .label { color: #666; flex-shrink: 0; font-weight: 500; margin-right: 0.08rem; font-size: 0.24rem; } .footer-center .contact-item .value { color: #444; flex: 1; line-height: 1.5; } .footer-center .contact-item .phone-numbers { display: flex; flex-direction: column; gap: 0.08rem; } @media (min-width: 768px) { .footer-center .contact-item .phone-numbers { flex-direction: row; align-items: center; gap: 0.16rem; } } .footer-center .contact-item .phone-link { color: #333; text-decoration: none; transition: all 0.3s; font-weight: 500; font-size: 0.208rem; /* 增大30%: 0.16rem * 1.3 = 0.208rem */ } .footer-center .contact-item .phone-link:hover { color: #275AFF; text-decoration: underline; } .footer-center .contact-item .phone-separator { color: #999; font-weight: 300; } @media (max-width: 768px) { .footer-center .contact-item .phone-separator { display: none; } } .footer-center .contact-item .email-link { color: #275AFF; text-decoration: none; word-break: break-all; font-weight: 500; font-size: 0.208rem; /* 增大30%: 0.16rem * 1.3 = 0.208rem */ } .footer-center .contact-item .email-link:hover { color: #2ebdfa; text-decoration: underline; } .code-img { display: flex; justify-content: center; width: 100%; margin-top: 0.4rem; } @media (min-width: 768px) { .code-img { width: auto; margin-top: 0; } } .code-img .qr-box { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 0.16rem; padding: 0.24rem; box-shadow: 0 0.02rem 0.12rem rgba(39, 90, 255, 0.08); border: 0.01rem solid #eef2f9; transition: all 0.3s ease; } .code-img .qr-box:hover { background: #fff; border-color: #2ebdfa; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(39, 90, 255, 0.15); } .code-img .qr-box .qr-code { width: 1.8rem; height: 1.8rem; background: #fff; border-radius: 0.12rem; padding: 0.12rem; border: 1px solid #eef2f9; margin-bottom: 0.16rem; overflow: hidden; } .code-img .qr-box .qr-code img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.04rem; } .code-img .qr-box .qr-content { color: #333; font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */ font-weight: 500; letter-spacing: 0.5px; } /* 底部信息区域 */ .footer-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.3rem 0.2rem; background: #fff; border-radius: 0.16rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); margin-top: 0.4rem; border: 1px solid #eef2f9; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; padding: 0.3rem 0.4rem; } } .icp-info { margin-bottom: 0.24rem; display: flex; flex-direction: column; align-items: center; } @media (min-width: 768px) { .icp-info { flex-direction: row; align-items: center; gap: 0.6rem; margin-bottom: 0; } } .icp-info .icp-item { display: flex; align-items: center; gap: 0.08rem; margin-bottom: 0.12rem; } @media (min-width: 768px) { .icp-info .icp-item { margin-bottom: 0; } } .icp-info .icp-item .icp-text { color: #888; font-size: 0.24rem; } .icp-info .icp-item .icp-number { color: #444; font-weight: 500; font-size: 0.24rem; } .icp-info .copyright { color: #888; font-size: 0.24rem; font-weight: 300; } .record-info { display: flex; flex-direction: column; align-items: center; gap: 0.16rem; margin-bottom: 0.24rem; } @media (min-width: 768px) { .record-info { flex-direction: row; align-items: center; gap: 0.6rem; margin-bottom: 0; } } .police-record { display: flex; align-items: center; gap: 0.1rem; padding: 0.08rem 0.16rem; background: #f9fafc; border-radius: 0.24rem; transition: all 0.3s; border: 1px solid #eef2f9; } .police-record:hover { background: #f0f5ff; border-color: #275AFF; transform: translateY(-2px); } .police-record .police-icon { width: 0.18rem; height: 0.18rem; } .police-record .police-link { color: #666; text-decoration: none; font-size: 0.24rem; } .police-record .police-link:hover { color: #275AFF; text-decoration: underline; } .license-record .license-link { color: #666; text-decoration: none; font-size: 0.24rem; padding: 0.08rem 0.16rem; background: #f9fafc; border-radius: 0.24rem; transition: all 0.3s; border: 1px solid #eef2f9; } .license-record .license-link:hover { background: #f0f5ff; color: #275AFF; text-decoration: underline; transform: translateY(-2px); border-color: #275AFF; } /* 移动端二维码 */ .mobile-qr { display: flex; justify-content: center; width: 100%; margin-top: 0.4rem; } @media (min-width: 768px) { .mobile-qr { display: none; } } .mobile-qr .qr-item { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 0.16rem; padding: 0.24rem; box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08); border: 1px solid #eef2f9; width: 100%; max-width: 2.4rem; margin-right: 0.4rem; } .mobile-qr .qr-item .qr-code { width: 1.6rem; height: 1.6rem; background: #fff; border-radius: 0.12rem; padding: 0.12rem; border: 1px solid #eef2f9; margin-bottom: 0.16rem; } .mobile-qr .qr-item .qr-code img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.04rem; } .mobile-qr .qr-item .qr-desc { color: #333; font-size: 0.208rem; font-weight: 500; } /* PC端二维码 */ .pc-qr { position: absolute; right: 0.4rem; bottom: 0.4rem; display: none; } @media (min-width: 768px) { .pc-qr { display: block; } } .pc-qr .qr-box { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 0.16rem; padding: 0.24rem; box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08); border: 1px solid #eef2f9; transition: all 0.3s ease; } .pc-qr .qr-box:hover { background: #fff; border-color: #2ebdfa; transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 24px rgba(39, 90, 255, 0.15); } .pc-qr .qr-box .qr-code { width: 1.6rem; height: 1.6rem; background: #fff; border-radius: 0.12rem; padding: 0.12rem; border: 1px solid #eef2f9; margin-bottom: 0.16rem; } .pc-qr .qr-box .qr-code img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.04rem; } .pc-qr .qr-box .qr-content { color: #333; font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */ font-weight: 500; letter-spacing: 0.5px; }