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 18:30:57 +08:00
parent 59b2daa196
commit 74699a172b
3 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[...slug]/page.jsx
View File

@ -140,7 +140,7 @@ export default async function DynamicPage({ params, searchParams }) {
{(data.image || data.subtitle) && ( {(data.image || data.subtitle) && (
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full"> <div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
{data.image && ( {data.image && (
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full"> <div className="flex-shrink-0 w-full md:w-100 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
<img <img
src={data.image} src={data.image}
alt={data.title} alt={data.title}

6
app/products/[...slug]/page.jsx
View File

@ -123,20 +123,20 @@ export default async function Page({ params, searchParams }) {
<div className="bg-white rounded-lg shadow-md p-6 md:p-10"> <div className="bg-white rounded-lg shadow-md p-6 md:p-10">
{/* 图片和附加信息并排显示，响应式优化 */} {/* 图片和附加信息并排显示，响应式优化 */}
{(data.image || data.subtitle) && ( {(data.image || data.subtitle) && (
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full"> <div className="flex flex-col md:flex-row gap-4 md:gap-10 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
{/* 图片轮播区块 */} {/* 图片轮播区块 */}
<ProductImageGallery data={data} /> <ProductImageGallery data={data} />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{/* 产品标题 */} {/* 产品标题 */}
{data.title && ( {data.title && (
<h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 md:mb-6 leading-tight"> <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-10 md:mb-10 leading-tight">
{data.title} {data.title}
</h1> </h1>
)} )}
{/* 产品副标题 */} {/* 产品副标题 */}
{data.subtitle && ( {data.subtitle && (
<div className="bg-gray-50 whitespace-pre-line text-gray-700 w-full max-w-full prose prose-sm p-4 rounded-lg"> <div className="bg-gray-50 whitespace-pre-line text-gray-700 w-full max-w-full prose prose-sm">
{data.subtitle} {data.subtitle}
</div> </div>
)} )}

8
components/products/ProductImageGallery.jsx
View File

@ -44,14 +44,14 @@ const ProductImageGallery = ({ data }) => {
}; };
return ( return (
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full"> <div className="flex-shrink-0 w-full md:w-120 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
<div className="relative w-full max-w-[320px] md:max-w-full"> <div className="relative w-full max-w-[320px] md:max-w-full">
{/* 主图显示区域 */} {/* 主图显示区域 */}
<div className="relative overflow-hidden rounded-xl shadow-lg mb-4"> <div className="relative overflow-hidden rounded-xl shadow-lg mb-4">
<img <img
src={currentImage} src={currentImage}
alt={data?.title || 'Product Image'} alt={data?.title || 'Product Image'}
className="w-full max-w-[320px] md:max-w-full max-h-60 md:max-h-72 object-contain" className="w-full max-w-[320px] md:max-w-full object-contain"
/> />
{/* 导航箭头 */} {/* 导航箭头 */}
{data.attachments.length > 1 && ( {data.attachments.length > 1 && (
@ -79,11 +79,11 @@ const ProductImageGallery = ({ data }) => {
</div> </div>
{/* 缩略图列表 - 直接显示attachments */} {/* 缩略图列表 - 直接显示attachments */}
<div className="flex flex-wrap gap-2 justify-center md:justify-start"> <div className="flex flex-wrap gap-1 justify-center md:justify-start">
{data.attachments.map((attachment, index) => ( {data.attachments.map((attachment, index) => (
<div <div
key={index} key={index}
className={`w-16 h-16 border-2 rounded-lg overflow-hidden cursor-pointer transition-all hover:border-blue-500 ${ className={`w-16 h-16 border-1 rounded-lg overflow-hidden cursor-pointer transition-all hover:border-blue-500 ${
index === currentImageIndex ? 'border-blue-500' : 'border-gray-200' index === currentImageIndex ? 'border-blue-500' : 'border-gray-200'
}`} }`}
onClick={() => changeMainImageByIndex(index)} onClick={() => changeMainImageByIndex(index)}