File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/yingxiao.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/head.css">
<link rel="stylesheet" type="text/css" href="{pboot:sitetplpath}/static/css/index.css" />
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/home.css">
<style>
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #27B5B6 !important;
}
.banner{
display: flex;
justify-content: space-between;
align-items: center;
}
.cy_about_bg_content{
padding-top: 0;
}
.banner-word-btn {
margin-top: 42px;
display: inline-block;
border-radius: 5px;
color: #247ff4;
font-size: 14px;
cursor: pointer;
}
.help-right-item-sub,.help-right-item-title {
color: #8e98a9;
}
.no {
color: #0b1733;
}
.sy_button_style{
color: white;
font-size: 14px;
padding: 0 24px;
line-height: 40px;
background: #ff6a18;
border-radius: 0.5em;
display: inline-block;
margin: 12px 0;
cursor: pointer;
font-weight: 500;
}
.head{
/*padding-top: 75px;*/
height: auto;
}
.banner-pic{
width: 450px;
margin-bottom: 34px;
}
.banner-pic img{
width: 100%;
}
.main{
background:#F8FDFD;
}
.editionCenter{
width:1125px;
margin:0 auto;
}
.dis_flex{
display:flex;
justify-content: flex-start;
}
.space{
justify-content: space-between;
}
.wrap{
flex-wrap:wrap;
}
.swiper_title{
height:185px;
position:relative;
}
.swiper_title h2{
font-size:30px;
line-height:75px;
width:100%;
text-align: center;
z-index:1;
position:absolute;
top:57px;
color: #242841;
font-weight: 700;
}
.swiper_title h3{
font-size: 37px;
line-height:37px;
color:#C4C6D4;
opacity: 0.2;
position:absolute;
width:100%;
text-align: center;
top:60px;
}
.swiper_title .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:527px;
top:132px;
}
.introduce_item{
width:125px;
height:150px;
border-radius: 20px;
transition: all 0.5s;
text-align: center;
}
.introduce_item:hover{
box-shadow: 0 0 10px 5px rgba(220,220,220,0.6);
transform: translateY(-10px);
}
.introduce_item p{
color:#373A52;
font-weight: 700;
text-align: center;
}
.introduce_item img{
display:inline-block;
margin-top:20px;
margin-bottom: 10px;
}
.tabs{
width:183px;
}
.content{
flex-grow:1;
}
.content>div{
display: none;
}
.content1>div{
width:360px;
height:196px;
display: inline-block;
margin: 69px 41px 0 39px;
}
.content1>div p{
text-align: center;
color: #fff;
}
.content1>div p:first-child{
font-size: 22px;
line-height: 22px;
margin-top: 27px;
}
.content1>div p:last-child{
font-size: 24px;
line-height: 24px;
margin-top: 65px;
}
.content_box{
width: 418px;
height: 155px;
opacity: 1;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 0 5px 5px rgba(59,55,84,0.11);
margin-right:42px;
margin-top:23px;
padding:36px;
box-sizing: border-box;
}
.content_box h4{
line-height:44px;
font-size: 20px;
font-weight: 700;
color: #242841;
}
.content_box p{
line-height: 24px;
font-size: 17px;
color:#434A60;
font-weight: 400;
margin-top:7px;
}
.content_box .tag{
width: 80px;
height: 26px;
opacity: 1;
background: #fc692b;
border-radius: 6px;
color:#fff;
font-size: 16px;
line-height: 26px;
text-align: center;
margin-top:26px;
margin-bottom: 70px;
}
.content_box div:last-child{
width: 80px;
height: 40px;
opacity: 1;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #434a60;
line-height: 24px;
}
.tab_item{
width:100%;
height:65px;
line-height:65px;
border-radius: 4px;
margin-bottom:5px;
align-items:center;
cursor: pointer;
}
.tab_item p{
color:#242841;
}
.tab_item .pic{
width:41px;
height:41px;
border-radius: 50%;
text-align: center;
line-height: 41px;
display: inline-block;
margin-left:23px;
margin-right: 16px;
}
.tab_item.active{
background: linear-gradient(-55deg,#7fd0ea 0%, #39affc 100%);
}
.tab_item.active .pic{
background: rgba(255,255,255,0.20)!important;
}
.tab_item.active p{
color:#fff;
}
.tab_item .pic img{
display: inline-block;
}
.people1,.people2{
position: absolute;
bottom:0;
}
.people2{
left:349px;
}
.people1{
right:0;
}
.showPage{
position:relative;
height:570px;
}
.showPage .item{
position:absolute;
}
.showPage .item{
box-shadow: 0px 3px 10px 0px rgba(224,227,235,0.40), 0px 5px 20px 0px rgba(81,81,81,0.20);
}
.showPage .noShow{
box-shadow:none!important;
}
.showPage .item img{
width:100%;
height:100%;
}
.showPage .toLeft,.showPage .toRight{
position:absolute;
top:50%;
width:40px;
height:40px;
}
.getBtn{
width: 160px;
height: 50px;
background: #fc692b;
border-radius: 4px;
color:#fff;
font-size: 16px;
line-height: 50px;
text-align: center;
margin:60px auto;
border:none;
display: block;
cursor: pointer;
}
.free_btn{
background:rgba(255,255,255,0.2);
color:#fff;
margin-left:15px;
border:1px solid #fff;
}
</style>
</head>
<body>
<div class="main">
<div class="head cy_about_bg" style="background:linear-gradient(0deg,#5bc5cf 0%, #05acba 100%)!important; background-color: #26b6c2">
{include file=comm/head.html}
<div class="head-in">
<div class="banner">
<div class="banner-word cy_about_bg_content">
<p class="banner-word-1st" style="margin-bottom: 0; font-size: 40px;font-weight: bold;">三匠互联营销活动方案</p>
<p class="banner-word-2nd" style="margin-bottom: 0; font-weight: normal;font-size: 22px;letter-spacing: .4px"><span></span>丰富的营销活动任意选择</p>
<p class="banner-word-2nd" style="margin-bottom: 0; font-weight: normal;font-size: 22px;letter-spacing: .4px"><span></span>传统销售+特色营销模式助力商家成长</p>
<div class="banner-word-btn" style="color:#27B5B6;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/huiyuanyingxiaobg.png" alt="会员营销">
</div>
</div>
</div>
</div>
<div style="width:100%;background:#fff;">
<div class="editionCenter" style="height:660px;">
<div class="swiper_title" style="margin-bottom: 40px;">
<h2>三匠互联营销活动介绍</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="dis_flex space" style="margin-bottom: 70px;">
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx1.svg" alt="优惠券">
<p>优惠券</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx2.svg" alt="拼团秒杀">
<p>拼团秒杀</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx3.svg" alt="N件N折">
<p>N件N折</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx4.svg" alt="砍价">
<p>砍价</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx5.svg" alt="满减满折">
<p>满减满折</p>
</div>
</div>
<div class="dis_flex space">
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx6.svg" alt="积分">
<p>积分</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx7.svg" alt="储蓄卡">
<p>储蓄卡</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx8.svg" alt="会员卡">
<p>会员卡</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx9.svg" alt="分销">
<p>分销</p>
</div>
<div class="introduce_item">
<img src="{pboot:sitetplpath}/static/picture/tsyx10.svg" alt="社交动态">
<p>社交动态</p>
</div>
</div>
</div>
</div>
<div class="editionCenter">
<div class="swiper_title">
<h2>三匠互联营销活动介绍</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="dis_flex space" style="margin-bottom: 40px;position:relative;">
<div class="tabs tab_top" style="margin-right:35px;">
<div class="tab_item dis_flex active" index="1">
<div class="pic" style="background:linear-gradient(#39affc, #7fd0ea);">
<img src="{pboot:sitetplpath}/static/picture/yhj1.png" alt="优惠券">
</div>
<p>优惠券</p>
</div>
<div class="tab_item dis_flex" index="2">
<div class="pic" style="background: linear-gradient(#24d2b3, #38dfc8);">
<img src="{pboot:sitetplpath}/static/picture/pt1.png" alt="拼团秒杀">
</div>
<p>拼团秒杀</p>
</div>
<div class="tab_item dis_flex" index="3">
<div class="pic" style="background:linear-gradient(#fd7d3b, #fdb463);">
<img src="{pboot:sitetplpath}/static/picture/ms1.png" alt="N件N折">
</div>
<p>N件N折</p>
</div>
<div class="tab_item dis_flex" index="4">
<div class="pic" style="background:linear-gradient(#1daafc, #72d7fb);">
<img src="{pboot:sitetplpath}/static/picture/kj1.png" alt="砍价">
</div>
<p>砍价</p>
</div>
<div class="tab_item dis_flex" index="5">
<div class="pic" style="background:linear-gradient(#8d67fb, #9a9dfc);">
<img src="{pboot:sitetplpath}/static/picture/man1.png" alt="满减满折">
</div>
<p>满减满折</p>
</div>
</div>
<div class="content_top content">
<div class="content1">
<div style="background:url('{pboot:sitetplpath}/static/images/pink.png') no-repeat">
<p>满减优惠券</p>
<p>
<span style="font-size: 36px;margin-right:23px;">¥</span>
<span style="font-size: 60px;margin-right:36px;">60</span>
现金券
</p>
</div>
<div style="background:url('{pboot:sitetplpath}/static/images/blue.png') no-repeat;margin-left:0;">
<p>满折优惠券</p>
<p>
<span style="font-size: 36px;margin-right:23px;">¥</span>
<span style="font-size: 60px;margin-right:36px;">60</span>
现金券
</p>
</div>
</div>
<div class="content2">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>机器人智能成团</h4>
<p>可设置在置顶时间内自动成团，满足用户的拼团需求</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>拼团秒杀活动管理</h4>
<p style="width: 300px;">可创建拼团和秒杀活动并对每一场活动进行单独管理</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>活动买家查看和管理</h4>
<p>查看每一场活动的买家并对其进行发货管理</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>拼团秒杀活动数据分析</h4>
<p style="width: 320px;">大数据分析每一场的团购或秒杀活动的销售情况</p>
</div>
</div>
</div>
<div class="content3">
<div>
<div class="dis_flex">
<div class="content_box" style="margin-top:0;height:333px;">
<h4>满N件N折商品</h4>
<p>可设置在置顶时间内自动成团，满足用户的拼团需求</p>
<div class="tag">3件5折</div>
<div>
销量：100 收藏：100
</div>
</div>
<div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>活动可添加多件商品</h4>
<p style="width: 300px;">满足同一规则的商品可添加在一场活动中</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>第二件半价</h4>
<p style="width: 320px;">例如第二件半价活动可轻松的创建，帮助提升销量</p>
</div>
</div>
</div>
</div>
</div>
<div class="content4">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>多限制创建砍价活动</h4>
<p>砍价活动创建场次无限制，随意创建任意场次</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>砍价活动统一管理</h4>
<p style="width: 300px;">砍价活动统一管理，开始活动、结束活动一键操作</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>购买明细一目了然</h4>
<p>统计每一场活动的购买数据，帮助查找购买记录</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>活动数据精准分析</h4>
<p style="width: 320px;">根据活动数据统计，帮助商家分析了解活动效果</p>
</div>
</div>
</div>
<div class="content5">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>多种规则满足不同场景</h4>
<p>不同的活动规则满足商家不同的应用场景</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>活动专区方便买家购买</h4>
<p style="width: 300px;">满减满折设有活动专区，买家可在活动专区选购商品</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>满减满折活动统一管理</h4>
<p>满减满折活动统一管理，开始或结束活动一键操作</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>活动可便捷地分享到各大社交平台</h4>
<p style="width: 320px;">分享活动二维码到社交平台，迅速传播活动</p>
</div>
</div>
</div>
</div>
<img class="people1" src="{pboot:sitetplpath}/static/picture/people1.png" alt="">
</div>
<div class="dis_flex space" style="margin-bottom: 40px;position:relative;">
<img class="people2" src="{pboot:sitetplpath}/static/picture/people2.png" alt="">
<div class="content_bottom content">
<div class="content6">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>支持积分兑换功能</h4>
<p>积分商城支持商家添加积分兑换商品</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>多种获取积分方式</h4>
<p>多种积分规则，满足商家的不同需求</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>积分可以抵现</h4>
<p>买家购买商品时可以适用积分抵扣现金</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>积分兑换记录明细</h4>
<p>每一笔的积分兑换记录帮助商家进行核对</p>
</div>
</div>
</div>
<div class="content7">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>支持会员储值卡功能</h4>
<p>商家可开通储值卡功能满足会员储值需求</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>储值多少赠多少</h4>
<p>满足储值赠金额的需求，可设置赠送金额</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>储值卡与积分联动</h4>
<p>商家可以设置储值卡储值赠送积分功能</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>储值卡与会员卡联动</h4>
<p>买家可以充值储值卡的同时获得会员卡</p>
</div>
</div>
</div>
<div class="content8">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>完善的会员管理系统</h4>
<p>新商云会员管理系统协助您维护您的客户</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>会员卡面风格任意选</h4>
<p>可自定义会员卡样式，打造独属独特风格</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>会员卡可添加子卡</h4>
<p>一张主会员卡下可添加多张子卡</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>会员卡购买记录管理</h4>
<p>买家购买记录统一查询，方便会员卡管理</p>
</div>
</div>
</div>
<div class="content9">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>支持三级分销模式</h4>
<p>传统分销创新玩法，支持三级分销模式</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>分销商专属名片</h4>
<p>自动生成分销商专属名片，方便分销商发展客户</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>多种途径获取分销商身份</h4>
<p>商家可根据需求设置不同获取分销商身份的途径</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>支持多种分销商提现方式</h4>
<p>分销商可以通过银行卡、微信和支付宝的方式提现</p>
</div>
</div>
</div>
<div class="content10">
<div class="dis_flex">
<div class="content_box" style="margin-top:0;">
<h4>图文动态</h4>
<p>商家唉商城内发表相关图文，帮助商品宣传</p>
</div>
<div class="content_box" style="margin-top:0;margin-right:0;">
<h4>视频动态</h4>
<p>类似于抖音的视频动态是时下最流行的宣传方式</p>
</div>
</div>
<div class="dis_flex">
<div class="content_box">
<h4>订阅特色营销方案</h4>
<p>适用于多商户商家应用，可浏览已订阅商家动态</p>
</div>
<div class="content_box" style="margin-right:0;">
<h4>动态后台统一编辑上传</h4>
<p>商家可在管理后台统一编辑完成后上传至移动端</p>
</div>
</div>
</div>
</div>
<div class="tabs tab_bottom" style="margin-left:35px;">
<div class="tab_item dis_flex active" index="6">
<div class="pic" style="background:linear-gradient(#39affc, #7fd0ea);">
<img src="{pboot:sitetplpath}/static/picture/jf1.png" alt="积分">
</div>
<p>积分</p>
</div>
<div class="tab_item dis_flex" index="7">
<div class="pic" style="background:linear-gradient(#24d2b3,#38dfc8);">
<img src="{pboot:sitetplpath}/static/picture/cxk1.png" alt="储蓄卡">
</div>
<p>储蓄卡</p>
</div>
<div class="tab_item dis_flex" index="8">
<div class="pic" style="background:linear-gradient(#fd7d3b, #fdb463);">
<img src="{pboot:sitetplpath}/static/picture/hyk1.png" alt="会员卡">
</div>
<p>会员卡</p>
</div>
<div class="tab_item dis_flex" index="9">
<div class="pic" style="background:linear-gradient(#1daafc, #72d7fb);">
<img src="{pboot:sitetplpath}/static/picture/fx1.png" alt="分销">
</div>
<p>分销</p>
</div>
<div class="tab_item dis_flex" index="10">
<div class="pic" style="background:linear-gradient(#8d67fb, #9a9dfc);">
<img src="{pboot:sitetplpath}/static/picture/dt1.png" alt="社交动态">
</div>
<p>社交动态</p>
</div>
</div>
</div>
</div>
<div class="editionCenter" style="overflow: hidden;">
<div class="swiper_title">
<h2>三匠互联商城系统资质展示</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="showPage">
<div class="toLeft" style="left:0;">
<img src="{pboot:sitetplpath}/static/picture/toleft1.png" alt="">
</div>
<div class="item" index="1" style="left:439px;z-index:99;width: 222px;height:480px;">
<img src="{pboot:sitetplpath}/static/picture/app4.png" alt="三匠互联商城系统软著">
</div>
<div class="item" index="2" style="left:629px;z-index:98;width: 209px;height:454px;">
<img src="{pboot:sitetplpath}/static/picture/app3.png" alt="三匠互联商城系统软著">
</div>
<div class="item noShow" index="3" style="left:787px;z-index:97;width: 197px;height:391px;">
<img src="{pboot:sitetplpath}/static/picture/app5.png" alt="三匠互联商城系统软著">
</div>
<div class="item noShow" index="4" style="left:116px;z-index:97;width: 197px;height:391px;">
<img src="{pboot:sitetplpath}/static/picture/app2.png" alt="三匠互联商城系统软著">
</div>
<div class="item" index="5" style="left:263px;z-index:98;width: 209px;height:454px;">
<img src="{pboot:sitetplpath}/static/picture/app1.png" alt="三匠互联商城系统软著">
</div>
<div class="toRight" style="right:0;">
<img src="{pboot:sitetplpath}/static/picture/toright1.png" alt="">
</div>
</div>
<button class="getBtn" onclick="wxclick()">获取解决方案</button>
</div>
{include file=comm/foot.html}
</div>
<script>
var list = [
{
left: '439px',
width: '222px',
height: '480px',
zIndex: 99,
num:1
},{
left: '629px',
width: '209px',
height: '454px',
zIndex: 98,
num: 2
},{
left: '787px',
width: '197px',
height: '391px',
zIndex: 97,
num: 3
},{
left: '116px',
width: '197px',
height: '391px',
zIndex: 97,
num: 4
},{
left: '263px',
width: '209px',
height: '454px',
zIndex: 98,
num: 5
}
]
$('.toLeft').on('click',function(){
nextPage(false)
})
$('.toRight').on('click',function(){
nextPage(true)
})
function nextPage(boo){
var obj;
if (boo) {
$('.item[index=3]').css('zIndex',1)
obj = list.shift();
list.push(obj)
} else {
$('.item[index=4]').css('zIndex',1)
obj = list.pop();
list.unshift(obj)
}
$('.item').each(function(i,k){
$(this).attr('index',list[i].num)
$(this).animate(list[i])
if (list[i].zIndex < 98) {
$(this).addClass('noShow')
} else {
$(this).removeClass('noShow')
}
})
}
$('.content'+$('.tab_top .tab_item.active').attr('index')).show()
$('.content'+$('.tab_bottom .tab_item.active').attr('index')).show()
$('.tab_top .tab_item').on('click',function() {
if ($(this).hasClass('active')) return
var cor = $(this).find('.pic').css('backgroundImage')
$('.tab_top .tab_item').removeClass('active')
$('.tab_top .tab_item').css('background','')
$(this).addClass('active')
$('.tab_top .tab_item.active').css('background',cor)
$('.content_top>div').hide()
$('.content'+$(this).attr('index')).show()
})
$('.tab_bottom .tab_item').on('click',function() {
if ($(this).hasClass('active')) return
var cor = $(this).find('.pic').css('backgroundImage')
$('.tab_bottom .tab_item').removeClass('active')
$('.tab_bottom .tab_item').css('background','')
$(this).addClass('active')
$('.tab_bottom .tab_item.active').css('background',cor)
$('.content_bottom>div').hide()
$('.content'+$(this).attr('index')).show()
})
</script>
</body>
</html>