File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/h5mall.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: #FC5B2B !important;
}
.main{
background: #F6F8FB;
}
.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%;
}
.editionCenter{
width:1125px;
margin:0 auto;
}
.dis_flex{
display:flex;
justify-content: flex-start;
}
.swiper_title{
height:185px;
position:relative;
}
.swiper_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;
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;
opacity: .2;
}
.swiper_title .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:527px;
top:132px;
}
.swiper_item{
width:100%;
height:100%;
justify-content: space-between;
}
.swiper_item .left{
width:420px;
box-sizing: border-box;
padding-left: 20px;
margin-top:134px;
}
.swiper_item .right{
text-align: center;
line-height:542px;
}
.swiper_item h4,.swiper_item h3{
color: #242841;
font-weight: 700;
font-size: 23px;
line-height:41px;
}
.swiper_item p {
color:#677086;
font-size: 17px;
line-height:30px;
margin-top:31px;
width:380px;
}
.swiper_item .learn{
width: 120px;
height: 40px;
opacity: 1;
background: #ff6918;
border-radius: 4px;
box-shadow: -2px 0px 5px 0px rgba(255,105,23,0.46);
color:#fff;
line-height: 40px;
text-align: center;
border:none;
margin-top:21px;
cursor: pointer;
}
.function{
justify-content: space-between;
}
.function .core{
width:261px;
height:163px;
box-sizing: border-box;
border-radius: 6px;
margin-bottom: 20px;
box-shadow: 0px 3px 10px 0px rgba(234,236,241,0.58);
}
.function .core .pic{
text-align: center;
padding-top: 15px;
}
.function .core p{
text-align: center;
color:#A0A2AC;
font-size: 14px;
line-height: 26px;
}
.function .core p:nth-child(2){
text-align: center;
color:#4D5169;
font-size: 16px;
line-height: 30px;
}
.bot_imgs {
width: 1125px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.bot_imgs > div {
display: flex;
flex-direction: column;
align-items: center;
}
.bot_imgs > div span {
color: #434a60;
margin-top: 35px;
font-size: 20px;
}
.showPage{
position:relative;
height:480px;
}
.showPage .item{
position:absolute;
bottom:0
}
.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;
}
.free_btn{
background:rgba(255,255,255,0.2);
color:#fff;
margin-left:15px;
border:1px solid #fff;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #5a54ff !important;
}
.function ul{
width: 100%;
}
.function ul li {
width: 24%;
display: inline-block;
text-align: center;
margin-bottom: 50px;
}
.function ul li img{
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.function ul li p{
color: #434A5F;
font-size: 16px;
}
.process ul li{
width: 13%;
}
.process ul{
position: relative;
text-align: center;
}
.process ul li:nth-child(8){
position: absolute;
right: 78px;
top: 130px;
}
.footer{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.footerContent{
width: 26%;
margin-left: 200px;
}
.footerContent h3{
font-size: 24px;
font-weight: bold;
margin-bottom: 38px;
color: #ffffff;
}
.footerContent p{
font-size: 18px;
margin-bottom: 60px;
color: #ffffff;
}
.footerContent div{
width: 150px;
text-align: center;
}
.footerContent div img{
width: 100%;
height: 150px;
margin-bottom: 20px;
border-radius: 6px;
}
.footerContent div p{
font-size: 14px;
color: #ffffff;
}
.advantage ul{
width: 100%;
text-align: center;
}
.advantage ul li{
width: 46%;
height: 140px;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
box-sizing: border-box;
text-align: left;
margin-bottom: 20px;
border-radius: 6px;
}
.advantage ul li div{
width: 72%;
margin-left: 20px;
}
.advantage ul li div h4{
font-size: 16px;
color: #434A60;
margin-bottom: 10px;
font-weight: bold;
}
.advantage ul li div p{
font-size: 14px;
color: #9599A8;
}
.advantage ul li:hover{
background: url("{pboot:sitetplpath}/static/images/bg2.png") no-repeat;
}
.advantage ul li:hover div h4,.advantage ul li:hover div p{
color: #ffffff;
}
</style>
</head>
<body>
<div class="main">
<div class="head cy_about_bg" style="background: url('{pboot:sitetplpath}/static/images/bannerbg.png') no-repeat !important; background-size: 100% 100% !important; background-color: #495fff">
{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">可嵌入到已有公众号</p>
<p class="banner-word-2nd" style="margin-bottom: 0; font-weight: normal;font-size: 22px;letter-spacing: .4px">成本低、易获客、高转化</p>
<div class="banner-word-btn" style="color:#1A9BF1; 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/gongzhonghaobg.png" alt="三匠互联公众号商城">
</div>
</div>
</div>
</div>
<div>
<div style="width:100%;background:#fff;">
<div class="swiper_title editionCenter">
<h2>三匠互联公众号商城低成本高效率</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
</div>
<div style="width:100%;background:#fff;">
<div class="editionCenter" style="height:542px;">
<div class="swiper_item dis_flex">
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/wechat1.png" alt="基于微信亿级流量池">
</div>
<div class="left">
<h3>基于微信亿级流量池</h3>
<h4>全面进军移动端商城，抢占商机</h4>
<p>运用微信亿级流量的天然优势、结合微信生态的各种营销玩法，产生各种优势特色。</p>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
</div>
</div>
<div class="editionCenter" style="height:542px;">
<div class="swiper_item dis_flex">
<div class="left">
<h3>便捷支付方式</h3>
<h4>随时下单随时购买</h4>
<p>微信支付更符合现代支付场景，用户在各种场景下都可以实现轻松购物。</p>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/wechat2.png" alt="便捷支付方式">
</div>
</div>
</div>
<div style="width:100%;background:#fff;">
<div class="editionCenter" style="height:542px;">
<div class="swiper_item dis_flex">
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/wechat3.png" alt="前后结合统一管理">
</div>
<div class="left">
<h3>前后结合统一管理</h3>
<h4>后台管理店铺装修，前台精致展示</h4>
<p>商家可在管理后台装修店铺，支持PC端和手机端实时预览装修效果。</p>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
</div>
</div>
</div>
<div style="width: 100%;background: #F6F8FB;padding-bottom: 80px">
<div class="swiper_title editionCenter">
<h2>三匠互联公众号商城优势</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="advantage editionCenter">
<ul>
<li style="margin-right: 20px">
<img src="{pboot:sitetplpath}/static/picture/wechat23.png" alt="有公众号即可开商城">
<div>
<h4>有公众号即可开商城</h4>
<p>已有公众号直接绑定，绑定成功后就可以直接在三匠互联开店</p>
</div>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat24.png" alt="公众号可为商城引流">
<div>
<h4>公众号可为商城引流</h4>
<p>借助公众号的粉丝积累量轻松为商城引流，快速将粉丝转化成你的客户</p>
</div>
</li>
<li style="margin-right: 20px">
<img src="{pboot:sitetplpath}/static/picture/wechat25.png" alt="文章可链接公众号商城">
<div>
<h4>文章可链接公众号商城</h4>
<p>公众号的文章里可以链接你的公众号商城，通过文章可为商城引流。</p>
</div>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat26.png" alt="成本低、效果好、传播广">
<div>
<h4>成本低、效果好、传播广</h4>
<p>公众号商城低成本就可开店，传播速度快，运营成本低，开店效果好。</p>
</div>
</li>
</ul>
</div>
</div>
<div style="width: 100%;background: #fff">
<div class="swiper_title editionCenter">
<h2>三匠互联公众号商城特色功能</h2>
<h>XINSHANGYUN</h3>
<div class="bar"></div>
</div>
<div class="function editionCenter">
<ul>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat4.png" alt="公众号绑定">
<p>公众号绑定</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat5.png" alt="自定义菜单">
<p>自定义菜单</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat6.png" alt="推送消息">
<p>推送消息</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat7.png" alt="自动回复">
<p>自动回复</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat8.png" alt="关注提醒">
<p>关注提醒</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat9.png" alt="粉丝维护">
<p>粉丝维护</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat10.png" alt="订单消息">
<p>订单消息</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat11.png" alt="多渠道推广">
<p>多渠道推广</p>
</li>
</ul>
</div>
</div>
<div style="width: 100%;background: #ffffff">
<div class="swiper_title editionCenter">
<h2>操作流程简单 快速搭建商城</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="process function editionCenter">
<ul>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat12.png" alt="创建商城" style=" height: 60px;">
<p>创建商城</p>
</li>
<li><img src="{pboot:sitetplpath}/static/picture/wechat20.png" alt="" style="width: 116px; height: 12px; margin-bottom: 110px"></li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat13.png" alt="绑定公众号" style="width: 60px; height: 60px;">
<p>绑定公众号</p>
</li>
<li><img src="{pboot:sitetplpath}/static/picture/wechat20.png" alt="" style="width: 116px; height: 12px; margin-bottom: 110px"></li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat14.png" alt="进入商城" style="width: 60px; height: 60px;">
<p>进入商城</p>
</li>
<li><img src="{pboot:sitetplpath}/static/picture/wechat20.png" alt="" style="width: 116px; height: 12px; margin-bottom: 110px"></li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat15.png" alt="参与活动" style="width: 54px;">
<p>参与活动</p>
</li>
<li><img src="{pboot:sitetplpath}/static/picture/wechat21.png" alt="" style="width: 12px; height: 72px;"></li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat16.png" alt="激发用户活跃度" style="width: 84px;">
<p>激发用户活跃度</p>
</li>
<li><img src="{pboot:sitetplpath}/static/picture/wechat22.png" alt="" style="width: 116px; height: 12px; margin-bottom: 110px"></li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat17.png" alt="参与更多活动" style=" width: auto;height: 60px;">
<p>参与更多活动</p>
</li>
<li><img src="{pboot:sitetplpath}/static/picture/wechat22.png" alt="" style="width: 116px; height: 12px; margin-bottom: 110px"></li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat18.png" alt="公众号推送">
<p>公众号推送</p>
</li>
<li><img src="{pboot:sitetplpath}/static/picture/wechat22.png" alt="" style="width: 116px; height: 12px; margin-bottom: 110px"></li>
<li>
<img src="{pboot:sitetplpath}/static/picture/wechat19.png" alt="关注公众号" style="width: 54px;">
<p>关注公众号</p>
</li>
</ul>
</div>
</div>
<div style=" background: url('{pboot:sitetplpath}/static/images/footerbg.png') no-repeat;padding: 80px;background-size: cover">
<div class="footer editionCenter">
<img src="{pboot:sitetplpath}/static/picture/wechat3.png" alt="三匠互联公众号商城">
<div class="footerContent">
<h3>三匠互联公众号商城</h3>
<p>公众号商城可嵌入到有的公众号里，通过公众号的首页菜单进入公众号商城，也可以在文章中添加商城链接，增加进入商城的入口的同时增加获客渠道。</p>
</div>
</div>
</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')
}
})
}
</script>
</body>
</html>