feat(blogs): 新增多语言博客内容及图片资源
添加英文、日文和中文博客文章,包括1.mdx、2.mdx和3.mdx文件 新增博客相关图片资源到public/images目录
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
'use client'
|
||||
import { Link as I18nLink } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function HomeComponent() {
|
||||
@@ -11,13 +12,13 @@ export default function HomeComponent() {
|
||||
<>
|
||||
<section className="mx-auto text-center">
|
||||
{/* 轮播图区域, 先用一张图片占位, 宽度100%, 盖度100vh */}
|
||||
<img src="/placeholder.svg" alt={t("carousel")} className="w-screen h-[80vh] object-cover rounded-lg" />
|
||||
<img src="/images/home.png" 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"
|
||||
src="http://kelunpuzhonggong.com/upload/img/20210508103620.jpg"
|
||||
alt={t("company_video")}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
@@ -32,7 +33,8 @@ export default function HomeComponent() {
|
||||
|
||||
{/* 第二部分:介绍 */}
|
||||
<div className="mb-8">
|
||||
<p className="text-lg text-gray-700 leading-relaxed">
|
||||
{/* 左对齐首行缩进2字符 */}
|
||||
<p className="text-left text-lg text-gray-700 leading-relaxed indent-8">
|
||||
{t("company.description")}
|
||||
</p>
|
||||
</div>
|
||||
@@ -119,37 +121,44 @@ export default function HomeComponent() {
|
||||
{/* 资讯卡片列表 */}
|
||||
<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">{t("news.items.news1.date")}</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news1.title")}</div>
|
||||
<I18nLink href={t("news.items.news1.link")}>
|
||||
<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">{t("news.items.news1.date")}</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news1.title")}</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/images/blogs/1.jpg" alt={t("news.items.news1.title")} className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/placeholder.svg" alt={t("news.items.news1.title")} className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</I18nLink>
|
||||
|
||||
{/* 第二张卡片 - 中间突出显示 */}
|
||||
<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">{t("news.items.news2.date")}</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news2.title")}</div>
|
||||
{/* 第二张卡片 */}
|
||||
<I18nLink href={t("news.items.news2.link")}>
|
||||
<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">{t("news.items.news2.date")}</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news2.title")}</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/images/blogs/2.png" alt={t("news.items.news2.title")} className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/placeholder.svg" alt={t("news.items.news2.title")} className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</I18nLink>
|
||||
|
||||
{/* 第三张卡片 */}
|
||||
<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">{t("news.items.news3.date")}</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news3.title")}</div>
|
||||
<I18nLink href={t("news.items.news3.link")}>
|
||||
<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">{t("news.items.news3.date")}</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news3.title")}</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/images/blogs/3.jpg" alt={t("news.items.news3.title")} className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/placeholder.svg" alt={t("news.items.news3.title")} className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</I18nLink>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 了解更多按钮 */}
|
||||
@@ -175,7 +184,7 @@ export default function HomeComponent() {
|
||||
{/* 默认显示第一张产品图 */}
|
||||
<img
|
||||
id="productImage"
|
||||
src="/placeholder.svg"
|
||||
src={t("products.list.product1.image")}
|
||||
alt={t("products.list.product1.alt")}
|
||||
className="w-full h-full object-contain p-8 transition-opacity duration-300"
|
||||
/>
|
||||
@@ -192,7 +201,7 @@ export default function HomeComponent() {
|
||||
<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('src', t("products.list.product1.image"));
|
||||
document.getElementById('productImage')?.setAttribute('alt', t("products.list.product1.alt"));
|
||||
document.getElementById('productTitle')!.textContent = t("products.list.product1.name");
|
||||
}}
|
||||
@@ -204,7 +213,7 @@ export default function HomeComponent() {
|
||||
<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('src', t("products.list.product2.image"));
|
||||
document.getElementById('productImage')?.setAttribute('alt', t("products.list.product2.alt"));
|
||||
document.getElementById('productTitle')!.textContent = t("products.list.product2.name");
|
||||
}}
|
||||
@@ -216,7 +225,7 @@ export default function HomeComponent() {
|
||||
<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('src', t("products.list.product3.image"));
|
||||
document.getElementById('productImage')?.setAttribute('alt', t("products.list.product3.alt"));
|
||||
document.getElementById('productTitle')!.textContent = t("products.list.product3.name");
|
||||
}}
|
||||
@@ -228,7 +237,7 @@ export default function HomeComponent() {
|
||||
<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('src', t("products.list.product4.image"));
|
||||
document.getElementById('productImage')?.setAttribute('alt', t("products.list.product4.alt"));
|
||||
document.getElementById('productTitle')!.textContent = t("products.list.product4.name");
|
||||
}}
|
||||
@@ -240,7 +249,7 @@ export default function HomeComponent() {
|
||||
<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('src', t("products.list.product5.image"));
|
||||
document.getElementById('productImage')?.setAttribute('alt', t("products.list.product5.alt"));
|
||||
document.getElementById('productTitle')!.textContent = t("products.list.product5.name");
|
||||
}}
|
||||
@@ -252,7 +261,7 @@ export default function HomeComponent() {
|
||||
<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('src', t("products.list.product6.image"));
|
||||
document.getElementById('productImage')?.setAttribute('alt', t("products.list.product6.alt"));
|
||||
document.getElementById('productTitle')!.textContent = t("products.list.product6.name");
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user