feat: 完善官网内容与功能 - 首页数据更新、产品中心调整、产品详情页功能增强、解决方案成功案例独立、关于我们页面内容更新、联系信息修改、LOGO替换、视频资源更新、页脚优化

src/components/Footer.vue

@@ -2,38 +2,15 @@
 
 
 const currentYear = new Date().getFullYear()
-
-const footerLinks = {
-  products: [
-    { name: '企业级软件', path: '/products#enterprise' },
-    { name: '智能体平台', path: '/products#agent' },
-    { name: '数据分析系统', path: '/products#analytics' },
-    { name: '移动端应用', path: '/products#mobile' }
-  ],
-  solutions: [
-    { name: '智能制造', path: '/solutions#manufacturing' },
-    { name: '金融科技', path: '/solutions#finance' },
-    { name: '医疗健康', path: '/solutions#healthcare' },
-    { name: '教育培训', path: '/solutions#education' }
-  ],
-  company: [
-    { name: '关于我们', path: '/about' },
-    { name: '团队介绍', path: '/about#team' },
-    { name: '新闻动态', path: '/about#news' },
-    { name: '加入我们', path: '/about#careers' }
-  ]
-}
 </script>
 
 <template>
   <footer class="bg-gray-900 text-white">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-12">
         <div class="lg:col-span-2">
           <div class="flex items-center space-x-3 mb-6">
-            <div class="w-12 h-12 bg-gradient-primary rounded-lg flex items-center justify-center">
-              <span class="text-white font-bold text-xl">云</span>
-            </div>
+            <img src="/images/logo.jpg" alt="云阶智元" class="w-12 h-12 rounded-lg object-cover" />
             <div>
               <span class="font-bold text-xl">西安云阶智元信息科技有限公司</span>
               <p class="text-gray-400 text-sm">Cloud Smart Technology</p>
