You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

78 lines
3.5 KiB

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>校园二手交易平台 - 商品预览</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<div class="flex min-h-screen">
<!-- 左侧标题栏 -->
<aside class="bg-blue-600 text-white w-1/4 p-6 min-h-full">
<div class="flex flex-col items-center">
<h1 class="text-2xl font-bold mb-6">校园二手交易</h1>
<nav class="flex flex-col space-y-4">
<a href="index.html" class="hover:underline">主页</a>
<a href="profile.html" class="hover:underline">个人信息</a>
<a href="product.html" class="hover:underline">商品预览</a>
</nav>
</div>
</aside>
<!-- 内容 -->
<main class="w-3/4 p-8">
<section id="product" class="p-4 bg-white rounded shadow-lg h-full">
<h2 class="text-3xl font-bold mb-4">商品预览</h2>
<!-- 商品列表 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded shadow">
<div class="h-40 bg-gray-200 rounded mb-4"></div>
<h3 class="text-xl font-semibold">商品名称1</h3>
<p>价格¥100</p>
<a href="#" class="text-blue-600 hover:underline">查看详情</a>
</div>
<div class="bg-white p-6 rounded shadow">
<div class="h-40 bg-gray-200 rounded mb-4"></div>
<h3 class="text-xl font-semibold">商品名称2</h3>
<p>价格¥200</p>
<a href="#" class="text-blue-600 hover:underline">查看详情</a>
</div>
<div class="bg-white p-6 rounded shadow">
<div class="h-40 bg-gray-200 rounded mb-4"></div>
<h3 class="text-xl font-semibold">商品名称3</h3>
<p>价格¥300</p>
<a href="#" class="text-blue-600 hover:underline">查看详情</a>
</div>
<!-- 添加更多商品 -->
<div class="bg-white p-6 rounded shadow">
<div class="h-40 bg-gray-200 rounded mb-4"></div>
<h3 class="text-xl font-semibold">商品名称4</h3>
<p>价格¥150</p>
<a href="#" class="text-blue-600 hover:underline">查看详情</a>
</div>
<div class="bg-white p-6 rounded shadow">
<div class="h-40 bg-gray-200 rounded mb-4"></div>
<h3 class="text-xl font-semibold">商品名称5</h3>
<p>价格¥250</p>
<a href="#" class="text-blue-600 hover:underline">查看详情</a>
</div>
<div class="bg-white p-6 rounded shadow">
<div class="h-40 bg-gray-200 rounded mb-4"></div>
<h3 class="text-xl font-semibold">商品名称6</h3>
<p>价格¥350</p>
<a href="#" class="text-blue-600 hover:underline">查看详情</a>
</div>
</div>
</section>
</main>
</div>
<!-- 页脚 -->
<footer class="bg-gray-800 p-4 text-white text-center">
©2023 校园二手交易平台. 保留所有权利.
</footer>
</body>
</html>