From e8ad6696cd73e67a99d0a59075dea563597ffb9e Mon Sep 17 00:00:00 2001 From: Mortar <3072785233@qq.com> Date: Wed, 8 Apr 2026 22:42:13 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=89=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 469 +++++++++++++++++++++++++++++++++++++++----- product-detail.html | 154 --------------- 2 files changed, 424 insertions(+), 199 deletions(-) diff --git a/index.html b/index.html index b6cde24..4e7eb46 100644 --- a/index.html +++ b/index.html @@ -840,55 +840,261 @@ } .hero-media { position: relative; - min-height: 320px; + width: 580px; + height: 520px; } - .hero-image { - width: 210px; - height: 280px; - border-radius: 24px; - box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.08); - border: 1px solid rgba(255, 255, 255, 0.8); - background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); - object-fit: contain; - transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; + /* Carousel Styles - 3D Flip Transition */ + .carousel-container { + position: relative; + width: 100%; + height: 100%; } - .hero-image:hover { - transform: translateY(-8px) scale(1.02); - box-shadow: 0 32px 100px rgba(15, 23, 42, 0.16), 0 12px 32px rgba(15, 23, 42, 0.1); + .carousel-track { + position: relative; + width: 100%; + height: 100%; } - .hero-image.cat { + .carousel-slide { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: 1; + transition: opacity 0.8s ease-in-out; + } + .carousel-slide.active { + opacity: 1; + z-index: 3; + transform: scale(1); + } + .carousel-slide.exit { + opacity: 0; + z-index: 2; + transition: opacity 0.8s ease-out; + } + .carousel-slide.exit .slide-content { + box-shadow: none; + } + .slide-content { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%); + border-radius: 32px; + box-shadow: 0 40px 100px rgba(15, 23, 42, 0.15), 0 15px 40px rgba(15, 23, 42, 0.1); + overflow: hidden; + } + .slide-image.main { + width: 380px; + height: 400px; + object-fit: contain; + filter: drop-shadow(0 30px 60px rgba(15, 23, 42, 0.2)); + 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.02) translateY(-12px); } + } + .slide-badge { + position: absolute; + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + border: 5px solid #fff; + box-shadow: 0 12px 40px rgba(47, 107, 255, 0.25); z-index: 2; } - .hero-image.dog { + .slide-badge.badge-1 { + top: 20px; + right: 20px; + animation: orbit1 5s ease-in-out infinite; + } + .slide-badge.badge-2 { + bottom: 100px; + 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); } + } + /* Navigation Dots - Horizontal Bottom */ + .carousel-dots { position: absolute; - right: 0; - bottom: 0; - z-index: 2; + bottom: 70px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 10px; + z-index: 100; + pointer-events: auto; + } + .carousel-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.5); + border: 2px solid rgba(47, 107, 255, 0.3); + cursor: pointer; + transition: all 0.3s ease; + } + .carousel-dot:hover { + background: rgba(255, 255, 255, 0.8); + transform: scale(1.2); + } + .carousel-dot.active { + background: var(--primary); + border-color: var(--primary); + transform: scale(1.3); + } + /* Navigation Arrows - Inside Frame */ + .carousel-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 44px; + height: 44px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.9); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; + z-index: 100; + opacity: 1; + pointer-events: auto; + } + .carousel-arrow.prev { + left: 16px; + } + .carousel-arrow.next { + right: 16px; + } + .carousel-arrow:hover { + background: var(--primary); + color: #fff; + transform: translateY(-50%) scale(1.1); + box-shadow: 0 6px 20px rgba(47, 107, 255, 0.4); + } + .carousel-arrow:active { + transform: translateY(-50%) scale(0.95); + } + .carousel-arrow svg { + width: 22px; + height: 22px; + } + /* Activity Slide */ + .slide-content.activity-bg { + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + } + .activity-content { + text-align: center; + color: #fff; + padding: 20px; + } + .activity-badge { + display: inline-block; + padding: 6px 16px; + background: rgba(255, 255, 255, 0.25); + border-radius: 20px; + font-size: 13px; + font-weight: 600; + margin-bottom: 16px; + backdrop-filter: blur(10px); + } + .activity-badge.hot { + background: linear-gradient(135deg, #ff6b6b, #ff8e53); + animation: pulse 2s ease-in-out infinite; + } + @keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } + } + .activity-title { + font-size: 32px; + font-weight: 800; + margin: 0 0 12px; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + } + .activity-desc { + font-size: 18px; + opacity: 0.95; + margin: 0 0 16px; + line-height: 1.5; + } + .activity-date, .activity-code { + display: inline-block; + padding: 8px 20px; + background: rgba(255, 255, 255, 0.2); + border-radius: 25px; + font-size: 14px; + font-weight: 500; + backdrop-filter: blur(10px); + } + /* Notice Slide */ + .slide-content.notice-bg { + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); + } + .notice-content { + text-align: center; + color: #fff; + padding: 20px; + } + .notice-icon { + font-size: 48px; + display: block; + margin-bottom: 16px; + animation: bounce 2s ease-in-out infinite; + } + @keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } + } + .notice-title { + font-size: 28px; + font-weight: 700; + margin: 0 0 12px; + background: linear-gradient(135deg, #fff, #a8edea); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + .notice-desc { + font-size: 16px; + opacity: 0.85; + margin: 0; + line-height: 1.8; + } + /* Hide old progress bar */ + .progress-bar { + display: none; + } + /* Old styles cleanup */ + .hero-image { + display: none; } .hero-pet-badge { - position: absolute; - width: 72px; - height: 72px; - border-radius: 50%; - background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%); - box-shadow: 0 8px 32px rgba(47, 107, 255, 0.15); - border: 3px solid #ffffff; - object-fit: cover; - z-index: 3; - animation: float 3s ease-in-out infinite; + display: none; } - .hero-pet-badge.cat-badge { - left: 180px; - top: -10px; - animation-delay: 0s; - } - .hero-pet-badge.dog-badge { - right: 180px; - bottom: -10px; - animation-delay: 1.5s; + .hero-pet-badge { + display: none; } @keyframes float { 0%, 100% { transform: translateY(0); } @@ -2888,13 +3094,86 @@
- 猫咪 - 智能猫设备 - 狗狗 - 智能狗设备 -
- 让每一份宠爱 - 都有科学回响 +
+ + + + + +
@@ -3505,6 +3784,106 @@ window.addEventListener('resize', scale); })(); +