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">
    <!-- 顶部导航 -->
    <nav class="bg-white shadow-sm fixed w-full z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <span class="text-red-600 text-2xl font-bold">臻品拍卖</span>
                </div>
                <div class="flex items-center space-x-6">
                    <a href="search.html" class="text-gray-600 hover:text-red-600">
                        <i class="fas fa-search text-xl"></i>
                    </a>
                    <a href="favorites.html" class="text-gray-600 hover:text-red-600">
                        <i class="fas fa-heart text-xl"></i>
                    </a>
                    <a href="profile.html" class="text-gray-600 hover:text-red-600">
                        <i class="fas fa-user text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="pt-20 pb-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 顶部轮播图 -->
        <section class="mb-12">
            <div class="relative rounded-xl overflow-hidden shadow-xl h-96">
                <img src="https://images.unsplash.com/photo-1577083288073-40892c0860a4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                     alt="精品拍卖" 
                     class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent flex items-center">
                    <div class="px-10 py-6 text-white max-w-lg">
                        <h1 class="text-4xl font-bold mb-4">珍稀藏品专场</h1>
                        <p class="text-lg mb-6".........完整代码请登录后点击上方下载按钮下载查看