|
|
|
|
|
<!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="profile" class="p-4 bg-white rounded shadow-lg h-full">
|
|
|
|
|
|
<h2 class="text-3xl font-bold mb-4">个人信息</h2>
|
|
|
|
|
|
<!-- 用户信息展示 -->
|
|
|
|
|
|
<div class="flex items-center mb-6">
|
|
|
|
|
|
<div class="h-20 w-20 bg-gray-300 rounded-full mr-4"></div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p class="text-lg font-semibold">用户名：用户123</p>
|
|
|
|
|
|
<p>联系方式：user123@example.com</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 修改个人信息表单 -->
|
|
|
|
|
|
<form class="bg-gray-100 p-6 rounded mb-6">
|
|
|
|
|
|
<h3 class="text-xl font-semibold mb-2">修改您的信息</h3>
|
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
|
<label for="username" class="block text-sm mb-2">新用户名：</label>
|
|
|
|
|
|
<input type="text" id="username" class="w-full p-3 border rounded" placeholder="输入新用户名">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
|
<label for="email" class="block text-sm mb-2">新邮箱：</label>
|
|
|
|
|
|
<input type="email" id="email" class="w-full p-3 border rounded" placeholder="输入新邮箱">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="bg-blue-600 text-white px-5 py-3 rounded">保存更改</button>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 填充更多内容 -->
|
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
|
<p>及时更新您的个人信息以便于我们为您提供更佳的服务体验。</p>
|
|
|
|
|
|
<p>如果您需要任何帮助，请不要犹豫，随时联系我们。</p>
|
|
|
|
|
|
<p>平台致力于保护您的隐私和信息安全，让您购物无忧。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
|
|
|
<footer class="bg-gray-800 p-4 text-white text-center">
|
|
|
|
|
|
©2023 校园二手交易平台. 保留所有权利.
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