@@ -64,39 +41,6 @@ const footerLinks = {
             </div>
           </div>
         </div>
-
-        <div>
-          <h3 class="font-semibold text-lg mb-4">产品中心</h3>
-          <ul class="space-y-3">
-            <li v-for="link in footerLinks.products" :key="link.name">
-              <a :href="link.path" class="text-gray-400 hover:text-primary-400 transition-colors">
-                {{ link.name }}
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div>
-          <h3 class="font-semibold text-lg mb-4">解决方案</h3>
-          <ul class="space-y-3">
-            <li v-for="link in footerLinks.solutions" :key="link.name">
-              <a :href="link.path" class="text-gray-400 hover:text-primary-400 transition-colors">
-                {{ link.name }}
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div>
-          <h3 class="font-semibold text-lg mb-4">关于公司</h3>
-          <ul class="space-y-3">
-            <li v-for="link in footerLinks.company" :key="link.name">
-              <a :href="link.path" class="text-gray-400 hover:text-primary-400 transition-colors">
-                {{ link.name }}
-              </a>
-            </li>
-          </ul>
-        </div>
       </div>
     </div>
 

src/components/Navbar.vue

@@ -43,9 +43,7 @@ onUnmounted(() => {
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-16 lg:h-20">
         <div class="flex items-center space-x-3 cursor-pointer" @click="router.push('/')">
-          <div class="w-10 h-10 bg-gradient-primary rounded-lg flex items-center justify-center">
-            <span class="text-white font-bold text-xl">云</span>
-          </div>
+          <img src="/images/logo.jpg" alt="云阶智元" class="w-10 h-10 rounded-lg object-cover" />
           <div>
             <span 
               class="font-bold text-lg"

src/views/About.vue

@@ -1,15 +1,26 @@
 <script setup lang="ts">
 import { images } from '@/assets/images'
+import { ref } from 'vue'
 
 
+const showRecruitment = ref(false)
+
+const openRecruitment = () => {
+  showRecruitment.value = true
+}
+
+const closeRecruitment = () => {
+  showRecruitment.value = false
+}
+
 const companyInfo = {
   name: '西安云阶智元信息科技有限公司',
-  slogan: '用智能技术驱动企业未来',
-  established: '2016年',
-  location: '陕西西安',
-  employees: '200+',
-  clients: '500+',
-  projects: '1000+'
+  slogan: '以智能体技术为核心驱动，为实体产业注入智能化增长动能',
+  established: '2026年',
+  location: '西安市未央区立讯未来中心',
+  employees: '10+',
+  clients: '10+',
+  projects: '5+'
 }
 
 const coreValues = [
@@ -20,33 +31,37 @@ const coreValues = [
 ]
 
 const milestones = [
-  { year: '2016', event: '公司成立，专注软件开发服务' },
-  { year: '2018', event: '获得高新技术企业认证' },
-  { year: '2020', event: '推出首个智能体平台产品' },
-  { year: '2022', event: '服务客户突破300家' },
-  { year: '2024', event: '团队规模突破200人' },
-  { year: '2025', event: '成为行业领先的智能体解决方案提供商' }
+  { year: '2024', event: '团队启动Agent集群技术研发，奠定核心技术基础', tags: ['技术研发', 'Agent'] },
+  { year: '2025', event: '与西安某高校成立联合研发团队，形成智能体架构设计、高可用运维保障、零信任安全防护三大核心能力', tags: ['高校合作', '技术积累'] },
+  { year: '2025年底', event: '与航天某企业联合搭建高保密Agent集群，实现技术突破', tags: ['航天合作', '保密技术'] },
+  { year: '2026', event: '正式成立西安云阶智元信息科技有限公司', tags: ['公司成立', '商业化'] }
 ]
 
 const team = [
-  { name: '张伟', role: '创始人 & CEO', avatar: images.avatar1 },
-  { name: '李娜', role: '技术总监', avatar: images.avatar2 },
-  { name: '王强', role: '产品总监', avatar: images.avatar3 },
-  { name: '刘芳', role: '运营总监', avatar: images.avatar4 }
+  { name: '李总', role: '运营总监', avatar: '/images/person1.png' },
+  { name: '靖总', role: '技术总监', avatar: '/images/person2.png' },
+  { name: '刘总', role: '产品总监', avatar: '/images/person3.png' },
+  { name: '谢总', role: '业务总监', avatar: '/images/person4.png' }
 ]
 
 const advantages = [
-  '8年行业经验，深耕软件开发与智能体领域',
-  '200+专业技术人员，覆盖全栈开发能力',
-  '500+成功案例，服务各行业头部企业',
-  '完善的服务体系，从咨询到运维全周期支持',
-  '持续创新能力，保持技术领先优势'
+  '自主可控的研发团队，精通智能体核心技术',
+  'Agent定制开发、智能运维托管、全链路安全防护三大主业',
+  '多行业适配能力：制造业、农业、文旅、水利、政务等',
+  '标杆项目落地经验，助力客户实现效率提升与成本降低',
+  '深耕Agent底层技术，强化场景化赋能能力'
 ]
 </script>
 
 <template>
   <div class="min-h-screen bg-white">
-    <section class="bg-gradient-to-br from-primary-900 via-primary-800 to-accent-900 py-20">
+    <section class="relative py-20 overflow-hidden">
+      <video 
+        src="/videos/tech3.mp4" 
+        class="absolute inset-0 w-full h-full object-cover"
+        autoplay loop muted playsinline
+      ></video>
+      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center">
           <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
@@ -67,13 +82,8 @@ const advantages = [
         <div class="grid lg:grid-cols-2 gap-12 items-center">
           <div>
             <h2 class="text-3xl font-bold text-gray-900 mb-6">公司简介</h2>
-            <p class="text-gray-600 mb-6 leading-relaxed">
-              西安云阶智元信息科技有限公司成立于{{ companyInfo.established }}年，是一家专注于软件开发与智能体方案落地的高新技术企业。
-              公司总部位于{{ companyInfo.location }}，拥有一支由200+专业技术人员组成的团队。
-            </p>
             <p class="text-gray-600 mb-8 leading-relaxed">
-              我们致力于为企业提供全方位的数字化转型服务，涵盖企业级软件开发、AI智能体解决方案、数据分析平台等领域。
-              凭借专业的技术实力和优质的服务，我们已成功服务超过500家企业客户，完成1000+项目交付。
+              西安云阶智元信息科技有限公司（简称"云阶智元"）成立于2026年，坐落于西安市未央区立讯未来中心，是一家以智能体（Agent）技术为核心驱动、致力于为实体产业注入智能化增长动能的新型科技企业，公司自助研发智能体架构"启元"。公司拥有自主可控的研发团队，核心成员10余人，精通智能体架构设计、高可用运维保障、零信任安全防护等关键技术。公司主业聚焦Agent定制开发、智能运维托管、全链路安全防护三大板块，同时拓展跨境电商平台、科研协同、智慧规划、产教融合等衍生服务，灵活适配制造业、农业、文旅、水利、政务等多行业智能化需求。公司已成功落地某零食厂家智能运营体、西安市某乡村自媒体无人运营系统、长江流域水文科研平台、产业发展推演模型等标杆项目，切实助力客户实现管理效率提升、决策模式优化与运营成本降低。未来，云阶智元将持续深耕Agent底层技术，强化场景化赋能能力，致力成为西北地区产业智能化升级最值得信赖的合作伙伴。
             </p>
             <ul class="space-y-3">
               <li 
@@ -90,11 +100,12 @@ const advantages = [
           </div>
           <div class="relative">
             <div class="absolute -inset-4 bg-gradient-to-r from-primary-400 to-accent-400 rounded-2xl blur-xl opacity-20"></div>
-            <img 
-              :src="images.office" 
-              alt="公司办公环境" 
+            <video 
+              src="/videos/001.mp4" 
               class="relative rounded-2xl shadow-2xl w-full"
-            />
+              autoplay loop muted playsinline
+              controls
+            ></video>
           </div>
         </div>
       </div>
@@ -110,7 +121,7 @@ const advantages = [
               </svg>
             </div>
             <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.employees }}</p>
-            <p class="text-gray-600">专业团队</p>
+            <p class="text-gray-600">核心团队</p>
           </div>
           <div class="text-center">
             <div class="w-16 h-16 bg-accent-100 rounded-xl flex items-center justify-center mx-auto mb-4">
@@ -119,25 +130,25 @@ const advantages = [
               </svg>
             </div>
             <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.clients }}</p>
-            <p class="text-gray-600">服务客户</p>
+            <p class="text-gray-600">标杆项目</p>
           </div>
           <div class="text-center">
             <div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-4">
               <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-5 0h-5m-5 0H2m2 0v-4a2 2 0 012-2h10a2 2 0 012 2v4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
               </svg>
             </div>
-            <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.projects }}</p>
-            <p class="text-gray-600">完成项目</p>
+            <p class="text-3xl font-bold text-gray-900 mb-1">20+</p>
+            <p class="text-gray-600">行业覆盖</p>
           </div>
           <div class="text-center">
             <div class="w-16 h-16 bg-orange-100 rounded-xl flex items-center justify-center mx-auto mb-4">
               <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
               </svg>
             </div>
-            <p class="text-3xl font-bold text-gray-900 mb-1">8+</p>
-            <p class="text-gray-600">行业经验</p>
+            <p class="text-3xl font-bold text-gray-900 mb-1">信息安全</p>
+            <p class="text-gray-600">核心技术</p>
           </div>
         </div>
       </div>
@@ -176,37 +187,99 @@ const advantages = [
       </div>
     </section>
 
-    <section class="py-20 bg-gray-50">
+    <section class="py-20 bg-gradient-to-br from-gray-50 via-primary-50/50 to-accent-50/50">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-gray-900 mb-4">发展历程</h2>
-          <p class="text-gray-600">从创立到成长，我们一直在前进</p>
+          <h2 class="text-3xl font-bold text-gray-900 mb-4">公司来历</h2>
+          <p class="text-gray-600">从技术研发到公司成立，我们的成长之路</p>
         </div>
-        <div class="relative">
-          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gray-200 hidden lg:block"></div>
-          <div class="space-y-8 lg:space-y-0">
-            <div 
-              v-for="(milestone, index) in milestones" 
-              :key="index"
-              class="relative lg:grid lg:grid-cols-2 lg:gap-8"
-              :class="index % 2 === 0 ? '' : 'lg:direction-rtl'"
-            >
-              <div 
-                class="lg:text-right"
-                :class="index % 2 !== 0 ? 'lg:order-2' : ''"
-              >
-                <div 
-                  class="inline-block bg-white rounded-xl p-6 shadow-lg"
-                  :class="index % 2 !== 0 ? 'lg:ml-auto' : ''"
+        
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div 
+            v-for="(milestone, index) in milestones" 
+            :key="index"
+            class="relative group"
+          >
+            <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-accent-500 rounded-2xl blur-lg opacity-0 group-hover:opacity-20 transition-opacity duration-500"></div>
+            <div class="relative bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 h-full flex flex-col">
+              <div class="w-14 h-14 bg-gradient-to-br from-primary-100 to-accent-100 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+                <svg v-if="index === 0" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+                </svg>
+                <svg v-else-if="index === 1" class="w-7 h-7 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+                </svg>
+                <svg v-else-if="index === 2" class="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                </svg>
+                <svg v-else class="w-7 h-7 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
+                </svg>
+              </div>
+              <p class="text-xl font-bold text-gray-900 mb-2">{{ milestone.year }}</p>
+              <p class="text-gray-600 text-sm flex-grow mb-4">{{ milestone.event }}</p>
+              <div class="flex flex-wrap gap-2">
+                <span 
+                  v-for="(tag, tagIndex) in milestone.tags" 
+                  :key="tagIndex"
+                  class="px-2 py-1 bg-primary-50 text-primary-600 text-xs rounded-full font-medium"
                 >
-                  <p class="text-2xl font-bold text-primary-600 mb-2">{{ milestone.year }}</p>
-                  <p class="text-gray-700">{{ milestone.event }}</p>
-                </div>
+                  {{ tag }}
+                </span>
               </div>
-              <div class="hidden lg:flex items-center justify-center">
-                <div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-primary-500 rounded-full border-4 border-white shadow"></div>
+            </div>
+            <div 
+              v-if="index < milestones.length - 1"
+              class="hidden lg:block absolute top-1/2 -right-3 transform -translate-y-1/2 z-10"
+            >
+              <svg class="w-6 h-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-12 bg-white rounded-2xl p-8 shadow-lg border border-gray-100">
+          <div class="text-center mb-6">
+            <h3 class="text-2xl font-bold text-gray-900 mb-2">核心Agent产品矩阵</h3>
+            <p class="text-gray-600">基于多年技术积累，打造全方位智能体解决方案</p>
+          </div>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="bg-gradient-to-br from-primary-50 to-primary-100/50 rounded-xl p-4 text-center">
+              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
+                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+                </svg>
               </div>
-              <div v-if="index % 2 !== 0" class="hidden lg:block"></div>
+              <p class="font-semibold text-gray-900 text-sm">企业智能体中枢</p>
+              <p class="text-gray-500 text-xs mt-1">集群核心大脑</p>
+            </div>
+            <div class="bg-gradient-to-br from-accent-50 to-accent-100/50 rounded-xl p-4 text-center">
+              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
+                <svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                </svg>
+              </div>
+              <p class="font-semibold text-gray-900 text-sm">智能客服助手</p>
+              <p class="text-gray-500 text-xs mt-1">7x24服务</p>
+            </div>
+            <div class="bg-gradient-to-br from-purple-50 to-purple-100/50 rounded-xl p-4 text-center">
+              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
+                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                </svg>
+              </div>
+              <p class="font-semibold text-gray-900 text-sm">智能营销助手</p>
+              <p class="text-gray-500 text-xs mt-1">精准获客</p>
+            </div>
+            <div class="bg-gradient-to-br from-orange-50 to-orange-100/50 rounded-xl p-4 text-center">
+              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
+                <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                </svg>
+              </div>
+              <p class="font-semibold text-gray-900 text-sm">智能办公助手</p>
+              <p class="text-gray-500 text-xs mt-1">效率提升</p>
             </div>
           </div>
         </div>
@@ -247,10 +320,112 @@ const advantages = [
         <p class="text-white/80 mb-8 max-w-2xl mx-auto">
           我们正在寻找优秀的人才加入我们的团队，共同推动技术创新和企业发展
         </p>
-        <button class="btn-primary">
+        <button @click="openRecruitment" class="btn-primary">
           查看招聘信息
         </button>
       </div>
     </section>
+
+    <Teleport to="body">
+      <div 
+        v-if="showRecruitment" 
+        class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+        @click.self="closeRecruitment"
+      >
+        <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+          <div class="bg-gradient-to-r from-primary-600 to-accent-600 p-6 rounded-t-2xl">
+            <div class="flex items-center justify-between">
+              <h3 class="text-2xl font-bold text-white">【西安云阶智元科技｜AI Agent方向招聘】</h3>
+              <button 
+                @click="closeRecruitment"
+                class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors"
+              >
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="p-8">
+            <p class="text-gray-700 mb-6 leading-relaxed">
+              云阶智元是一家专注于 AI Agent、企业智能体中枢与行业智能化解决方案的科技公司，致力于推动智能体在企业流程、知识管理、业务协同和自动化运营中的落地应用。
+            </p>
+            
+            <div class="mb-6">
+              <h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
+                </svg>
+                招聘岗位
+              </h4>
+              <div class="flex flex-wrap gap-2">
+                <span class="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">AI产品经理</span>
+                <span class="px-3 py-1 bg-accent-50 text-accent-700 rounded-full text-sm font-medium">Agent应用开发工程师</span>
+                <span class="px-3 py-1 bg-purple-50 text-purple-700 rounded-full text-sm font-medium">前端开发工程师</span>
+                <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm font-medium">后端开发工程师</span>
+                <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm font-medium">AI解决方案顾问</span>
+                <span class="px-3 py-1 bg-orange-50 text-orange-700 rounded-full text-sm font-medium">内容/市场运营</span>
+              </div>
+            </div>
+
+            <div class="mb-6">
+              <h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                </svg>
+                岗位要求
+              </h4>
+              <ul class="space-y-2">
+                <li class="flex items-start text-gray-700">
+                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">1</span>
+                  关注AI Agent、大模型应用、企业数字化方向；
+                </li>
+                <li class="flex items-start text-gray-700">
+                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">2</span>
+                  具备较强的学习能力、执行力和项目推进能力；
+                </li>
+                <li class="flex items-start text-gray-700">
+                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">3</span>
+                  有产品、研发、SaaS、企业服务或AI应用经验者优先；
+                </li>
+                <li class="flex items-start text-gray-700">
+                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">4</span>
+                  能适应创业团队节奏，愿意参与从0到1的产品建设。
+                </li>
+              </ul>
+            </div>
+
+            <div class="mb-6">
+              <h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+                薪资待遇
+              </h4>
+              <p class="text-gray-700">
+                基础薪资8K-25K/月，核心岗位可面议；优秀者可享项目奖金、绩效激励及长期发展权益。
+              </p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-4 mb-6">
+              <div class="bg-gray-50 rounded-xl p-4">
+                <p class="text-sm text-gray-500 mb-1">工作地点</p>
+                <p class="font-semibold text-gray-900">西安</p>
+              </div>
+              <div class="bg-gray-50 rounded-xl p-4">
+                <p class="text-sm text-gray-500 mb-1">联系方式</p>
+                <p class="font-semibold text-gray-900">15515659613</p>
+              </div>
+            </div>
+
+            <div class="bg-primary-50 rounded-xl p-4">
+              <p class="text-primary-800 text-center font-medium">
+                欢迎真正看好AI时代、愿意一起做长期事业的伙伴加入。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>

src/views/Contact.vue

@@ -50,7 +50,13 @@ const contactInfo = [
 
 <template>
   <div class="min-h-screen bg-white">
-    <section class="bg-gradient-to-br from-primary-900 via-primary-800 to-accent-900 py-20">
+    <section class="relative py-20 overflow-hidden">
+      <video 
+        src="/videos/tech3.mp4" 
+        class="absolute inset-0 w-full h-full object-cover"
+        autoplay loop muted playsinline
+      ></video>
+      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center">
           <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">

src/views/Home.vue

@@ -81,7 +81,13 @@ const activeTestimonial = ref(0)
 
 <template>
   <div class="min-h-screen">
-    <section class="relative bg-gradient-to-br from-primary-900 via-primary-800 to-accent-900 min-h-screen flex items-center overflow-hidden">
+    <section class="relative min-h-screen flex items-center overflow-hidden">
+      <video 
+        src="/videos/tech3.mp4" 
+        class="absolute inset-0 w-full h-full object-cover"
+        autoplay loop muted playsinline
+      ></video>
+      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
       <div class="absolute inset-0 overflow-hidden">
         <div class="absolute top-20 left-20 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow"></div>
         <div class="absolute bottom-20 right-20 w-96 h-96 bg-accent-500/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
@@ -118,11 +124,11 @@ const activeTestimonial = ref(0)
           <div class="animate-slideInRight">
             <div class="relative">
               <div class="absolute -inset-4 bg-gradient-to-r from-primary-400 to-accent-400 rounded-2xl blur-xl opacity-20"></div>
-              <img 
-                :src="images.team" 
-                alt="智能科技" 
+              <video 
+                src="/videos/001.mp4" 
                 class="relative rounded-2xl shadow-2xl w-full"
-              />
+                autoplay loop muted playsinline
+              ></video>
               <div class="absolute -bottom-6 -left-6 bg-white rounded-xl p-4 shadow-xl animate-float">
                 <div class="flex items-center space-x-3">
                   <div class="w-12 h-12 bg-accent-100 rounded-full flex items-center justify-center">

src/views/Products.vue

@@ -233,7 +233,13 @@ const features = [
 
 <template>
   <div class="min-h-screen bg-white">
-    <section class="bg-gradient-to-br from-primary-900 via-primary-800 to-accent-900 py-20">
+    <section class="relative py-20 overflow-hidden">
+      <video 
+        src="/videos/tech3.mp4" 
+        class="absolute inset-0 w-full h-full object-cover"
+        autoplay loop muted playsinline
+      ></video>
+      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center">
           <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">

src/views/Solutions.vue

@@ -81,11 +81,54 @@ const steps = [
   { icon: 'factory', title: '开发实施', desc: '专业团队交付落地' },
   { icon: 'check', title: '持续优化', desc: '运维支持迭代升级' }
 ]
+
+const successCases = [
+  {
+    name: '秦岭水利研究及地质分析agent',
+    details: '秦岭水利研究及地质分析 Agent 面向水利规划、生态保护、地质灾害评估及区域开发前期研究等场景，重点解决资料分散、分析周期长、专业判断依赖人工经验的问题。该 Agent 可自动采集整理秦岭区域水文、降雨、河流水系、地形地貌、地质构造、断裂带、滑坡泥石流隐患点、生态红线等多源数据，并结合遥感影像、历史文献、政策文件和项目资料进行综合分析。系统可辅助生成水资源条件评估、地质稳定性分析、区域风险研判、工程建设适宜性建议等内容，帮助研究人员快速形成基础判断。对于规划院、水利单位、自然资源部门及工程咨询机构而言，该 Agent 能显著提升前期资料整理效率，降低重复劳动成本，并为项目选址、流域治理、生态修复和风险防控提供更系统、更可靠的决策支持。'
+  },
+  {
+    name: '工商信息采集整理agent',
+    details: '工商信息采集整理 Agent 主要服务于企业尽调、招商研究、市场调研、投融资分析、客户开发和风险识别等业务场景。传统工商信息查询往往需要人工在多个平台反复检索，存在信息零散、整理耗时、口径不统一等问题。该 Agent 可围绕目标企业、行业、区域或产业链，自动采集企业注册信息、股东结构、法人信息、经营范围、分支机构、对外投资、司法风险、知识产权、招投标、经营异常、行政处罚等公开数据，并进行清洗、归类和结构化整理。系统可自动生成企业画像、股权穿透图、风险提示、竞品对比、客户名单和行业分布报告。对于招商团队、咨询公司、律所、投资机构和销售团队来说，该 Agent 能快速完成企业信息初筛与背景分析，提升客户挖掘、项目判断和风险防控效率，让工商信息从"查询资料"转化为"决策依据"。'
+  },
+  {
+    name: '无人化跨境电商agent',
+    details: '无人化跨境电商 Agent 面向跨境卖家、贸易公司、工厂转型电商及个人创业者，围绕选品、上架、运营、客服、营销和数据分析等环节，打造自动化运营体系。该 Agent 可根据平台趋势、用户搜索词、竞品销量、价格区间、评价反馈和利润空间，辅助完成选品分析与市场机会判断；同时支持商品标题、详情页文案、卖点提炼、关键词布局、多语言翻译、图片建议和广告投放方案生成。在运营过程中，系统可跟踪订单、库存、转化率、广告消耗、评价变化和竞品动态，并自动形成优化建议。对于客服场景，Agent 可根据不同国家用户语言和售后问题，生成标准回复，提高响应效率。该案例的核心价值在于减少跨境电商对人工运营经验的过度依赖，让小团队也能完成较完整的店铺运营流程，降低试错成本，提升出海效率。'
+  },
+  {
+    name: '自媒体创作运营agent',
+    details: '自媒体创作运营 Agent 适用于个人 IP、企业品牌号、知识博主、本地生活账号及短视频团队，覆盖选题策划、脚本创作、封面设计、发布节奏、数据复盘和账号定位等环节。该 Agent 可根据账号领域、目标用户、平台热点和历史数据，自动生成内容选题库，并细化为标题、钩子、口播脚本、分镜脚本、封面文案、评论区互动话术和发布时间建议。对于知识类账号，系统可帮助梳理内容结构，形成栏目化表达；对于企业账号，则可将产品优势转化为用户能看懂、愿意停留的内容。发布后，Agent 可根据播放量、完播率、点赞评论、转粉率等数据进行复盘，判断选题表现和内容问题，并提出下一轮优化方向。该案例能够帮助自媒体团队从"凭感觉创作"升级为"数据化运营"，提高内容生产效率，稳定账号风格，降低持续更新压力。'
+  },
+  {
+    name: '软装公司设计营销agent',
+    details: '软装公司设计营销 Agent 面向软装设计公司、家居品牌、装修机构、设计工作室和本地获客团队，重点打通"设计方案生成"与"营销获客转化"两个环节。该 Agent 可根据客户户型、风格偏好、预算区间、家庭成员、功能需求和空间照片，辅助生成软装搭配方案，包括色彩建议、家具选择、灯具搭配、窗帘布艺、装饰画、绿植摆件及采购清单。同时，系统还能将设计方案转化为小红书、抖音、朋友圈、私域社群等不同平台的营销内容，生成案例标题、种草文案、短视频脚本、客户沟通话术和报价说明。对于销售转化环节，Agent 可根据客户疑虑自动生成跟进话术，提高成交效率。该案例的优势在于让软装公司不仅能更快出方案，还能更高效地展示方案、传播案例、沉淀客户，从而提升设计转化率和品牌专业感。'
+  },
+  {
+    name: '自媒体乡村文化宣传agent',
+    details: '自媒体乡村文化宣传 Agent 主要服务于乡村振兴、文旅推广、地方宣传、非遗传播、农产品品牌和基层融媒体等场景。该 Agent 可围绕一个村庄、乡镇或区域，自动整理当地历史故事、民俗文化、传统建筑、非遗技艺、特色饮食、节庆活动、自然景观、乡贤人物和农特产品等内容资源，并将其转化为适合短视频、图文、直播和宣传片的传播素材。系统可生成乡村故事脚本、文旅推介文案、人物采访提纲、农产品卖点包装、路线推荐、活动策划方案和账号栏目规划。相比传统宣传方式，该 Agent 更注重把地方资源讲成"有情绪、有记忆点、有传播力"的内容，避免宣传空泛化。对于乡镇政府、文旅公司、乡村运营团队和本地自媒体而言，它能够帮助乡村建立持续输出能力，提升地方文化影响力、游客吸引力和农产品品牌价值。'
+  }
+]
+
+const selectedCase = ref<{ name: string; details: string } | null>(null)
+
+const openCaseDetail = (caseItem: typeof successCases[0]) => {
+  selectedCase.value = caseItem
+}
+
+const closeCaseDetail = () => {
+  selectedCase.value = null
+}
 </script>
 
 <template>
   <div class="min-h-screen bg-white">
-    <section class="bg-gradient-to-br from-primary-900 via-primary-800 to-accent-900 py-20">
+    <section class="relative py-20 overflow-hidden">
+      <video 
+        src="/videos/tech3.mp4" 
+        class="absolute inset-0 w-full h-full object-cover"
+        autoplay loop muted playsinline
+      ></video>
+      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center">
           <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
@@ -198,13 +241,14 @@ const steps = [
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
           <h2 class="text-3xl font-bold text-gray-900 mb-4">成功案例</h2>
-          <p class="text-gray-600">我们在{{ currentSolution.name }}领域的成功实践</p>
+          <p class="text-gray-600">我们在各行业的成功实践</p>
         </div>
-        <div class="grid md:grid-cols-2 gap-6">
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           <div 
-            v-for="(caseItem, index) in currentSolution.cases" 
+            v-for="(caseItem, index) in successCases" 
             :key="index"
-            class="bg-gray-50 rounded-xl p-6 border border-gray-100"
+            class="bg-gray-50 rounded-xl p-6 border border-gray-100 hover:border-primary-200 hover:shadow-lg transition-all duration-300 cursor-pointer"
+            @click="openCaseDetail(caseItem)"
           >
             <div class="flex items-start space-x-4">
                 <div class="w-10 h-10 bg-accent-100 rounded-lg flex items-center justify-center flex-shrink-0">
@@ -213,8 +257,8 @@ const steps = [
                   </svg>
                 </div>
                 <div>
-                  <h4 class="font-semibold text-gray-900 mb-1">{{ caseItem }}</h4>
-                  <p class="text-sm text-gray-600">了解更多关于该案例的详细信息</p>
+                  <h4 class="font-semibold text-gray-900 mb-1">{{ caseItem.name }}</h4>
+                  <p class="text-sm text-gray-600">基于Agent技术的智能解决方案</p>
                 </div>
               </div>
           </div>
@@ -277,5 +321,33 @@ const steps = [
         </button>
       </div>
     </section>
+
+    <div 
+      v-if="selectedCase" 
+      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+      @click.self="closeCaseDetail"
+    >
+      <div class="bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[80vh] overflow-y-auto">
+        <div class="p-8">
+          <div class="flex items-center justify-between mb-6">
+            <h3 class="text-2xl font-bold text-gray-900">{{ selectedCase.name }}</h3>
+            <button 
+              class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors"
+              @click="closeCaseDetail"
+            >
+              <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+            </button>
+          </div>
+          <p class="text-gray-700 leading-relaxed text-lg" v-if="selectedCase.details">
+            {{ selectedCase.details }}
+          </p>
+          <p class="text-gray-500 text-center py-8" v-else>
+            该案例详情正在整理中...
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>