diff --git a/.env.development b/.env.development index ec1a694..7b19594 100644 --- a/.env.development +++ b/.env.development @@ -2,5 +2,5 @@ # 开发环境 -VITE_APP_BASE_API = '/dev-api' -# VITE_APP_BASE_API = 'http://42.194.239.145:8005/official' +# VITE_APP_BASE_API = '/dev-api' +VITE_APP_BASE_API = 'http://42.194.239.145:8005/official' diff --git a/src/App.vue b/src/App.vue index dbf93ca..15d3c50 100644 --- a/src/App.vue +++ b/src/App.vue @@ -359,14 +359,63 @@ main { .footer-bottom { flex-direction: column; text-align: center; + gap: 15px; + padding: 20px 15px; + } + + .footer-bottom p { + margin: 0; + font-size: 14px; + line-height: 1.4; + } + + .footer-nav { + margin: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 15px; + } + + .footer-nav a { + margin: 0; + font-size: 14px; + padding: 5px 10px; + } + + .footer-record-number { + margin: 0; + font-size: 12px; + color: #888; + word-break: break-all; + text-align: center; + } +} + +/* 更小屏幕的适配 */ +@media (max-width: 480px) { + .footer-bottom { + padding: 15px 10px; + gap: 12px; + } + + .footer-bottom p { + font-size: 13px; } .footer-nav { - margin-top: 15px; + flex-direction: column; + gap: 10px; } .footer-nav a { - margin: 0 10px; + font-size: 13px; + padding: 3px 8px; + } + + .footer-record-number { + font-size: 11px; + padding: 0 5px; } } diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 16848df..c4a1280 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -92,6 +92,7 @@ $breakpoints: ( max-width: 1200px; margin: 0 auto; padding: 0 20px; + box-sizing: border-box; } // 卡片样式 diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue index 417631c..122198e 100644 --- a/src/components/CallToAction.vue +++ b/src/components/CallToAction.vue @@ -115,6 +115,7 @@ const props = defineProps({ max-width: 1200px; margin: 0 auto; padding: 0 15px; + box-sizing: border-box; } .cta-content { @@ -219,14 +220,22 @@ const props = defineProps({ /* 响应式样式 */ @media (max-width: 768px) { + .cta-section { + padding: 60px 0; + } + .cta-content { h2 { - font-size: 2rem; + font-size: 1.8rem; + margin-bottom: 15px; + line-height: 1.3; } p { - font-size: 1.1rem; - padding: 0 15px; + font-size: 1rem; + padding: 0 20px; + margin-bottom: 25px; + line-height: 1.5; } } @@ -234,23 +243,78 @@ const props = defineProps({ flex-direction: column; align-items: center; width: 100%; - gap: 15px; + gap: 12px; .btn-primary, .btn-outline { - width: 80%; - max-width: 300px; + width: 85%; + max-width: 280px; text-align: center; + padding: 16px 24px; + font-size: 1rem; + border-radius: 25px; + font-weight: 600; + } + + .btn-primary { + i { + margin-left: 6px; + } + } + } + + .cta-icon { + margin-bottom: 20px; + + i { + width: 70px; + height: 70px; + line-height: 70px; + font-size: 2.2rem; + } + } +} + +/* 更小屏幕的适配 */ +@media (max-width: 480px) { + .cta-section { + padding: 50px 0; + } + + .cta-content { + h2 { + font-size: 1.6rem; + margin-bottom: 12px; + } + + p { + font-size: 0.95rem; + padding: 0 15px; + margin-bottom: 20px; + } + } + + .cta-buttons { + gap: 10px; + + .btn-primary, + .btn-outline { + width: 90%; + max-width: 260px; + padding: 14px 20px; + font-size: 0.95rem; } } .cta-icon { + margin-bottom: 15px; + i { - width: 80px; - height: 80px; - line-height: 80px; - font-size: 2.8rem; + width: 60px; + height: 60px; + line-height: 60px; + font-size: 2rem; } } } - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/MobileNav.vue b/src/components/MobileNav.vue index 6ffe5a5..3512fd2 100644 --- a/src/components/MobileNav.vue +++ b/src/components/MobileNav.vue @@ -1,6 +1,9 @@