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
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
? 'border-2 border-blue-500 ring-2 ring-blue-200'
: 'border border-gray-200 hover:border-gray-300'
? 'border-2'
: 'border border-[#eee] hover:border-gray-300'
}`}
style={index === currentImageIndex ? { borderColor: '#1A1A1A', borderWidth: '2px' } : {}}
tabIndex={0}
role="button"
aria-label={`查看图片 ${index + 1} / ${data.attachments.length}`}
@ -257,8 +258,8 @@ const ProductImageGallery = ({ data }) => {
/* 缩略图悬停效果 */
.thumbs-swiper .swiper-slide {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 64px !important; /* 确保宽度为64px */
margin-right: 16px !important; /* 确保右边距为16px */
width: 64px !important;
margin-right: 16px !important;
}
.thumbs-swiper .swiper-slide:hover {
@ -266,16 +267,10 @@ const ProductImageGallery = ({ data }) => {
}
.thumbs-swiper .swiper-slide:last-child {
margin-right: 0 !important; /* 最后一个缩略图不需要右边距 */
margin-right: 0 !important;
}
/* 当前选中的缩略图样式 */
.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);
.thumbs-swiper .swiper-slide .border-2 {
}
/* 导航按钮样式增强 */