AI生成的一篇官网代码，有兴趣可以参考一下

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

<!DOCTYPE html>

<head>

<title>创新科技 | 引领数字化未来</title>

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>

@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>

</a>

</div>

<el-button type="primary" @click="handleLogin">登录</el-button>

</nav>

</button>

</div>

<el-button type="primary" @click="handleLogin">登录</el-button>

</div>

</header>

</svg>

</div>

创新科技<br>引领数字化未来

</h1>

我们提供全方位的数字化转型解决方案，帮助企业在数字时代保持竞争优势，实现可持续发展。

</p>

了解更多 <i class="fa-solid fa-arrow-right ml-2"></i>

</a>

我们的服务 <i class="fa-solid fa-th-list ml-2"></i>

</a>

</div>

<div>

</div>

<div>

</div>

<div>

<p class="text-gray-500 text-sm">客户满意度</p>

</div>

<h3 class="text-2xl font-bold text-white mb-2">数字化转型</h3>

<p class="text-white/90 mb-4">全方位的技术支持与创新解决方案</p>

</div>

</a>

</div>

</section>

<p class="text-gray-600 max-w-2xl mx-auto">创新科技成立于2010年，是一家专注于为企业提供数字化转型解决方案的高新技术企业。</p>

</div>

</div>

<h4 class="text-white font-medium">200+专业技术团队</h4>

<p class="text-white/80 text-sm">来自全球顶尖科技企业</p>

</div>

<div>

<h3 class="text-3xl font-bold mb-6">我们的使命</h3>

通过创新技术推动企业数字化转型，帮助客户实现业务增长与效率提升。我们坚信，技术的力量在于为企业创造价值，而不仅仅是提供工具。

</p>

</div>

<p class="text-gray-600">持续投入研发，探索前沿技术，为客户提供创新解决方案。</p>

</div>

</div>

<p class="text-gray-600">深入理解客户需求，提供定制化解决方案，与客户共同成长。</p>

</div>

</div>

<p class="text-gray-600">与合作伙伴建立长期稳定的合作关系，共同创造价值。</p>

</div>

<p class="text-gray-600">年行业经验</p>

</div>

</div>

</div>

</div>

</section>

<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">我们的服务</h2>

<p class="text-gray-600 max-w-2xl mx-auto">我们提供全方位的企业数字化解决方案，满足不同行业、不同规模客户的需求。</p>

</div>

</span>

</div>

</div>

<h3 class="text-xl font-bold ml-4">{{ service.title }}</h3>

</div>

<p class="text-gray-600 mb-4">{{ service.description }}</p>

了解详情

</a>

</div>

</section>

<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">我们的产品</h2>

<p class="text-gray-600 max-w-2xl mx-auto">我们自主研发的产品，为企业提供高效、稳定的数字化工具。</p>

</div>

</div>

</div>

<h3 class="text-xl font-bold mb-3">{{ product.title }}</h3>

<p class="text-gray-600 mb-4">{{ product.description }}</p>

</span>

</div>

<div>

<span class="text-2xl font-bold text-primary">¥{{ product.price }}</span>

</div>

<el-button type="primary" size="small">

免费试用

</el-button>

</div>

</section>

<p class="text-gray-600 max-w-2xl mx-auto">我们的解决方案已帮助众多企业实现数字化转型，提升业务效率和竞争力。</p>

</div>

</span>

</div>

<h3 class="text-xl font-bold mb-3">{{ caseItem.title }}</h3>

<p class="text-gray-600 mb-4">{{ caseItem.description }}</p>

</span>

</div>

<i class="fa-solid fa-calendar mr-1"></i> {{ caseItem.year }}

</span>

</div>

<el-button type="primary" size="large">

查看更多案例

</el-button>

</div>

</section>

<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">

<h4 class="font-bold text-lg">{{ review.name }}</h4>

<p class="text-gray-500 text-sm">{{ review.position }}</p>

</div>

</div>

</p>

</div>

</el-carousel-item>

</el-carousel>

</div>

</section>

<p class="text-gray-600 max-w-2xl mx-auto">无论您有任何问题或需求，我们都很乐意倾听并为您提供帮助。</p>

</div>

<div>

</div>

<p class="text-gray-600 mt-1">北京市海淀区中关村科技园区8号楼</p>

</div>

</div>

</div>

</div>

<p class="text-gray-600 mt-1">[email protected]</p>

</div>

</div>

<p class="text-gray-600 mt-1">周一至周五: 9:00 - 18:00</p>

</div>

</a>

</a>

</a>

</a>

</div>

<div>

<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>

</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>

<el-button @click="loginVisible = false">取消</el-button>

<el-button type="primary" @click="submitLoginForm">登录</el-button>

</span>

</template>

</el-dialog>

<div>

</h3>

专注于为企业提供全方位的数字化转型解决方案，助力企业在数字时代保持领先地位。

</p>

</a>

</a>

</a>

</a>

</div>

<div>

<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>

</ul>

</div>

<div>

</ul>

</div>

</p>

</div>

</footer>

</button>

// 全局变量

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: {

email: '',

subject: '',

message: ''

contactRules: {

{ 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: [

{

position: '某银行CIO',

avatar: 'https://picsum.photos/id/1005/100/100',

content: '"企业科技的数字化转型方案帮助我们实现了业务流程的全面优化，大大提升了运营效率和客户体验。他们的专业团队提供了全程支持，确保项目顺利实施。"'

{

position: '某制造企业CEO',

avatar: 'https://picsum.photos/id/1006/100/100',

content: '"通过引入企业科技的智能制造解决方案，我们实现了生产过程的可视化和智能化管理，产品质量和生产效率都得到了显著提升，成本也有所下降。"'

{

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 = {

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>