翻译前
This commit is contained in:
+424
-45
@@ -840,55 +840,261 @@
|
|||||||
}
|
}
|
||||||
.hero-media {
|
.hero-media {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 320px;
|
width: 580px;
|
||||||
|
height: 520px;
|
||||||
}
|
}
|
||||||
.hero-image {
|
/* Carousel Styles - 3D Flip Transition */
|
||||||
width: 210px;
|
.carousel-container {
|
||||||
height: 280px;
|
position: relative;
|
||||||
border-radius: 24px;
|
width: 100%;
|
||||||
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.08);
|
height: 100%;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
.hero-image:hover {
|
.carousel-track {
|
||||||
transform: translateY(-8px) scale(1.02);
|
position: relative;
|
||||||
box-shadow: 0 32px 100px rgba(15, 23, 42, 0.16), 0 12px 32px rgba(15, 23, 42, 0.1);
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
.hero-image.cat {
|
.carousel-slide {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
|
||||||
top: 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;
|
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;
|
position: absolute;
|
||||||
right: 0;
|
bottom: 70px;
|
||||||
bottom: 0;
|
left: 50%;
|
||||||
z-index: 2;
|
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 {
|
.hero-pet-badge {
|
||||||
position: absolute;
|
display: none;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
.hero-pet-badge.cat-badge {
|
.hero-pet-badge {
|
||||||
left: 180px;
|
display: none;
|
||||||
top: -10px;
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
.hero-pet-badge.dog-badge {
|
|
||||||
right: 180px;
|
|
||||||
bottom: -10px;
|
|
||||||
animation-delay: 1.5s;
|
|
||||||
}
|
}
|
||||||
@keyframes float {
|
@keyframes float {
|
||||||
0%, 100% { transform: translateY(0); }
|
0%, 100% { transform: translateY(0); }
|
||||||
@@ -2888,13 +3094,86 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-media">
|
<div class="hero-media">
|
||||||
<img class="hero-pet-badge cat-badge" src="camera(1).jpg" alt="猫咪" onerror="this.style.display='none'" />
|
<div class="carousel-container">
|
||||||
<img class="hero-image cat" src="cat.png" alt="智能猫设备" />
|
<div class="carousel-track" id="carouselTrack">
|
||||||
<img class="hero-pet-badge dog-badge" src="water(1).png" alt="狗狗" onerror="this.style.display='none'" />
|
<!-- Slide 1 - 产品 -->
|
||||||
<img class="hero-image dog" src="dog.jpeg" alt="智能狗设备" />
|
<div class="carousel-slide active" data-type="product">
|
||||||
<div class="glass-card">
|
<div class="slide-content">
|
||||||
<span class="glass-line" data-i18n="hero_glass_line1">让每一份宠爱</span>
|
<img class="slide-image main" src="cat.png" alt="智能猫设备" />
|
||||||
<span class="glass-line" data-i18n="hero_glass_line2">都有<span class="highlight-word">科学</span>回响</span>
|
<img class="slide-badge badge-1" src="camera(1).jpg" alt="猫咪" onerror="this.style.display='none'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Slide 2 - 产品 -->
|
||||||
|
<div class="carousel-slide" data-type="product">
|
||||||
|
<div class="slide-content">
|
||||||
|
<img class="slide-image main" src="dog.jpeg" alt="智能狗设备" />
|
||||||
|
<img class="slide-badge badge-2" src="water(1).png" alt="狗狗" onerror="this.style.display='none'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Slide 3 - 活动 -->
|
||||||
|
<div class="carousel-slide" data-type="activity">
|
||||||
|
<div class="slide-content activity-bg">
|
||||||
|
<div class="activity-content">
|
||||||
|
<span class="activity-badge">限时活动</span>
|
||||||
|
<h3 class="activity-title">618年中大促</h3>
|
||||||
|
<p class="activity-desc">全场产品低至5折起</p>
|
||||||
|
<span class="activity-date">6月1日 - 6月18日</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Slide 4 - 产品 -->
|
||||||
|
<div class="carousel-slide" data-type="product">
|
||||||
|
<div class="slide-content">
|
||||||
|
<img class="slide-image main" src="feeder.png" alt="智能喂食器" onerror="this.src='cat.png'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Slide 5 - 公告 -->
|
||||||
|
<div class="carousel-slide" data-type="notice">
|
||||||
|
<div class="slide-content notice-bg">
|
||||||
|
<div class="notice-content">
|
||||||
|
<span class="notice-icon">📢</span>
|
||||||
|
<h3 class="notice-title">系统升级通知</h3>
|
||||||
|
<p class="notice-desc">App 2.0版本全新上线<br/>新增健康报告、远程控制功能</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Slide 6 - 产品 -->
|
||||||
|
<div class="carousel-slide" data-type="product">
|
||||||
|
<div class="slide-content">
|
||||||
|
<img class="slide-image main" src="water.png" alt="智能饮水机" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Slide 7 - 活动 -->
|
||||||
|
<div class="carousel-slide" data-type="activity">
|
||||||
|
<div class="slide-content activity-bg">
|
||||||
|
<div class="activity-content">
|
||||||
|
<span class="activity-badge hot">🔥 HOT</span>
|
||||||
|
<h3 class="activity-title">新用户专享</h3>
|
||||||
|
<p class="activity-desc">首单立减100元</p>
|
||||||
|
<span class="activity-code">优惠码: NEW100</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Slide 8 - 产品 -->
|
||||||
|
<div class="carousel-slide" data-type="product">
|
||||||
|
<div class="slide-content">
|
||||||
|
<img class="slide-image main" src="camera(1).jpg" alt="AI摄像头" onerror="this.src='cat.png'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Navigation Arrows -->
|
||||||
|
<button class="carousel-arrow prev" id="carouselPrev">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M15 18l-6-6 6-6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="carousel-arrow next" id="carouselNext">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- Dots -->
|
||||||
|
<div class="carousel-dots" id="carouselDots"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -3505,6 +3784,106 @@
|
|||||||
window.addEventListener('resize', scale);
|
window.addEventListener('resize', scale);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
<script>
|
||||||
|
// Hero Carousel - 3D Flip Transition
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var track = document.getElementById('carouselTrack');
|
||||||
|
var slides = track.querySelectorAll('.carousel-slide');
|
||||||
|
var dotsContainer = document.getElementById('carouselDots');
|
||||||
|
var prevBtn = document.getElementById('carouselPrev');
|
||||||
|
var nextBtn = document.getElementById('carouselNext');
|
||||||
|
|
||||||
|
var currentIndex = 0;
|
||||||
|
var autoPlayInterval = null;
|
||||||
|
var slideCount = slides.length;
|
||||||
|
var autoPlayDelay = 5000;
|
||||||
|
|
||||||
|
// Create dots
|
||||||
|
for (var i = 0; i < slideCount; i++) {
|
||||||
|
(function(index) {
|
||||||
|
var dot = document.createElement('button');
|
||||||
|
dot.className = 'carousel-dot' + (index === 0 ? ' active' : '');
|
||||||
|
dot.setAttribute('data-index', index);
|
||||||
|
dot.onclick = function() {
|
||||||
|
goToSlide(index);
|
||||||
|
restartAutoPlay();
|
||||||
|
};
|
||||||
|
dotsContainer.appendChild(dot);
|
||||||
|
})(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
var dots = dotsContainer.querySelectorAll('.carousel-dot');
|
||||||
|
|
||||||
|
function goToSlide(index) {
|
||||||
|
var prevIndex = currentIndex;
|
||||||
|
var nextIndex = (index + slideCount) % slideCount;
|
||||||
|
|
||||||
|
// Don't do anything if clicking the same slide
|
||||||
|
if (prevIndex === nextIndex) return;
|
||||||
|
|
||||||
|
// Remove active from current and add exit
|
||||||
|
slides[prevIndex].classList.remove('active');
|
||||||
|
slides[prevIndex].classList.add('exit');
|
||||||
|
dots[prevIndex].classList.remove('active');
|
||||||
|
|
||||||
|
// After transition completes, clean up exit class
|
||||||
|
setTimeout(function() {
|
||||||
|
slides[prevIndex].classList.remove('exit');
|
||||||
|
}, 800);
|
||||||
|
|
||||||
|
// Update index and show new slide
|
||||||
|
currentIndex = nextIndex;
|
||||||
|
slides[currentIndex].classList.add('active');
|
||||||
|
dots[currentIndex].classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextSlide() {
|
||||||
|
goToSlide(currentIndex + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function prevSlide() {
|
||||||
|
goToSlide(currentIndex - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function startAutoPlay() {
|
||||||
|
autoPlayInterval = setInterval(nextSlide, autoPlayDelay);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopAutoPlay() {
|
||||||
|
if (autoPlayInterval) {
|
||||||
|
clearInterval(autoPlayInterval);
|
||||||
|
autoPlayInterval = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function restartAutoPlay() {
|
||||||
|
stopAutoPlay();
|
||||||
|
startAutoPlay();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Arrow button events - direct onclick
|
||||||
|
prevBtn.onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
prevSlide();
|
||||||
|
restartAutoPlay();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
nextBtn.onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
nextSlide();
|
||||||
|
restartAutoPlay();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Pause on hover
|
||||||
|
track.onmouseenter = stopAutoPlay;
|
||||||
|
track.onmouseleave = startAutoPlay;
|
||||||
|
|
||||||
|
// Start
|
||||||
|
startAutoPlay();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
(() => {
|
(() => {
|
||||||
const translations = {
|
const translations = {
|
||||||
|
|||||||
@@ -200,55 +200,6 @@
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
.product-price-box {
|
|
||||||
background: var(--card);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 24px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
}
|
|
||||||
.product-price {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
.product-price span { font-size: 16px; font-weight: 400; }
|
|
||||||
.product-original-price {
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--muted);
|
|
||||||
text-decoration: line-through;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
.product-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
flex: 1;
|
|
||||||
padding: 16px 32px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47, 107, 255, 0.3); }
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 16px 24px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--card);
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
|
|
||||||
|
|
||||||
/* 产品亮点 */
|
/* 产品亮点 */
|
||||||
.product-highlights {
|
.product-highlights {
|
||||||
@@ -532,9 +483,6 @@
|
|||||||
<a href="help.html" class="navbar-btn" aria-label="Search">
|
<a href="help.html" class="navbar-btn" aria-label="Search">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-btn" id="shopBtn" aria-label="Cart">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
|
|
||||||
</button>
|
|
||||||
<a href="index.html#contact" class="navbar-cta">联系我们</a>
|
<a href="index.html#contact" class="navbar-cta">联系我们</a>
|
||||||
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||||
@@ -554,26 +502,6 @@
|
|||||||
<p class="footer-text">© 2025 Chookoo 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
<p class="footer-text">© 2025 Chookoo 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- 购物弹窗 -->
|
|
||||||
<div class="contact-modal-overlay" id="shopModal">
|
|
||||||
<div class="contact-modal">
|
|
||||||
<button class="contact-modal-close" id="shopModalClose">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
||||||
</button>
|
|
||||||
<div class="contact-modal-icon">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3>官方旗舰店</h3>
|
|
||||||
<p>扫描二维码，进入官方店铺选购</p>
|
|
||||||
<div class="contact-qr-wrapper">
|
|
||||||
<div class="contact-qr-box"><img src="qr-shop.png" alt="旗舰店二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换店铺二维码<br>qr-shop.png</span>'" /></div>
|
|
||||||
<div class="contact-qr-label">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="7" y1="7" x2="7" y2="7"/><line x1="17" y1="7" x2="17" y2="7"/><line x1="7" y1="12" x2="7" y2="12"/><line x1="17" y1="12" x2="17" y2="12"/><line x1="7" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="17" y2="17"/></svg>
|
|
||||||
<span>扫码进店</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 视口缩放 - 基于1920px设计稿
|
// 视口缩放 - 基于1920px设计稿
|
||||||
@@ -611,8 +539,6 @@
|
|||||||
subtitle: 'AI健康监测，自动清洁，守护猫咪如厕健康',
|
subtitle: 'AI健康监测，自动清洁，守护猫咪如厕健康',
|
||||||
image: 'cat.png',
|
image: 'cat.png',
|
||||||
tags: ['猫用', '热销'],
|
tags: ['猫用', '热销'],
|
||||||
price: '¥1,999',
|
|
||||||
originalPrice: '¥2,499',
|
|
||||||
category: 'toilet',
|
category: 'toilet',
|
||||||
highlights: [
|
highlights: [
|
||||||
'毫米波雷达监测心率呼吸',
|
'毫米波雷达监测心率呼吸',
|
||||||
@@ -643,8 +569,6 @@
|
|||||||
subtitle: '入门之选，核心功能一应俱全',
|
subtitle: '入门之选，核心功能一应俱全',
|
||||||
image: 'cat.png',
|
image: 'cat.png',
|
||||||
tags: ['猫用', '新品'],
|
tags: ['猫用', '新品'],
|
||||||
price: '¥999',
|
|
||||||
originalPrice: '¥1,299',
|
|
||||||
category: 'toilet',
|
category: 'toilet',
|
||||||
highlights: [
|
highlights: [
|
||||||
'自动铲屎，解放双手',
|
'自动铲屎，解放双手',
|
||||||
@@ -675,8 +599,6 @@
|
|||||||
subtitle: '科学如厕训练，智能清洁管理',
|
subtitle: '科学如厕训练，智能清洁管理',
|
||||||
image: 'dog.jpeg',
|
image: 'dog.jpeg',
|
||||||
tags: ['狗用'],
|
tags: ['狗用'],
|
||||||
price: '¥1,299',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'toilet',
|
category: 'toilet',
|
||||||
highlights: [
|
highlights: [
|
||||||
'智能诱导训练',
|
'智能诱导训练',
|
||||||
@@ -706,8 +628,6 @@
|
|||||||
subtitle: '定时定量精准投喂，养成健康饮食习惯',
|
subtitle: '定时定量精准投喂，养成健康饮食习惯',
|
||||||
image: 'feeder.png',
|
image: 'feeder.png',
|
||||||
tags: ['通用', '热销'],
|
tags: ['通用', '热销'],
|
||||||
price: '¥599',
|
|
||||||
originalPrice: '¥799',
|
|
||||||
category: 'feeding',
|
category: 'feeding',
|
||||||
highlights: [
|
highlights: [
|
||||||
'定时定量投喂',
|
'定时定量投喂',
|
||||||
@@ -738,8 +658,6 @@
|
|||||||
subtitle: '四重过滤循环净化，提升饮水健康',
|
subtitle: '四重过滤循环净化，提升饮水健康',
|
||||||
image: 'water.jpeg',
|
image: 'water.jpeg',
|
||||||
tags: ['通用'],
|
tags: ['通用'],
|
||||||
price: '¥399',
|
|
||||||
originalPrice: '¥499',
|
|
||||||
category: 'feeding',
|
category: 'feeding',
|
||||||
highlights: [
|
highlights: [
|
||||||
'四重过滤系统',
|
'四重过滤系统',
|
||||||
@@ -769,8 +687,6 @@
|
|||||||
subtitle: '真空保鲜，智能控湿，锁住新鲜',
|
subtitle: '真空保鲜，智能控湿，锁住新鲜',
|
||||||
image: 'cat.png',
|
image: 'cat.png',
|
||||||
tags: ['猫用'],
|
tags: ['猫用'],
|
||||||
price: '¥299',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'feeding',
|
category: 'feeding',
|
||||||
highlights: [
|
highlights: [
|
||||||
'真空密封保鲜',
|
'真空密封保鲜',
|
||||||
@@ -798,8 +714,6 @@
|
|||||||
subtitle: '大容量设计，适合多狗家庭',
|
subtitle: '大容量设计，适合多狗家庭',
|
||||||
image: 'dog.jpeg',
|
image: 'dog.jpeg',
|
||||||
tags: ['狗用'],
|
tags: ['狗用'],
|
||||||
price: '¥399',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'feeding',
|
category: 'feeding',
|
||||||
highlights: [
|
highlights: [
|
||||||
'超大容量',
|
'超大容量',
|
||||||
@@ -827,8 +741,6 @@
|
|||||||
subtitle: '1080P高清夜视，AI行为识别，双向语音',
|
subtitle: '1080P高清夜视，AI行为识别，双向语音',
|
||||||
image: 'camera.jpeg',
|
image: 'camera.jpeg',
|
||||||
tags: ['通用', '新品'],
|
tags: ['通用', '新品'],
|
||||||
price: '¥399',
|
|
||||||
originalPrice: '¥499',
|
|
||||||
category: 'monitor',
|
category: 'monitor',
|
||||||
highlights: [
|
highlights: [
|
||||||
'1080P高清画质',
|
'1080P高清画质',
|
||||||
@@ -858,8 +770,6 @@
|
|||||||
subtitle: '轻便佩戴，实时监测活动量与睡眠',
|
subtitle: '轻便佩戴，实时监测活动量与睡眠',
|
||||||
image: 'cat.png',
|
image: 'cat.png',
|
||||||
tags: ['通用'],
|
tags: ['通用'],
|
||||||
price: '¥299',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'monitor',
|
category: 'monitor',
|
||||||
highlights: [
|
highlights: [
|
||||||
'轻便舒适佩戴',
|
'轻便舒适佩戴',
|
||||||
@@ -888,8 +798,6 @@
|
|||||||
subtitle: '温湿度、空气质量实时监测',
|
subtitle: '温湿度、空气质量实时监测',
|
||||||
image: 'dog.jpeg',
|
image: 'dog.jpeg',
|
||||||
tags: ['通用'],
|
tags: ['通用'],
|
||||||
price: '¥199',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'monitor',
|
category: 'monitor',
|
||||||
highlights: [
|
highlights: [
|
||||||
'温湿度监测',
|
'温湿度监测',
|
||||||
@@ -919,8 +827,6 @@
|
|||||||
subtitle: '适用于饮水机，建议3个月更换',
|
subtitle: '适用于饮水机，建议3个月更换',
|
||||||
image: 'cat.png',
|
image: 'cat.png',
|
||||||
tags: ['配件'],
|
tags: ['配件'],
|
||||||
price: '¥79',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'accessories',
|
category: 'accessories',
|
||||||
highlights: [
|
highlights: [
|
||||||
'四重过滤',
|
'四重过滤',
|
||||||
@@ -946,8 +852,6 @@
|
|||||||
subtitle: '适用于智能厕所，保持卫生洁净',
|
subtitle: '适用于智能厕所，保持卫生洁净',
|
||||||
image: 'dog.jpeg',
|
image: 'dog.jpeg',
|
||||||
tags: ['配件'],
|
tags: ['配件'],
|
||||||
price: '¥99',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'accessories',
|
category: 'accessories',
|
||||||
highlights: [
|
highlights: [
|
||||||
'含集便袋10个',
|
'含集便袋10个',
|
||||||
@@ -973,8 +877,6 @@
|
|||||||
subtitle: '通用设计，支持全系产品',
|
subtitle: '通用设计，支持全系产品',
|
||||||
image: 'cat.png',
|
image: 'cat.png',
|
||||||
tags: ['配件'],
|
tags: ['配件'],
|
||||||
price: '¥49',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'accessories',
|
category: 'accessories',
|
||||||
highlights: [
|
highlights: [
|
||||||
'全系通用',
|
'全系通用',
|
||||||
@@ -1001,8 +903,6 @@
|
|||||||
subtitle: '额外1年保修，安心无忧',
|
subtitle: '额外1年保修，安心无忧',
|
||||||
image: 'dog.jpeg',
|
image: 'dog.jpeg',
|
||||||
tags: ['服务'],
|
tags: ['服务'],
|
||||||
price: '¥99',
|
|
||||||
originalPrice: '',
|
|
||||||
category: 'accessories',
|
category: 'accessories',
|
||||||
highlights: [
|
highlights: [
|
||||||
'额外1年保修',
|
'额外1年保修',
|
||||||
@@ -1084,18 +984,6 @@
|
|||||||
<h1 class="product-title">${product.name}</h1>
|
<h1 class="product-title">${product.name}</h1>
|
||||||
<p class="product-subtitle">${product.subtitle}</p>
|
<p class="product-subtitle">${product.subtitle}</p>
|
||||||
|
|
||||||
<div class="product-price-box">
|
|
||||||
<span class="product-price">${product.price}</span>
|
|
||||||
${product.originalPrice ? `<span class="product-original-price">${product.originalPrice}</span>` : ''}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="product-actions">
|
|
||||||
<button class="btn-primary" id="buyBtn">立即购买</button>
|
|
||||||
<button class="btn-secondary" id="favoriteBtn">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="product-highlights">
|
<div class="product-highlights">
|
||||||
<h3>
|
<h3>
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||||
@@ -1162,12 +1050,6 @@
|
|||||||
</section>
|
</section>
|
||||||
` : ''}
|
` : ''}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 绑定购买按钮事件
|
|
||||||
document.getElementById('buyBtn').addEventListener('click', function() {
|
|
||||||
document.getElementById('shopModal').classList.add('active');
|
|
||||||
document.body.style.overflow = 'hidden';
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
@@ -1176,42 +1058,6 @@
|
|||||||
const productId = urlParams.get('id') || 'cat-toilet-pro';
|
const productId = urlParams.get('id') || 'cat-toilet-pro';
|
||||||
renderProduct(productId);
|
renderProduct(productId);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 购物弹窗控制
|
|
||||||
const shopModal = document.getElementById('shopModal');
|
|
||||||
const shopBtn = document.getElementById('shopBtn');
|
|
||||||
const shopModalClose = document.getElementById('shopModalClose');
|
|
||||||
|
|
||||||
if (shopBtn) {
|
|
||||||
shopBtn.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
shopModal.classList.add('active');
|
|
||||||
document.body.style.overflow = 'hidden';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shopModalClose) {
|
|
||||||
shopModalClose.addEventListener('click', function() {
|
|
||||||
shopModal.classList.remove('active');
|
|
||||||
document.body.style.overflow = '';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shopModal) {
|
|
||||||
shopModal.addEventListener('click', function(e) {
|
|
||||||
if (e.target === shopModal) {
|
|
||||||
shopModal.classList.remove('active');
|
|
||||||
document.body.style.overflow = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('keydown', function(e) {
|
|
||||||
if (e.key === 'Escape' && shopModal && shopModal.classList.contains('active')) {
|
|
||||||
shopModal.classList.remove('active');
|
|
||||||
document.body.style.overflow = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user