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-23 23:01:50 +08:00
parent 29271c68d4
commit 852a22a3bf
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,20 +139,34 @@ export default async function Page({ params, searchParams }) {
)}
</div>
)}
{/* Product Description 标题 */}
<div className="mb-2 md:mb-4">
<span className="inline-block bg-[#1fc76f] text-white text-lg md:text-xl font-semibold px-5 py-2 rounded-t-md shadow-sm">Product Description</span>
</div>
<div className="prose max-w-none text-gray-700 mb-6 md:mb-8 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.content || '' }} />
{data.additional_content && (
<>
{/* Testing Report 标题 */}
<div className="mb-2 md:mb-4">
<span className="inline-block bg-[#1fc76f] text-white text-lg md:text-xl font-semibold px-5 py-2 rounded-t-md shadow-sm">Testing Report</span>
{/* Product Description 和 Additional Content 标签式排版 */}
<ul className="nav nav-tabs nav-tabs-basic !mt-[70px]">
<li className="nav-item">
<a className="nav-link active" data-bs-toggle="tab" href="#tab1-1">
Product Description
</a>
</li>
{data.additional_content && (
<li className="nav-item">
<a className="nav-link" data-bs-toggle="tab" href="#tab1-2">
Additional Content
</a>
</li>
)}
</ul>
{/* 标签内容 */}
<div className="tab-content !mt-0 md:!mt-5">
<div className="tab-pane fade show active" id="tab1-1">
<div className="prose max-w-none text-gray-700 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.content || '' }} />
</div>
{data.additional_content && (
<div className="tab-pane fade" id="tab1-2">
<div className="prose max-w-none text-gray-700 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.additional_content }} />
</div>
<div className="prose max-w-none text-gray-700 mt-6 md:mt-8 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.additional_content }} />
</>
)}
)}
</div>
</div>
</div>
</div>