95 lines
3.5 KiB
JavaScript
95 lines
3.5 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import axios from "axios";
|
|
|
|
export default function Features() {
|
|
const [data, setData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
try {
|
|
setLoading(true);
|
|
const res = await axios.get("/api/get-component-data", {
|
|
params: { component_name: "Features" },
|
|
});
|
|
setData(res.data.data);
|
|
} catch (err) {
|
|
setError("获取Features数据失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
if (loading) return <div className="text-center py-20">Loading...</div>;
|
|
if (error) return null;
|
|
if (!data) return null;
|
|
|
|
// 主图
|
|
const mainImage = data.image || "/assets/img/photos/about2.jpg";
|
|
// 标题/副标题/描述
|
|
const title = data.title || "";
|
|
const subtitle = data.subtitle || "";
|
|
const description = data.description || "";
|
|
const icon = data.icon || "/files/icon.svg";
|
|
const htmlCode = data.html_code || "";
|
|
const buttonText = data.button_text || "MORE";
|
|
const buttonLink = data.button_link || "#";
|
|
// items 子表
|
|
// const items = data.items || [];
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-between mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px]">
|
|
{/* 左侧内容区 */}
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full flex flex-col justify-center">
|
|
{htmlCode ? (
|
|
<div
|
|
style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
|
|
dangerouslySetInnerHTML={{ __html: htmlCode }}
|
|
/>
|
|
) : (
|
|
<img
|
|
src={icon}
|
|
alt="icon"
|
|
style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
|
|
/>
|
|
)}
|
|
<h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">
|
|
{title}
|
|
</h2>
|
|
<div className="lead !text-[1.05rem] !leading-[1.6] font-medium !mb-4" dangerouslySetInnerHTML={{ __html: subtitle }} />
|
|
<div className="!mb-6" dangerouslySetInnerHTML={{ __html: description }} />
|
|
<div className="mt-4">
|
|
<a
|
|
href={buttonLink}
|
|
className="inline-flex items-center px-6 py-2 bg-[#22b573] rounded shadow hover:bg-[#1e9e4a] transition-colors duration-200 text-base font-medium"
|
|
style={{ color: "#f8fafc" }}
|
|
>
|
|
{buttonText}
|
|
<span className="ml-2">
|
|
<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 13l5-4-5-4" stroke="#f8fafc" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/* 右侧图片区 */}
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full flex justify-center">
|
|
<figure className="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] relative">
|
|
<Image
|
|
className="!rounded-[.4rem]"
|
|
src={mainImage}
|
|
alt="image"
|
|
width={550}
|
|
height={400}
|
|
style={{ objectFit: "cover", maxWidth: "100%", height: "auto" }}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|