diff --git a/html/appdown.html b/html/appdown.html index 577cc04..aba953b 100644 --- a/html/appdown.html +++ b/html/appdown.html @@ -3,244 +3,96 @@ - 彩先知 - APP下载 - + 彩先知 - APP下载 - - - - + - - - + - -
- -
-
-

下载彩先知APP

-

随时随地查看预测分析，不错过任何精彩推荐

-

扫码下载，畅享移动端体验

-
-
-
- 下载二维码 +
- - - - + diff --git a/public/css/appdown.css b/public/css/appdown.css index ddd541f..98c19e4 100644 --- a/public/css/appdown.css +++ b/public/css/appdown.css @@ -1,584 +1,179 @@ -/* ============================================================ - appdown.css - App download page (appdown.html) - Uses CSS variables from public.css - ============================================================ */ +body { + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, + sans-serif; + min-height: 100vh; + margin: 0; + padding: 20px; + box-sizing: border-box; + background: #f7f8fa; +} -/* ============================ - DOWNLOAD HERO - Main banner - ============================ */ -.download-hero { - background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--purple) 100%); - padding: 60px 40px; - border-radius: 20px; - margin-bottom: 32px; +.app-download-container { + max-width: 400px; + margin: 20px auto; + padding: 30px 20px 100px; + background: #ffffff; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); + border-radius: 8px; display: flex; - align-items: center; - justify-content: space-between; - gap: 40px; - color: var(--white); - position: relative; - overflow: hidden; + flex-direction: column; } -.download-hero::before { - content: ''; - position: absolute; - top: -120px; - right: -100px; - width: 350px; - height: 350px; - border-radius: 50%; - background: rgba(253, 185, 51, 0.08); -} - -.download-hero::after { - content: ''; - position: absolute; - bottom: -80px; - left: -60px; - width: 240px; - height: 240px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.04); -} - -/* ============================ - HERO CONTENT - Text & buttons - ============================ */ -.download-hero-content { - position: relative; - z-index: 1; - flex: 1; -} - -.download-hero-title { - font-size: 36px; - font-weight: 800; - line-height: 1.3; - margin: 0 0 12px; - color: var(--white); -} - -.download-hero-title span { - color: var(--gold); -} - -.download-hero-desc { - font-size: 16px; - color: rgba(255, 255, 255, 0.75); - line-height: 1.8; - margin: 0 0 24px; -} - -.download-hero-btns { +.app-icon-container { display: flex; - gap: 16px; - flex-wrap: wrap; -} - -.download-btn { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 14px 32px; - border-radius: 28px; - font-size: 16px; - font-weight: 700; - cursor: pointer; - border: none; - transition: all 0.3s; - text-decoration: none; - position: relative; - overflow: hidden; -} - -.download-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); - transition: left 0.5s; -} - -.download-btn:hover::before { - left: 100%; -} - -.download-btn i, -.download-btn .btn-icon { - font-size: 20px; -} - -.download-btn:hover { - transform: translateY(-2px); -} - -.download-btn:active { - transform: translateY(0); -} - -.download-btn-ios { - background: var(--white); - color: var(--primary); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); -} - -.download-btn-ios:hover { - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); - background: var(--white); -} - -.download-btn-android { - background: linear-gradient(135deg, var(--green), #1e8449); - color: var(--white); - box-shadow: 0 4px 16px rgba(39, 174, 96, 0.3); -} - -.download-btn-android:hover { - box-shadow: 0 6px 24px rgba(39, 174, 96, 0.4); -} - -/* ============================ - PHONE MOCKUP - ============================ */ -.download-phone-mockup { - position: relative; - z-index: 1; - flex-shrink: 0; - display: flex; - align-items: center; justify-content: center; + margin-bottom: 20px; } -.download-phone-mockup .phone-frame { - width: 260px; - height: 520px; - background: rgba(255, 255, 255, 0.1); - border-radius: 36px; - border: 3px solid rgba(255, 255, 255, 0.2); - display: flex; - align-items: center; - justify-content: center; - position: relative; - backdrop-filter: blur(8px); -} - -.download-phone-mockup .phone-screen { - width: 230px; - height: 490px; - background: rgba(255, 255, 255, 0.08); - border-radius: 28px; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} - -.download-phone-mockup .phone-screen img { - max-width: 100%; - max-height: 100%; +.app-icon { + width: 210px; + max-width: 80%; + max-height: 80px; object-fit: contain; } -.download-phone-mockup .phone-notch { - position: absolute; - top: 12px; - left: 50%; - transform: translateX(-50%); - width: 80px; - height: 6px; - background: rgba(255, 255, 255, 0.3); - border-radius: 3px; -} - -/* QR Code in hero */ -.download-hero .hero-qr { - position: relative; - z-index: 1; - flex-shrink: 0; -} - -.hero-qr-box { - background: var(--white); - border-radius: 16px; - padding: 16px; +.app-basic-info { text-align: center; + margin-bottom: 35px; } -.hero-qr-box img { - width: 180px; - height: 180px; - display: block; - margin: 0 auto; -} - -.hero-qr-label { - font-size: 13px; - color: var(--primary); - font-weight: 600; - margin-top: 8px; -} - -/* ============================ - DOWNLOAD FEATURES - ============================ */ -.download-features { - background: var(--white); - border-radius: 16px; - padding: 40px; - box-shadow: var(--shadow-sm); - margin-bottom: 32px; -} - -.download-features .features-title { +.app-name { font-size: 22px; font-weight: 700; - color: var(--primary); - text-align: center; - margin: 0 0 32px; + color: #333333; + margin: 0 0 8px; } -.feature-item { - text-align: center; - padding: 20px; - border-radius: var(--radius-lg); - transition: all 0.3s; -} - -.feature-item:hover { - background: var(--bg-light); - transform: translateY(-4px); -} - -.feature-icon { - width: 56px; - height: 56px; - border-radius: 14px; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 12px; - font-size: 26px; - color: var(--white); - background: linear-gradient(135deg, var(--primary), var(--primary-light)); -} - -.feature-title { - font-size: 16px; - font-weight: 700; - color: var(--primary); - margin-bottom: 4px; -} - -.feature-desc { - font-size: 13px; - color: var(--text-muted); - line-height: 1.6; -} - -/* Features grid layout */ -.features-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 24px; -} - -/* ============================ - DOWNLOAD CARDS - ============================ */ -.download-cards { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 24px; - margin-bottom: 32px; -} - -.download-card { - background: var(--white); - border-radius: 16px; - padding: 32px; - text-align: center; - box-shadow: var(--shadow-sm); - transition: transform 0.3s, box-shadow 0.3s; -} - -.download-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-md); -} - -.download-card-icon { - width: 64px; - height: 64px; - border-radius: 16px; - display: flex; - align-items: center; - justify-content: center; - font-size: 32px; - margin: 0 auto 16px; - color: var(--white); -} - -.download-card-icon.android { - background: linear-gradient(135deg, #3ddc84, #2fa866); -} - -.download-card-icon.ios { - background: linear-gradient(135deg, #007aff, #005ecb); -} - -.download-card-title { - font-size: 20px; - font-weight: 700; - color: var(--primary); - margin-bottom: 6px; -} - -.download-card-desc { +.app-version { font-size: 14px; - color: var(--text-muted); - margin-bottom: 20px; - line-height: 1.5; + color: #666666; + margin: 0; } -/* Card download buttons */ -.dl-btn { - display: inline-block; - padding: 12px 40px; - border-radius: 24px; - font-size: 16px; - font-weight: 700; - cursor: pointer; - border: none; - transition: all 0.3s; - text-decoration: none; -} - -.dl-btn.android-btn { - background: linear-gradient(135deg, #3ddc84, #2fa866); - color: var(--white); -} - -.dl-btn.android-btn:hover { - box-shadow: 0 4px 16px rgba(61, 220, 132, 0.4); - transform: translateY(-2px); -} - -.dl-btn.ios-btn { - background: linear-gradient(135deg, #007aff, #005ecb); - color: var(--white); -} - -.dl-btn.ios-btn:hover { - box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4); - transform: translateY(-2px); -} - -/* ============================ - PAGE HEADER / NAV (shared) - ============================ */ -.page-header { - width: 1400px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 0; -} - -.page-header .logo-wrap { - display: flex; - align-items: center; - gap: 12px; -} - -.page-header .logo-wrap img { - height: 44px; -} - -.page-header .logo-text { - font-size: 26px; - font-weight: 700; - color: var(--primary); -} - -.page-header .logo-text span { - color: var(--orange); -} - -.page-header .header-right { - display: flex; - align-items: center; - gap: 16px; -} - -.page-header .header-right a { - font-size: 14px; - color: var(--primary); - font-weight: 500; - transition: color 0.2s; - text-decoration: none; -} - -.page-header .header-right a:hover { - color: var(--orange); -} - -.page-nav { +.divider { width: 100%; - background: var(--primary); - display: flex; - justify-content: center; + height: 1px; + background: #eeeeee; + margin: 16px auto 0; } -.page-nav-inner { - width: 1400px; +.app-intro { + margin-bottom: 30px; +} + +.section-title { + font-size: 24px; + font-weight: 700; + color: #333333; + margin: 0 0 12px; +} + +.intro-text { + font-size: 14px; + color: #666666; + line-height: 1.5; + margin: 0; +} + +.download-section { + text-align: center; +} + +.download-btn-wrap { + display: inline-block; + text-decoration: none; + margin-top: 30px; +} + +.download-btn { display: flex; align-items: center; justify-content: center; + width: 170px; height: 50px; -} - -.page-nav-inner a { - width: 140px; - display: flex; - font-size: 16px; - justify-content: center; - line-height: 50px; - text-align: center; - color: var(--white); + background: rgb(0, 164, 250); + color: #ffffff; + border: none; + border-radius: 7px; + font-size: 18px; cursor: pointer; - transition: background 0.3s; - text-decoration: none; + transition: all 0.3s ease; } -.page-nav-inner a:hover { - background: rgba(253, 185, 51, 0.2); +.download-btn:hover { + background: rgb(0, 164, 250); + transform: translateY(-2px); } -.page-nav-inner a.active { - background: rgba(253, 185, 51, 0.3); +.download-icon { + width: 20px; + height: 20px; + margin-right: 8px; + fill: #ffffff; } -.page-main { - width: 1400px; - margin: 20px auto; +.btn-text { + margin: 0; } -/* ============================ - RESPONSIVE STYLES - ============================ */ -@media (max-width: 1024px) { - .features-grid { - grid-template-columns: repeat(2, 1fr); - } +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); + z-index: 100; } -@media (max-width: 768px) { - .page-header, - .page-nav-inner, - .page-main { - width: 100%; - padding: 0 16px; - } +.modal-content { + width: 100%; + display: flex; + justify-content: flex-end; +} - .download-hero { - flex-direction: column; - text-align: center; - padding: 40px 24px; - } +.modal-content-box { + width: 100%; + display: flex; + align-items: flex-end; + flex-direction: column; +} - .download-hero-title { - font-size: 26px; - } +.modal-content-img-box { + margin-right: 30px; +} - .download-hero-desc { - font-size: 14px; - } +.modal-content-img { + width: 178px; +} - .download-hero-btns { - justify-content: center; - } - - .download-phone-mockup .phone-frame { - width: 200px; - height: 400px; - } - - .download-phone-mockup .phone-screen { - width: 174px; - height: 372px; - } - - .download-cards { - grid-template-columns: 1fr; - } - - .features-grid { - grid-template-columns: repeat(2, 1fr); - } - - .download-features { - padding: 24px; - } - - .page-nav-inner a { - width: auto; - padding: 0 14px; - font-size: 14px; - } +.modal-content-text { + margin-right: 68px; + margin-top: 7px; + font-size: 14px; + color: #ffffff; } @media (max-width: 480px) { - .download-hero { - padding: 28px 16px; - border-radius: var(--radius-lg); + body { + padding: 12px; } - .download-hero-title { + .app-download-container { + margin: 12px auto; + padding: 26px 18px 88px; + } + + .section-title { font-size: 22px; } - .download-hero-btns { - flex-direction: column; - width: 100%; + .modal-content-text { + max-width: 220px; + margin-right: 28px; + text-align: right; + line-height: 1.5; } - - .download-btn { - width: 100%; - justify-content: center; - } - - .download-phone-mockup { - display: none; - } - - .download-cards { - gap: 16px; - } - - .download-card { - padding: 24px 16px; - } - - .features-grid { - grid-template-columns: 1fr; - gap: 16px; - } - - .download-features { - padding: 20px; - } - - .page-header .logo-text { - font-size: 20px; - } - - .page-nav-inner a { - font-size: 12px; - padding: 0 8px; - } -} \ No newline at end of file +}