${article.date}
diff --git a/dog.png b/dog.png
deleted file mode 100644
index 690357d..0000000
Binary files a/dog.png and /dev/null differ
diff --git a/hero.jpeg b/hero.jpeg
deleted file mode 100644
index e63f6f0..0000000
Binary files a/hero.jpeg and /dev/null differ
diff --git a/hero.png b/hero.png
deleted file mode 100644
index 97f19f4..0000000
Binary files a/hero.png and /dev/null differ
diff --git a/img_v3_02vs_10f2ef76-5d4f-4c1e-82fa-04b1852570dg.png b/img_v3_02vs_10f2ef76-5d4f-4c1e-82fa-04b1852570dg.png
deleted file mode 100644
index 772cf06..0000000
Binary files a/img_v3_02vs_10f2ef76-5d4f-4c1e-82fa-04b1852570dg.png and /dev/null differ
diff --git a/index.html b/index.html
index 96a404e..7623c00 100644
--- a/index.html
+++ b/index.html
@@ -20,18 +20,23 @@
html {
overflow-y: scroll;
overflow-x: auto;
+ margin: 0;
+ padding: 0;
}
body {
margin: 0;
+ padding: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
"Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
- overflow-y: auto;
overflow-x: auto;
scroll-behavior: smooth;
+ }
+ #pageContent {
min-width: 1280px;
- transform-origin: top left;
+ margin: 0;
+ padding: 0;
}
a {
color: inherit;
@@ -46,17 +51,20 @@
margin: 0 auto;
padding: 0 24px;
}
- /* 导航头 */
+ /* 导航头 - 透明覆盖在轮播图上 */
.navbar {
position: fixed;
top: 0;
left: 0;
- right: 0;
z-index: 1000;
- background: rgba(255, 255, 255, 0.92);
+ background: transparent;
+ border-bottom: none;
+ transition: background 0.4s ease, border-bottom 0.4s ease;
+ }
+ .navbar.scrolled {
+ background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
- transition: all 0.3s ease;
}
.navbar-inner {
display: flex;
@@ -85,22 +93,37 @@
.navbar-logo img {
height: 40px;
width: auto;
+ transition: filter 0.4s ease;
+ }
+ .navbar:not(.scrolled) .navbar-logo img {
+ filter: brightness(0) invert(1);
}
.navbar-link {
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
- color: var(--muted);
+ color: rgba(255, 255, 255, 0.85);
text-decoration: none;
border-radius: 8px;
- transition: all 0.2s ease;
+ transition: all 0.3s ease;
+ }
+ .navbar.scrolled .navbar-link {
+ color: var(--muted);
}
.navbar-link:hover {
- color: var(--text);
- background: rgba(0, 0, 0, 0.04);
+ color: #fff;
+ background: rgba(255, 255, 255, 0.12);
text-decoration: none;
}
+ .navbar.scrolled .navbar-link:hover {
+ color: var(--text);
+ background: rgba(0, 0, 0, 0.04);
+ }
.navbar-link.active {
+ color: #fff;
+ background: rgba(255, 255, 255, 0.15);
+ }
+ .navbar.scrolled .navbar-link.active {
color: var(--primary);
background: var(--primary-weak);
}
@@ -119,10 +142,17 @@
background: transparent;
border: none;
cursor: pointer;
+ color: rgba(255, 255, 255, 0.85);
+ transition: all 0.3s ease;
+ }
+ .navbar.scrolled .navbar-btn {
color: var(--muted);
- transition: all 0.2s ease;
}
.navbar-btn:hover {
+ background: rgba(255, 255, 255, 0.12);
+ color: #fff;
+ }
+ .navbar.scrolled .navbar-btn:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--text);
}
@@ -134,14 +164,18 @@
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
- color: #fff;
- background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
+ color: var(--primary);
+ background: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
- transition: all 0.2s ease;
+ transition: all 0.3s ease;
text-decoration: none;
}
+ .navbar.scrolled .navbar-cta {
+ color: #fff;
+ background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
+ }
.navbar-cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
@@ -149,6 +183,22 @@
.mobile-menu-btn {
display: none;
}
+ .lang-select-hero {
+ background: transparent;
+ border: none;
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.85);
+ cursor: pointer;
+ padding: 8px;
+ outline: none;
+ }
+ .lang-select-hero option {
+ color: #333;
+ background: #fff;
+ }
+ .navbar.scrolled .lang-select-hero {
+ color: var(--muted);
+ }
/* 页面底部 - 扩展版 */
.footer-section {
background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
@@ -732,20 +782,11 @@
}
.hero {
position: relative;
- padding: 0;
- height: 100vh;
- min-height: 700px;
+ width: 100%;
+ height: 1080px;
overflow: hidden;
}
.hero::before { display: none; }
- .hero > .container {
- position: relative;
- z-index: 1;
- width: 100%;
- max-width: 100%;
- padding: 0;
- height: 100%;
- }
.hero-inner {
width: 100%;
height: 100%;
@@ -758,7 +799,7 @@
0% { left: -100%; }
50%, 100% { left: 100%; }
}
- /* Full-Width Hero Carousel */
+ /* Full-Bleed Hero Carousel - 小米风格 */
.carousel-container {
position: relative;
width: 100%;
@@ -775,7 +816,7 @@
width: 100%; height: 100%;
opacity: 0;
z-index: 1;
- transition: opacity 0.9s ease-in-out;
+ transition: opacity 1s ease-in-out;
}
.carousel-slide.active {
opacity: 1;
@@ -784,9 +825,9 @@
.carousel-slide.exit {
opacity: 0;
z-index: 2;
- transition: opacity 0.9s ease-out;
+ transition: opacity 1s ease-out;
}
- /* Product slide */
+ /* Slide content - full bleed */
.slide-content {
position: relative;
width: 100%; height: 100%;
@@ -795,125 +836,52 @@
justify-content: center;
overflow: hidden;
}
+ /* Product slide - 纯色背景 */
.slide-content.product-bg {
- background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
+ background: #1a1a2e;
+ }
+ .slide-content.product-bg .slide-bg-img {
+ display: none;
}
.slide-content.product-bg::after {
- content: '';
- position: absolute;
- width: 600px; height: 600px;
- border-radius: 50%;
- background: radial-gradient(circle, rgba(47,107,255,0.08) 0%, transparent 70%);
- right: -100px; bottom: -100px;
- pointer-events: none;
+ display: none;
}
- .slide-content.product-bg::before {
- content: '';
- position: absolute;
- width: 400px; height: 400px;
- border-radius: 50%;
- background: radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%);
- left: -50px; top: -50px;
- pointer-events: none;
- }
- .slide-product-layout {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 80px;
- width: 1120px;
- max-width: 1120px;
- margin: 0 auto;
+ .slide-content.product-bg .slide-overlay {
position: relative;
- z-index: 1;
+ z-index: 2;
+ text-align: center;
+ color: #fff;
+ padding: 0 40px;
}
- .slide-product-info {
- flex: 1;
- min-width: 0;
- }
- .slide-product-info .eyebrow {
- display: inline-block;
- padding: 6px 14px;
- border-radius: 999px;
- background: var(--primary-weak);
- color: var(--primary);
- font-size: 13px;
- font-weight: 600;
- letter-spacing: 0.5px;
- margin-bottom: 16px;
- }
- .slide-product-info h2 {
- font-size: 36px;
+ .slide-overlay .slide-title {
+ font-size: 52px;
font-weight: 800;
- margin: 0 0 12px;
- color: var(--text);
- line-height: 1.2;
+ margin: 0 0 16px;
+ text-shadow: 0 2px 20px rgba(0,0,0,0.3);
+ line-height: 1.15;
}
- .slide-product-info .desc {
- font-size: 17px;
- line-height: 1.7;
- color: var(--muted);
- margin: 0 0 24px;
+ .slide-overlay .slide-desc {
+ font-size: 20px;
+ opacity: 0.9;
+ margin: 0 0 28px;
+ line-height: 1.6;
+ text-shadow: 0 1px 10px rgba(0,0,0,0.25);
}
- .slide-product-info .tags {
+ .slide-overlay .slide-tags {
display: flex;
- gap: 10px;
+ gap: 12px;
+ justify-content: center;
flex-wrap: wrap;
}
- .slide-product-info .tags span {
- padding: 6px 14px;
+ .slide-overlay .slide-tags span {
+ padding: 8px 20px;
border-radius: 999px;
- background: #fff;
- border: 1px solid var(--line);
- font-size: 13px;
- color: #3b4451;
- }
- .slide-product-visual {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- }
- .slide-image.main {
- width: 420px;
- height: 440px;
- object-fit: contain;
- filter: drop-shadow(0 30px 60px rgba(15, 23, 42, 0.18));
- position: relative;
- z-index: 1;
- }
- .carousel-slide.active .slide-image.main {
- animation: breathe 5s ease-in-out infinite;
- }
- @keyframes breathe {
- 0%, 100% { transform: scale(1) translateY(0); }
- 50% { transform: scale(1.03) translateY(-14px); }
- }
- .slide-badge {
- position: absolute;
- width: 110px; height: 110px;
- border-radius: 50%;
- object-fit: cover;
- border: 5px solid #fff;
- box-shadow: 0 12px 40px rgba(47, 107, 255, 0.25);
- z-index: 2;
- }
- .slide-badge.badge-1 {
- top: -10px; right: -10px;
- animation: orbit1 5s ease-in-out infinite;
- }
- .slide-badge.badge-2 {
- bottom: 30px; left: -20px;
- animation: orbit2 5s ease-in-out infinite 1s;
- }
- @keyframes orbit1 {
- 0%, 100% { transform: translate(0, 0) rotate(0deg); }
- 50% { transform: translate(-8px, 8px) rotate(5deg); }
- }
- @keyframes orbit2 {
- 0%, 100% { transform: translate(0, 0) rotate(0deg); }
- 50% { transform: translate(8px, -8px) rotate(-5deg); }
+ background: rgba(255,255,255,0.18);
+ backdrop-filter: blur(8px);
+ font-size: 14px;
+ font-weight: 500;
+ color: #fff;
+ border: 1px solid rgba(255,255,255,0.25);
}
/* Activity Slide */
.slide-content.activity-bg {
@@ -945,20 +913,20 @@
50% { transform: scale(1.05); }
}
.activity-title {
- font-size: 44px;
+ font-size: 48px;
font-weight: 800;
- margin: 0 0 14px;
+ margin: 0 0 16px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.activity-desc {
- font-size: 22px;
+ font-size: 24px;
opacity: 0.95;
- margin: 0 0 20px;
+ margin: 0 0 24px;
line-height: 1.5;
}
.activity-date, .activity-code {
display: inline-block;
- padding: 10px 24px;
+ padding: 12px 28px;
background: rgba(255, 255, 255, 0.2);
border-radius: 25px;
font-size: 15px;
@@ -987,16 +955,16 @@
50% { transform: translateY(-10px); }
}
.notice-title {
- font-size: 36px;
+ font-size: 40px;
font-weight: 700;
- margin: 0 0 14px;
+ margin: 0 0 16px;
background: linear-gradient(135deg, #fff, #a8edea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.notice-desc {
- font-size: 18px;
+ font-size: 20px;
opacity: 0.85;
margin: 0;
line-height: 1.8;
@@ -1004,31 +972,27 @@
/* Dots */
.carousel-dots {
position: absolute;
- bottom: 28px;
+ bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
- gap: 12px;
+ gap: 10px;
z-index: 100;
}
.carousel-dot {
- width: 28px; height: 4px;
+ width: 32px; height: 4px;
border-radius: 2px;
- background: rgba(0, 0, 0, 0.15);
+ background: rgba(255, 255, 255, 0.4);
border: none;
cursor: pointer;
transition: all 0.4s ease;
}
- .carousel-slide.active .slide-content.activity-bg ~ .carousel-dots .carousel-dot,
- .carousel-slide.active .slide-content.notice-bg ~ .carousel-dots .carousel-dot {
- background: rgba(255, 255, 255, 0.4);
- }
.carousel-dot:hover {
- background: rgba(47, 107, 255, 0.5);
+ background: rgba(255, 255, 255, 0.7);
}
.carousel-dot.active {
- width: 48px;
- background: var(--primary);
+ width: 52px;
+ background: #fff;
border-radius: 2px;
}
/* Arrows */
@@ -1036,113 +1000,36 @@
position: absolute;
top: 50%;
transform: translateY(-50%);
- width: 52px; height: 52px;
+ width: 56px; height: 56px;
border-radius: 50%;
- background: rgba(255, 255, 255, 0.85);
- border: none;
+ background: rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 100;
backdrop-filter: blur(10px);
- }
- .carousel-arrow.prev { left: 32px; }
- .carousel-arrow.next { right: 32px; }
- .carousel-arrow:hover {
- background: var(--primary);
color: #fff;
- transform: translateY(-50%) scale(1.08);
- box-shadow: 0 8px 28px rgba(47, 107, 255, 0.35);
+ }
+ .carousel-arrow.prev { left: 40px; }
+ .carousel-arrow.next { right: 40px; }
+ .carousel-arrow:hover {
+ background: rgba(255, 255, 255, 0.3);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-50%) scale(1.06);
}
.carousel-arrow:active {
transform: translateY(-50%) scale(0.96);
}
.carousel-arrow svg {
- width: 24px; height: 24px;
+ width: 26px; height: 26px;
}
/* Hide old elements */
.progress-bar { display: none; }
.hero-image { display: none; }
.hero-pet-badge { display: none; }
- @keyframes float {
- 0%, 100% { transform: translateY(0); }
- 50% { transform: translateY(-8px); }
- }
- .glass-card {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- padding: 24px 36px;
- border-radius: 24px;
- background: rgba(255, 255, 255, 0.55);
- border: 1px solid rgba(255, 255, 255, 0.6);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
- font-size: 16px;
- font-weight: 600;
- color: #1e293b;
- box-shadow:
- 0 20px 60px rgba(15, 23, 42, 0.08),
- inset 0 1px 0 rgba(255, 255, 255, 0.5);
- z-index: 4;
- letter-spacing: 1px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- gap: 4px;
- animation: glassFloat 5s ease-in-out infinite;
- }
- .glass-line {
- display: block;
- line-height: 1.4;
- }
- .glass-line:first-child {
- font-size: 17px;
- font-weight: 700;
- background: linear-gradient(135deg, #2f6bff 0%, #8b5cf6 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- }
- .glass-line:last-child {
- font-size: 15px;
- font-weight: 500;
- color: #475569;
- }
- .highlight-word {
- font-size: 1.15em;
- font-weight: 700;
- color: #1e40af;
- margin: 0 6px;
- padding: 2px 4px;
- position: relative;
- display: inline-block;
- animation: wordBounce 2s ease-in-out infinite;
- }
- .highlight-word::after {
- content: '';
- position: absolute;
- bottom: -2px;
- left: 0;
- right: 0;
- height: 3px;
- background: #1e40af;
- border-radius: 2px;
- }
- @keyframes wordBounce {
- 0%, 100% { transform: translateY(0); }
- 50% { transform: translateY(-4px); }
- }
- @keyframes glassFloat {
- 0%, 100% { transform: translate(-50%, -50%) translateY(0); }
- 50% { transform: translate(-50%, -50%) translateY(-8px); }
- }
main {
padding: 0;
}
@@ -2978,8 +2865,8 @@
-
-