<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创新科技 | 引领数字化未来</title>
<!-- 引入Element UI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入Element UI JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

<!-- Tailwind CSS 配置 -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CBCB',
dark: '#1D2939',
light: '#F9FAFB',
gray: {
50: '#F9FAFB',
100: '#F3F4F6',
200: '#E5E7EB',
300: '#D1D5DB',
400: '#9CA3AF',
500: '#6B7280',
600: '#4B5563',
700: '#374151',
800: '#1F2937',
900: '#111827'
}
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>

<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.bg-gradient-primary {
background: linear-gradient(135deg, #165DFF 0%, #36CBCB 100%);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
}
</style>
</head>

<body class="font-inter bg-white text-gray-800">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-primary flex items-center">
<i class="fa-solid fa-rocket mr-2"></i>
<span>创新科技</span>
</a>
</div>

<!-- 桌面端菜单 -->
<nav class="hidden md:flex items-center space-x-8">
<a href="#home" class="text-gray-800 hover:text-primary transition-colors font-medium">首页</a>
<a href="#about" class="text-gray-800 hover:text-primary transition-colors font-medium">关于我们</a>
<a href="#services" class="text-gray-800 hover:text-primary transition-colors font-medium">服务</a>
<a href="#products" class="text-gray-800 hover:text-primary transition-colors font-medium">产品</a>
<a href="#cases" class="text-gray-800 hover:text-primary transition-colors font-medium">案例</a>
<a href="#contact" class="text-gray-800 hover:text-primary transition-colors font-medium">联系我们</a>
<el-button type="primary" @click="handleLogin">登录</el-button>
</nav>

<!-- 移动端菜单按钮 -->
<button id="menuBtn" class="md:hidden text-gray-800 text-xl" @click="toggleMobileMenu">
<i class="fa-solid fa-bars"></i>
</button>
</div>

<!-- 移动端菜单 -->
<div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg absolute w-full">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
<a href="#home" class="text-gray-800 hover:text-primary transition-colors py-2" @click="toggleMobileMenu">首页</a>
<a href="#about" class="text-gray-800 hover:text-primary transition-colors py-2" @click="toggleMobileMenu">关于我们</a>
<a href="#services" class="text-gray-800 hover:text-primary transition-colors py-2" @click="toggleMobileMenu">服务</a>
<a href="#products" class="text-gray-800 hover:text-primary transition-colors py-2" @click="toggleMobileMenu">产品</a>
<a href="#cases" class="text-gray-800 hover:text-primary transition-colors py-2" @click="toggleMobileMenu">案例</a>
<a href="#contact" class="text-gray-800 hover:text-primary transition-colors py-2" @click="toggleMobileMenu">联系我们</a>
<el-button type="primary" @click="handleLogin">登录</el-button>
</div>
</div>
</header>

<!-- 主要内容 -->
<main id="app">
<!-- 首页/英雄区 -->
<section id="home" class="pt-24 md:pt-0 min-h-screen flex items-center relative overflow-hidden bg-gradient-to-br from-primary/5 to-secondary/5">
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-secondary/5"></div>
<div class="absolute top-0 right-0 w-1/2 h-full opacity-10">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
<path fill="#165DFF" d="M37.9,-65.7C49.4,-59.1,60.1,-48.8,67.5,-36.8C74.9,-24.9,79.1,-10.4,77.7,3.6C76.3,17.6,69.3,31.2,59.8,40.8C50.4,50.3,38.5,55.8,26.3,62.1C14.1,68.3,1.5,75.4,-11.9,76.4C-24.9,77.3,-39.7,72.1,-51.3,63.3C-62.9,54.5,-71.3,42.1,-75.7,28.8C-80.1,15.5,-80.5,1.4,-76.9,-12.6C-73.3,-26.6,-65.8,-40.7,-56.4,-49.9C-47,-59.1,-35.7,-63.5,-23.8,-68.3C-11.9,-73,-6,-78.1,4.9,-80.6C15.8,-83.1,31.6,-83,43.3,-76.7C55,-70.3,62.5,-57.9,67.5,-44.2C72.5,-30.5,75,-15.4,74.5,-0.1C74,15.2,70.4,30.4,63.4,41.5C56.4,52.5,46,59.5,34.8,64.4C23.6,69.3,11.8,72.2,-0.6,74.1C-13,76,-26.1,76.9,-39.1,72.9C-52.1,68.9,-65.1,59.9,-73.3,47.9C-81.5,35.9,-85,20.9,-85.4,5.9C-85.9,-9.1,-83.3,-24.1,-76.9,-36.6C-70.5,-49.1,-60.4,-59.1,-48.8,-65.4C-37.2,-71.8,-24.1,-74.5,-10.5,-76.1C3.1,-77.8,16.4,-78.4,28.9,-74.5C41.3,-70.7,53,-62.3,60.8,-50.8C68.6,-39.4,72.6,-24.9,75.1,-9.4C77.6,6.2,78.7,22.6,75.6,37.1C72.5,51.7,65.2,64.3,54.5,71.4C43.8,78.5,29.7,80.1,15.4,81.6C1.1,83.1,-13.3,84.4,-27.6,80.8C-41.9,77.2,-56.1,68.8,-66.7,56.9C-77.2,45,-84.2,29.7,-87.4,13.9C-90.6,-1.9,-89.9,-17.8,-83.6,-31.6C-77.3,-45.4,-65.4,-57.1,-51.6,-63.6C-37.8,-69.9,-23.1,-71.1,-8.1,-73.5C6.9,-75.9,22.5,-80.5,37.9,-65.7Z" transform="translate(100 100)" />
</svg>
</div>
</div>

<div class="container mx-auto px-4 py-20 md:py-32 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="fade-in">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-dark">
创新科技<br>引领数字化未来
</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mt-6 mb-8 max-w-lg">
我们提供全方位的数字化转型解决方案，帮助企业在数字时代保持竞争优势，实现可持续发展。
</p>
<div class="flex flex-wrap gap-4">
<a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium transition-all hover:shadow-lg flex items-center">
了解更多 <i class="fa-solid fa-arrow-right ml-2"></i>
</a>
<a href="#services" class="bg-transparent border-2 border-primary text-primary hover:bg-primary/5 px-8 py-3 rounded-lg font-medium transition-all flex items-center">
我们的服务 <i class="fa-solid fa-th-list ml-2"></i>
</a>
</div>

<div class="mt-12 flex items-center space-x-8">
<div>
<div class="text-4xl font-bold text-primary mb-1">200+</div>
<p class="text-gray-500 text-sm">企业客户</p>
</div>
<div class="h-12 w-px bg-gray-200"></div>
<div>
<div class="text-4xl font-bold text-primary mb-1">15+</div>
<p class="text-gray-500 text-sm">行业经验</p>
</div>
<div class="h-12 w-px bg-gray-200"></div>
<div>
<div class="text-4xl font-bold text-primary mb-1">98%</div>
<p class="text-gray-500 text-sm">客户满意度</p>
</div>
</div>
</div>

<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-3xl blur opacity-50 animate-float"></div>
<div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden hover-lift">
<img src="https://picsum.photos/id/180/800/600" alt="企业解决方案" class="w-full h-auto">
<div class="absolute inset-0 bg-gradient-to-t from-dark/70 via-dark/30 to-transparent p-8 flex flex-col justify-end">
<h3 class="text-2xl font-bold text-white mb-2">数字化转型</h3>
<p class="text-white/90 mb-4">全方位的技术支持与创新解决方案</p>
<div class="flex space-x-3">
<span class="bg-white/20 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm">云计算</span>
<span class="bg-white/20 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm">大数据</span>
<span class="bg-white/20 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm">人工智能</span>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-primary animate-bounce">
<a href="#about" class="block">
<i class="fa-solid fa-chevron-down"></i>
</a>
</div>
</section>

<!-- 关于我们 -->
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">关于我们</h2>
<div class="w-20 h-1 bg-primary mx-auto mt-4 mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">创新科技成立于2010年，是一家专注于为企业提供数字化转型解决方案的高新技术企业。</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-3xl blur opacity-50"></div>
<div class="relative rounded-2xl overflow-hidden shadow-xl">
<img src="https://picsum.photos/id/1071/800/600" alt="团队照片" class="w-full h-auto">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-8">
<div class="flex items-center">
<div class="flex -space-x-4">
<img src="https://picsum.photos/id/1005/100/100" alt="团队成员" class="w-12 h-12 rounded-full border-2 border-white">
<img src="https://picsum.photos/id/1006/100/100" alt="团队成员" class="w-12 h-12 rounded-full border-2 border-white">
<img src="https://picsum.photos/id/1012/100/100" alt="团队成员" class="w-12 h-12 rounded-full border-2 border-white">
<img src="https://picsum.photos/id/1025/100/100" alt="团队成员" class="w-12 h-12 rounded-full border-2 border-white">
</div>
<div class="ml-4">
<h4 class="text-white font-medium">200+专业技术团队</h4>
<p class="text-white/80 text-sm">来自全球顶尖科技企业</p>
</div>
</div>
</div>
</div>
</div>

<div>
<h3 class="text-3xl font-bold mb-6">我们的使命</h3>
<p class="text-gray-600 mb-8">
通过创新技术推动企业数字化转型，帮助客户实现业务增长与效率提升。我们坚信，技术的力量在于为企业创造价值，而不仅仅是提供工具。
</p>

<div class="space-y-6">
<div class="flex">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-lightbulb text-primary"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-lg mb-2">创新驱动</h4>
<p class="text-gray-600">持续投入研发，探索前沿技术，为客户提供创新解决方案。</p>
</div>
</div>

<div class="flex">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-users text-primary"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-lg mb-2">客户至上</h4>
<p class="text-gray-600">深入理解客户需求，提供定制化解决方案，与客户共同成长。</p>
</div>
</div>

<div class="flex">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-handshake text-primary"></i>
</div>
<div class="ml-4">
<h4 class="font-bold text-lg mb-2">合作共赢</h4>
<p class="text-gray-600">与合作伙伴建立长期稳定的合作关系，共同创造价值。</p>
</div>
</div>
</div>

<div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="bg-light rounded-xl p-6 text-center hover-lift">
<div class="text-4xl font-bold text-primary mb-2">15+</div>
<p class="text-gray-600">年行业经验</p>
</div>
<div class="bg-light rounded-xl p-6 text-center hover-lift">
<div class="text-4xl font-bold text-primary mb-2">200+</div>
<p class="text-gray-600">专业团队</p>
</div>
<div class="bg-light rounded-xl p-6 text-center hover-lift">
<div class="text-4xl font-bold text-primary mb-2">500+</div>
<p class="text-gray-600">企业客户</p>
</div>
<div class="bg-light rounded-xl p-6 text-center hover-lift">
<div class="text-4xl font-bold text-primary mb-2">30+</div>
<p class="text-gray-600">技术专利</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- 服务 -->
<section id="services" class="py-20 bg-light">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">我们的服务</h2>
<div class="w-20 h-1 bg-primary mx-auto mt-4 mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">我们提供全方位的企业数字化解决方案，满足不同行业、不同规模客户的需求。</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover-lift" v-for="(service, index) in services" :key="index">
<div class="relative">
<img :src="service.image" :alt="service.title" class="w-full h-60 object-cover">
<div class="absolute top-4 left-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm">
{{ service.tag }}
</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
<i :class="service.icon" class="text-primary text-xl"></i>
</div>
<h3 class="text-xl font-bold ml-4">{{ service.title }}</h3>
</div>
<p class="text-gray-600 mb-4">{{ service.description }}</p>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors inline-flex items-center">
了解详情
<i class="fa-solid fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</section>

<!-- 产品 -->
<section id="products" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">我们的产品</h2>
<div class="w-20 h-1 bg-primary mx-auto mt-4 mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">我们自主研发的产品，为企业提供高效、稳定的数字化工具。</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden hover-lift" v-for="(product, index) in products" :key="index">
<div class="p-6">
<div class="flex justify-between items-start mb-6">
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center">
<i :class="product.icon" class="text-primary text-2xl"></i>
</div>
<div class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">
{{ product.tag }}
</div>
</div>
<h3 class="text-xl font-bold mb-3">{{ product.title }}</h3>
<p class="text-gray-600 mb-4">{{ product.description }}</p>
<div class="mt-6 flex flex-wrap gap-2">
<span v-for="(feature, idx) in product.features" :key="idx" class="flex items-center text-gray-600 text-sm">
<i class="fa-solid fa-check text-green-500 mr-2"></i>
{{ feature }}
</span>
</div>
</div>
<div class="border-t border-gray-100 p-6 bg-light">
<div class="flex justify-between items-center">
<div>
<span class="text-2xl font-bold text-primary">¥{{ product.price }}</span>
<span class="text-gray-500">/月起</span>
</div>
<el-button type="primary" size="small">
免费试用
</el-button>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- 案例展示 -->
<section id="cases" class="py-20 bg-light">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">成功案例</h2>
<div class="w-20 h-1 bg-primary mx-auto mt-4 mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">我们的解决方案已帮助众多企业实现数字化转型，提升业务效率和竞争力。</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover-lift" v-for="(caseItem, index) in cases" :key="index">
<div class="relative">
<img :src="caseItem.image" :alt="caseItem.title" class="w-full h-60 object-cover">
<div class="absolute top-4 left-4">
<span :class="caseItem.tagClass" class="text-xs font-medium px-2.5 py-0.5 rounded">
{{ caseItem.industry }}
</span>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3">{{ caseItem.title }}</h3>
<p class="text-gray-600 mb-4">{{ caseItem.description }}</p>
<div class="flex flex-wrap gap-2 mb-4">
<span v-for="(tag, idx) in caseItem.tags" :key="idx" class="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-sm">
{{ tag }}
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">
<i class="fa-solid fa-calendar mr-1"></i> {{ caseItem.year }}
</span>
<a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">查看详情</a>
</div>
</div>
</div>
</div>

<div class="text-center mt-12">
<el-button type="primary" size="large">
查看更多案例
</el-button>
</div>
</div>
</section>

<!-- 客户评价 -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">客户评价</h2>
<div class="w-20 h-1 bg-primary mx-auto mt-4 mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">听听我们的客户怎么说</p>
</div>

<el-carousel height="300px" indicator-position="outside" arrow="always">
<el-carousel-item v-for="(review, index) in reviews" :key="index">
<div class="bg-light rounded-xl shadow-lg p-8 hover-lift h-full flex flex-col justify-center">
<div class="flex items-center mb-6">
<img :src="review.avatar" :alt="review.name" class="w-14 h-14 rounded-full object-cover">
<div class="ml-4">
<h4 class="font-bold text-lg">{{ review.name }}</h4>
<p class="text-gray-500 text-sm">{{ review.position }}</p>
</div>
</div>
<div class="mb-4">
<i class="fa-solid fa-star text-yellow-400"></i>
<i class="fa-solid fa-star text-yellow-400"></i>
<i class="fa-solid fa-star text-yellow-400"></i>
<i class="fa-solid fa-star text-yellow-400"></i>
<i class="fa-solid fa-star text-yellow-400"></i>
</div>
<p class="text-gray-600 italic">
{{ review.content }}
</p>
</div>
</el-carousel-item>
</el-carousel>
</div>
</section>

<!-- 联系我们 -->
<section id="contact" class="py-20 bg-light">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">联系我们</h2>
<div class="w-20 h-1 bg-primary mx-auto mt-4 mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">无论您有任何问题或需求，我们都很乐意倾听并为您提供帮助。</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<div class="bg-white rounded-xl shadow-lg p-8 h-full">
<h3 class="text-xl font-bold mb-6">联系方式</h3>

<div class="space-y-6">
<div class="flex items-start">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-map-marker text-primary"></i>
</div>
<div class="ml-4">
<h4 class="font-medium">公司地址</h4>
<p class="text-gray-600 mt-1">北京市海淀区中关村科技园区8号楼</p>
</div>
</div>

<div class="flex items-start">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-phone text-primary"></i>
</div>
<div class="ml-4">
<h4 class="font-medium">联系电话</h4>
<p class="text-gray-600 mt-1">400-123-4567</p>
</div>
</div>

<div class="flex items-start">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-envelope text-primary"></i>
</div>
<div class="ml-4">
<h4 class="font-medium">电子邮箱</h4>
<p class="text-gray-600 mt-1">contact@company.com</p>
</div>
</div>

<div class="flex items-start">
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-clock text-primary"></i>
</div>
<div class="ml-4">
<h4 class="font-medium">工作时间</h4>
<p class="text-gray-600 mt-1">周一至周五: 9:00 - 18:00</p>
</div>
</div>
</div>

<div class="mt-8">
<h4 class="font-medium mb-4">关注我们</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="#" class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
<i class="fa-brands fa-weibo"></i>
</a>
<a href="#" class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="#" class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
<i class="fa-brands fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>

<div>
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-xl font-bold mb-6">发送消息</h3>

<el-form :model="contactForm" :rules="contactRules" ref="contactFormRef" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="contactForm.name" placeholder="请输入您的姓名"></el-input>
</el-form-item>

<el-form-item label="邮箱" prop="email">
<el-input v-model="contactForm.email" placeholder="请输入您的邮箱"></el-input>
</el-form-item>

<el-form-item label="主题" prop="subject">
<el-input v-model="contactForm.subject" placeholder="请输入消息主题"></el-input>
</el-form-item>

<el-form-item label="内容" prop="message">
<el-input type="textarea" :rows="5" v-model="contactForm.message" placeholder="请输入您的消息内容"></el-input>
</el-form-item>

<el-form-item>
<el-button type="primary" @click="submitContactForm">发送消息</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</section>
</main>

<!-- 登录模态框 -->
<el-dialog :visible.sync="loginVisible" title="用户登录" :close-on-click-modal="false">
<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>

<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>

<el-form-item>
<el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
</el-form-item>
</el-form>

<template #footer>
<span class="dialog-footer">
<el-button @click="loginVisible = false">取消</el-button>
<el-button type="primary" @click="submitLoginForm">登录</el-button>
</span>
</template>
</el-dialog>

<!-- 页脚 -->
<footer class="bg-dark text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div>
<h3 class="text-xl font-bold mb-6 flex items-center">
<i class="fa-solid fa-rocket mr-2"></i>
<span>创新科技</span>
</h3>
<p class="text-gray-400 mb-6">
专注于为企业提供全方位的数字化转型解决方案，助力企业在数字时代保持领先地位。
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-weibo"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa-brands fa-youtube"></i>
</a>
</div>
</div>

<div>
<h4 class="text-lg font-bold mb-6">服务</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">云服务与架构</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">数据分析与AI</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">应用开发与集成</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">网络安全服务</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">数字化营销</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">IT战略咨询</a></li>
</ul>
</div>

<div>
<h4 class="text-lg font-bold mb-6">公司</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">团队介绍</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">成功案例</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">新闻动态</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">加入我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系方式</a></li>
</ul>
</div>

<div>
<h4 class="text-lg font-bold mb-6">资源</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">博客</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">白皮书</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">技术文档</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
</ul>
</div>
</div>

<div class="border-t border-gray-800 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">
&copy; 2025 创新科技. 保留所有权利.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">网站地图</a>
</div>
</div>
</div>
</div>
</footer>

<!-- 返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50" @click="backToTop">
<i class="fa-solid fa-chevron-up"></i>
</button>

<!-- JavaScript -->
<script>
// 全局变量
const primaryColor = '#165DFF';
const secondaryColor = '#36CBCB';

// 导航栏滚动效果
const navbar = document.getElementById('navbar');
const backToTopBtn = document.getElementById('backToTop');

window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('bg-white', 'shadow-md', 'py-2');
navbar.classList.remove('py-4');

backToTopBtn.classList.remove('opacity-0', 'invisible');
backToTopBtn.classList.add('opacity-100', 'visible');
} else {
navbar.classList.remove('bg-white', 'shadow-md', 'py-2');
navbar.classList.add('py-4');

backToTopBtn.classList.add('opacity-0', 'invisible');
backToTopBtn.classList.remove('opacity-100', 'visible');
}
});

