Duguay/Agent-n8n
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化operation.html页面UI体验和可读性

Browse Source 
主要修复:
- 删除多余的"立即体验 Duoduo Agent"按钮
- 优化Duoduo Agent设计流程图片展示
- 改善页面文字与背景对比度

详细更改:
1. 布局优化
   - 将设计流程从网格布局改为横向滚动
   - 图片尺寸从h-48增加到h-64
   - 每个卡片固定宽度300px

2. 对比度改善
   - text-gray-500 → text-gray-600
   - 背景色调整为纯白或浅灰
   - 添加font-medium增强可读性

3. 视觉效果
   - 移除过于鲜艳的渐变背景
   - 使用更专业的配色方案
   - 提升整体可读性

影响模块: 会展策划网站运营页面

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
2025-09-08 15:25:52 +08:00
parent 08e6304134
commit 1361283492
3 changed files with 394 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web_frontend/web_result/pages/operation.html
View File

@@ -154,7 +154,7 @@
</div>
<div>
<h1 class="text-lg font-bold">NEVIT 2024</h1>
<p class="text-xs text-gray-500">新能源汽车产业博览会</p>
<p class="text-xs text-gray-600 font-medium">新能源汽车产业博览会</p>
</div>
</div>
<div class="hidden md:flex space-x-8">
@@ -239,7 +239,7 @@
<i class="fas fa-map-marked-alt text-teal-600 mr-3"></i>
智能展馆布局规划
</h2>
<p class="text-xl text-gray-600">基于人流动线设计的科学布局</p>
<p class="text-xl text-gray-700 font-medium">基于人流动线设计的科学布局</p>
</div>
<!-- 3D展馆可视化 -->
@@ -644,7 +644,7 @@
</section>
<!-- Duoduo Agent 可视化设计流程 -->
<section class="py-20 bg-gradient-to-br from-purple-50 via-indigo-50 to-blue-50 relative overflow-hidden">
<section class="py-20 bg-white relative overflow-hidden">
<!-- 背景装饰 -->
<div class="absolute inset-0 opacity-5">
<div class="absolute top-20 left-20 w-64 h-64 bg-purple-400 rounded-full filter blur-3xl"></div>
@@ -657,8 +657,8 @@
<i class="fas fa-robot text-purple-600 mr-3"></i>
Duoduo Agent 智能设计系统
</h2>
<p class="text-xl text-gray-600 mb-3">从想法到展位概念的完整可视化流程</p>
<p class="text-lg text-gray-500">让学生直接体验AI驱动的设计革新，快速实现创意落地</p>
<p class="text-xl text-gray-700 font-medium mb-3">从想法到展位概念的完整可视化流程</p>
<p class="text-lg text-gray-600">让学生直接体验AI驱动的设计革新，快速实现创意落地</p>
</div>
<!-- 流程展示 -->
@@ -688,10 +688,11 @@
</div>
</div>
<!-- 设计阶段展示 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
<!-- Stage 1: CAD设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<!-- 设计阶段展示 - 横向滚动 -->
<div class="overflow-x-auto pb-6">
<div class="flex gap-6" style="min-width: 1600px;">
<!-- Stage 1: CAD设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -704,7 +705,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_dcc81c5212.jpg"
alt="CAD设计图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">AutoCAD 2024</p>
@@ -714,16 +715,16 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>2小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
</div>
</div>
</div>
<!-- Stage 2: 概念设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<!-- Stage 2: 概念设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-indigo-500 to-indigo-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -736,7 +737,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_e8f83d1a37.jpg"
alt="概念设计图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">Adobe Illustrator</p>
@@ -746,16 +747,16 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>3小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
</div>
</div>
</div>
<!-- Stage 3: 三维建模白模 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<!-- Stage 3: 三维建模白模 -->
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -768,7 +769,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_be64a7b61f.jpg"
alt="三维建模白模"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">SketchUp Pro</p>
@@ -778,16 +779,16 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>4小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
</div>
</div>
</div>
<!-- Stage 4: 三维渲染图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<!-- Stage 4: 三维渲染图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl">
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -800,7 +801,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_192cdc54bc.jpg"
alt="三维渲染图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">V-Ray Next</p>
@@ -810,16 +811,16 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>6小时</span>
<span><i class="fas fa-check-circle text-green-500 mr-1"></i>已完成</span>
</div>
</div>
</div>
</div>
<!-- Stage 5: 展位概念设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500">
<!-- Stage 5: 展位概念设计图 -->
<div class="group relative transform hover:scale-105 transition-all duration-500 flex-shrink-0" style="width: 300px;">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl ring-4 ring-emerald-400 ring-opacity-50">
<div class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white p-4">
<h3 class="text-lg font-bold flex items-center">
@@ -832,7 +833,7 @@
<div class="relative overflow-hidden rounded-lg">
<img src="../../data/会展策划/image/Whisk_c478fe089d.jpg"
alt="展位概念设计图"
class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-700">
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div class="absolute bottom-3 left-3 text-white">
<p class="text-xs">Final Design</p>
@@ -847,13 +848,14 @@
</div>
</div>
<div class="px-4 pb-4 pt-2">
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center justify-between text-xs text-gray-600">
<span><i class="fas fa-clock mr-1"></i>总计: 20小时</span>
<span><i class="fas fa-trophy text-yellow-500 mr-1"></i>已交付</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AI功能特点 -->
@@ -865,7 +867,7 @@
</div>
<div>
<h4 class="font-bold text-gray-800">AI智能生成</h4>
<p class="text-sm text-gray-500">基于需求自动设计</p>
<p class="text-sm text-gray-600">基于需求自动设计</p>
</div>
</div>
<ul class="space-y-2 text-sm text-gray-600">
@@ -882,7 +884,7 @@
</div>
<div>
<h4 class="font-bold text-gray-800">效率提升90%</h4>
<p class="text-sm text-gray-500">传统流程需要2周</p>
<p class="text-sm text-gray-600">传统流程需要2周</p>
</div>
</div>
<ul class="space-y-2 text-sm text-gray-600">
@@ -899,7 +901,7 @@
</div>
<div>
<h4 class="font-bold text-gray-800">学生即可上手</h4>
<p class="text-sm text-gray-500">零基础快速掌握</p>
<p class="text-sm text-gray-600">零基础快速掌握</p>
</div>
</div>
<ul class="space-y-2 text-sm text-gray-600">
@@ -910,14 +912,10 @@
</div>
</div>
<!-- CTA按钮 -->
<!-- 功能说明 -->
<div class="text-center mt-12">
<button class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-4 rounded-full text-lg font-bold shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
<i class="fas fa-play-circle mr-3"></i>
立即体验 Duoduo Agent
</button>
<p class="text-gray-500 text-sm mt-4">
<i class="fas fa-info-circle mr-1"></i>
<p class="text-gray-600 text-lg font-medium">
<i class="fas fa-info-circle mr-2 text-blue-500"></i>
支持团队协作 · 云端存储 · 版本管理
</p>
</div>
@@ -926,7 +924,7 @@
</section>
<!-- 数字化服务体系 -->
<section class="py-20 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 relative overflow-hidden">
<section class="py-20 bg-gray-50 relative overflow-hidden">
<div class="absolute inset-0">
<div class="absolute top-20 left-20 w-64 h-64 bg-blue-200/30 rounded-full filter blur-3xl"></div>
<div class="absolute bottom-20 right-20 w-80 h-80 bg-purple-200/30 rounded-full filter blur-3xl"></div>