Initial commit: 西安云阶智元信息科技有限公司官网

src/views/Home.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { images } from '@/assets/images'
+
+
+const router = useRouter()
+
+const stats = [
+  { value: '20+', label: '服务客户' },
+  { value: '10+', label: '成功案例' },
+  { value: '99%', label: '产品质量' },
+  { value: '99%', label: '客户满意度' }
+]
+
+const services = [
+  {
+    icon: 'zap',
+    title: '软件开发',
+    description: '为企业提供定制化软件开发服务，包括企业级应用、Web系统、移动端App等',
+    color: 'bg-primary-500'
+  },
+  {
+    icon: 'shield',
+    title: '智能体方案',
+    description: '基于AI技术的智能体解决方案，实现自动化流程、智能客服、数据分析等',
+    color: 'bg-accent-500'
+  },
+  {
+    icon: 'check',
+    title: '技术咨询',
+    description: '专业的技术咨询服务，帮助企业制定数字化转型战略和技术架构规划',
+    color: 'bg-purple-500'
+  },
+  {
+    icon: 'award',
+    title: '运维支持',
+    description: '7x24小时专业运维支持，确保系统稳定运行，快速响应故障处理',
+    color: 'bg-orange-500'
+  }
+]
+
+const products = [
+  {
+    name: '云智通平台',
+    description: '企业级智能化管理平台',
+    features: ['智能数据分析', '流程自动化', '实时监控'],
+    image: images.enterprise
+  },
+  {
+    name: 'AI智能助手',
+    description: '基于大语言模型的智能客服系统',
+    features: ['自然语言交互', '多轮对话', '知识图谱'],
+    image: images.aiChatbot
+  },
+  {
+    name: '数据中台',
+    description: '统一数据管理与分析平台',
+    features: ['数据集成', '实时计算', '智能洞察'],
+    image: images.dataCenter
+  }
+]
+
+const testimonials = [
+  {
+    content: '云阶智元帮助我们实现了业务流程的全面数字化，效率提升了300%。他们的专业团队和优质服务让我们非常满意。',
+    author: '王总',
+    title: '某大型制造企业CIO',
+    company: '西安某智能制造有限公司'
+  },
+  {
+    content: '智能体方案的落地让我们的客户服务水平有了质的飞跃，客户满意度显著提升。强烈推荐！',
+    author: '李总',
+    title: '某金融科技公司CEO',
+    company: '陕西某金融科技有限公司'
+  }
+]
+
+const activeTestimonial = ref(0)
+</script>
+
+<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">
+      <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>
+        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary-400/10 rounded-full blur-3xl"></div>
+      </div>
+      
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-20">
+        <div class="grid lg:grid-cols-2 gap-12 items-center">
+          <div class="animate-fadeInUp">
+            <div class="inline-flex items-center px-4 py-2 bg-white/10 rounded-full text-white/90 text-sm mb-6">
+              <span class="w-2 h-2 bg-accent-400 rounded-full mr-2 animate-pulse"></span>
+              专注数字化转型，赋能企业创新
+            </div>
+            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              用<span class="text-accent-400">智能技术</span>
+              <br />驱动企业未来
+            </h1>
+            <p class="text-lg text-white/80 mb-8 leading-relaxed">
+              西安云阶智元信息科技有限公司专注软件开发与智能体方案落地，为企业提供全方位的数字化转型服务，助力企业实现智能化升级。
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4">
+              <button class="btn-primary" @click="router.push('/contact')">
+                免费咨询
+                <svg class="inline-block w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+                </svg>
+              </button>
+              <button class="btn-outline" @click="router.push('/products')">
+                了解产品
+              </button>
+            </div>
+          </div>
+          
+          <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="智能科技" 
+                class="relative rounded-2xl shadow-2xl w-full"
+              />
+              <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">
+                    <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="M5 13l4 4L19 7"/>
+                    </svg>
+                  </div>
+                  <div>
+                    <p class="font-semibold text-gray-900">项目交付</p>
+                    <p class="text-sm text-gray-500">100%准时交付</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 mt-20">
+          <div 
+            v-for="(stat, index) in stats" 
+            :key="index"
+            class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center"
+            :style="{ animationDelay: `${index * 0.1}s` }"
+          >
+            <p class="text-3xl lg:text-4xl font-bold text-white mb-2">{{ stat.value }}</p>
+            <p class="text-white/70">{{ stat.label }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="services" class="py-20 bg-white">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
+            核心服务
+          </span>
+          <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
+            我们能为您做什么
+          </h2>
+          <p class="text-gray-600 max-w-2xl mx-auto">
+            提供全方位的技术服务，助力企业数字化转型与智能化升级
+          </p>
+        </div>
+        
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <div 
+            v-for="(service, index) in services" 
+            :key="index"
+            class="card-hover bg-gray-50 rounded-xl p-6 text-center"
+          >
+            <div :class="[service.color, 'w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-4']">
+              <svg v-if="service.icon === 'zap'" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+              </svg>
+              <svg v-else-if="service.icon === 'shield'" class="w-8 h-8 text-white" 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-if="service.icon === 'check'" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+              </svg>
+              <svg v-else-if="service.icon === 'award'" class="w-8 h-8 text-white" 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"/>
+              </svg>
+            </div>
+            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ service.title }}</h3>
+            <p class="text-gray-600">{{ service.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="products" class="py-20 bg-gray-50">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="inline-block px-4 py-2 bg-accent-100 text-accent-700 rounded-full text-sm font-medium mb-4">
+            产品中心
+          </span>
+          <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
+            核心产品
+          </h2>
+          <p class="text-gray-600 max-w-2xl mx-auto">
+            自主研发的智能化产品，为企业提供一站式解决方案
+          </p>
+        </div>
+        
+        <div class="grid md:grid-cols-3 gap-8">
+          <div 
+            v-for="(product, index) in products" 
+            :key="index"
+            class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg"
+          >
+            <div class="aspect-video overflow-hidden">
+              <img :src="product.image" :alt="product.name" class="w-full h-full object-cover" />
+            </div>
+            <div class="p-6">
+              <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ product.name }}</h3>
+              <p class="text-gray-600 mb-4">{{ product.description }}</p>
+              <ul class="space-y-2 mb-6">
+                <li 
+                  v-for="(feature, fIndex) in product.features" 
+                  :key="fIndex"
+                  class="flex items-center text-sm text-gray-700"
+                >
+                  <svg class="w-4 h-4 text-accent-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                  </svg>
+                  {{ feature }}
+                </li>
+              </ul>
+              <button class="btn-secondary w-full" @click="router.push('/products')">
+                了解详情
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="testimonials" class="py-20 bg-gradient-to-br from-primary-900 to-accent-900">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
+            客户评价
+          </span>
+          <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
+            他们信任我们
+          </h2>
+          <p class="text-white/70 max-w-2xl mx-auto">
+            来自各行业客户的真实反馈
+          </p>
+        </div>
+        
+        <div class="max-w-4xl mx-auto">
+          <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 lg:p-12">
+            <div class="text-center">
+              <div class="flex justify-center mb-6">
+                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
+                  <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
+                  </svg>
+                </div>
+              </div>
+              <p class="text-xl lg:text-2xl text-white/90 mb-6 italic">
+                "{{ testimonials[activeTestimonial].content }}"
+              </p>
+              <div>
+                <p class="font-semibold text-white">{{ testimonials[activeTestimonial].author }}</p>
+                <p class="text-white/70">{{ testimonials[activeTestimonial].title }}</p>
+                <p class="text-white/50 text-sm">{{ testimonials[activeTestimonial].company }}</p>
+              </div>
+            </div>
+            
+            <div class="flex justify-center mt-8 space-x-2">
+              <button
+                v-for="(_, index) in testimonials"
+                :key="index"
+                class="w-3 h-3 rounded-full transition-colors"
+                :class="activeTestimonial === index ? 'bg-white' : 'bg-white/30'"
+                @click="activeTestimonial = index"
+              ></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="contact" class="py-20 bg-white">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <span class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
+              联系我们
+            </span>
+            <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
+              开启数字化转型之旅
+            </h2>
+            <p class="text-gray-600 mb-8">
+              无论您是想了解更多产品信息，还是寻求定制化解决方案，我们的专业团队随时为您服务。
+            </p>
+            <div class="space-y-4">
+              <div class="flex items-start space-x-4">
+                <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                  </svg>
+                </div>
+                <div>
+                  <p class="font-semibold text-gray-900">公司地址</p>
+                  <p class="text-gray-600">陕西省西安市高新区科技二路65号清华科技园E座</p>
+                </div>
+              </div>
+              <div class="flex items-start space-x-4">
+                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <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="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>
+                  <p class="font-semibold text-gray-900">电子邮箱</p>
+                  <p class="text-gray-600">492265466@qq.com</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="bg-gray-50 rounded-2xl p-8">
+            <h3 class="text-xl font-semibold text-gray-900 mb-6">获取免费咨询</h3>
+            <form class="space-y-4">
+              <div class="grid md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
+                  <input 
+                    type="text" 
+                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all"
+                    placeholder="请输入您的姓名"
+                  />
+                </div>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">公司名称</label>
+                <input 
+                  type="text" 
+                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all"
+                  placeholder="请输入公司名称"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">需求描述</label>
+                <textarea 
+                  rows="4"
+                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all resize-none"
+                  placeholder="请简要描述您的需求..."
+                ></textarea>
+              </div>
+              <button type="submit" class="btn-primary w-full">
+                提交咨询
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>