File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/sqtg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{pboot:pagetitle}</title>
<meta name="keywords" content="{pboot:pagekeywords}">
<meta name="description" content="{pboot:pagedescription}">
<link rel="shortcut icon" href="{pboot:sitetplpath}/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/index.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/home.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/sulttion.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/public.css">
<style>
#communityGroup{
background:#fff;
}
.help-right-item-sub, .help-right-item-title {
color: #8e98a9;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #00BB6E !important;
}
.banner{
display: flex;
justify-content: space-between;
}
.banner-pic{
width: 354px;
height: 302px;
}
.banner-pic img{
width: 100%;
}
.banner-word-btn{
margin-top: 42px;
display: inline-block;
border-radius: 5px;
color: #879fff;
font-size: 14px;
cursor: pointer;
}
.free_btn{
background:none;
border:1px solid #fff;
color:#fff;
margin-left:8px;
}
.head{
/*padding-top: 75px;*/
/*background-position-y: 68px !important;*/
background-size: cover !important;
}
.wahtGroup{
height:552px;
width:100%;
background:url('{pboot:sitetplpath}/static/images/sqtg.png') no-repeat;
background-size: 100% 100%;
}
.groupContent{
max-width:1429px;
height:552px;
margin:0 auto;
/* border:1px solid #ccc; */
position:relative;
}
.groupContent h2{
font-size:30px;
line-height:75px;
font-weight: 700;
z-index:1;
position:absolute;
top:128px;
right:224px;
color: #242841;
}
.groupContent h3{
font-size: 37px;
line-height:37px;
color:#C4C6D4;
opacity: 0.2;
position:absolute;
top:131px;
right:193px;
}
.groupContent .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:312px;
top:212px;
}
.groupContent .groupDetail{
width:720px;
height:120px;
position:absolute;
right: 0;
bottom:154px;
}
.groupDetail div{
font-size:18px;
line-height:20px;
color:#626573;
margin-bottom:28px;
}
.groupDetail div span{
display: inline-block;
width: 16px;
height: 16px;
color: #fff;
background: linear-gradient(to right, #7F94FA, #8BBFFE);
border-radius: 50%;
text-align: center;
line-height: 16px;
font-size:12px;
}
.sixCore{
height:893px;
max-width:1354px;
margin:0 auto;
box-sizing: border-box;
}
.sixCore_title{
height:156px;
position:relative;
margin-bottom:50px;
}
.sixCore_title h2{
font-size:30px;
font-weight: 700;
line-height:75px;
width:100%;
text-align: center;
z-index:1;
position:absolute;
top:57px;
color: #242841;
}
.sixCore_title h3{
font-size: 37px;
line-height:37px;
color:#C4C6D4;
opacity: 0.2;
position:absolute;
width:100%;
text-align: center;
top:60px;
}
.sixCore_title .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:640px;
top:132px;
}
.sixCore_top,.sixCore_bottom{
display: flex;
justify-content: space-between;
}
.sixCore_bottom{
margin-top:67px;
}
.core{
width:310px;
height:310px;
/* border:1px solid #ccc; */
transition:all 1s;
border-radius: 30px;
}
.core .pic{
width:100%;
height:184px;
line-height: 184px;
text-align: center;
}
.pic img{
width:104px;
height:104px;
border-radius: 30px;
}
.core .title{
height:19px;
line-height:19px;
text-align: center;
font-size:19px;
color:#242841;
}
.paragraph{
color:rgba(98,101,115,0);
line-height:24px;
margin-top:10px;
font-size:14px;
padding:0 43px;
box-sizing: border-box;
transition:all 1s;
}
.upShadow .paragraph{
color:rgba(98,101,115,1);
}
.upShadow{
transform: translateY(-40px);
box-shadow: 0 0 49px 0 rgba(147,147,147,0.2);
}
.apply{
height:645px;
max-width:1340px;
background:#FDFDFD;
margin:0 auto;
}
.applyTitle{
height:156px;
position:relative;
}
.applyTitle h2{
font-size:30px;
font-weight: 700;
line-height:75px;
width:100%;
text-align: center;
z-index:1;
position:absolute;
top:57px;
color: #242841;
}
.applyTitle h3{
font-size: 37px;
line-height:37px;
color:#C4C6D4;
opacity: 0.2;
position:absolute;
width:100%;
text-align: center;
top:60px;
}
.applyTitle .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:640px;
top:132px;
}
.applyPic{
margin-top:50px;
display: flex;
justify-content: space-between;
}
.applyPic .graphic{
width:317px;
height:294px;
transition:all 1s;
}
.graphicUp{
transform: translateY(-24px);
}
.graphic img{
display:block;
width:100%;
height:193px;
}
.graphic p{
padding:14px 45px;
font-size:14px;
line-height:24px;
color:#626573;
text-align: center;
}
.applyBtn{
width:160px;
height:40px;
background:#FF6918;
color:#fff;
text-align: center;
line-height:40px;
font-size:14px;
border-radius: 4px;
box-shadow: 0 2px 6px 0 rgba(255,105,23,0.46);
cursor: pointer;
margin:50px auto 0;
user-select:none;
}
.upPic{
transform: translateY(-20px);
}
.groupMode{
height:798px;
width:100%;
background:url("{pboot:sitetplpath}/static/images/characteristicbg.png") center no-repeat;
background-size: 100% 100%;
}
.groupMode_title{
height:156px;
position:relative;
}
.groupMode_title h2{
font-size:35px;
line-height:75px;
width:100%;
text-align: center;
z-index:1;
position:absolute;
top:57px;
color: #fff;
}
.groupMode_title h3{
font-size: 37px;
line-height:37px;
color:#fff;
opacity: 0.5;
position:absolute;
width:100%;
text-align: center;
top:60px;
}
.groupMode_title .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:50%;
top:132px;
transform: translateX(35px);
}
.groupMode_content{
max-width:1681px;
margin:0 auto;
background:#fff;
box-sizing: border-box;
padding:50px 150px;
}
.groupMode_content img{
width:100%;
}
.showGroup{
/* height:645px; */
max-width:1344px;
margin:0 auto;
}
.switer_group{
display: flex;
justify-content: space-between;
margin-top:30px;
}
.switer_item{
width:260px;
height:625px;
}
.switer_item img{
width:100%;
}
.switer_item p{
font-size:15px;
line-height:61px;
text-align: center;
color:#626573;
}
.showGroupBtn{
width:160px;
height:40px;
background:#FF6918;
color:#fff;
text-align: center;
line-height:40px;
font-size:14px;
border-radius: 4px;
box-shadow: 0 2px 6px 0 rgba(255,105,23,0.46);
cursor: pointer;
margin:50px auto 0;
user-select:none;
position: relative;
z-index: 1;
}
.groupTest{
height:350px;
width:100%;
margin-top:-45px;
margin-bottom: -1px;/*隐藏图片下1像素白边*/
position:relative;
}
.groupTest img{
width:100%;
height:100%;
}
.groupTest p{
font-size:20px;
color:#fff;
position:absolute;
top:197px;
left:37%;
}
.groupTest p span{
display:inline-block;
text-indent: 2em;
}
.groupTestBtn{
width:160px;
height:44px;
background:#FF6918;
color:#fff;
text-align: center;
line-height:44px;
font-size:14px;
border-radius: 22px;
box-shadow: 0 2px 6px 0 rgba(255,105,23,0.46);
cursor: pointer;
margin:50px auto 0;
user-select:none;
position:absolute;
bottom:48px;
left:46%;
}
</style>
</head>
<body class="main">
<div id="communityGroup">
<div class="head" style="background: url('{pboot:sitetplpath}/static/images/group_bg.png') no-repeat; background-color: #53c05b">
{include file=comm/head.html}
<div class="head-in">
<div class="banner">
<div class="banner-word">
<p class="banner-word-1st" style="color: #fefeff;font-size: 40px;font-weight: bold;margin-top: 50px;">三匠互联社区团购系统</p>
<p class="banner-word-2nd" style="font-weight: normal;font-size: 22px;letter-spacing: .4px">整合社区资源，快速实现流量裂变</p>
<p class="banner-word-2nd" style="font-weight: normal;font-size: 22px;letter-spacing: .4px">提供优质的社区团购方案，为线下门店增收</p>
<div class="banner-word-btn" style="color:#00BB6E;font-weight: 800;border: 1px solid #fff" onclick="wxclick()">立即咨询</div>
<div class="banner-word-btn free_btn" onclick="showClick()">获取解决方案</div>
</div>
<div class="banner-pic">
<img src="{pboot:sitetplpath}/static/picture/group.png" alt="三匠互联社区团购系统">
</div>
</div>
</div>
</div>
<div class="wahtGroup">
<div class="groupContent">
<h2>什么是社区团购</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
<div class="groupDetail">
<div>
<span>1</span>
社区团购以社区为基础，团长通过微信群与社区居民互动，开展群内分享销售。
</div>
<div>
<span>2</span>
社区用户在小程序或公众号商城下单后、平台发货至团长处，社区用户到团长处自提。
</div>
<div>
<span>3</span>
通过社区平台+商家+团长+配送四个环节进行运作，形成了一种新的社区消费模式。
</div>
</div>
</div>
</div>
<div class="sixCore">
<div class="sixCore_title">
<h2>社区团购八大核心优势</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="sixCore_top">
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/hk.png" alt="获客成本低">
</div>
<p class="title">获客成本低</p>
<p class="paragraph">通过招募的团长建立微信群，与邻里直接互动沟通0成本带动客户的增长</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/rg.png" alt="人工成本低">
</div>
<p class="title">人工成本低</p>
<p class="paragraph">社区团购主要召集的是兼职店主等，相比传统电商起来，人力成本几乎为0</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/wl.png" alt="物流成本低">
</div>
<p class="title">物流成本低</p>
<p class="paragraph">社区团购主要是预售模式，形成大的订单后统一向各小区发货，降低了物流成本</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/lkc.png" alt="零库存堆积">
</div>
<p class="title">零库存堆积</p>
<p class="paragraph">采取预售方式，客户要先通过社群链接下单，商家收到款项后，再进行统一发货</p>
</div>
</div>
<div class=" sixCore_bottom">
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/ty.png" alt="购买体验好">
</div>
<p class="title">购买体验好</p>
<p class="paragraph">互动性和及时反馈比较强，集采级配，交付体验比电商更好、稳定性更强</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/lb.png" alt="裂变速度快">
</div>
<p class="title">裂变速度快</p>
<p class="paragraph">熟人之间的相互推荐，客户不担心产品质量，因此加速产品的裂变速度</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/yy.png" alt="运营模式简单">
</div>
<p class="title">运营模式简单</p>
<p class="paragraph">团长组件社群，通过合理的运营，为客户提供优质的服务，轻松的获得客户的认可</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/sy.png" alt="使用更方便">
</div>
<p class="title">使用更方便</p>
<p class="paragraph">客户通过小程序就可以购买商品，团长也可通过手机管理订单</p>
</div>
</div>
</div>
<div class="apply">
<div class="applyTitle">
<h2>适用群体</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="applyPic">
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/wy.png" alt="连锁物业有足够的资源">
<p>连锁物业有足够的资源，能快速组织社区居民团购群，针对物业覆盖的小区，成立社区门店，引导居民消费</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/gys.png" alt="货源供应商的一手货源与社区合作">
<p>货源供应商的一手货源与社区合作，满足社区团购模式货源需求，通过社区团购这种模式来拓展销路</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/bld.png" alt="连锁便利店拥有丰富的社区人脉资源">
<p>连锁便利店拥有丰富的社区人脉资源，可以整合多方面的资源，多方位合作推动社区团购模式发展</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/md.png" alt="小区门店占据天然的地理优势">
<p>小区门店占据天然的地理优势，可以迅速地整合社区居民资源和其他资源，帮助门店的增加收入</p>
</div>
</div>
<div class="applyBtn" onclick="wxclick()">免费获取解决方案</div>
</div>
<div class="groupMode">
<div class="groupMode_title">
<h2>三匠互联社区团购模式</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="groupMode_content">
<img src="{pboot:sitetplpath}/static/picture/table.png" alt="三匠互联社区团购模式">
</div>
</div>
<div class="showGroup">
<div class="applyTitle">
<h2>产品展示</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="switer_group">
<div class="switer_item">
<img src="{pboot:sitetplpath}/static/picture/zs4.png" alt="社区团购首页">
<p>社区团购首页</p>
</div>
<div class="switer_item">
<img src="{pboot:sitetplpath}/static/picture/zs3.png" alt="社区团购菜谱页">
<p>社区团购菜谱页</p>
</div>
<div class="switer_item">
<img src="{pboot:sitetplpath}/static/picture/zs1.png" alt="社区团购结算页">
<p>社区团购结算页</p>
</div>
<div class="switer_item">
<img src="{pboot:sitetplpath}/static/picture/zs2.png" alt="社区团购个人中心页">
<p>社区团购个人中心页</p>
</div>
</div>
<div class="showGroupBtn" onclick="showClick()">免费演示案例</div>
</div>
<div class="groupTest">
<img src="{pboot:sitetplpath}/static/picture/search.png" alt="三匠互联社区团购新模式">
<p>三匠互联帮您抓住社区团购新机遇<span>线上团购+线下自提，玩转社区消费新模式</span></p>
<div class="groupTestBtn" onclick="wxclick()">立即咨询</div>
</div>
{include file=comm/foot.html}
</div>
<script>
$(".core").hover(
function () {
$(this).addClass("upShadow");
},
function () {
$(this).removeClass("upShadow");
}
);
$(".graphic").hover(
function () {
$(this).addClass("graphicUp");
},
function () {
$(this).removeClass("graphicUp");
}
);
</script>
</body>
</html>