mirror of
https://gitcode.com/leisileken/cloud-smart.git
synced 2026-09-11 10:27:20 +08:00
Initial commit: 西安云阶智元信息科技有限公司官网
This commit is contained in:
leisileken
37
.gitignore
vendored
Normal file
37
.gitignore
vendored
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Dependencies
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Build output
|
||||||
|
build
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
Thumbs.db
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="西安云阶智元信息科技有限公司 - 专注软件开发与智能体方案落地" />
|
||||||
|
<title>西安云阶智元信息科技有限公司</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2553
package-lock.json
generated
Normal file
2553
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "cloud-smart",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-router": "^4.3.0",
|
||||||
|
"element-plus": "^2.6.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.11.0",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^8.0.16",
|
||||||
|
"@vue/tsconfig": "^0.5.1",
|
||||||
|
"vue-tsc": "^3.3.5",
|
||||||
|
"tailwindcss": "^3.4.14",
|
||||||
|
"postcss": "^8.4.38",
|
||||||
|
"autoprefixer": "^10.4.19"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/videos/A1.mp4
Normal file
BIN
public/videos/A1.mp4
Normal file
Binary file not shown.
BIN
public/videos/A2.mp4
Normal file
BIN
public/videos/A2.mp4
Normal file
Binary file not shown.
BIN
public/videos/A3.mp4
Normal file
BIN
public/videos/A3.mp4
Normal file
Binary file not shown.
BIN
public/videos/A4.mp4
Normal file
BIN
public/videos/A4.mp4
Normal file
Binary file not shown.
BIN
public/videos/A5.mp4
Normal file
BIN
public/videos/A5.mp4
Normal file
Binary file not shown.
BIN
public/videos/A6.mp4
Normal file
BIN
public/videos/A6.mp4
Normal file
Binary file not shown.
BIN
public/videos/B1.mp4
Normal file
BIN
public/videos/B1.mp4
Normal file
Binary file not shown.
BIN
public/videos/B2.mp4
Normal file
BIN
public/videos/B2.mp4
Normal file
Binary file not shown.
BIN
public/videos/B3.mp4
Normal file
BIN
public/videos/B3.mp4
Normal file
Binary file not shown.
BIN
public/videos/B4.mp4
Normal file
BIN
public/videos/B4.mp4
Normal file
Binary file not shown.
BIN
public/videos/B5.mp4
Normal file
BIN
public/videos/B5.mp4
Normal file
Binary file not shown.
BIN
public/videos/B6.mp4
Normal file
BIN
public/videos/B6.mp4
Normal file
Binary file not shown.
BIN
public/videos/C1.mp4
Normal file
BIN
public/videos/C1.mp4
Normal file
Binary file not shown.
BIN
public/videos/C2.mp4
Normal file
BIN
public/videos/C2.mp4
Normal file
Binary file not shown.
BIN
public/videos/C3.mp4
Normal file
BIN
public/videos/C3.mp4
Normal file
Binary file not shown.
BIN
public/videos/智力体.mp4
Normal file
BIN
public/videos/智力体.mp4
Normal file
Binary file not shown.
BIN
public/videos/智慧体.mp4
Normal file
BIN
public/videos/智慧体.mp4
Normal file
Binary file not shown.
BIN
public/videos/智能体.mp4
Normal file
BIN
public/videos/智能体.mp4
Normal file
Binary file not shown.
50
src/App.vue
Normal file
50
src/App.vue
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted } from 'vue'
|
||||||
|
import Navbar from '@/components/Navbar.vue'
|
||||||
|
import Footer from '@/components/Footer.vue'
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
const nav = document.querySelector('.navbar')
|
||||||
|
if (nav) {
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
nav.classList.add('nav-scrolled')
|
||||||
|
} else {
|
||||||
|
nav.classList.remove('nav-scrolled')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('scroll', handleScroll)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="min-h-screen flex flex-col">
|
||||||
|
<Navbar />
|
||||||
|
<main class="flex-1">
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition name="fade" mode="out-in">
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
src/assets/images.ts
Normal file
89
src/assets/images.ts
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
// 图片资源配置 - 使用 Unsplash 免费图片
|
||||||
|
export const images = {
|
||||||
|
// 首页
|
||||||
|
hero: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&h=675&fit=crop',
|
||||||
|
team: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&h=675&fit=crop',
|
||||||
|
|
||||||
|
// 产品图片 - 企业智能体集群
|
||||||
|
enterprise: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=450&fit=crop',
|
||||||
|
supplyChain: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=800&h=450&fit=crop',
|
||||||
|
crm: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=450&fit=crop',
|
||||||
|
|
||||||
|
// 产品图片 - 智能体平台
|
||||||
|
aiChatbot: 'https://images.unsplash.com/photo-1531746790731-6c087fecd65a?w=800&h=450&fit=crop',
|
||||||
|
aiMarketing: 'https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=800&h=450&fit=crop',
|
||||||
|
aiOffice: 'https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=800&h=450&fit=crop',
|
||||||
|
|
||||||
|
// 产品图片 - 数据分析系统
|
||||||
|
dataCenter: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&h=450&fit=crop',
|
||||||
|
biDashboard: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=675&fit=crop',
|
||||||
|
predictiveAnalytics: 'https://images.unsplash.com/photo-1553729459-efe14ef6055d?w=800&h=450&fit=crop',
|
||||||
|
|
||||||
|
// 产品图片 - 移动端应用
|
||||||
|
mobileApp: 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&h=450&fit=crop',
|
||||||
|
wechatMini: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&h=450&fit=crop',
|
||||||
|
mobileH5: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=450&fit=crop',
|
||||||
|
|
||||||
|
// 产品图片 - 知识库安全增强
|
||||||
|
knowledgeBase: 'https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=800&h=450&fit=crop',
|
||||||
|
knowledgeSecurity: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=450&fit=crop',
|
||||||
|
knowledgeSearch: 'https://images.unsplash.com/photo-1544717302-de2939b7ef71?w=800&h=450&fit=crop',
|
||||||
|
|
||||||
|
// 产品图片 - 智能体使用培训
|
||||||
|
trainingBasic: 'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=800&h=450&fit=crop',
|
||||||
|
trainingAdvanced: 'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=800&h=450&fit=crop',
|
||||||
|
trainingCase: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=800&h=450&fit=crop',
|
||||||
|
|
||||||
|
// 解决方案图片
|
||||||
|
manufacturing: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=450&fit=crop',
|
||||||
|
finance: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?w=800&h=450&fit=crop',
|
||||||
|
healthcare: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=800&h=450&fit=crop',
|
||||||
|
education: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800&h=450&fit=crop',
|
||||||
|
retail: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800&h=450&fit=crop',
|
||||||
|
logistics: 'https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=800&h=450&fit=crop',
|
||||||
|
|
||||||
|
// 关于我们
|
||||||
|
office: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&h=675&fit=crop',
|
||||||
|
|
||||||
|
// 联系我们
|
||||||
|
meeting: 'https://images.unsplash.com/photo-1431540015161-0bf868a2d407?w=1200&h=675&fit=crop',
|
||||||
|
|
||||||
|
// 团队头像
|
||||||
|
avatar1: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face',
|
||||||
|
avatar2: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face',
|
||||||
|
avatar3: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&h=200&fit=crop&crop=face',
|
||||||
|
avatar4: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 视频资源配置 - 使用可靠的在线视频源
|
||||||
|
export const videos = {
|
||||||
|
// 企业智能体集群
|
||||||
|
enterprise: '/videos/智能体.mp4',
|
||||||
|
supplyChain: '/videos/智慧体.mp4',
|
||||||
|
crm: '/videos/智力体.mp4',
|
||||||
|
|
||||||
|
// 智能体平台
|
||||||
|
aiChatbot: '/videos/A1.mp4',
|
||||||
|
aiMarketing: '/videos/A2.mp4',
|
||||||
|
aiOffice: '/videos/A3.mp4',
|
||||||
|
|
||||||
|
// 数据分析系统
|
||||||
|
dataCenter: '/videos/A4.mp4',
|
||||||
|
biDashboard: '/videos/A5.mp4',
|
||||||
|
predictiveAnalytics: '/videos/A6.mp4',
|
||||||
|
|
||||||
|
// 移动端应用
|
||||||
|
mobileApp: '/videos/B1.mp4',
|
||||||
|
wechatMini: '/videos/B2.mp4',
|
||||||
|
mobileH5: '/videos/B3.mp4',
|
||||||
|
|
||||||
|
// 知识库安全增强
|
||||||
|
knowledgeBase: '/videos/B4.mp4',
|
||||||
|
knowledgeSecurity: '/videos/B5.mp4',
|
||||||
|
knowledgeSearch: '/videos/B6.mp4',
|
||||||
|
|
||||||
|
// 智能体使用培训
|
||||||
|
trainingBasic: '/videos/C1.mp4',
|
||||||
|
trainingAdvanced: '/videos/C2.mp4',
|
||||||
|
trainingCase: '/videos/C3.mp4'
|
||||||
|
}
|
||||||
118
src/components/Footer.vue
Normal file
118
src/components/Footer.vue
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
|
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="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>
|
||||||
|
<div>
|
||||||
|
<span class="font-bold text-xl">西安云阶智元信息科技有限公司</span>
|
||||||
|
<p class="text-gray-400 text-sm">Cloud Smart Technology</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 mb-6 leading-relaxed">
|
||||||
|
专注于软件开发与智能体方案落地，为企业提供全方位的数字化转型服务。我们致力于用技术创新推动产业升级，助力企业实现智能化发展。
|
||||||
|
</p>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center space-x-3 text-gray-400">
|
||||||
|
<svg class="w-5 h-5 text-primary-400" 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>
|
||||||
|
<span>陕西省西安市高新区科技二路65号清华科技园E座</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-3 text-gray-400">
|
||||||
|
<svg class="w-5 h-5 text-primary-400" 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>
|
||||||
|
<span>492265466@qq.com</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-3 text-gray-400">
|
||||||
|
<svg class="w-5 h-5 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
<span>周一至周五 9:00-18:00</span>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<div class="border-t border-gray-800">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
||||||
|
<p class="text-gray-500 text-sm">
|
||||||
|
{{ currentYear }} 西安云阶智元信息科技有限公司 版权所有
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-6 text-gray-500 text-sm">
|
||||||
|
<a href="#" class="hover:text-primary-400 transition-colors">隐私政策</a>
|
||||||
|
<a href="#" class="hover:text-primary-400 transition-colors">服务条款</a>
|
||||||
|
<a href="#" class="hover:text-primary-400 transition-colors">网站地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
136
src/components/Navbar.vue
Normal file
136
src/components/Navbar.vue
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const isMenuOpen = ref(false)
|
||||||
|
const isScrolled = ref(false)
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: '首页', path: '/' },
|
||||||
|
{ name: '产品中心', path: '/products' },
|
||||||
|
{ name: '解决方案', path: '/solutions' },
|
||||||
|
{ name: '关于我们', path: '/about' },
|
||||||
|
{ name: '联系我们', path: '/contact' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
isScrolled.value = window.scrollY > 50
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleMenu = () => {
|
||||||
|
isMenuOpen.value = !isMenuOpen.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeMenu = () => {
|
||||||
|
isMenuOpen.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('scroll', handleScroll)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav
|
||||||
|
class="navbar fixed top-0 left-0 right-0 z-50 transition-all duration-300"
|
||||||
|
:class="isScrolled ? 'bg-white/95 backdrop-blur-md shadow-md' : 'bg-transparent'"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
class="font-bold text-lg"
|
||||||
|
:class="isScrolled ? 'text-gray-900' : 'text-white'"
|
||||||
|
>
|
||||||
|
云阶智元
|
||||||
|
</span>
|
||||||
|
<p
|
||||||
|
class="text-xs"
|
||||||
|
:class="isScrolled ? 'text-gray-500' : 'text-white/80'"
|
||||||
|
>
|
||||||
|
Cloud Smart
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden lg:flex items-center space-x-8">
|
||||||
|
<a
|
||||||
|
v-for="item in navItems"
|
||||||
|
:key="item.path"
|
||||||
|
:href="item.path"
|
||||||
|
class="font-medium transition-colors duration-200 relative group"
|
||||||
|
:class="isScrolled ? 'text-gray-700 hover:text-primary-600' : 'text-white/90 hover:text-white'"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 transition-all duration-200 group-hover:w-full"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden lg:flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
class="btn-primary"
|
||||||
|
@click="router.push('/contact')"
|
||||||
|
>
|
||||||
|
免费咨询
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="lg:hidden p-2"
|
||||||
|
:class="isScrolled ? 'text-gray-700' : 'text-white'"
|
||||||
|
@click="toggleMenu"
|
||||||
|
>
|
||||||
|
<svg v-if="!isMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
<svg v-else class="w-6 h-6" 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>
|
||||||
|
|
||||||
|
<transition
|
||||||
|
enter-active-class="transition-all duration-300 ease-out"
|
||||||
|
enter-from-class="opacity-0 -translate-y-4"
|
||||||
|
enter-to-class="opacity-100 translate-y-0"
|
||||||
|
leave-active-class="transition-all duration-200 ease-in"
|
||||||
|
leave-from-class="opacity-100 translate-y-0"
|
||||||
|
leave-to-class="opacity-0 -translate-y-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="isMenuOpen"
|
||||||
|
class="lg:hidden bg-white shadow-lg border-t"
|
||||||
|
>
|
||||||
|
<div class="container mx-auto px-4 py-4 space-y-2">
|
||||||
|
<a
|
||||||
|
v-for="item in navItems"
|
||||||
|
:key="item.path"
|
||||||
|
:href="item.path"
|
||||||
|
class="block px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg transition-colors"
|
||||||
|
@click="closeMenu"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</a>
|
||||||
|
<div class="pt-4 border-t">
|
||||||
|
<button
|
||||||
|
class="w-full btn-primary"
|
||||||
|
@click="router.push('/contact'); closeMenu()"
|
||||||
|
>
|
||||||
|
免费咨询
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
11
src/main.ts
Normal file
11
src/main.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(router)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.mount('#app')
|
||||||
43
src/router/index.ts
Normal file
43
src/router/index.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: () => import('@/views/Home.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/products',
|
||||||
|
name: 'Products',
|
||||||
|
component: () => import('@/views/Products.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/solutions',
|
||||||
|
name: 'Solutions',
|
||||||
|
component: () => import('@/views/Solutions.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'About',
|
||||||
|
component: () => import('@/views/About.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/contact',
|
||||||
|
name: 'Contact',
|
||||||
|
component: () => import('@/views/Contact.vue')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
scrollBehavior(to) {
|
||||||
|
if (to.hash) {
|
||||||
|
return {
|
||||||
|
el: to.hash,
|
||||||
|
behavior: 'smooth'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { top: 0, behavior: 'smooth' }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
145
src/style.css
Normal file
145
src/style.css
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自定义动画 */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInLeft {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInRight {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fadeInUp {
|
||||||
|
animation: fadeInUp 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-slideInLeft {
|
||||||
|
animation: slideInLeft 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-slideInRight {
|
||||||
|
animation: slideInRight 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-pulse-slow {
|
||||||
|
animation: pulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 渐变背景 */
|
||||||
|
.bg-gradient-primary {
|
||||||
|
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradient-accent {
|
||||||
|
background: linear-gradient(135deg, #166534 0%, #22c55e 50%, #86efac 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 玻璃态效果 */
|
||||||
|
.glass {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片悬浮效果 */
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮样式 */
|
||||||
|
.btn-primary {
|
||||||
|
@apply px-6 py-3 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-all duration-300 shadow-lg hover:shadow-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply px-6 py-3 border-2 border-primary-600 text-primary-600 font-medium rounded-lg hover:bg-primary-50 transition-all duration-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
@apply px-6 py-3 border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:text-primary-600 transition-all duration-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式容器 */
|
||||||
|
.container {
|
||||||
|
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航栏滚动效果 */
|
||||||
|
.nav-scrolled {
|
||||||
|
@apply bg-white/95 backdrop-blur-md shadow-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文本渐变 */
|
||||||
|
.text-gradient {
|
||||||
|
@apply bg-gradient-to-r from-primary-600 to-accent-500 bg-clip-text text-transparent;
|
||||||
|
}
|
||||||
256
src/views/About.vue
Normal file
256
src/views/About.vue
Normal file
@@ -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>
|
||||||
286
src/views/Contact.vue
Normal file
286
src/views/Contact.vue
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { images } from '@/assets/images'
|
||||||
|
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
name: '',
|
||||||
|
company: '',
|
||||||
|
email: '',
|
||||||
|
service: '',
|
||||||
|
message: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
'软件开发',
|
||||||
|
'智能体方案',
|
||||||
|
'技术咨询',
|
||||||
|
'运维支持',
|
||||||
|
'定制开发',
|
||||||
|
'其他'
|
||||||
|
]
|
||||||
|
|
||||||
|
const isSubmitting = ref(false)
|
||||||
|
const isSubmitted = ref(false)
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
isSubmitting.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
isSubmitting.value = false
|
||||||
|
isSubmitted.value = true
|
||||||
|
form.value = {
|
||||||
|
name: '',
|
||||||
|
company: '',
|
||||||
|
email: '',
|
||||||
|
service: '',
|
||||||
|
message: ''
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
isSubmitted.value = false
|
||||||
|
}, 3000)
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
|
||||||
|
const contactInfo = [
|
||||||
|
{ icon: 'map', title: '公司地址', content: '陕西省西安市高新区科技二路65号清华科技园E座' },
|
||||||
|
{ icon: 'mail', title: '电子邮箱', content: '492265466@qq.com' },
|
||||||
|
{ icon: 'clock', title: '营业时间', content: '周一至周五 9:00-18:00' }
|
||||||
|
]
|
||||||
|
</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">
|
||||||
|
我们期待与您的合作，为您提供专业的技术服务支持
|
||||||
|
</p>
|
||||||
|
</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
|
||||||
|
v-for="(info, index) in contactInfo"
|
||||||
|
:key="index"
|
||||||
|
class="bg-white rounded-xl p-6 text-center"
|
||||||
|
>
|
||||||
|
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg v-if="info.icon === 'map'" 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>
|
||||||
|
<svg v-else-if="info.icon === 'phone'" 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 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="info.icon === 'mail'" 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>
|
||||||
|
<svg v-else-if="info.icon === 'clock'" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-gray-900 mb-2">{{ info.title }}</h3>
|
||||||
|
<p class="text-gray-600 text-sm">{{ info.content }}</p>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 mb-6">获取免费咨询</h2>
|
||||||
|
<p class="text-gray-600 mb-8">
|
||||||
|
填写以下表单，我们的专业团队将在24小时内与您联系，为您提供定制化的解决方案。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-6 mb-8">
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-12 h-12 bg-accent-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<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>
|
||||||
|
<h4 class="font-semibold text-gray-900">专业团队</h4>
|
||||||
|
<p class="text-gray-600 text-sm">资深技术顾问一对一服务，深入了解您的需求</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-12 h-12 bg-accent-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<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>
|
||||||
|
<h4 class="font-semibold text-gray-900">定制方案</h4>
|
||||||
|
<p class="text-gray-600 text-sm">根据您的业务需求，提供专属解决方案</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-12 h-12 bg-accent-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<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>
|
||||||
|
<h4 class="font-semibold text-gray-900">免费评估</h4>
|
||||||
|
<p class="text-gray-600 text-sm">免费提供项目评估和报价服务</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative rounded-2xl overflow-hidden h-64">
|
||||||
|
<img
|
||||||
|
:src="images.meeting"
|
||||||
|
alt="公司环境"
|
||||||
|
class="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||||||
|
<div class="absolute bottom-4 left-4 text-white">
|
||||||
|
<p class="font-semibold">欢迎来访</p>
|
||||||
|
<p class="text-sm text-white/80">陕西省西安市高新区科技二路65号清华科技园E座</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gray-50 rounded-2xl p-8">
|
||||||
|
<div v-if="isSubmitted" class="text-center py-12">
|
||||||
|
<div class="w-20 h-20 bg-accent-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg class="w-10 h-10 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>
|
||||||
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">提交成功!</h3>
|
||||||
|
<p class="text-gray-600">我们将在24小时内与您联系</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form v-else class="space-y-5" @submit.prevent="handleSubmit">
|
||||||
|
<div class="grid md:grid-cols-2 gap-5">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||||
|
</svg>
|
||||||
|
姓名 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="form.name"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
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-2">
|
||||||
|
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<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-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||||
|
</svg>
|
||||||
|
公司名称
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="form.company"
|
||||||
|
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>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<svg class="w-4 h-4 inline mr-1" 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>
|
||||||
|
电子邮箱
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="form.email"
|
||||||
|
type="email"
|
||||||
|
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-2">咨询服务</label>
|
||||||
|
<select
|
||||||
|
v-model="form.service"
|
||||||
|
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 bg-white"
|
||||||
|
>
|
||||||
|
<option value="">请选择服务类型</option>
|
||||||
|
<option v-for="service in services" :key="service" :value="service">
|
||||||
|
{{ service }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.013 8.013 0 01-5.45-2.132L2.5 19l1.132-3.238A7.956 7.956 0 014 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"/>
|
||||||
|
</svg>
|
||||||
|
需求描述 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
v-model="form.message"
|
||||||
|
rows="4"
|
||||||
|
required
|
||||||
|
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 flex items-center justify-center"
|
||||||
|
:disabled="isSubmitting"
|
||||||
|
>
|
||||||
|
<span v-if="isSubmitting">提交中...</span>
|
||||||
|
<template v-else>
|
||||||
|
提交咨询
|
||||||
|
<svg class="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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bg-gray-50 py-16">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-4xl font-bold text-primary-600 mb-2">24小时</div>
|
||||||
|
<p class="text-gray-600">快速响应</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-4xl font-bold text-accent-600 mb-2">1对1</div>
|
||||||
|
<p class="text-gray-600">专属服务</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-4xl font-bold text-purple-600 mb-2">免费</div>
|
||||||
|
<p class="text-gray-600">方案评估</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
371
src/views/Home.vue
Normal file
371
src/views/Home.vue
Normal file
@@ -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>
|
||||||
434
src/views/Products.vue
Normal file
434
src/views/Products.vue
Normal file
@@ -0,0 +1,434 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { images, videos } from '@/assets/images'
|
||||||
|
|
||||||
|
const activeTab = ref('enterprise')
|
||||||
|
const selectedProduct = ref<{ name: string; details: string; video: string } | null>(null)
|
||||||
|
const isSpeaking = ref(false)
|
||||||
|
const speechSynthesis = window.speechSynthesis
|
||||||
|
let currentUtterance: SpeechSynthesisUtterance | null = null
|
||||||
|
|
||||||
|
const openDetail = (product: { name: string; details: string; video: string }) => {
|
||||||
|
selectedProduct.value = product
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeDetail = () => {
|
||||||
|
stopSpeaking()
|
||||||
|
selectedProduct.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const speak = () => {
|
||||||
|
if (!selectedProduct.value) return
|
||||||
|
|
||||||
|
stopSpeaking()
|
||||||
|
|
||||||
|
currentUtterance = new SpeechSynthesisUtterance(selectedProduct.value.details)
|
||||||
|
currentUtterance.lang = 'zh-CN'
|
||||||
|
currentUtterance.rate = 1
|
||||||
|
currentUtterance.pitch = 1
|
||||||
|
|
||||||
|
currentUtterance.onend = () => {
|
||||||
|
isSpeaking.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
currentUtterance.onerror = () => {
|
||||||
|
isSpeaking.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
speechSynthesis.speak(currentUtterance)
|
||||||
|
isSpeaking.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopSpeaking = () => {
|
||||||
|
if (speechSynthesis.speaking) {
|
||||||
|
speechSynthesis.cancel()
|
||||||
|
}
|
||||||
|
isSpeaking.value = false
|
||||||
|
currentUtterance = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleSpeaking = () => {
|
||||||
|
if (isSpeaking.value) {
|
||||||
|
stopSpeaking()
|
||||||
|
} else {
|
||||||
|
speak()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: 'enterprise', name: '企业智能体集群', icon: 'layers' },
|
||||||
|
{ id: 'agent', name: '智能体平台', icon: 'bot' },
|
||||||
|
{ id: 'analytics', name: '数据分析系统', icon: 'bar' },
|
||||||
|
{ id: 'mobile', name: '移动端应用', icon: 'mobile' },
|
||||||
|
{ id: 'knowledge', name: '知识库安全增强', icon: 'lock' },
|
||||||
|
{ id: 'training', name: '智能体使用培训', icon: 'graduation' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const products = {
|
||||||
|
enterprise: [
|
||||||
|
{
|
||||||
|
name: '企业智能体中枢',
|
||||||
|
description: '企业智能体集群的核心控制中心，负责智能体的调度、协调和管理，实现多智能体协作',
|
||||||
|
features: ['智能体编排', '任务调度', '协作协调', '统一管理'],
|
||||||
|
image: images.enterprise,
|
||||||
|
video: videos.enterprise,
|
||||||
|
details: '企业智能体中枢是整个智能体集群的大脑和神经中枢，负责统筹调度所有智能体的协作运行。它支持可视化编排智能体工作流，实现跨智能体的任务分配和状态同步。通过统一的管理界面，企业可以实时监控所有智能体的运行状态，灵活调整工作策略。系统还支持智能体间的消息传递和数据共享，打破信息孤岛，实现真正的协同工作。无论是简单的任务分发还是复杂的多智能体协作场景，企业智能体中枢都能提供高效可靠的调度能力。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '流程自动化智能体',
|
||||||
|
description: '自动化执行企业业务流程的智能体集群，提升运营效率',
|
||||||
|
features: ['流程编排', '智能决策', '异常处理', '监控告警'],
|
||||||
|
image: images.supplyChain,
|
||||||
|
video: videos.supplyChain,
|
||||||
|
details: '流程自动化智能体专为企业业务流程自动化设计，能够模拟人工操作完成重复性、规则性的工作流程。它支持从流程设计、执行到监控的全生命周期管理，内置丰富的流程模板和智能决策引擎。当遇到异常情况时，智能体能够自动识别并触发预设的处理策略，确保流程顺畅运行。通过实时监控和数据分析，企业可以持续优化流程效率，降低运营成本。该智能体已成功应用于财务审批、采购流程、客户服务等多个业务场景。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据分析智能体',
|
||||||
|
description: '智能数据分析与洞察生成，助力企业数据驱动决策',
|
||||||
|
features: ['自动报表', '异常检测', '趋势预测', '智能洞察'],
|
||||||
|
image: images.crm,
|
||||||
|
video: videos.crm,
|
||||||
|
details: '数据分析智能体利用先进的机器学习算法和自然语言处理技术，自动完成数据采集、清洗、分析和报告生成。它能够从海量数据中发现隐藏的规律和趋势，提供精准的业务洞察。系统支持自定义报表模板和智能预警功能，当关键指标出现异常时会及时通知相关人员。通过交互式数据可视化，用户可以直观地理解数据背后的业务含义。无论您是需要日报周报的自动化生成，还是深度的业务分析报告，数据分析智能体都能满足您的需求。'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
agent: [
|
||||||
|
{
|
||||||
|
name: '智能客服助手',
|
||||||
|
description: '基于大语言模型的智能客服系统，支持多渠道接入',
|
||||||
|
features: ['自然语言交互', '多轮对话', '情绪识别', '知识库管理'],
|
||||||
|
image: images.aiChatbot,
|
||||||
|
video: videos.aiChatbot,
|
||||||
|
details: '智能客服助手基于大语言模型构建，具备强大的自然语言理解和生成能力。它支持文本、语音等多种交互方式，能够处理复杂的客户咨询和问题解决。系统通过情绪识别技术感知客户情绪变化，提供更加贴心的服务体验。智能客服助手还具备学习能力，能够不断积累和优化应答策略。通过与企业知识库的深度集成，它能够准确回答产品咨询、技术支持、售后服务等各类问题，大幅提升客户满意度和服务效率。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '智能营销助手',
|
||||||
|
description: '自动化营销智能体，实现精准获客和个性化推荐',
|
||||||
|
features: ['智能推荐', '自动生成内容', '客户分群', '效果分析'],
|
||||||
|
image: images.aiMarketing,
|
||||||
|
video: videos.aiMarketing,
|
||||||
|
details: '智能营销助手是企业数字化营销的得力帮手，能够自动完成市场分析、内容创作、客户触达等营销全流程。它基于客户行为数据进行智能分群，实现精准的个性化推荐。系统内置强大的内容生成引擎，能够自动撰写营销文案、设计营销活动方案。通过实时效果分析，营销团队可以快速调整策略，优化投放效果。智能营销助手支持与主流营销平台的无缝对接，让营销工作更加高效智能。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '智能办公助手',
|
||||||
|
description: '提升办公效率的AI助手，支持文档处理、会议纪要等',
|
||||||
|
features: ['文档总结', '自动翻译', '会议记录', '任务管理'],
|
||||||
|
image: images.aiOffice,
|
||||||
|
video: videos.aiOffice,
|
||||||
|
details: '智能办公助手致力于提升企业办公效率，让员工从繁琐的事务性工作中解放出来。它支持文档智能总结、自动翻译、会议纪要整理等多种办公场景。在会议中，它能够实时记录要点并生成结构化的会议纪要；在文档处理中，它可以快速提炼核心内容、生成摘要。智能办公助手还集成了任务管理功能，能够帮助用户合理规划工作安排，提高时间管理效率。无论是日常办公还是团队协作，它都是不可或缺的AI工作伙伴。'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
analytics: [
|
||||||
|
{
|
||||||
|
name: '数据中台',
|
||||||
|
description: '统一数据管理与分析平台，打破数据孤岛',
|
||||||
|
features: ['数据集成', '实时计算', '数据治理', 'API开放'],
|
||||||
|
image: images.dataCenter,
|
||||||
|
video: videos.dataCenter,
|
||||||
|
details: '数据中台是企业数据资产管理的核心平台，旨在打破部门间的数据壁垒，实现数据的统一管理和价值最大化。它支持多源数据的实时采集和集成，构建统一的数据标准和规范。通过数据治理功能，确保数据的质量和安全性。数据中台提供丰富的API接口，方便业务系统快速接入和使用数据。无论是数据仓库建设、实时数据处理还是数据服务开放，数据中台都能提供全面的技术支撑，帮助企业构建数据驱动的业务体系。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '商业智能BI',
|
||||||
|
description: '可视化数据分析工具，助力企业决策',
|
||||||
|
features: ['多维分析', '自定义报表', '智能预警', '数据钻取'],
|
||||||
|
image: images.biDashboard,
|
||||||
|
video: videos.biDashboard,
|
||||||
|
details: '商业智能BI平台提供强大的数据可视化和分析能力，帮助企业快速洞察业务数据。它支持多维数据分析和自定义报表设计，用户可以根据业务需求灵活创建各类分析视图。系统内置智能预警功能，当关键业务指标偏离预期时会及时发送预警通知。通过数据钻取功能，用户可以从宏观到微观深入分析数据，发现问题根源。商业智能BI还支持移动端访问，让决策层随时随地掌握业务动态，做出更加精准的商业决策。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '预测分析平台',
|
||||||
|
description: '基于机器学习的预测分析解决方案',
|
||||||
|
features: ['趋势预测', '异常检测', '需求预测', '智能推荐'],
|
||||||
|
image: images.predictiveAnalytics,
|
||||||
|
video: videos.predictiveAnalytics,
|
||||||
|
details: '预测分析平台利用机器学习算法对历史数据进行深度挖掘，为企业提供精准的预测分析能力。它支持销售预测、需求预测、库存预测等多种预测场景，帮助企业提前做出决策。系统具备强大的异常检测能力，能够及时发现数据中的异常模式和潜在风险。通过智能推荐引擎，平台还能为业务决策提供数据驱动的建议。预测分析平台支持模型训练、评估和部署的全流程管理，让企业能够快速构建和应用预测模型，提升业务竞争力。'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
mobile: [
|
||||||
|
{
|
||||||
|
name: '企业移动App',
|
||||||
|
description: '为企业量身定制的移动应用解决方案',
|
||||||
|
features: ['原生开发', '跨平台支持', '安全加固', '离线支持'],
|
||||||
|
image: images.mobileApp,
|
||||||
|
video: videos.mobileApp,
|
||||||
|
details: '企业移动App为企业提供全方位的移动办公解决方案，支持iOS和Android双平台原生开发。它集成了企业核心业务系统，让员工随时随地处理工作事务。应用采用多层次安全加固技术，确保企业数据的安全传输和存储。即使在网络不稳定的环境下，App也能通过离线数据同步功能保证业务连续性。从需求分析、UI设计到开发测试，我们提供一站式的移动应用开发服务，帮助企业快速实现移动化转型。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '微信小程序',
|
||||||
|
description: '基于微信生态的轻量级应用开发',
|
||||||
|
features: ['快速开发', '社交分享', '支付集成', '数据同步'],
|
||||||
|
image: images.wechatMini,
|
||||||
|
video: videos.wechatMini,
|
||||||
|
details: '微信小程序依托庞大的微信用户生态，为企业提供轻量级的移动应用解决方案。它无需下载安装，用户扫码即可使用，大大降低了用户获取门槛。小程序支持社交分享功能，能够快速传播和获取用户。通过与微信支付的深度集成，实现便捷的在线交易。系统支持数据实时同步，确保用户体验的一致性。我们提供从需求分析到上线运营的全流程服务，帮助企业快速构建和推广微信小程序，拓展业务渠道。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '移动H5应用',
|
||||||
|
description: '响应式移动端Web应用，一次开发多端适配',
|
||||||
|
features: ['响应式设计', '流畅体验', '性能优化', '多端兼容'],
|
||||||
|
image: images.mobileH5,
|
||||||
|
video: videos.mobileH5,
|
||||||
|
details: '移动H5应用采用响应式设计理念，一次开发即可适配手机、平板等多种移动设备。它基于现代Web技术栈构建，提供接近原生应用的流畅体验。通过代码分割和资源优化，确保应用在移动端的加载速度和运行性能。移动H5应用支持离线缓存和本地存储，提升用户体验的同时降低服务器压力。我们提供从设计到开发的全流程服务，帮助企业快速构建跨平台的移动Web应用，覆盖更广泛的用户群体。'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
knowledge: [
|
||||||
|
{
|
||||||
|
name: '企业知识库',
|
||||||
|
description: '集中式企业知识管理平台，支持文档、图片、视频等多种格式存储',
|
||||||
|
features: ['多格式支持', '版本管理', '权限控制', '全文搜索'],
|
||||||
|
image: images.knowledgeBase,
|
||||||
|
video: videos.knowledgeBase,
|
||||||
|
details: '企业知识库是集中式的知识管理平台，支持文档、图片、视频等多种格式的存储和管理。它提供完善的版本控制功能，确保知识内容的可追溯性。通过精细化的权限管理，企业可以控制不同用户对知识内容的访问权限。系统支持全文搜索和标签分类，让用户能够快速找到所需的知识内容。企业知识库还支持知识的协作编辑和评论交流，促进知识的共享和创新。无论是产品文档、技术手册还是经验总结，都能在知识库中得到有效的管理和应用。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '知识安全防护',
|
||||||
|
description: '企业级知识安全保障体系，防止敏感信息泄露和未授权访问',
|
||||||
|
features: ['数据加密', '访问审计', '水印追踪', '脱敏处理'],
|
||||||
|
image: images.knowledgeSecurity,
|
||||||
|
video: videos.knowledgeSecurity,
|
||||||
|
details: '知识安全防护体系为企业知识库提供全方位的安全保障。它采用端到端的数据加密技术，确保知识内容在传输和存储过程中的安全性。通过访问审计功能，企业可以实时监控和记录所有知识访问行为，便于安全审计和追溯。系统支持数字水印和文档追踪功能，有效防止敏感信息的非法传播。对于包含个人信息的数据，系统提供智能脱敏处理功能，确保数据合规使用。知识安全防护体系帮助企业构建完整的知识安全防线，保护核心知识产权。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '智能知识检索',
|
||||||
|
description: '基于AI的智能搜索引擎，支持自然语言查询和语义理解',
|
||||||
|
features: ['语义搜索', '智能问答', '知识图谱', '推荐引擎'],
|
||||||
|
image: images.knowledgeSearch,
|
||||||
|
video: videos.knowledgeSearch,
|
||||||
|
details: '智能知识检索系统基于先进的自然语言处理和机器学习技术构建，能够理解用户的自然语言查询意图。它支持语义搜索，不仅匹配关键词，还能理解查询的语义和上下文。系统内置智能问答功能，能够直接回答用户的问题，而不仅仅是返回文档列表。通过知识图谱技术，系统能够建立知识之间的关联关系，提供更全面的信息检索结果。智能推荐引擎会根据用户的搜索历史和偏好，推荐相关的知识内容。智能知识检索让企业知识的获取更加高效便捷。'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
training: [
|
||||||
|
{
|
||||||
|
name: '智能体基础培训',
|
||||||
|
description: '从零开始学习智能体平台使用，掌握基础操作和核心功能',
|
||||||
|
features: ['基础操作', '界面导航', '配置入门', '常见问题'],
|
||||||
|
image: images.trainingBasic,
|
||||||
|
video: videos.trainingBasic,
|
||||||
|
details: '智能体基础培训课程专为初次接触智能体平台的用户设计，帮助您快速掌握平台的基本操作和核心功能。课程内容涵盖平台界面导航、智能体创建与配置、基础工作流设计等核心知识点。通过理论讲解和实操练习相结合的方式，让您在短时间内熟悉平台的使用方法。培训还包含常见问题解答和最佳实践分享，帮助您避免常见误区。完成基础培训后，您将能够独立完成智能体的基本配置和日常使用，为深入学习打下坚实基础。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '高级应用培训',
|
||||||
|
description: '深入学习智能体高级功能，包括自定义工作流和API集成',
|
||||||
|
features: ['高级配置', '工作流定制', 'API集成', '性能优化'],
|
||||||
|
image: images.trainingAdvanced,
|
||||||
|
video: videos.trainingAdvanced,
|
||||||
|
details: '高级应用培训课程面向有一定基础的用户，深入讲解智能体平台的高级功能和应用技巧。课程内容包括高级智能体配置、复杂工作流定制、外部系统API集成等进阶知识点。通过实际案例分析和动手实践，让您掌握解决复杂业务场景的方法。培训还涵盖性能优化和故障排查技巧，帮助您构建高效稳定的智能体应用。完成高级培训后，您将具备独立设计和开发复杂智能体应用的能力，能够应对企业级的业务需求。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '实战案例培训',
|
||||||
|
description: '通过真实案例学习各行业应用场景和最佳实践',
|
||||||
|
features: ['案例分析', '场景模拟', '解决方案', '经验分享'],
|
||||||
|
image: images.trainingCase,
|
||||||
|
video: videos.trainingCase,
|
||||||
|
details: '实战案例培训课程通过真实的企业案例，帮助您学习智能体在各行业的应用场景和最佳实践。课程精选制造业、金融、医疗、零售等多个行业的典型案例，深入分析业务需求、技术方案和实施过程。通过场景模拟和案例演练，让您亲身体验智能体的应用过程。培训还邀请行业专家分享实践经验和心得，帮助您拓宽视野，提升解决实际问题的能力。无论您处于哪个行业，都能从实战案例培训中获得有价值的参考和启发。'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{ icon: 'shield', title: '安全可靠', desc: '企业级安全防护' },
|
||||||
|
{ icon: 'globe', title: '全球部署', desc: '多地域节点支持' },
|
||||||
|
{ icon: 'database', title: '数据安全', desc: '加密存储保障' },
|
||||||
|
{ icon: 'layers', title: '灵活扩展', desc: '弹性架构设计' }
|
||||||
|
]
|
||||||
|
</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">
|
||||||
|
多元化的产品体系，满足企业不同场景的数字化需求
|
||||||
|
</p>
|
||||||
|
</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
|
||||||
|
v-for="(feature, index) in features"
|
||||||
|
:key="index"
|
||||||
|
class="bg-white rounded-xl p-6 text-center"
|
||||||
|
>
|
||||||
|
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg v-if="feature.icon === 'shield'" 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="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="feature.icon === 'globe'" 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.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="feature.icon === 'database'" 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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="feature.icon === 'layers'" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-gray-900 mb-1">{{ feature.title }}</h3>
|
||||||
|
<p class="text-sm text-gray-600">{{ feature.desc }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 mb-12">
|
||||||
|
<button
|
||||||
|
v-for="tab in tabs"
|
||||||
|
:key="tab.id"
|
||||||
|
class="flex items-center space-x-2 px-6 py-3 rounded-xl font-medium transition-all duration-300"
|
||||||
|
:class="activeTab === tab.id
|
||||||
|
? 'bg-primary-600 text-white shadow-lg'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
||||||
|
@click="activeTab = tab.id"
|
||||||
|
>
|
||||||
|
<svg v-if="tab.icon === 'layers'" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="tab.icon === 'bot'" 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="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="tab.icon === 'bar'" 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="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>
|
||||||
|
<svg v-else-if="tab.icon === 'mobile'" 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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="tab.icon === 'lock'" 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="tab.icon === 'graduation'" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
||||||
|
</svg>
|
||||||
|
<span>{{ tab.name }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<div
|
||||||
|
v-for="(product, index) in products[activeTab as keyof typeof products]"
|
||||||
|
:key="index"
|
||||||
|
class="card-hover bg-gray-50 rounded-2xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<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 flex items-center justify-center"
|
||||||
|
@click="openDetail(product)"
|
||||||
|
>
|
||||||
|
了解详情
|
||||||
|
<svg class="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>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
预约定制咨询
|
||||||
|
<svg class="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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="selectedProduct"
|
||||||
|
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
|
||||||
|
@click.self="closeDetail"
|
||||||
|
>
|
||||||
|
<div class="bg-white rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-y-auto shadow-2xl">
|
||||||
|
<div class="sticky top-0 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900">{{ selectedProduct.name }}</h3>
|
||||||
|
<button
|
||||||
|
class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors"
|
||||||
|
@click="closeDetail"
|
||||||
|
>
|
||||||
|
<svg class="w-5 h-5 text-gray-500" 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 class="p-6">
|
||||||
|
<div class="aspect-video rounded-xl overflow-hidden mb-6 bg-gray-900">
|
||||||
|
<video
|
||||||
|
:src="selectedProduct.video"
|
||||||
|
controls
|
||||||
|
class="w-full h-full object-contain"
|
||||||
|
autoplay
|
||||||
|
muted
|
||||||
|
loop
|
||||||
|
>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h4 class="text-lg font-semibold text-gray-900">产品介绍</h4>
|
||||||
|
<button
|
||||||
|
class="flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors"
|
||||||
|
:class="isSpeaking ? 'bg-red-100 text-red-600 hover:bg-red-200' : 'bg-primary-100 text-primary-600 hover:bg-primary-200'"
|
||||||
|
@click="toggleSpeaking"
|
||||||
|
>
|
||||||
|
<svg v-if="!isSpeaking" 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="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else 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="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
|
||||||
|
</svg>
|
||||||
|
<span>{{ isSpeaking ? '停止朗读' : '语音朗读' }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-gray-700 leading-relaxed text-lg">
|
||||||
|
{{ selectedProduct.details }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 border-t border-gray-100 px-6 py-4">
|
||||||
|
<button
|
||||||
|
class="btn-primary w-full"
|
||||||
|
@click="closeDetail"
|
||||||
|
>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
281
src/views/Solutions.vue
Normal file
281
src/views/Solutions.vue
Normal file
@@ -0,0 +1,281 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { images } from '@/assets/images'
|
||||||
|
|
||||||
|
|
||||||
|
const activeSolution = ref('manufacturing')
|
||||||
|
|
||||||
|
const solutions = [
|
||||||
|
{
|
||||||
|
id: 'manufacturing',
|
||||||
|
name: '智能制造',
|
||||||
|
icon: 'factory',
|
||||||
|
color: 'bg-blue-500',
|
||||||
|
description: '助力制造业数字化转型，实现智能化生产与管理',
|
||||||
|
features: ['智能产线', '质量检测', '设备预测维护', '供应链协同'],
|
||||||
|
image: images.manufacturing,
|
||||||
|
cases: ['某汽车零部件企业智能工厂', '某电子制造企业质量检测系统']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'finance',
|
||||||
|
name: '金融科技',
|
||||||
|
icon: 'building',
|
||||||
|
color: 'bg-green-500',
|
||||||
|
description: '为金融机构提供智能化解决方案，提升服务效率',
|
||||||
|
features: ['智能风控', '精准营销', '数字化运营', '合规管理'],
|
||||||
|
image: images.finance,
|
||||||
|
cases: ['某银行智能客服系统', '某保险企业营销平台']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'healthcare',
|
||||||
|
name: '医疗健康',
|
||||||
|
icon: 'heart',
|
||||||
|
color: 'bg-red-500',
|
||||||
|
description: '构建智慧医疗生态，提升医疗服务质量',
|
||||||
|
features: ['智能诊断', '健康管理', '医疗大数据', '远程会诊'],
|
||||||
|
image: images.healthcare,
|
||||||
|
cases: ['某医院智慧病房系统', '某健康管理平台']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'education',
|
||||||
|
name: '教育培训',
|
||||||
|
icon: 'graduation',
|
||||||
|
color: 'bg-purple-500',
|
||||||
|
description: '打造智慧教育体系，赋能教育数字化升级',
|
||||||
|
features: ['在线学习平台', '智能辅导', '教育大数据', '校园管理'],
|
||||||
|
image: images.education,
|
||||||
|
cases: ['某高校智慧校园平台', '某教育机构在线学习系统']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'retail',
|
||||||
|
name: '零售电商',
|
||||||
|
icon: 'shopping',
|
||||||
|
color: 'bg-orange-500',
|
||||||
|
description: '构建全渠道零售解决方案，提升用户体验',
|
||||||
|
features: ['智能推荐', '全渠道融合', '库存管理', '会员运营'],
|
||||||
|
image: images.retail,
|
||||||
|
cases: ['某连锁零售会员系统', '某电商平台智能推荐']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'logistics',
|
||||||
|
name: '物流运输',
|
||||||
|
icon: 'truck',
|
||||||
|
color: 'bg-cyan-500',
|
||||||
|
description: '智能化物流解决方案，提升运输效率',
|
||||||
|
features: ['智能调度', '实时追踪', '路径优化', '仓储管理'],
|
||||||
|
image: images.logistics,
|
||||||
|
cases: ['某物流公司运输管理系统', '某仓储企业WMS系统']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const currentSolution = ref(solutions[0])
|
||||||
|
|
||||||
|
const setActiveSolution = (solution: typeof solutions[0]) => {
|
||||||
|
activeSolution.value = solution.id
|
||||||
|
currentSolution.value = solution
|
||||||
|
}
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{ icon: 'users', title: '需求调研', desc: '深入了解业务痛点' },
|
||||||
|
{ icon: 'settings', title: '方案设计', desc: '定制专属解决方案' },
|
||||||
|
{ icon: 'factory', title: '开发实施', desc: '专业团队交付落地' },
|
||||||
|
{ icon: 'check', title: '持续优化', desc: '运维支持迭代升级' }
|
||||||
|
]
|
||||||
|
</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">
|
||||||
|
深耕各行业场景，提供针对性的数字化转型方案
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-16">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||||
|
<button
|
||||||
|
v-for="solution in solutions"
|
||||||
|
:key="solution.id"
|
||||||
|
class="flex flex-col items-center p-6 rounded-xl transition-all duration-300"
|
||||||
|
:class="activeSolution === solution.id
|
||||||
|
? 'bg-primary-100 ring-2 ring-primary-500'
|
||||||
|
: 'bg-gray-50 hover:bg-gray-100'"
|
||||||
|
@click="setActiveSolution(solution)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-14 h-14 rounded-xl flex items-center justify-center mb-3"
|
||||||
|
:class="solution.color"
|
||||||
|
>
|
||||||
|
<svg v-if="solution.icon === 'factory'" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<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-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="solution.icon === 'building'" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<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-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="solution.icon === 'heart'" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="solution.icon === 'graduation'" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.906-3.453M12 14l-6.906-3.453M12 14l0 0m0 0l0 0m0 0l0 0"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="solution.icon === 'shopping'" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="solution.icon === 'truck'" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="font-medium" :class="activeSolution === solution.id ? 'text-primary-700' : 'text-gray-700'">
|
||||||
|
{{ solution.name }}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</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 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
class="inline-block px-3 py-1 rounded-full text-sm font-medium mb-4"
|
||||||
|
:class="currentSolution.color.replace('500', '100') + ' ' + currentSolution.color.replace('bg-', 'text-')"
|
||||||
|
>
|
||||||
|
{{ currentSolution.name }}
|
||||||
|
</span>
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
{{ currentSolution.name }}解决方案
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 mb-6">
|
||||||
|
{{ currentSolution.description }}
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-3 mb-8">
|
||||||
|
<li
|
||||||
|
v-for="(feature, index) in currentSolution.features"
|
||||||
|
: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">{{ feature }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="btn-primary flex items-center">
|
||||||
|
获取方案详情
|
||||||
|
<svg class="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>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div
|
||||||
|
class="absolute -inset-4 rounded-2xl blur-xl opacity-20"
|
||||||
|
:class="currentSolution.color"
|
||||||
|
></div>
|
||||||
|
<img
|
||||||
|
:src="currentSolution.image"
|
||||||
|
:alt="currentSolution.name"
|
||||||
|
class="relative rounded-2xl shadow-2xl w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-16">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div
|
||||||
|
v-for="(caseItem, index) in currentSolution.cases"
|
||||||
|
:key="index"
|
||||||
|
class="bg-gray-50 rounded-xl p-6 border border-gray-100"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
<svg class="w-5 h-5 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>
|
||||||
|
<h4 class="font-semibold text-gray-900 mb-1">{{ caseItem }}</h4>
|
||||||
|
<p class="text-sm text-gray-600">了解更多关于该案例的详细信息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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="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-4 gap-6">
|
||||||
|
<div
|
||||||
|
v-for="(step, index) in steps"
|
||||||
|
:key="index"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg v-if="step.icon === 'users'" 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>
|
||||||
|
<svg v-else-if="step.icon === 'settings'" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="step.icon === 'factory'" 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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="step.icon === 'check'" 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="M5 13l4 4L19 7"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -top-2 -right-2 w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-gray-900 mb-1">{{ step.title }}</h3>
|
||||||
|
<p class="text-sm text-gray-600">{{ step.desc }}</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">
|
||||||
|
预约方案咨询
|
||||||
|
<svg class="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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
38
tailwind.config.js
Normal file
38
tailwind.config.js
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
800: '#1e40af',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
50: '#f0fdf4',
|
||||||
|
100: '#dcfce7',
|
||||||
|
200: '#bbf7d0',
|
||||||
|
300: '#86efac',
|
||||||
|
400: '#4ade80',
|
||||||
|
500: '#22c55e',
|
||||||
|
600: '#16a34a',
|
||||||
|
700: '#15803d',
|
||||||
|
800: '#166534',
|
||||||
|
900: '#14532d',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import { resolve } from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname, 'src')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user