2025-11-21 13:36:06 +08:00
|
|
|
|
'use client'
|
|
|
|
|
|
import { useTranslations } from "next-intl";
|
|
|
|
|
|
|
|
|
|
|
|
export default function HomeComponent() {
|
|
|
|
|
|
const t = useTranslations("Home");
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
<>
|
2025-11-21 15:35:36 +08:00
|
|
|
|
<section className="mx-auto text-center">
|
|
|
|
|
|
{/* 轮播图区域, 先用一张图片占位， 宽度100%， 盖度100vh */}
|
|
|
|
|
|
<img src="/placeholder.svg" alt={t("carousel")} className="w-screen h-[80vh] object-cover rounded-lg" />
|
|
|
|
|
|
{/* 公司介绍 - 左右布局 */}
|
|
|
|
|
|
<div className="flex flex-col lg:flex-row w-full my-16 px-8">
|
|
|
|
|
|
{/* 左边视频（图片占位） */}
|
|
|
|
|
|
<div className="w-full lg:w-1/2 h-[50vh] lg:h-[60vh] relative overflow-hidden">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
alt={t("company_video")}
|
|
|
|
|
|
className="w-full h-full object-cover"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 右边内容 - 分三部分 */}
|
|
|
|
|
|
<div className="w-full lg:w-1/2 flex flex-col justify-center p-8 lg:p-16">
|
|
|
|
|
|
{/* 第一部分：标题 */}
|
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
|
<h2 className="text-3xl font-bold text-gray-900">天津友发钢管集团股份有限公司</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 第二部分：介绍 */}
|
|
|
|
|
|
<div className="mb-8">
|
|
|
|
|
|
<p className="text-lg text-gray-700 leading-relaxed">
|
|
|
|
|
|
友发集团是集直缝焊接圆管（含热浸镀锌）、直缝焊接方矩管（含热浸镀锌）、钢塑复合管、不锈钢管及管件、螺旋焊管（含承插及防腐加工）、热镀锌无缝管、石油管道、管件、保温管道、塑料管及管件、盘扣脚手架、光伏支架及地桩等多种产品生产销售于一体的大型企业集团，拥有'友发'和'正金'两个品牌。已经形成天津、河北唐山、河北邯郸、河北沧州、陕西韩城、江苏溧阳、辽宁葫芦岛、云南玉溪、安徽临泉、吉林磐石10个生产基地，同时正在建设四川成都基地。
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 第三部分：按钮 */}
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<button className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded transition-colors">
|
|
|
|
|
|
了解更多
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 隐式轮播图，没有控件，每张四个卡片 */}
|
|
|
|
|
|
<div className="relative overflow-hidden py-16">
|
|
|
|
|
|
<div className="flex w-full flex-nowrap animate-carousel">
|
|
|
|
|
|
{/* 第一组卡片 */}
|
|
|
|
|
|
<div className="min-w-full flex justify-center px-4 gap-6">
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">5</div>
|
|
|
|
|
|
<div className="text-gray-700">国家级绿色产品</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">3+</div>
|
|
|
|
|
|
<div className="text-gray-700">国家级绿色工厂</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">7</div>
|
|
|
|
|
|
<div className="text-gray-700">CNAS（国家认可）实验室</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">10</div>
|
|
|
|
|
|
<div className="text-gray-700">生产基地</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{/* 第二组卡片 - 用于无缝轮播 */}
|
|
|
|
|
|
<div className="min-w-full flex justify-center px-4 gap-6">
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">5</div>
|
|
|
|
|
|
<div className="text-gray-700">国家级绿色产品</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">3+</div>
|
|
|
|
|
|
<div className="text-gray-700">国家级绿色工厂</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">7</div>
|
|
|
|
|
|
<div className="text-gray-700">CNAS（国家认可）实验室</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
|
|
|
|
|
<div className="text-red-600 text-4xl font-bold mb-2">10</div>
|
|
|
|
|
|
<div className="text-gray-700">生产基地</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<style jsx>{`
|
|
|
|
|
|
@keyframes carousel {
|
|
|
|
|
|
0% { transform: translateX(0); }
|
|
|
|
|
|
90% { transform: translateX(0); }
|
|
|
|
|
|
100% { transform: translateX(-100%); }
|
|
|
|
|
|
100% { transform: translateX(-100%); }
|
|
|
|
|
|
}
|
|
|
|
|
|
.animate-carousel {
|
|
|
|
|
|
animation: carousel 5s infinite linear;
|
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
|
transition: transform 1.5s;
|
|
|
|
|
|
}
|
|
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 最新资讯 */}
|
|
|
|
|
|
<div className="py-16 px-4 bg-white relative overflow-hidden">
|
|
|
|
|
|
{/* 标题 */}
|
|
|
|
|
|
<div className="text-center mb-12">
|
|
|
|
|
|
<h2 className="text-3xl font-bold text-gray-900 inline-block relative">
|
|
|
|
|
|
最新资讯
|
|
|
|
|
|
<span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 资讯卡片列表 */}
|
|
|
|
|
|
<div className="flex flex-wrap justify-center gap-6 max-w-7xl mx-auto">
|
|
|
|
|
|
{/* 第一张卡片 */}
|
|
|
|
|
|
<div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
|
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
|
<div className="text-red-600 mb-2 font-medium text-left">2025/11/17</div>
|
|
|
|
|
|
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">核聚变区，智创未来，友发集团亮相202...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="p-4 h-48 overflow-hidden">
|
|
|
|
|
|
<img src="/placeholder.svg" alt="资讯图片1" className="w-full h-full object-cover rounded" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 第二张卡片 - 中间突出显示 */}
|
|
|
|
|
|
<div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative -mt-2 z-10">
|
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
|
<div className="text-red-600 mb-2 font-medium text-left">2025/11/17</div>
|
|
|
|
|
|
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">携手再攀产业新高峰，友发集团应邀出席...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="p-4 h-48 overflow-hidden">
|
|
|
|
|
|
<img src="/placeholder.svg" alt="资讯图片2" className="w-full h-full object-cover rounded" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 第三张卡片 */}
|
|
|
|
|
|
<div className="w-full md:w-[26vw] lg:w-[26vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
|
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
|
<div className="text-red-600 mb-2 font-medium text-left">2025/09/20</div>
|
|
|
|
|
|
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">友发集团与中诚投建工集团签订战略合作...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="p-4 h-48 overflow-hidden">
|
|
|
|
|
|
<img src="/placeholder.svg" alt="资讯图片3" className="w-full h-full object-cover rounded" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 了解更多按钮 */}
|
|
|
|
|
|
<div className="text-center mt-12">
|
|
|
|
|
|
<button className="px-6 py-2 bg-white border border-red-600 text-red-600 hover:bg-red-600 hover:text-white transition-all duration-300 rounded-sm">
|
|
|
|
|
|
了解更多 >
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{/* 产品中心 */}
|
|
|
|
|
|
<div className="py-16 px-4 bg-white">
|
|
|
|
|
|
<div className="text-center mb-12">
|
|
|
|
|
|
<h2 className="text-3xl font-bold text-gray-900 inline-block relative">
|
|
|
|
|
|
产品中心
|
|
|
|
|
|
<span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 左右布局，左3右2 */}
|
|
|
|
|
|
<div className="flex flex-col lg:flex-row w-full max-w-7xl mx-auto">
|
|
|
|
|
|
{/* 左侧产品图 - 占3份 */}
|
|
|
|
|
|
<div className="w-full lg:w-3/5 h-[50vh] lg:h-[70vh] relative overflow-hidden bg-gray-100 rounded-lg mb-8 lg:mb-0">
|
|
|
|
|
|
{/* 默认显示第一张产品图 */}
|
|
|
|
|
|
<img
|
|
|
|
|
|
id="productImage"
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
alt="直缝高频焊接圆管"
|
|
|
|
|
|
className="w-full h-full object-contain p-8 transition-opacity duration-300"
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 产品标题覆盖层 */}
|
|
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent">
|
|
|
|
|
|
<h3 id="productTitle" className="text-white text-2xl font-bold">直缝高频焊接圆管(含热浸镀锌)</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 右侧产品列表 - 占2份，两列布局 */}
|
|
|
|
|
|
<div className="w-full lg:w-2/5 grid grid-cols-2 gap-4 lg:gap-6 p-4 lg:pl-8">
|
|
|
|
|
|
{/* 产品1 */}
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
|
|
|
|
|
onMouseEnter={() => {
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('alt', '直缝高频焊接圆管');
|
|
|
|
|
|
document.getElementById('productTitle')!.textContent = '直缝高频焊接圆管(含热浸镀锌)';
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>直缝高频焊接圆管(含热浸镀锌)</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 产品2 */}
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
|
|
|
|
|
onMouseEnter={() => {
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('alt', '方形焊接钢管');
|
|
|
|
|
|
document.getElementById('productTitle')!.textContent = '方形焊接钢管(含热浸镀锌)';
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>方形焊接钢管(含热浸镀锌)</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 产品3 */}
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
|
|
|
|
|
onMouseEnter={() => {
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('alt', '钢塑复合管');
|
|
|
|
|
|
document.getElementById('productTitle')!.textContent = '钢塑复合管';
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>钢塑复合管</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 产品4 */}
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
|
|
|
|
|
onMouseEnter={() => {
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('alt', '管路连接件');
|
|
|
|
|
|
document.getElementById('productTitle')!.textContent = '管路连接件';
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>管路连接件</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 产品5 */}
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
|
|
|
|
|
onMouseEnter={() => {
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('alt', '盘扣脚手架');
|
|
|
|
|
|
document.getElementById('productTitle')!.textContent = '盘扣脚手架';
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>盘扣脚手架</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 产品6 */}
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
|
|
|
|
|
onMouseEnter={() => {
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
|
|
|
|
|
document.getElementById('productImage')?.setAttribute('alt', '不锈钢管及管件');
|
|
|
|
|
|
document.getElementById('productTitle')!.textContent = '不锈钢管及管件';
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<span>不锈钢管及管件</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</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">
|
|
|
|
|
|
应用领域
|
|
|
|
|
|
<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"
|
2025-11-21 13:36:06 +08:00
|
|
|
|
>
|
2025-11-21 15:35:36 +08:00
|
|
|
|
<
|
|
|
|
|
|
</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"
|
2025-11-21 13:36:06 +08:00
|
|
|
|
>
|
2025-11-21 15:35:36 +08:00
|
|
|
|
>
|
|
|
|
|
|
</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="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
电梯井道
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 塔机制造 - 宽度为其他卡片的两倍 */}
|
|
|
|
|
|
<div className="w-1/2 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
塔机制造
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 工程机械 */}
|
|
|
|
|
|
<div className="w-1/4 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
工程机械
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 第二行 */}
|
|
|
|
|
|
<div className="w-full flex gap-4">
|
|
|
|
|
|
{/* 高速护栏 - 宽度为其他卡片的两倍 */}
|
|
|
|
|
|
<div className="w-1/2 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
高速护栏
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 桥梁 */}
|
|
|
|
|
|
<div className="w-1/4 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
桥梁
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 钢结构 */}
|
|
|
|
|
|
<div className="w-1/4 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
钢结构
|
|
|
|
|
|
</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="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
建筑工程
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 水利水电 */}
|
|
|
|
|
|
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
水利水电
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 轨道交通 */}
|
|
|
|
|
|
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
轨道交通
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 第二行 */}
|
|
|
|
|
|
<div className="w-full flex gap-4">
|
|
|
|
|
|
{/* 市政工程 */}
|
|
|
|
|
|
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
市政工程
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 农业设施 */}
|
|
|
|
|
|
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
农业设施
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 能源化工 */}
|
|
|
|
|
|
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
|
|
|
|
|
<img
|
|
|
|
|
|
src="/placeholder.svg"
|
|
|
|
|
|
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">
|
|
|
|
|
|
能源化工
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-11-21 13:36:06 +08:00
|
|
|
|
</div>
|
2025-11-21 15:35:36 +08:00
|
|
|
|
|
|
|
|
|
|
{/* 生产案例 */}
|
2025-11-21 13:36:06 +08:00
|
|
|
|
</section>
|
|
|
|
|
|
</>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
