File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/fenxiao.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">
<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;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #2d76ff !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: 100% 100%;
}
.groupDetail{
margin-top:30px;
display:flex;
justify-content: space-between;
}
.groupDetail>div{
width:48%;
height:372px;
text-align: center;
box-sizing: border-box;
padding-top:20px;
}
.groupDetail>div img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.groupDetail .modeText{
text-align: left;
padding-top:60px;
}
.modeText div{
line-height:63px;
height:63px;
color:#666666;
border-radius: 26px;
text-align: left;
text-indent: 24px;
font-size: 20px;
display: inline-block;
cursor: pointer;
}
.modeText div:hover{
color:#2556E2;
}
.modeText .active{
color:#2556E2;
box-shadow:0px 10px 13px rgba(35,87,225,0.05);
}
.sixCore{
height:893px;
width:1354px;
margin:0 auto;
box-sizing: border-box;
}
.sixCore_title{
height:156px;
position:relative;
margin-bottom:50px;
}
.sixCore_title h2{
font-size:35px;
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.5;
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:155px;
line-height: 184px;
text-align: center;
}
.pic img{
width:92px;
height:69px;
}
.core .title{
height:19px;
line-height:19px;
text-align: center;
font-size:19px;
color:#242841;
}
.paragraph{
color:rgba(98,101,115,1);
line-height:24px;
margin-top:10px;
font-size:14px;
padding:0 43px;
box-sizing: border-box;
text-align: center;
}
.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:643px;
width:1125px;
background:#fff;
margin:0 auto;
}
.applyTitle{
height:156px;
position:relative;
}
.applyTitle h2{
font-size:35px;
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:526px;
top:132px;
}
.applyPic{
margin-top:50px;
display: flex;
justify-content: space-between;
}
.applyPic .graphic{
width:341px;
height: 362px;
background:#f8fafe;
border-radius: 5px;
text-align: center;
/* transition:all 1s; */
}
/* .graphicUp{
transform: translateY(-24px);
} */
.graphic img{
width:108px;
height:112px;
margin-top:42px;
}
.graphic p{
margin:14px 45px;
font-size:14px;
line-height:24px;
color:#626573;
text-align: center;
}
.graphic .titlep{
font-size:20px;
line-height:56px;
color:#242742;
text-align: center;
margin:36px 82px 0;
border-bottom: 1px solid #f2e5e2;
}
.groupTest{
height:267px;
width:100%;
margin-top:45px;
margin-bottom: -1px;/*隐藏图片下1像素白边*/
/* position:relative; */
background:url('{pboot:sitetplpath}/static/images/bottom.png');
background-size:100% 100%;
}
.groupTest>p{
font-size:30px;
color:#fff;
padding-top:56px;
text-align: center;
}
.groupTest>div{
margin-top:32px;
text-align: center;
}
.groupTest>div>p{
display:inline-block;
font-size:15px;
color:#fff;
}
.groupTest>div>p img{
display:inline-block;
margin-right:10px;
}
.groupTest>div>p:first-child{
margin-right:80px;
}
.groupTestBtn{
width:160px;
height:44px;
background:#fff;
color:#2556E2;
text-align: center;
line-height:44px;
font-size:14px;
border-radius: 5px;
/* box-shadow: 1 2px 6px #117FE7; */
box-shadow: 1px 2px 0px rgba(17,127,231,0.25) inset;
cursor: pointer;
margin:50px auto 0;
user-select:none;
}
</style>
</head>
<body class="main">
<div id="communityGroup">
<div class="head" style="background: url('{pboot:sitetplpath}/static/images/banner.png') no-repeat; background-color: #1d58e6">
{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:#2d76ff;font-weight: 800;" onclick="wxclick()">立即咨询</div>
<div class="banner-word-btn free_btn" onclick="showClick()">获取解决方案</div>
</div>
<div class="banner-pic">
<img src="{pboot:sitetplpath}/static/picture/fenxiaoshangcheng.png" alt="三匠互联分销商城系统">
</div>
</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/member.png" alt="粉丝转化为员工">
<p class="titlep">粉丝转化为员工</p>
<p>分销可获得佣金奖励，您的粉丝也可以是你的员工，主动帮您推销分享</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/fission.png" alt="分销商快速裂变">
<p class="titlep">分销商快速裂变</p>
<p>二级分销模式，满足分销门槛即可成为分销商，快速实现分销裂变</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/settlement.png" alt="佣金自动结算">
<p class="titlep">佣金自动结算</p>
<p>完善的佣金结算体系，帮助商家实现系统自动分账，账目轻松管理</p>
</div>
</div>
</div>
<div class="apply">
<div class="applyTitle">
<h2>三匠互联分销模式介绍</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="groupDetail">
<div>
<img class="modeImg" src="{pboot:sitetplpath}/static/picture/fenxiao1.png" alt="三匠互联分销模式介绍">
</div>
<div class="modeText">
<div class="active" data-type="1">
1、商城后台选择开启或分销功能和设置分销规则。
</div>
<div data-type="2">
2、商家可在商城后台设置推广海报，用于分销商分享。
</div>
<div data-type="3">
3、用户在移动端商城内通过申请购买成为分销商。
</div>
<div data-type="4">
4、分销成功后、获得佣金奖励，可多种方式提现。
</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/one.svg" alt="分销商门槛设置">
</div>
<p class="title">分销商门槛设置</p>
<p class="paragraph">商家可以自定义设置分销商成为分销商的门槛</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/two.svg" alt="传统分销模式">
</div>
<p class="title">传统分销模式</p>
<p class="paragraph">分销商可以邀请下级分销商，不违规红线</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/three.svg" alt="独家商品分销">
</div>
<p class="title">独家商品分销</p>
<p class="paragraph">三匠互联支持商品定义分享模式，设置单独佣金</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/four.svg" 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/five.svg" alt="分销商推广海报">
</div>
<p class="title">分销商推广海报</p>
<p class="paragraph">分销商有专属分销海报帮助提升形象</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/six.svg" alt="分销商业绩">
</div>
<p class="title">分销商业绩</p>
<p class="paragraph">移动端可随时查看个人业绩</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/seven.svg" alt="佣金统计">
</div>
<p class="title">佣金统计</p>
<p class="paragraph">移动端设有分销商佣金查看明细</p>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/eight.svg" alt="分销商统一管理">
</div>
<p class="title">分销商统一管理</p>
<p class="paragraph">管理后台进行统一的分销商管理</p>
</div>
</div>
</div>
<div class="groupTest">
<p>支持分销个性化定制方案，满足不同客户需求</p>
<div>
<p>
<img src="{pboot:sitetplpath}/static/picture/phone.png" alt="三匠互联电话">
电话：18520002448
</p>
<p>
<img src="{pboot:sitetplpath}/static/picture/wechat.png" alt="三匠互联微信">
微信：sanjiangAPP
</p>
</div>
<div class="groupTestBtn" onclick="wxclick()">联系客服咨询</div>
</div>
{include file=comm/foot.html}
</div>
<script>
$('.modeText').on('click','div',function() {
$('.modeText div').removeClass('active')
$(this).addClass('active')
let num = $(this).attr('data-type')
$('.modeImg').attr('src',`{pboot:sitetplpath}/static/picture/fenxiao${num}.png`)
})
</script>
</body>
</html>