425 lines
30 KiB
HTML
425 lines
30 KiB
HTML
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
||
<!-- ===== HERO ===== -->
|
||
<section class="bg-white border-b border-gray-100">
|
||
<div class="max-w-7xl mx-auto px-6 pt-20 pb-16 text-center">
|
||
<h1 class="text-5xl md:text-6xl font-extrabold text-gray-900 leading-tight mb-5"> 企业级定制开发服务<br />
|
||
<span class="gradient-text">从开发到运营全托管</span>
|
||
</h1>
|
||
<p class="text-lg text-gray-500 max-w-2xl mx-auto mb-10 leading-relaxed"> 专注B2B定制开发，基于开源技术栈快速交付，提供全流程项目开发、部署运维、售后支持一体化服务。 </p>
|
||
<!-- Stats Row -->
|
||
<div class="flex flex-wrap justify-center gap-10 text-center">
|
||
<div>
|
||
<div class="text-3xl font-bold text-gray-900">98%</div>
|
||
<div class="text-sm text-gray-500 mt-1">客户满意度</div>
|
||
</div>
|
||
<div class="w-px bg-gray-200 hidden md:block"></div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-gray-900">50+</div>
|
||
<div class="text-sm text-gray-500 mt-1">交付项目</div>
|
||
</div>
|
||
<div class="w-px bg-gray-200 hidden md:block"></div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-gray-900">7×24h</div>
|
||
<div class="text-sm text-gray-500 mt-1">售后支持</div>
|
||
</div>
|
||
<div class="w-px bg-gray-200 hidden md:block"></div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-gray-900">N+</div>
|
||
<div class="text-sm text-gray-500 mt-1">项目维护</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<main class="max-w-7xl mx-auto px-6 py-14">
|
||
<!-- ===== FEATURED SERVICE ===== -->
|
||
<div class="mb-6">
|
||
<h2 class="text-xs font-bold uppercase tracking-widest text-blue-600 mb-1">核心服务</h2>
|
||
<h3 class="text-2xl font-bold text-gray-900">定制开发全流程</h3>
|
||
</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-14">
|
||
<!-- Big Featured Card -->
|
||
<div class="lg:col-span-3 bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 rounded-3xl p-8 text-white relative overflow-hidden card-hover shadow-xl shadow-blue-100">
|
||
<!-- Decorative circles -->
|
||
<div class="absolute -top-10 -right-10 w-48 h-48 bg-white opacity-5 rounded-full"></div>
|
||
<div class="absolute -bottom-16 -right-4 w-72 h-72 bg-white opacity-5 rounded-full"></div>
|
||
<div class="absolute top-1/2 right-8 w-32 h-32 bg-blue-400 opacity-10 rounded-full"></div>
|
||
<div class="relative z-10">
|
||
<div class="flex items-start justify-between mb-6">
|
||
<div class="w-14 h-14 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center backdrop-blur-sm border border-white border-opacity-20">
|
||
<svg 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="1.8"
|
||
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>
|
||
</div>
|
||
<span class="text-xs font-bold bg-yellow-400 text-yellow-900 px-3 py-1 rounded-full">★ 核心服务</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-2">B2B 定制开发</h3>
|
||
<p class="text-blue-100 text-sm leading-relaxed mb-6"> 基于开源技术栈为企业定制专属软件系统，按需开发、快速交付，支持私有化部署、二次开发与长期维护。 </p>
|
||
<!-- Feature list -->
|
||
<div class="grid grid-cols-2 gap-2 mb-8">
|
||
<div class="flex items-center gap-2 text-sm text-blue-100">
|
||
<svg class="w-4 h-4 text-blue-300 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg> 需求定制分析
|
||
</div>
|
||
<div class="flex items-center gap-2 text-sm text-blue-100">
|
||
<svg class="w-4 h-4 text-blue-300 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg> 开源技术栈开发
|
||
</div>
|
||
<div class="flex items-center gap-2 text-sm text-blue-100">
|
||
<svg class="w-4 h-4 text-blue-300 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg> 私有化部署
|
||
</div>
|
||
<div class="flex items-center gap-2 text-sm text-blue-100">
|
||
<svg class="w-4 h-4 text-blue-300 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg> 源码交付
|
||
</div>
|
||
<div class="flex items-center gap-2 text-sm text-blue-100">
|
||
<svg class="w-4 h-4 text-blue-300 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg> 长期技术维护
|
||
</div>
|
||
<div class="flex items-center gap-2 text-sm text-blue-100">
|
||
<svg class="w-4 h-4 text-blue-300 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg> 7×24 售后支持
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<button class="bg-white text-blue-700 font-semibold text-sm px-6 py-2.5 rounded-xl hover:bg-blue-50 transition" onclick="window.open('Quotation.html')"> 咨询报价 </button>
|
||
<button class="border border-white border-opacity-30 text-white font-medium text-sm px-6 py-2.5 rounded-xl hover:bg-white hover:bg-opacity-10 transition" onclick="window.open('https://git.gvsds.com/GVSDS/', '_blank')"> 查看案例 → </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Side Cards -->
|
||
<div class="lg:col-span-2 flex flex-col gap-6">
|
||
<!-- Card A -->
|
||
<div class="flex-1 bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm">
|
||
<div class="flex items-start gap-4 mb-4">
|
||
<div class="w-12 h-12 bg-violet-50 rounded-2xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-6 h-6 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
|
||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<h4 class="font-bold text-gray-900">项目运营托管</h4>
|
||
<span class="text-xs bg-violet-50 text-violet-700 font-semibold px-2 py-0.5 rounded-full">全托管</span>
|
||
</div>
|
||
<p class="text-sm text-gray-500 leading-relaxed">辅助部署服务器，提供服务器运维、数据备份、版本更新、故障处理等一站式全流程运营托管服务。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||
<span class="text-sm text-gray-400">24 小时监控</span>
|
||
<button class="text-violet-600 text-sm font-semibold hover:text-violet-800 transition" onclick="window.open('./Quotation.html')">了解更多 →</button>
|
||
</div>
|
||
</div>
|
||
<!-- Card B -->
|
||
<div class="flex-1 bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm">
|
||
<div class="flex items-start gap-4 mb-4">
|
||
<div class="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<h4 class="font-bold text-gray-900">B2B / B2C 定制开发</h4>
|
||
<span class="text-xs bg-emerald-50 text-emerald-700 font-semibold px-2 py-0.5 rounded-full">低成本</span>
|
||
</div>
|
||
<p class="text-sm text-gray-500 leading-relaxed">坚持质量优先、效率至上的服务理念，以高标准品质为核心，以高效响应为保障，为企业提供稳定可靠、灵活适配的专业解决方案。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between pt-4 border-t border-gray-50">
|
||
<span class="text-sm text-gray-400">查看我们历来的开源项目</span>
|
||
<button class="text-emerald-600 text-sm font-semibold hover:text-emerald-800 transition" onclick="window.open('https://git.gvsds.com/GVSDS', '_blank')">了解更多 →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ===== SECTION: SERVICE CATEGORIES ===== -->
|
||
<div class="mb-6">
|
||
<h2 class="text-xs font-bold uppercase tracking-widest text-blue-600 mb-1">服务类型</h2>
|
||
<h3 class="text-2xl font-bold text-gray-900">满足多样化需求</h3>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-14">
|
||
<!-- Service Card 1 -->
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm group">
|
||
<div class="flex items-center justify-between mb-5">
|
||
<div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center group-hover:bg-blue-100 transition">
|
||
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" 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>
|
||
</div>
|
||
<span class="text-xs bg-gray-100 text-gray-600 font-medium px-3 py-1 rounded-full">按需报价</span>
|
||
</div>
|
||
<h4 class="font-bold text-gray-900 text-lg mb-2">Web系统开发</h4>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4"> 定制开发企业官网、管理后台、SAAS系统、电商平台等Web应用，基于开源框架快速交付，支持多端适配。 </p>
|
||
<div class="flex flex-wrap gap-1.5 mb-5">
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">Node/React</span>
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">Django/Flask</span>
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">多端适配</span>
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">私有化部署</span>
|
||
</div>
|
||
<div class="border-t border-gray-50 pt-4 flex items-center justify-between">
|
||
<div class="flex items-center gap-1.5">
|
||
<div class="w-2 h-2 bg-green-400 rounded-full"></div>
|
||
<span class="text-xs text-gray-500">按需定制</span>
|
||
</div>
|
||
<button class="text-sm font-semibold text-blue-600 hover:text-blue-800 transition" onclick="window.open('./Quotation.html')">查看详情 →</button>
|
||
</div>
|
||
</div>
|
||
<!-- Service Card 2 -->
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm group">
|
||
<div class="flex items-center justify-between mb-5">
|
||
<div class="w-12 h-12 bg-cyan-50 rounded-2xl flex items-center justify-center group-hover:bg-cyan-100 transition">
|
||
<svg class="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-xs bg-cyan-50 text-cyan-700 font-semibold px-3 py-1 rounded-full">热门</span>
|
||
</div>
|
||
<h4 class="font-bold text-gray-900 text-lg mb-2">自动化脚本/工具</h4>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4"> 开发各类自动化脚本、爬虫工具、数据处理工具，提升企业工作效率，替代重复人工操作。 </p>
|
||
<div class="flex flex-wrap gap-1.5 mb-5">
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">Python/Go</span>
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">数据爬取</span>
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">自动化流程</span>
|
||
</div>
|
||
<div class="border-t border-gray-50 pt-4 flex items-center justify-between">
|
||
<div class="flex items-center gap-1.5">
|
||
<div class="w-2 h-2 bg-cyan-400 rounded-full"></div>
|
||
<span class="text-xs text-gray-500">快速交付</span>
|
||
</div>
|
||
<button class="text-sm font-semibold text-cyan-600 hover:text-cyan-800 transition" onclick="window.open('./Quotation.html')">查看详情 →</button>
|
||
</div>
|
||
</div>
|
||
<!-- Service Card 3 -->
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm group">
|
||
<div class="flex items-center justify-between mb-5">
|
||
<div class="w-12 h-12 bg-amber-50 rounded-2xl flex items-center justify-center group-hover:bg-amber-100 transition">
|
||
<svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-xs bg-gray-100 text-gray-600 font-medium px-3 py-1 rounded-full">长期合作</span>
|
||
</div>
|
||
<h4 class="font-bold text-gray-900 text-lg mb-2">技术维护与迭代</h4>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4"> 为企业现有系统提供bug修复、功能迭代、性能优化、版本升级等技术维护服务，保障系统稳定运行。 </p>
|
||
<div class="flex flex-wrap gap-1.5 mb-5">
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">Bug 修复</span>
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">性能优化</span>
|
||
<span class="tag-chip text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-lg cursor-pointer">版本迭代</span>
|
||
</div>
|
||
<div class="border-t border-gray-50 pt-4 flex items-center justify-between">
|
||
<div class="flex items-center gap-1.5">
|
||
<div class="w-2 h-2 bg-green-400 rounded-full"></div>
|
||
<span class="text-xs text-gray-500">7×24h 支持</span>
|
||
</div>
|
||
<button class="text-sm font-semibold text-amber-600 hover:text-amber-800 transition" onclick="window.open('./Quotation.html')">查看详情 →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ===== SECTION: OPEN SOURCE PROJECTS ===== -->
|
||
<div class="mb-6">
|
||
<h2 class="text-xs font-bold uppercase tracking-widest text-violet-600 mb-1">开源项目</h2>
|
||
<h3 class="text-2xl font-bold text-gray-900">基于开源，快速定制</h3>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-14">
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm group">
|
||
<div class="w-11 h-11 bg-violet-50 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-violet-100 transition">
|
||
<svg class="w-5.5 h-5.5 text-violet-600 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-bold text-gray-900 mb-2">管理后台类</h4>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">基于 GERP、VueAdmin、ReactAdmin 等开源后台框架定制企业管理系统，快速上线。</p>
|
||
<div class="text-xs text-gray-400">支持RBAC权限管理</div>
|
||
</div>
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm group">
|
||
<div class="w-11 h-11 bg-pink-50 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-pink-100 transition">
|
||
<svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 10l4.553-2.069A1 1 0 0121 8.87v6.26a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-bold text-gray-900 mb-2">爬虫/自动化类</h4>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">基于 Scrapy、Playwright 等开源框架开发定制化爬虫与自动化脚本。</p>
|
||
<div class="text-xs text-gray-400">支持反爬策略适配</div>
|
||
</div>
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm group">
|
||
<div class="w-11 h-11 bg-orange-50 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-orange-100 transition">
|
||
<svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-bold text-gray-900 mb-2">数据可视化类</h4>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">基于 ECharts、DataV 等定制企业数据可视化大屏、报表系统。</p>
|
||
<div class="text-xs text-gray-400">支持多数据源接入</div>
|
||
</div>
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-6 card-hover shadow-sm group">
|
||
<div class="w-11 h-11 bg-teal-50 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-teal-100 transition">
|
||
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-bold text-gray-900 mb-2">工具类SAAS</h4>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">基于开源SAAS框架定制轻量级工具类SAAS系统，支持多租户、按需付费。</p>
|
||
<div class="text-xs text-gray-400">私有化部署可选</div>
|
||
</div>
|
||
</div>
|
||
<!-- ===== SECTION: SERVICE PROCESS ===== -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-14">
|
||
<!-- Process Block -->
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-8 card-hover shadow-sm">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-12 h-12 bg-sky-50 rounded-2xl flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="text-xs font-bold uppercase tracking-wider text-sky-600 mb-0.5">服务流程</div>
|
||
<h3 class="font-bold text-gray-900 text-xl">标准化交付流程</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-6"> 标准化的服务流程，从需求沟通到售后维护，全程透明可控，确保项目按时、按质交付。 </p>
|
||
<!-- Process steps -->
|
||
<div class="space-y-4 mb-6">
|
||
<div class="flex gap-4">
|
||
<div class="w-8 h-8 bg-sky-100 rounded-full flex items-center justify-center flex-shrink-0 text-sky-700 font-bold text-sm">1</div>
|
||
<div>
|
||
<h5 class="font-medium text-gray-900 text-sm mb-1">需求沟通与评估</h5>
|
||
<p class="text-xs text-gray-500">深入沟通企业需求，评估技术方案与开发成本，提供详细报价与排期。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<div class="w-8 h-8 bg-sky-100 rounded-full flex items-center justify-center flex-shrink-0 text-sky-700 font-bold text-sm">2</div>
|
||
<div>
|
||
<h5 class="font-medium text-gray-900 text-sm mb-1">方案设计与确认</h5>
|
||
<p class="text-xs text-gray-500">输出技术方案、原型设计、功能清单，确认后签订合同启动开发。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<div class="w-8 h-8 bg-sky-100 rounded-full flex items-center justify-center flex-shrink-0 text-sky-700 font-bold text-sm">3</div>
|
||
<div>
|
||
<h5 class="font-medium text-gray-900 text-sm mb-1">开发与阶段性交付</h5>
|
||
<p class="text-xs text-gray-500">分阶段开发与交付，定期同步进度，支持中途需求微调。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<div class="w-8 h-8 bg-sky-100 rounded-full flex items-center justify-center flex-shrink-0 text-sky-700 font-bold text-sm">4</div>
|
||
<div>
|
||
<h5 class="font-medium text-gray-900 text-sm mb-1">测试与上线部署</h5>
|
||
<p class="text-xs text-gray-500">全面功能测试、性能测试，完成后部署上线，提供操作培训。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<div class="w-8 h-8 bg-sky-100 rounded-full flex items-center justify-center flex-shrink-0 text-sky-700 font-bold text-sm">5</div>
|
||
<div>
|
||
<h5 class="font-medium text-gray-900 text-sm mb-1">售后维护与迭代</h5>
|
||
<p class="text-xs text-gray-500">提供 7×24h 售后支持，定期系统维护，按需进行功能迭代。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="w-full bg-sky-50 text-sky-700 font-medium text-sm py-2.5 rounded-xl hover:bg-sky-100 transition"> 查看详细服务规范 </button>
|
||
</div>
|
||
<!-- Advantage Block -->
|
||
<div class="bg-white border border-gray-100 rounded-3xl p-8 card-hover shadow-sm">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-12 h-12 bg-red-50 rounded-2xl flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" 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>
|
||
</div>
|
||
<div>
|
||
<div class="text-xs font-bold uppercase tracking-wider text-red-500 mb-0.5">服务优势</div>
|
||
<h3 class="font-bold text-gray-900 text-xl">小工作室的专属优势</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-500 text-sm leading-relaxed mb-6"> 相比大型公司，我们更灵活、更专注，以更低的成本提供高质量的定制开发服务，全程一对一沟通。 </p>
|
||
<!-- Advantage list -->
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between py-3 px-4 bg-gray-50 rounded-2xl">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-3.5 h-3.5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd"
|
||
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||
clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700">一对一专属对接</span>
|
||
</div>
|
||
<span class="text-xs text-gray-400">无中间环节</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3 px-4 bg-gray-50 rounded-2xl">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-3.5 h-3.5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd"
|
||
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||
clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700">低成本高性价比</span>
|
||
</div>
|
||
<span class="text-xs text-gray-400">比大公司低 30%-50%</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3 px-4 bg-gray-50 rounded-2xl">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-3.5 h-3.5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd"
|
||
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||
clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700">灵活的合作模式</span>
|
||
</div>
|
||
<span class="text-xs text-gray-400">按项目/按工时/长期维护</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3 px-4 bg-gray-50 rounded-2xl">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-3.5 h-3.5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd"
|
||
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||
clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<span class="text-sm font-medium text-gray-700">全流程售后支持</span>
|
||
</div>
|
||
<span class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">7×24小时</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ===== CTA BANNER ===== -->
|
||
<div class="bg-gradient-to-r from-slate-900 via-blue-950 to-slate-900 rounded-3xl p-10 text-center relative overflow-hidden">
|
||
<!-- Decorative -->
|
||
<div class="absolute top-0 left-1/4 w-64 h-64 bg-blue-600 opacity-10 rounded-full blur-3xl"></div>
|
||
<div class="absolute bottom-0 right-1/4 w-64 h-64 bg-indigo-600 opacity-10 rounded-full blur-3xl"></div>
|
||
<div class="relative z-10">
|
||
<div class="inline-flex items-center gap-2 bg-blue-500 bg-opacity-20 border border-blue-400 border-opacity-30 text-blue-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-5">
|
||
<span>立即咨询</span>
|
||
</div>
|
||
<h2 class="text-3xl font-bold text-white mb-4">有定制开发需求？<br />我们随时为您服务</h2>
|
||
<p class="text-slate-400 text-sm mb-8 max-w-lg mx-auto leading-relaxed"> 无论您需要定制开发、开源项目二次开发，还是长期的运营维护，我们都能提供高性价比的解决方案。 </p>
|
||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold px-8 py-3 rounded-2xl transition shadow-lg shadow-blue-900 flex items-center gap-2" onclick="window.open('./Quotation.html')">
|
||
<svg class="w-4 h-4" 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> 立即沟通需求 </button>
|
||
<button class="border border-slate-600 hover:border-slate-400 text-slate-300 hover:text-white font-medium px-8 py-3 rounded-2xl transition flex items-center gap-2" onclick="window.open('./Quotation.html')">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg> 获取报价方案 </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main> |