DeXun/sage-home
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新产品图片和内容，优化首页展示

Browse Source 
- 新增产品线相关图片资源
- 更新中英文产品内容中的图片引用路径
- 简化首页标题并移除应用领域板块
- 优化产品中心展示内容
- 更新公司描述信息
This commit is contained in:
砂糖
2026-01-29 13:27:44 +08:00
parent 99ce2b7fb8
commit 8600a01ce4
46 changed files with 100 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
components/home/index.tsx
View File

@@ -18,7 +18,7 @@ export default function HomeComponent() {
{/* 左边视频（图片占位） */}
<div className="w-full lg:w-1/2 h-[50vh] lg:h-[60vh] relative overflow-hidden">
<img
src="http://kelunpuzhonggong.com/upload/img/20210508103620.jpg"
src="/images/1.png"
alt={t("company_video")}
className="w-full h-full object-cover"
/>
@@ -275,209 +275,6 @@ export default function HomeComponent() {
</div>
</div>
</div>
{/* 应用领域 */}
<div className="py-16 px-4 bg-gray-50 relative overflow-hidden">
{/* 标题 */}
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-gray-900 inline-block relative">
{t("applications.title")}
<span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
</h2>
</div>
{/* 轮播容器 */}
<div className="relative max-w-7xl mx-auto">
{/* 左切换按钮 */}
<button
id="prevSlide"
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
>
&lt;
</button>
{/* 右切换按钮 */}
<button
id="nextSlide"
className="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
>
&gt;
</button>
{/* 轮播内容 */}
<div className="overflow-hidden">
<div
id="carouselTrack"
className="flex transition-transform duration-500 ease-in-out"
style={{ transform: 'translateX(0)' }}
>
{/* 第一组卡片拼图 */}
<div className="min-w-full flex flex-wrap gap-4 p-4">
{/* 第一行 */}
<div className="w-full flex gap-4 mb-4">
{/* 电梯井道 */}
<div className="w-1/4 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group1.items.app1.image")}
alt={t("applications.groups.group1.items.app1.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group1.items.app1.name")}
</div>
</div>
{/* 塔机制造 - 宽度为其他卡片的两倍 */}
<div className="w-1/2 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group1.items.app2.image")}
alt={t("applications.groups.group1.items.app2.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group1.items.app2.name")}
</div>
</div>
{/* 工程机械 */}
<div className="w-1/4 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group1.items.app3.image")}
alt={t("applications.groups.group1.items.app3.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group1.items.app3.name")}
</div>
</div>
</div>
{/* 第二行 */}
<div className="w-full flex gap-4">
{/* 高速护栏 - 宽度为其他卡片的两倍 */}
<div className="w-1/2 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group1.items.app4.image")}
alt={t("applications.groups.group1.items.app4.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group1.items.app4.name")}
</div>
</div>
{/* 桥梁 */}
<div className="w-1/4 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group1.items.app5.image")}
alt={t("applications.groups.group1.items.app5.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group1.items.app5.name")}
</div>
</div>
{/* 钢结构 */}
<div className="w-1/4 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group1.items.app6.image")}
alt={t("applications.groups.group1.items.app6.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group1.items.app6.name")}
</div>
</div>
</div>
</div>
{/* 第二组卡片拼图（可扩展更多组） */}
<div className="min-w-full flex flex-wrap gap-4 p-4">
{/* 第一行 */}
<div className="w-full flex gap-4 mb-4">
{/* 建筑工程 */}
<div className="w-1/3 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group2.items.app7.image")}
alt={t("applications.groups.group2.items.app7.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group2.items.app7.name")}
</div>
</div>
{/* 水利水电 */}
<div className="w-1/3 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group2.items.app8.image")}
alt={t("applications.groups.group2.items.app8.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group2.items.app8.name")}
</div>
</div>
{/* 轨道交通 */}
<div className="w-1/3 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group2.items.app9.image")}
alt={t("applications.groups.group2.items.app9.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group2.items.app9.name")}
</div>
</div>
</div>
{/* 第二行 */}
<div className="w-full flex gap-4">
{/* 市政工程 */}
<div className="w-1/3 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group2.items.app10.image")}
alt={t("applications.groups.group2.items.app10.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group2.items.app10.name")}
</div>
</div>
{/* 农业设施 */}
<div className="w-1/3 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group2.items.app11.image")}
alt={t("applications.groups.group2.items.app11.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group2.items.app11.name")}
</div>
</div>
{/* 能源化工 */}
<div className="w-1/3 relative overflow-hidden rounded-lg">
<img
src={t("applications.groups.group2.items.app12.image")}
alt={t("applications.groups.group2.items.app12.alt")}
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
{t("applications.groups.group2.items.app12.name")}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* 生产案例 */}
</section>
</>
);