Update SettingsModal.vue

src/components/SettingsModal.vue

@@ -32,40 +32,106 @@
                     <!-- 移动端和PC端的统一滚动容器 -->
                     <div class="h-full overflow-y-auto md:flex md:w-full">
                         <!-- 左侧：推荐广告区域 -->
-                        <div class="md:w-1/3 bg-gradient-to-br from-blue-50 to-purple-50 p-3 md:p-6 border-b md:border-b-0 md:border-r border-blue-200 md:flex-shrink-0">
-                            <div class="md:h-full md:flex md:flex-col md:justify-center">
-                                <div class="text-center">
-                                    <div
-                                        class="w-12 h-12 md:w-20 md:h-20 mx-auto mb-2 md:mb-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl md:rounded-2xl flex items-center justify-center"
-                                    >
-                                        <img src="/logo.svg" alt="302.AI Logo" class="w-8 h-8 md:w-16 md:h-16" />
+                        <div class="md:w-1/3 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 p-4 md:p-6 border-b md:border-b-0 md:border-r border-purple-300 md:flex-shrink-0 relative overflow-hidden">
+                            <!-- 背景装饰 -->
+                            <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
+                            <div class="absolute -top-10 -right-10 w-32 h-32 bg-white/5 rounded-full"></div>
+                            <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-white/5 rounded-full"></div>
+                            
+                            <div class="relative z-10 md:h-full md:flex md:flex-col md:justify-center">
+                                <div class="text-center text-white">
+                                    <!-- Logo区域 -->
+                                    <div class="mb-4 md:mb-6">
+                                        <div class="w-16 h-16 md:w-24 md:h-24 mx-auto mb-3 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center border border-white/30 shadow-xl">
+                                            <img src="/logo.svg" alt="302.AI Logo" class="w-12 h-12 md:w-16 md:h-16" />
+                                        </div>
+                                        <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/30">
+                                            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+                                            <span class="text-xs font-medium">企业级AI资源平台</span>
+                                        </div>
+                                    </div>
+
+                                    <!-- 主标题 -->
+                                    <h3 class="text-lg md:text-2xl font-bold mb-2 md:mb-3">
+                                        <span class="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
+                                            🚀 推荐API服务商
+                                        </span>
+                                    </h3>
+
+                                    <!-- 描述文字 -->
+                                    <div class="mb-4 md:mb-6">
+                                        <p class="text-sm md:text-base text-white/90 mb-3 leading-relaxed hidden md:block">
+                                            <strong class="text-yellow-300">302.AI</strong> 是一个按用量付费的企业级AI资源平台，提供市场上最新、最全面的AI模型和API，以及多种开箱即用的在线AI应用
+                                        </p>
+                                        <p class="text-xs text-white/80 mb-3 leading-relaxed md:hidden">
+                                            <strong class="text-yellow-300">302.AI</strong> 企业级AI平台，最新最全AI模型
+                                        </p>
+                                        
+                                        <!-- 特色标签 -->
+                                        <div class="flex flex-wrap gap-2 justify-center mb-4">
+                                            <span class="bg-gradient-to-r from-green-400 to-emerald-500 text-white text-xs px-3 py-1 rounded-full font-medium shadow-lg">
+                                                ✨ 最新模型
+                                            </span>
+                                            <span class="bg-gradient-to-r from-blue-400 to-cyan-500 text-white text-xs px-3 py-1 rounded-full font-medium shadow-lg">
+                                                💰 按量付费
+                                            </span>
+                                            <span class="bg-gradient-to-r from-purple-400 to-pink-500 text-white text-xs px-3 py-1 rounded-full font-medium shadow-lg">
+                                                🛡️ 企业级
+                                            </span>
+                                        </div>
                                     </div>
-                                    <h3 class="text-base md:text-xl font-bold text-gray-800 mb-2 md:mb-3">🚀 推荐API服务商</h3>
-                                    <p class="text-xs md:text-sm text-gray-600 mb-2 md:mb-4 leading-relaxed hidden md:block">
-                                        本项目正在使用 <strong>302.AI</strong> 提供的高质量AI API服务！<strong>302.AI</strong>
-                                        是一个按用量付费的企业级AI资源平台，提供市场上最新、最全面的AI模型和API。
-                                    </p>
-                                    <p class="text-xs text-gray-600 mb-2 leading-relaxed md:hidden">使用 <strong>302.AI</strong> 高质量AI API服务</p>
-                                    <div class="flex flex-wrap gap-1 md:gap-2 justify-center mb-2 md:mb-4">
-                                        <span class="bg-green-100 text-green-800 text-xs md:text-sm px-2 py-0.5 md:px-3 md:py-1 rounded-full">✓ 多模型</span>
-                                        <span class="bg-green-100 text-green-800 text-xs md:text-sm px-2 py-0.5 md:px-3 md:py-1 rounded-full">✓ 优惠</span>
-                                        <span class="bg-green-100 text-green-800 text-xs md:text-sm px-2 py-0.5 md:px-3 md:py-1 rounded-full">✓ 稳定</span>
+
+                                    <!-- 优势列表 -->
+                                    <div class="hidden md:block mb-6">
+                                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
+                                            <div class="grid grid-cols-1 gap-3 text-left">
+                                                <div class="flex items-center gap-3">
+                                                    <div class="w-6 h-6 bg-green-400 rounded-full flex items-center justify-center flex-shrink-0">
+                                                        <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
+                                                        </svg>
+                                                    </div>
+                                                    <span class="text-sm text-white/90">支持GPT、Claude、Gemini等主流模型</span>
+                                                </div>
+                                                <div class="flex items-center gap-3">
+                                                    <div class="w-6 h-6 bg-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
+                                                        <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
+                                                        </svg>
+                                                    </div>
+                                                    <span class="text-sm text-white/90">0月费和按用量付费模式</span>
+                                                </div>
+                                                <div class="flex items-center gap-3">
+                                                    <div class="w-6 h-6 bg-purple-400 rounded-full flex items-center justify-center flex-shrink-0">
+                                                        <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
+                                                        </svg>
+                                                    </div>
+                                                    <span class="text-sm text-white/90">最新、最全面的AI模型和API</span>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
+
+                                    <!-- CTA按钮 -->
                                     <a
                                         href="https://share.302.AI/DymMSI"
                                         target="_blank"
-                                        class="inline-flex items-center gap-1 md:gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 md:px-6 md:py-3 rounded md:rounded-lg transition-colors text-xs md:text-sm font-medium"
+                                        class="group inline-flex items-center gap-2 bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-gray-900 px-6 py-3 md:px-8 md:py-4 rounded-xl font-bold transition-all duration-300 transform hover:scale-105 shadow-xl hover:shadow-2xl"
                                     >
-                                        <span>立即访问</span>
-                                        <svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                                            ></path>
+                                        <span class="text-sm md:text-base">🎯 立即体验</span>
+                                        <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                         </svg>
                                     </a>
+
+                                    <!-- 优惠提示 -->
+                                    <div class="mt-3 md:mt-4">
+                                        <div class="inline-flex items-center gap-2 bg-red-500/20 backdrop-blur-sm px-3 py-1 rounded-full border border-red-400/30">
+                                            <span class="text-xs text-red-200 animate-pulse">🔥</span>
+                                            <span class="text-xs text-red-200 font-medium">新用户专享优惠</span>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>