six_001
This commit is contained in:
doudou201703
@@ -0,0 +1,441 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>江苏六果科技有限公司 - 专业小程序开发服务</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
background: #f5f6fa;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.header {
|
||||
background: linear-gradient(135deg, #1a73e8, #0d5bb5);
|
||||
color: #fff;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.header .nav span {
|
||||
font-size: 13px;
|
||||
margin-left: 14px;
|
||||
opacity: .9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Banner */
|
||||
.banner {
|
||||
background: linear-gradient(180deg, #e8f0fe 0%, #f5f6fa 100%);
|
||||
text-align: center;
|
||||
padding: 48px 16px 36px;
|
||||
}
|
||||
|
||||
.banner h2 {
|
||||
font-size: 22px;
|
||||
color: #1a73e8;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.banner p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.banner .highlight {
|
||||
color: #e64340;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 公司信息卡片 */
|
||||
.company-card {
|
||||
background: #fff;
|
||||
margin: 12px 12px 0;
|
||||
border-radius: 10px;
|
||||
padding: 18px 16px;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
|
||||
}
|
||||
|
||||
.company-card h3 {
|
||||
font-size: 15px;
|
||||
color: #1a73e8;
|
||||
border-left: 3px solid #1a73e8;
|
||||
padding-left: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.company-card ul {
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
line-height: 2.2;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.company-card ul li span.label {
|
||||
color: #999;
|
||||
width: 90px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 产品区标题 */
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 24px 16px 4px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 产品卡片 */
|
||||
.product-list {
|
||||
padding: 0 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px 16px;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-card.recommend {
|
||||
border: 2px solid #1a73e8;
|
||||
}
|
||||
|
||||
.product-card .badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #1a73e8;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
padding: 3px 10px 3px 14px;
|
||||
border-radius: 0 0 0 8px;
|
||||
}
|
||||
|
||||
.product-card .type {
|
||||
font-size: 13px;
|
||||
color: #1a73e8;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.product-card h4 {
|
||||
font-size: 17px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-card .desc {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.product-card .features {
|
||||
list-style: none;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.product-card .features li {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 2;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card .features li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #1a73e8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.product-card .price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product-card .price {
|
||||
font-size: 28px;
|
||||
color: #e64340;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.product-card .price small {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.product-card .unit {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product-card .btn {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #1a73e8, #0d5bb5);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
padding: 6px 18px;
|
||||
border-radius: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 服务流程 */
|
||||
.flow-section {
|
||||
padding: 0 12px 16px;
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.flow-card h3 {
|
||||
font-size: 15px;
|
||||
color: #1a73e8;
|
||||
border-left: 3px solid #1a73e8;
|
||||
padding-left: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flow-step .step-num {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
background: #1a73e8;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 13px;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
|
||||
.flow-step .step-text {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.flow-step .step-desc {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.flow-step:not(:last-child)::after {
|
||||
content: "→";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: -8px;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 28px 16px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #1a73e8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 支付提示 */
|
||||
.pay-notice {
|
||||
background: #fff7e6;
|
||||
margin: 0 12px;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
color: #ad6800;
|
||||
border: 1px solid #ffe58f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部 -->
|
||||
<div class="header">
|
||||
<div class="logo">六果科技</div>
|
||||
<div class="nav">
|
||||
<span>首页</span>
|
||||
<span>产品服务</span>
|
||||
<span>案例展示</span>
|
||||
<span>联系我们</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Banner -->
|
||||
<div class="banner">
|
||||
<h2>专业小程序定制开发服务</h2>
|
||||
<p>江苏六果科技有限公司，专注微信小程序开发<br>
|
||||
提供从需求分析、UI设计到上线运维的<span class="highlight">一站式解决方案</span></p>
|
||||
</div>
|
||||
|
||||
<!-- 公司信息 -->
|
||||
<div class="company-card">
|
||||
<h3>经营主体信息</h3>
|
||||
<ul>
|
||||
<li><span class="label">公司名称：</span>江苏六果科技有限公司</li>
|
||||
<li><span class="label">经营类目：</span>软件开发 / 小程序定制 / 互联网技术服务</li>
|
||||
<li><span class="label">客服电话：</span>请填写贵司联系电话</li>
|
||||
<li><span class="label">售后说明：</span>7×12小时在线客服，交付后提供30天免费维护</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 产品展示 -->
|
||||
<div class="section-title">— 小程序开发服务套餐 —</div>
|
||||
<div class="section-subtitle">根据您的业务需求，选择最适合的开发模板</div>
|
||||
|
||||
<div class="product-list">
|
||||
|
||||
<!-- 模板A -->
|
||||
<div class="product-card">
|
||||
<div class="type">基础模板</div>
|
||||
<h4>标准展示型小程序</h4>
|
||||
<div class="desc">
|
||||
适用于企业官网展示、产品目录、新闻资讯等基础场景，快速上线，性价比高。
|
||||
</div>
|
||||
<ul class="features">
|
||||
<li>企业信息展示页面（首页/关于/联系）</li>
|
||||
<li>产品/服务分类展示（最多20个）</li>
|
||||
<li>新闻资讯模块</li>
|
||||
<li>在线客服（微信客服对接）</li>
|
||||
<li>基础数据统计后台</li>
|
||||
<li>1次免费修改调整</li>
|
||||
</ul>
|
||||
<div class="price-row">
|
||||
<div>
|
||||
<div class="price"><small>¥</small>988<span class="unit">/套</span></div>
|
||||
</div>
|
||||
<span class="btn">立即下单</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模板B（推荐） -->
|
||||
<div class="product-card recommend">
|
||||
<div class="badge">推荐</div>
|
||||
<div class="type">高级模板</div>
|
||||
<h4>电商交互型小程序</h4>
|
||||
<div class="desc">
|
||||
适用于电商零售、会员管理、在线预约等交互场景，功能丰富，助力业务增长。
|
||||
</div>
|
||||
<ul class="features">
|
||||
<li>包含基础模板全部功能</li>
|
||||
<li>商品管理 + 购物车 + 在线支付</li>
|
||||
<li>会员注册/积分/等级体系</li>
|
||||
<li>在线预约/订单管理</li>
|
||||
<li>营销工具（优惠券/拼团/秒杀）</li>
|
||||
<li>数据可视化报表后台</li>
|
||||
<li>3次免费修改调整 + 7天运维支持</li>
|
||||
</ul>
|
||||
<div class="price-row">
|
||||
<div>
|
||||
<div class="price"><small>¥</small>1988<span class="unit">/套</span></div>
|
||||
</div>
|
||||
<span class="btn">立即下单</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 服务流程 -->
|
||||
<div class="section-title">— 服务流程 —</div>
|
||||
<div class="flow-section">
|
||||
<div class="flow-card">
|
||||
<h3>标准交付流程</h3>
|
||||
<div class="flow-steps">
|
||||
<div class="flow-step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-text">需求沟通</div>
|
||||
<div class="step-desc">确认功能清单</div>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-text">UI设计</div>
|
||||
<div class="step-desc">原型+视觉稿</div>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-text">开发测试</div>
|
||||
<div class="step-desc">前端+后端联调</div>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-text">上线交付</div>
|
||||
<div class="step-desc">发布+运维</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付说明 -->
|
||||
<div class="pay-notice">
|
||||
💡 支付说明：下单后请在15分钟内完成支付，支付成功后我们将在1个工作日内与您联系确认需求。支持微信H5支付、支付宝等多种支付方式。
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="footer">
|
||||
© 2024 江苏六果科技有限公司 版权所有<br>
|
||||
ICP备案号：请填写贵司域名备案号 | 域名：请填写贵司域名<br>
|
||||
联系邮箱：请填写贵司邮箱 | 客服热线：请填写贵司电话
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user