claude3.7生成tailwindcss移动端拍卖app个人中心页面代码-html代码-BFW代码库

claude3.7生成tailwindcss移动端拍卖app个人中心页面代码

代码语言：html

代码描述：claude3.7生成tailwindcss移动端拍卖app个人中心页面代码

代码标签： claude3.7 生成 tailwindcss 移动端拍卖 app 个人中心页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 臻品拍卖</title>
<script src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css">
</head>
<body class="bg-gray-50">
    <!-- 顶部个人信息 -->
    <div class="bg-red-600 pt-12 pb-20">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" 
                     alt="用户头像" 
                     class="w-20 h-20 rounded-full border-4 border-white">
                <div class="ml-4 text-white">
                    <h1 class="text-2xl font-bold mb-1">张三</h1>
                    <p class="opacity-90">收藏家 / 艺术爱好者</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto px-4 -mt-12">
        <!-- 数据概览 -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
            <div class="grid grid-cols-4 gap-4">
                <div class="text-center">
                    <p class="text-2xl font-bold text-red-600">12</p>
                    <p class="text-gray-600">参与竞拍</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-red-600">5</p>
                    <p class="text-gray-600">成功竞得</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-red-600">28</p>
                    <p class="text-gray-600">收藏</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-red-600">3</p>
                    <p class="text-gray-600">关注</p>
                </div>
            </div>
        </div>

        <!-- 功能菜单 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
            <div class="divide-y">
                <a href="wallet.html" class="flex items-center justify-between p-4 hover:bg-gray-50">
                    <div class="flex items-center">
                        <div class="w-10 h-.........完整代码请登录后点击上方下载按钮下载查看