This commit is contained in:
@@ -19,40 +19,24 @@
|
|||||||
#index #header {
|
#index #header {
|
||||||
z-index: 99999 !important;
|
z-index: 99999 !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: background 0.3s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#index #header {
|
#index #header {
|
||||||
position: sticky !important;
|
position: sticky !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#index #header:hover,
|
||||||
|
#index header:hover {
|
||||||
|
background: rgba(15, 23, 42, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* 首页 section-content 统一左右边距为 20px */
|
/* 首页 section-content 统一左右边距为 20px */
|
||||||
#index .section-content {
|
#index .section-content {
|
||||||
padding-left: var(--container-padding-x);
|
padding-left: var(--container-padding-x);
|
||||||
padding-right: var(--container-padding-x);
|
padding-right: var(--container-padding-x);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 首页 Header 深色玻璃态覆盖 - 鼠标悬停变色效果 */
|
|
||||||
#index #header {
|
|
||||||
background: transparent;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#index #header:hover {
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
#index .nav-shadow {
|
|
||||||
background: rgba(15, 23, 42, 0.8) !important;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
|
|
||||||
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.4);
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#index .nav-shadow:hover {
|
|
||||||
background: rgba(15, 23, 42, 0.95) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 首页导航栏:使用统一的容器系统 */
|
/* 首页导航栏:使用统一的容器系统 */
|
||||||
#index .nav-header {
|
#index .nav-header {
|
||||||
max-width: var(--container-max-width);
|
max-width: var(--container-max-width);
|
||||||
@@ -60,6 +44,19 @@
|
|||||||
padding: 0 var(--container-padding-x);
|
padding: 0 var(--container-padding-x);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* nav-shadow 样式和 hover 效果 */
|
||||||
|
#index .nav-shadow {
|
||||||
|
background: rgba(15, 23, 42, 0.8) !important;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
|
||||||
|
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.4);
|
||||||
|
transition: background 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#index .nav-shadow:hover {
|
||||||
|
background: rgba(15, 23, 42, 0.95) !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* 首页导航文字颜色 */
|
/* 首页导航文字颜色 */
|
||||||
#index .nav-menu .nav-item {
|
#index .nav-menu .nav-item {
|
||||||
color: #E5E7EB;
|
color: #E5E7EB;
|
||||||
@@ -423,13 +420,14 @@
|
|||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
.hot-products {
|
.hot-products {
|
||||||
margin-top: 60px;
|
margin-top: 0;
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
|
radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
|
||||||
rgba(15, 23, 42, 0.6);
|
rgba(15, 23, 42, 0.6);
|
||||||
border: 1px solid rgba(148, 163, 184, 0.15);
|
border: 1px solid rgba(148, 163, 184, 0.15);
|
||||||
border-radius: 16px;
|
border-top: none;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
30
js/tools.js
30
js/tools.js
@@ -1,9 +1,6 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
console.log('tools.js loaded');
|
|
||||||
|
|
||||||
// 产品详情页的图片预览轮播(仅在存在时初始化)
|
// 产品详情页的图片预览轮播(仅在存在时初始化)
|
||||||
if ($('.gallery-thumbs').length > 0 && $('.gallery-top').length > 0) {
|
if ($('.gallery-thumbs').length > 0 && $('.gallery-top').length > 0) {
|
||||||
console.log('Initializing gallery swiper');
|
|
||||||
var galleryThumbs = new Swiper('.gallery-thumbs', {
|
var galleryThumbs = new Swiper('.gallery-thumbs', {
|
||||||
spaceBetween: 10,
|
spaceBetween: 10,
|
||||||
slidesPerView: 10,
|
slidesPerView: 10,
|
||||||
@@ -26,56 +23,37 @@ $(function () {
|
|||||||
|
|
||||||
// 首页 Banner 轮播(仅在存在时初始化)
|
// 首页 Banner 轮播(仅在存在时初始化)
|
||||||
if ($('.banner-cont').length > 0) {
|
if ($('.banner-cont').length > 0) {
|
||||||
console.log('Found .banner-cont, initializing banner swiper');
|
|
||||||
console.log('Number of slides:', $('.banner-cont .swiper-slide').length);
|
|
||||||
|
|
||||||
const mySwiper = new Swiper(".banner-cont", {
|
const mySwiper = new Swiper(".banner-cont", {
|
||||||
loop: true, // 循环模式选项
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000, // 5秒自动切换
|
delay: 5000,
|
||||||
disableOnInteraction: false, // 用户操作后继续自动播放
|
disableOnInteraction: false,
|
||||||
},
|
},
|
||||||
speed: 800, // 切换速度
|
speed: 800,
|
||||||
// 分页器配置
|
|
||||||
pagination: {
|
pagination: {
|
||||||
el: ".swiper-pagination",
|
el: ".swiper-pagination",
|
||||||
clickable: true,
|
clickable: true,
|
||||||
type: 'bullets',
|
type: 'bullets',
|
||||||
},
|
},
|
||||||
// 监听切换事件,重置进度条动画
|
|
||||||
on: {
|
on: {
|
||||||
slideChange: function () {
|
slideChange: function () {
|
||||||
console.log('Slide changed');
|
|
||||||
// 移除所有进度条动画
|
|
||||||
document.querySelectorAll('.banner-cont .swiper-pagination-bullet').forEach(function(bullet) {
|
document.querySelectorAll('.banner-cont .swiper-pagination-bullet').forEach(function(bullet) {
|
||||||
bullet.classList.remove('progress-active');
|
bullet.classList.remove('progress-active');
|
||||||
});
|
});
|
||||||
// 给当前激活的添加进度动画
|
|
||||||
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
||||||
if (activeBullet) {
|
if (activeBullet) {
|
||||||
activeBullet.classList.add('progress-active');
|
activeBullet.classList.add('progress-active');
|
||||||
console.log('Added progress-active to bullet');
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
init: function () {
|
init: function () {
|
||||||
console.log('Swiper initialized');
|
|
||||||
console.log('Pagination bullets:', document.querySelectorAll('.swiper-pagination-bullet').length);
|
|
||||||
// 初始化时给第一个添加进度动画
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
||||||
if (activeBullet) {
|
if (activeBullet) {
|
||||||
activeBullet.classList.add('progress-active');
|
activeBullet.classList.add('progress-active');
|
||||||
console.log('Added initial progress-active to bullet');
|
|
||||||
} else {
|
|
||||||
console.log('No active bullet found');
|
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('Banner swiper created:', mySwiper);
|
|
||||||
} else {
|
|
||||||
console.log('.banner-cont not found');
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user