File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/appshop.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" type="text/css" 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;
}
.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;
}
.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;
}
.advantage{
justify-content: space-between;
}
.advantage .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);
}
.advantage .core .pic{
text-align: center;
padding-top: 15px;
}
.advantage .core p{
text-align: center;
color:#A0A2AC;
font-size: 14px;
line-height: 26px;
}
.advantage .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;
}
</style>
</head>
<body>
<div class="main">
<div class="head cy_about_bg" style="background: url('{pboot:sitetplpath}/static/images/bg_app1.png') no-repeat !important; background-size: 100% 100% !important; background-color: #ff5c1c">
{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;">三匠互联APP商城</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:#FC5B2B;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/appbg.png" alt="三匠互联APP商城">
</div>
</div>
</div>
</div>
<div>
<div style="width:100%;background:#fff;">
<div class="swiper_title editionCenter">
<h2>三匠互联APP商城系统</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/wechat3.png" alt="与小程序和H5商城">
</div>
<div class="left">
<h3>与小程序和H5商城</h3>
<h4>数据、功能和样式全同步</h4>
<p>三匠互联APP商城全同步小程序和H5的商城的数据、功能和样式，方便商家管理商城的同时，保证了买家的信息数据全同步</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>适用于IOS和安卓系统</h3>
<h4>支持IOS和安卓双系统商城</h4>
<p>全覆盖IOS和安卓系统的用户，用户可轻松找到并下载到手机安装使用</p>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/appmall2.png" alt="适用于IOS和安卓系统">
</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/appmall3.png" alt="适用于大型企业和商家">
</div>
<div class="left">
<h3>适用于大型企业和商家</h3>
<h4>拥有属于自己独立的APP，彰显品牌感</h4>
<p>app商城更适用于想要打造自有品牌的大型企业和商家，支持独立部署。</p>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
</div>
</div>
</div>
<div class="editionCenter" style="height:632px">
<div class="swiper_title">
<h2>三匠互联APP商城优势特色</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="advantage dis_flex">
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/one_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/one_top.png" alt="专属会员">
</div>
<p class="title">专属会员</p>
<p class="paragraph">会员系统+积分商城帮助用户沉淀</p>
</div>
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/two_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/two_top.png" alt="稳定系统">
</div>
<p class="title">稳定系统</p>
<p class="paragraph">相比公众号、小程序更加稳定</p>
</div>
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/three_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/three_top.png" alt="数据分析">
</div>
<p class="title">数据分析</p>
<p class="paragraph">多角度运营数据剖析助力经营决策</p>
</div>
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/four_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/four_top.png" alt="个性展现">
</div>
<p class="title">个性展现</p>
<p class="paragraph">自定义页面组件提升流量和销量</p>
</div>
</div>
<div class="advantage dis_flex">
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/five_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/five_top.png" alt="私域流量">
</div>
<p class="title">私域流量</p>
<p class="paragraph">满足商家独特需求提升用户体验</p>
</div>
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/six_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/six_top.png" alt="独立部署">
</div>
<p class="title">独立部署</p>
<p class="paragraph">商城实现独立部署，打造个人风格</p>
</div>
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/seven_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/seven_top.png" alt="精准营销">
</div>
<p class="title">精准营销</p>
<p class="paragraph">多样化营销化活动，精准营销分析</p>
</div>
<div class="core" style="background: url('{pboot:sitetplpath}/static/images/eight_bg.png') no-repeat;">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/eight_top.png" alt="打造品牌">
</div>
<p class="title">打造品牌</p>
<p class="paragraph">打造个人专属品牌，提高商城品质</p>
</div>
</div>
</div>
<div style="width:100%;background:#fff;">
<div class="editionCenter" style="height:475px">
<div class="swiper_title">
<h2>打造私域流量客户池</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="bot_imgs">
<div><img src="{pboot:sitetplpath}/static/picture/app_1.png" alt="高效获客"><span>高效获客</span></div>
<img src="{pboot:sitetplpath}/static/picture/jt1.png" alt="">
<div><img src="{pboot:sitetplpath}/static/picture/app_2.png" alt="流量变现"><span>流量变现</span></div>
<img src="{pboot:sitetplpath}/static/picture/jt1.png" alt="">
<div><img src="{pboot:sitetplpath}/static/picture/app_3.png" alt="提升复购"><span>提升复购</span></div>
</div>
</div>
<div class="editionCenter" style="overflow: hidden;">
<div class="swiper_title">
<h2>三匠互联APP商城资质展示</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="三匠互联APP商城软著">
</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="三匠互联APP商城软著">
</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="三匠互联APP商城软著">
</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="三匠互联APP商城软著">
</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="三匠互联APP商城软著">
</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>
</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>