// 创建Vue实例
new Vue({
el: '#app',
data: {
// 移动端菜单状态
mobileMenuVisible: false,

// 登录表单
loginVisible: false,
loginForm: {
username: '',
password: '',
rememberMe: false
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},

// 联系表单
contactForm: {
name: '',
email: '',
subject: '',
message: ''
},
contactRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
subject: [
{ required: true, message: '请输入主题', trigger: 'blur' }
],
message: [
{ required: true, message: '请输入内容', trigger: 'blur' }
]
},

// 服务数据
services: [
{
title: '云服务与架构',
description: '提供云迁移、云原生应用开发、多云管理等服务，帮助企业构建灵活、高效的云基础设施。',
image: 'https://picsum.photos/id/180/600/400',
tag: '热门服务',
icon: 'fa-solid fa-cloud'
},
{
title: '数据分析与AI',
description: '基于大数据和人工智能技术，为企业提供数据挖掘、商业智能分析和预测模型构建服务。',
image: 'https://picsum.photos/id/160/600/400',
tag: '热门服务',
icon: 'fa-solid fa-chart-line'
},
{
title: '应用开发与集成',
description: '提供企业级应用开发、系统集成和数字化平台建设服务，支持业务流程自动化和数字化转型。',
image: 'https://picsum.photos/id/0/600/400',
tag: '核心服务',
icon: 'fa-solid fa-code'
},
{
title: '网络安全服务',
description: '提供全方位的网络安全解决方案，包括安全评估、威胁检测、数据加密和应急响应等服务。',
image: 'https://picsum.photos/id/328/600/400',
tag: '核心服务',
icon: 'fa-solid fa-shield-halved'
},
{
title: '数字化营销',
description: '基于数据驱动的营销策略，提供网站建设、社交媒体管理、SEO优化和内容营销等服务。',
image: 'https://picsum.photos/id/26/600/400',
tag: '特色服务',
icon: 'fa-solid fa-bullhorn'
},
{
title: 'IT战略咨询',
description: '提供IT战略规划、数字化转型咨询和技术选型评估等服务，帮助企业制定科学的IT发展路线。',
image: 'https://picsum.photos/id/119/600/400',
tag: '特色服务',
icon: 'fa-solid fa-lightbulb'
}
],

// 产品数据
products: [
{
title: '企业数据中台',
description: '整合企业内外部数据，提供统一的数据管理、分析和服务能力，加速数据驱动决策。',
icon: 'fa-solid fa-server',
tag: '畅销产品',
features: ['数据集成', '数据治理', '数据分析', '数据服务'],
price: '9,800'
},
{
title: '安全防护系统',
description: '实时监控网络威胁，提供全方位的安全防护能力，保障企业数据和业务安全。',
icon: 'fa-solid fa-shield-halved',
tag: '核心产品',
features: ['实时监控', '威胁检测', '应急响应', '安全审计'],
price: '12,800'
},
{
title: '数字化营销平台',
description: '整合多渠道营销资源，提供精准营销、客户管理和效果分析等功能，提升营销效率。',
icon: 'fa-solid fa-globe',
tag: '特色产品',
features: ['多渠道整合', '精准营销', '客户管理', '效果分析'],
price: '7,800'
}
],

// 案例数据
cases: [
{
title: '某大型银行数字化转型',
description: '帮助银行构建数据中台，整合业务系统，提升客户体验和运营效率。',
image: 'https://picsum.photos/id/180/600/400',
industry: '金融行业',
tagClass: 'bg-blue-100 text-blue-800',
year: '2024年',
tags: ['数据中台', '系统整合', '客户体验']
},
{
title: '某汽车零部件企业智能制造',
description: '设计并实施智能制造解决方案，实现生产过程数字化管理和质量追溯。',
image: 'https://picsum.photos/id/119/600/400',
industry: '制造业',
tagClass: 'bg-green-100 text-green-800',
year: '2023年',
tags: ['智能制造', '数字化管理', '质量追溯']
},
{
title: '某三甲医院信息化建设',
description: '构建医院信息集成平台，实现医疗数据共享和业务流程优化。',
image: 'https://picsum.photos/id/3/600/400',
industry: '医疗行业',
tagClass: 'bg-red-100 text-red-800',
year: '2023年',
tags: ['信息集成', '数据共享', '流程优化']
}
],

// 评价数据
reviews: [
{
name: '张明',
position: '某银行CIO',
avatar: 'https://picsum.photos/id/1005/100/100',
content: '"企业科技的数字化转型方案帮助我们实现了业务流程的全面优化，大大提升了运营效率和客户体验。他们的专业团队提供了全程支持，确保项目顺利实施。"'
},
{
name: '李婷',
position: '某制造企业CEO',
avatar: 'https://picsum.photos/id/1006/100/100',
content: '"通过引入企业科技的智能制造解决方案，我们实现了生产过程的可视化和智能化管理，产品质量和生产效率都得到了显著提升，成本也有所下降。"'
},
{
name: '王强',
position: '某医院信息部主任',
avatar: 'https://picsum.photos/id/1012/100/100',
content: '"企业科技为我们医院设计的信息集成平台解决了长期以来的数据孤岛问题，实现了医疗数据的共享和协同，提高了医疗服务质量和管理水平。"'
}
]
},
methods: {
// 切换移动端菜单
toggleMobileMenu() {
this.mobileMenuVisible = !this.mobileMenuVisible;
const mobileMenu = document.getElementById('mobileMenu');
const menuBtn = document.getElementById('menuBtn');

if (this.mobileMenuVisible) {
mobileMenu.classList.remove('hidden');
menuBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
} else {
mobileMenu.classList.add('hidden');
menuBtn.innerHTML = '<i class="fa-solid fa-bars"></i>';
}
},

// 打开登录模态框
handleLogin() {
this.loginVisible = true;
// 关闭移动菜单（如果打开）
if (this.mobileMenuVisible) {
this.toggleMobileMenu();
}
},

// 提交登录表单
submitLoginForm() {
this.$refs.loginFormRef.validate((valid) => {
if (valid) {
// 模拟登录请求
console.log('登录中...', this.loginForm);

// 登录成功后
setTimeout(() => {
this.$message({
message: '登录成功！',
type: 'success'
});
this.loginVisible = false;
this.loginForm = {
username: '',
password: '',
rememberMe: false
};
}, 1000);
} else {
console.log('表单验证失败');
return false;
}
});
},

// 提交联系表单
submitContactForm() {
this.$refs.contactFormRef.validate((valid) => {
if (valid) {
// 模拟提交请求
console.log('提交中...', this.contactForm);

// 提交成功后
setTimeout(() => {
this.$message({
message: '消息已发送，我们将尽快回复您！',
type: 'success'
});
this.contactForm = {
name: '',
email: '',
subject: '',
message: ''
};
}, 1000);
} else {
console.log('表单验证失败');
return false;
}
});
},

// 返回顶部
backToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
}
});

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();

