92 lines
7.1 KiB
HTML
92 lines
7.1 KiB
HTML
<div class="m-0 p-0 box-border text-slate-800 font-sans leading-[1.65] font-normal antialiased">
|
|
<!-- 主容器 -->
|
|
<div class="max-w-[85%] mx-auto my-14 px-[8%]">
|
|
<!-- 头部介绍 -->
|
|
<section class="text-center mb-16">
|
|
<h1 class="text-[2.7rem] font-medium mb-7 -tracking-0.5 leading-[1.25]">定制开发服务</h1>
|
|
<p class="text-[1.1rem] text-slate-600 max-w-[700px] mx-auto">
|
|
从开发到运营全托管，专注B2B定制开发，基于开源技术栈快速交付，提供全流程项目开发、部署运维、售后支持一体化服务。
|
|
</p>
|
|
</section>
|
|
|
|
<!-- 核心报价区域 -->
|
|
<section class="bg-white p-12 rounded-sm shadow-[0_1px_3px_rgba(0,0,0,0.05),0_1px_2px_rgba(0,0,0,0.1)] mb-32">
|
|
<h2 class="text-[1.8rem] font-medium mb-10 pb-4 border-b border-slate-200 inline-block">咨询报价</h2>
|
|
<p class="text-[1.05rem] text-slate-600 max-w-[800px] mb-16 leading-[1.8]">
|
|
有定制开发需求？我们随时为您服务。无论您需要定制开发、开源项目二次开发，还是长期的运营维护，我们都能提供高性价比的解决方案。
|
|
</p>
|
|
<p class="text-[1.05rem] text-slate-600 max-w-[800px] mb-16 leading-[1.8]">
|
|
注意：添加企业微信或微信，请备注“咨询报价”明确来意。
|
|
</p>
|
|
|
|
<!-- 二维码展示区 -->
|
|
<div class="flex justify-center gap-16 flex-wrap">
|
|
<!-- 企业微信二维码 -->
|
|
<div class="w-[280px] p-[2.5rem_2rem] bg-slate-50 rounded-sm text-center transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] hover:-translate-y-1.5 hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.04)] hover:bg-white">
|
|
<h3 class="text-[1rem] font-medium mb-8 tracking-[0.3px]">企业微信</h3>
|
|
<div class="w-[180px] h-[180px] mx-auto mb-7 border border-slate-200 p-4 bg-white flex items-center justify-center">
|
|
<img src="./ContactInfo/wecom.jpg" alt="企业微信二维码" class="w-full h-full object-contain">
|
|
</div>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.6]">扫码添加企业微信，一对一沟通报价</p>
|
|
</div>
|
|
|
|
<!-- 微信二维码 -->
|
|
<div class="w-[280px] p-[2.5rem_2rem] bg-slate-50 rounded-sm text-center transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] hover:-translate-y-1.5 hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.04)] hover:bg-white">
|
|
<h3 class="text-[1rem] font-medium mb-8 tracking-[0.3px]">微信</h3>
|
|
<div class="w-[180px] h-[180px] mx-auto mb-7 border border-slate-200 p-4 bg-white flex items-center justify-center">
|
|
<img src="./ContactInfo/wx.jpg" alt="微信二维码" class="w-full h-full object-contain">
|
|
</div>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.6]">微信：GVSADS，备注咨询报价</p>
|
|
</div>
|
|
|
|
<!-- QQ二维码 -->
|
|
<div class="w-[280px] p-[2.5rem_2rem] bg-slate-50 rounded-sm text-center transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] hover:-translate-y-1.5 hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.04)] hover:bg-white">
|
|
<h3 class="text-[1rem] font-medium mb-8 tracking-[0.3px]">QQ</h3>
|
|
<div class="w-[180px] h-[180px] mx-auto mb-7 border border-slate-200 p-4 bg-white flex items-center justify-center">
|
|
<img src="./ContactInfo/qq.png" alt="QQ二维码" class="w-full h-full object-contain">
|
|
</div>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.6]">扫码添加QQ，获取详细报价方案</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 服务流程 -->
|
|
<section class="mb-32">
|
|
<h2 class="text-[1.8rem] font-medium text-center mb-16">标准化交付流程</h2>
|
|
<div class="flex justify-between relative px-8 flex-wrap">
|
|
<!-- 流程连接线 -->
|
|
<div class="absolute top-5 left-[5%] right-[5%] h-0.5 bg-slate-200 hidden md:block"></div>
|
|
|
|
<div class="flex-1 min-w-[160px] text-center relative px-4 mb-8">
|
|
<div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-[0.9rem] font-normal">1</div>
|
|
<h4 class="text-[0.95rem] font-medium mb-4">需求沟通与评估</h4>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.7]">深入沟通企业需求，评估技术方案与开发成本，提供详细报价与排期。</p>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-[160px] text-center relative px-4 mb-8">
|
|
<div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-[0.9rem] font-normal">2</div>
|
|
<h4 class="text-[0.95rem] font-medium mb-4">方案设计与确认</h4>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.7]">输出技术方案、原型设计、功能清单，确认后签订合同启动开发。</p>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-[160px] text-center relative px-4 mb-8">
|
|
<div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-[0.9rem] font-normal">3</div>
|
|
<h4 class="text-[0.95rem] font-medium mb-4">开发与阶段性交付</h4>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.7]">分阶段开发与交付，定期同步进度，支持中途需求微调。</p>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-[160px] text-center relative px-4 mb-8">
|
|
<div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-[0.9rem] font-normal">4</div>
|
|
<h4 class="text-[0.95rem] font-medium mb-4">测试与上线部署</h4>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.7]">全面功能测试、性能测试，完成后部署上线，提供操作培训。</p>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-[160px] text-center relative px-4 mb-8">
|
|
<div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-[0.9rem] font-normal">5</div>
|
|
<h4 class="text-[0.95rem] font-medium mb-4">售后维护与迭代</h4>
|
|
<p class="text-[0.85rem] text-slate-600 leading-[1.7]">提供 7×24h 售后支持，定期系统维护，按需进行功能迭代。</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div> |