91 lines
3.2 KiB
JavaScript
91 lines
3.2 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Image from "next/image";
|
|
|
|
export default function ShopProfile() {
|
|
const [showLicenseImage, setShowLicenseImage] = useState(false);
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-4">
|
|
<div className="bg-white p-6 rounded-lg shadow-md">
|
|
{/* 店铺头像和名称 */}
|
|
<div className="flex flex-col items-center">
|
|
<Image
|
|
src="https://s2.loli.net/2025/02/25/G1yo27THWhNC5uf.jpg" // 替换为实际的店铺头像路径
|
|
alt="店铺头像"
|
|
width={100}
|
|
height={100}
|
|
className="rounded-lg border-2 border-yellow-400"
|
|
/>
|
|
<div className="mt-4">
|
|
<h1 className="text-2xl font-bold">宠物用品专卖店</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 店铺评分 */}
|
|
<div className="mb-4 mt-2">
|
|
<div className="flex flex-row mb-4 items-center justify-center gap-2">
|
|
<h2 className="text-lg font-semibold">店铺评分</h2>
|
|
<div className="flex">
|
|
{[...Array(5)].map((_, index) => (
|
|
<svg
|
|
key={index}
|
|
className="w-5 h-5 text-yellow-500"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M10 15l-5.878 3.09 1.121-6.535L0 6.545l6.545-.955L10 0l2.455 5.59L20 6.545l-5.243 4.005 1.121 6.535z" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row justify-between space-x-4 mt-2">
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-gray-500">宝贝质量</span>
|
|
<span className="font-bold text-lg">4.9</span>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-gray-500">物流速度</span>
|
|
<span className="font-bold">5.0</span>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-gray-500">服务保障</span>
|
|
<span className="font-bold">4.8</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 保证金金额 */}
|
|
<div className="mb-4">
|
|
<h2 className="text-lg font-semibold">保证金</h2>
|
|
<p className="text-gray-700">¥10,000</p>
|
|
</div>
|
|
|
|
{/* 店铺资质 */}
|
|
<div>
|
|
<h2 className="text-lg font-semibold">店铺资质</h2>
|
|
<ul className="list-disc list-inside text-gray-700 mt-2">
|
|
<li
|
|
onClick={() => setShowLicenseImage(!showLicenseImage)}
|
|
className="cursor-pointer text-blue-500"
|
|
>
|
|
营业执照
|
|
</li>
|
|
</ul>
|
|
{showLicenseImage && (
|
|
<div className="mt-4 flex justify-center">
|
|
<Image
|
|
src="https://s2.loli.net/2025/02/25/UIlGv2VKjhL3oDC.jpg"
|
|
alt="营业执照"
|
|
width={500}
|
|
height={500}
|
|
className="rounded-lg border-2 border-gray-300"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|