const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);

if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80, // 考虑导航栏高度
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>

完整代码填充素材后预览效果图如下

AI生成的一篇官网代码，有兴趣可以参考一下的更多相关文章

  1. [踩过的坑]Elasticsearch.Net 官网示例的坑

    经过昨天的ElasticSearch 安装,服务以及可以启动了,接下来就可以开发了,找到了官网提供的API以及示例,Es 官方提供的.net 客户端有两个版本一个低级版本: [Elasticsearc ...

  2. 关于Angular官网《英雄指南》教程几点问题修正（此问题在2018年4月份有效，以后可能就订正了）

    1.官网中在导入“of”关键字时的引用为: import { Observable, of } from 'rxjs'; 应该改为: import { Observable } from 'rxjs/ ...

  3. Flume Interceptors官网剖析（博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  4. Phoenix批量提交优化，官网的demo

    1 Phoenix的批量insert官网代码,最佳实践 try (Connection conn = DriverManager.getConnection(url)) { conn.setAutoC ...

  5. Flume Sink Processors官网剖析（博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  6. Flume Sinks官网剖析（博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) 一切来源于f ...

  7. Flume Channels官网剖析(博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) 一切来源于flume官网 http://flume.apache.org/FlumeUserGuide.html Flume Ch ...

  8. 全网最详细中英文ChatGPT-GPT-4示例文档-从0到1快速入门python代码解释应用——官网推荐的48种最佳应用场景（附python/node.js/curl命令源代码，小白也能学）

    目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...

  9. 【工利其器】必会工具之（三）systrace篇（1）官网翻译

    前言 Android 开发者官网中对systrace(Android System Trace)有专门的介绍,本篇文章作为systrace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续 ...

  10. 1.JVM前奏篇（看官网怎么说）

    JVM(Java Virtual Machine) 前奏篇(看官网规范怎么说) 1.The relation of JDK/JRE/JVM 在下图中,我们所接触的,最熟悉,也是经常打交道的 最顶层 J ...

随机推荐

  1. 【Azure Fabric Service】分享使用Visual Studio 2022发布中国区Service Fabric服务应用的办法

    问题描述 使用Visual Studio 2022如何发布Service Fabric到中国区云服务呢? 因为使用VS2022中的插件无法创建Service Fabric Cluster服务. 那么, ...

  2. 关于oracle pfile和spfile文件说明

    •Pfile(Parameter File,参数文件):是基于文本格式的参数文件,含有数据库的配置参数. 默认的名称为"init+例程名.ora",这是一个文本文件,可以用任何文本 ...

  3. React Props指南：从基础到高阶应用的最佳实践解析

    在 React 中,Props(属性)是组件间通信和数据传递的核心机制.通过合理使用 Props,开发者可以构建动态.可复用且易于维护的组件体系.本文将深入探讨 Props 的核心概念.使用方法及最佳 ...

  4. Fetch 别名查找

       if (PlanClass.Attributes.Contains("new_excelcolor_avg"))                                ...

  5. Scanner的进阶使用——数字的输入

    1.用Scanner输入数字(整数和小数) 1.定义一个整数变量 2.建立扫描器 3.使用if 4.建立电脑接收数据 5.设置else(那么)语法 6.关闭Scanner

  6. Oracle UTL_HTTP

    Oracle 中可以通过包 UTL_HTTP 来获取访问 HTTP 的能力. declare req UTL_HTTP.REQ; resp UTL_HTTP.RESP; val varchar2(32 ...

  7. xe10.3+paserver在Ubuntu下运行错误

    xe.3的paserver在Ubuntu下执行呈现乱七八糟的错误提示. 原因:Ubuntu的版本和paserver编译的环境不一致. 注意:使用ARM64的版本.如ubuntu-18.04.2-des ...

  8. IDEA强制注册登录版本号：IntelliJ IDEA 2021.2.2

    建议采用 IntelliJ IDEA 2021.2.2 版本进行  Evaluate for free  试用 IntelliJ IDEA 2021.3.3  以前的版本可以不用注册登录idea账户, ...

  9. 康谋分享 | AD/ADAS的性能概览：在AD/ADAS的开发与验证中“大海捞针”！

    如果您希望从数百万小时的驾驶数据中查找特定的相关驾驶事件和未遂事故,以确保您的所需功能正确运行,最好的方法就是创建一个系统性能的概览分析,实现在数据日志中快速检索关注点.为此,康谋在本文将为您详细介绍 ...

  10. jmeter操作数据库增删改查的注意事项

    一,场景 1.在jmeter造数据后,可通过数据库查询数据库是否新增数据,判断脚本执行是否成功. 2.有些数据新增不可重复,因此脚本执行后需要将新增的数据删除,才能再次执行脚本. 二.连接数据库 在通 ...