tailwind+vue模仿ai短剧网站多步骤ui效果代码-html代码-BFW代码库

代码语言：html

代码描述：tailwind+vue模仿ai短剧网站多步骤ui效果代码

下面为部分代码预览，完整代码请点击下载或在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>短剧 Agent - AI 智能短剧创作平台</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.7.14.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8fafc;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .step-active {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.3s ease;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .slide-up-enter-active, .slide-up-leave-active {
            transition: all 0.3s ease;
        }
        .slide-up-enter, .slide-up-leave-to {
            transform: translateY(20px);
            opacity: 0;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="text-slate-800 antialiased">
    <div id="app">
        <!-- Header -->
        <header class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md border-b border-slate-200 z-50">
            <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary-500/30">
                        <i class="fa-solid fa-film text-lg"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold bg-gradient-to-r from-slate-900 to-slate-600 bg-clip-text text-transparent">短剧 Agent</h1>
                        <p class="text-xs text-slate-500">AI-Powered Drama Creation</p>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <span class="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-medium border border-emerald-200">
                        <i class="fa-solid fa-bolt mr-1"></i>Seedance 2.0
                    </span>
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center text-white cursor-pointer hover:scale-105 transition-transform">
                        <i class="fa-regular fa-user text-sm"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="pt-24 pb-32 px-6 max-w-7xl mx-auto min-h-screen">
            
            <!-- Step 0: Upload -->
            <transition name="fade" mode="out-in">
                <div v-if="currentStep === 0" key="upload" class="max-w-3xl mx-auto">
                    <div class="text-center mb-12">
                        <h2 class="text-4xl font-bold text-slate-900 mb-4">开启您的 AI 短剧创作之旅</h2>
                        <p class="text-lg text-slate-600">全面应用 Seedance 2.0 模型，一键生成专业级短剧内容</p>
                    </div>

                    <div class="bg-white rounded-2xl shadow-xl shadow-slate-200/50 p-1 mb-8">
                        <div class="flex bg-slate-50 rounded-xl p-1 mb-6">
                            <button @click="activeTab = 'upload'" 
                                  .........完整代码请登录后点击上方下载按钮下载查看