jsite/t10015
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新产品详情页缩略图边框颜色

Browse Source
This commit is contained in:
jingrow 2025-08-24 21:57:30 +08:00
parent d0982afc49
commit d7a1682e9b
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/products/ProductImageGallery.jsx
View File

@ -137,9 +137,10 @@ const ProductImageGallery = ({ data }) => {
<div <div
className={`w-full h-full rounded-lg overflow-hidden cursor-pointer transition-all duration-300 hover:scale-105 focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 ${ className={`w-full h-full rounded-lg overflow-hidden cursor-pointer transition-all duration-300 hover:scale-105 focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 ${
index === currentImageIndex index === currentImageIndex
? 'border-2 border-blue-500 ring-2 ring-blue-200' ? 'border-2'
: 'border border-gray-200 hover:border-gray-300' : 'border border-[#eee] hover:border-gray-300'
}`} }`}
style={index === currentImageIndex ? { borderColor: '#1A1A1A', borderWidth: '2px' } : {}}
tabIndex={0} tabIndex={0}
role="button" role="button"
aria-label={`查看图片 ${index + 1} / ${data.attachments.length}`} aria-label={`查看图片 ${index + 1} / ${data.attachments.length}`}
@ -257,8 +258,8 @@ const ProductImageGallery = ({ data }) => {
/* 缩略图悬停效果 */ /* 缩略图悬停效果 */
.thumbs-swiper .swiper-slide { .thumbs-swiper .swiper-slide {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 64px !important; /* 确保宽度为64px */ width: 64px !important;
margin-right: 16px !important; /* 确保右边距为16px */ margin-right: 16px !important;
} }
.thumbs-swiper .swiper-slide:hover { .thumbs-swiper .swiper-slide:hover {
@ -266,16 +267,10 @@ const ProductImageGallery = ({ data }) => {
} }
.thumbs-swiper .swiper-slide:last-child { .thumbs-swiper .swiper-slide:last-child {
margin-right: 0 !important; /* 最后一个缩略图不需要右边距 */ margin-right: 0 !important;
} }
/* 当前选中的缩略图样式 */ .thumbs-swiper .swiper-slide .border-2 {
.border-2.border-blue-500 {
border-color: #3b82f6;
}
.ring-2.ring-blue-200 {
box-shadow: 0 0 0 2px rgba(191, 219, 254, 0.5);
} }
/* 导航按钮样式增强 */ /* 导航按钮样式增强 */