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

src/views/About.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { images } from '@/assets/images'
+
+
+const companyInfo = {
+  name: '西安云阶智元信息科技有限公司',
+  slogan: '用智能技术驱动企业未来',
+  established: '2016年',
+  location: '陕西西安',
+  employees: '200+',
+  clients: '500+',
+  projects: '1000+'
+}
+
+const coreValues = [
+  { icon: 'target', title: '客户至上', desc: '以客户需求为中心，提供优质服务' },
+  { icon: 'lightbulb', title: '创新驱动', desc: '持续创新，引领技术发展' },
+  { icon: 'users', title: '团队协作', desc: '团结协作，共创价值' },
+  { icon: 'trending', title: '追求卓越', desc: '精益求精，追求完美' }
+]
+
+const milestones = [
+  { year: '2016', event: '公司成立，专注软件开发服务' },
+  { year: '2018', event: '获得高新技术企业认证' },
+  { year: '2020', event: '推出首个智能体平台产品' },
+  { year: '2022', event: '服务客户突破300家' },
+  { year: '2024', event: '团队规模突破200人' },
+  { year: '2025', event: '成为行业领先的智能体解决方案提供商' }
+]
+
+const team = [
+  { name: '张伟', role: '创始人 & CEO', avatar: images.avatar1 },
+  { name: '李娜', role: '技术总监', avatar: images.avatar2 },
+  { name: '王强', role: '产品总监', avatar: images.avatar3 },
+  { name: '刘芳', role: '运营总监', avatar: images.avatar4 }
+]
+
+const advantages = [
+  '8年行业经验，深耕软件开发与智能体领域',
+  '200+专业技术人员，覆盖全栈开发能力',
+  '500+成功案例，服务各行业头部企业',
+  '完善的服务体系，从咨询到运维全周期支持',
+  '持续创新能力，保持技术领先优势'
+]
+</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">
+      <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">
+            关于我们
+          </span>
+          <h1 class="text-4xl sm:text-5xl font-bold text-white mb-4">
+            西安云阶智元信息科技有限公司
+          </h1>
+          <p class="text-lg text-white/80 max-w-2xl mx-auto">
+            {{ companyInfo.slogan }}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20">
+      <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>
+            <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+项目交付。
+            </p>
+            <ul class="space-y-3">
+              <li 
+                v-for="(advantage, index) in advantages" 
+                :key="index"
+                class="flex items-center"
+              >
+                <svg class="w-5 h-5 text-accent-500 mr-3" 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>
+                <span class="text-gray-700">{{ advantage }}</span>
+              </li>
+            </ul>
+          </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="公司办公环境" 
+              class="relative rounded-2xl shadow-2xl w-full"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-16 bg-gray-50">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+          <div class="text-center">
+            <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
+              <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
+              </svg>
+            </div>
+            <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.employees }}</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">
+              <svg class="w-8 h-8 text-accent-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"/>
+              </svg>
+            </div>
+            <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.clients }}</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"/>
+              </svg>
+            </div>
+            <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.projects }}</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"/>
+              </svg>
+            </div>
+            <p class="text-3xl font-bold text-gray-900 mb-1">8+</p>
+            <p class="text-gray-600">行业经验</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20">
+      <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>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div 
+            v-for="(value, index) in coreValues" 
+            :key="index"
+            class="bg-gray-50 rounded-xl p-6 text-center"
+          >
+            <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
+              <svg v-if="value.icon === 'target'" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              <svg v-else-if="value.icon === 'lightbulb'" 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="value.icon === 'users'" 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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
+              </svg>
+              <svg v-else-if="value.icon === 'trending'" 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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
+              </svg>
+            </div>
+            <h3 class="font-semibold text-gray-900 mb-2">{{ value.title }}</h3>
+            <p class="text-gray-600 text-sm">{{ value.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20 bg-gray-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>
+        </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' : ''"
+                >
+                  <p class="text-2xl font-bold text-primary-600 mb-2">{{ milestone.year }}</p>
+                  <p class="text-gray-700">{{ milestone.event }}</p>
+                </div>
+              </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 % 2 !== 0" class="hidden lg:block"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-20" id="team">
+      <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>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div 
+            v-for="(member, index) in team" 
+            :key="index"
+            class="text-center"
+          >
+            <div class="relative mb-4">
+              <img 
+                :src="member.avatar" 
+                :alt="member.name" 
+                class="w-32 h-32 rounded-full mx-auto object-cover ring-4 ring-primary-100"
+              />
+            </div>
+            <h3 class="font-semibold text-gray-900 mb-1">{{ member.name }}</h3>
+            <p class="text-primary-600 text-sm">{{ member.role }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="bg-gradient-to-br from-primary-900 to-accent-900 py-20">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
+          加入我们
+        </h2>
+        <p class="text-white/80 mb-8 max-w-2xl mx-auto">
+          我们正在寻找优秀的人才加入我们的团队，共同推动技术创新和企业发展
+        </p>
+        <button class="btn-primary">
+          查看招聘信息
+        </button>
+      </div>
+    </section>
+  </div>
+</template>