File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/wxshop.html
<!DOCTYPE html>
<html>
<head>
<title>{pboot:pagetitle}</title>
<meta name="keywords" content="{pboot:pagekeywords}">
<meta name="description" content="{pboot:pagedescription}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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: #6974F5 !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:#FBFBFE;
}
.editionCenter{
width:1125px;
margin:0 auto;
}
.dis_flex{
display:flex;
justify-content: flex-start;
}
.overview{
height:663px;
overflow: hidden;
position: relative;
}
.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;
}
.swiper{
height:478px;
/* width:100%; */
position:relative;
}
.swiper_item{
width:100%;
height:100%;
position: absolute;
justify-content: space-around;
}
.swiper_item .left{
min-width:400px;
box-sizing: border-box;
padding-left: 20px;
}
.swiper_item h4{
color: #242841;
font-weight: 700;
font-size: 24px;
line-height:58px;
}
.swiper_item p {
color:#677086;
font-size: 18px;
line-height:44px;
}
.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:32px;
}
.pointer,.contrl{
position: absolute;
height:20px;
width:100%;
bottom:30px;
justify-content:center;
}
.contrl div{
width:44px;
height:44px;
position:absolute;
top:-300px;
cursor: pointer;
}
.pointer_item{
width:18px;
height:18px;
border: none;
border-radius: 50%;
box-sizing: border-box;
padding:4px;
margin-left:10px;
}
.pointer_item div{
background:#FF6919;
width:10px;
height:10px;
border-radius: 50%;
opacity: 0.39;
}
.active.pointer_item{
border:1px solid #FF6919;
padding:3px;
}
.active.pointer_item div{
opacity: 1;
}
.applyPic{
margin-top:50px;
display: flex;
justify-content: space-between;
}
.applyPic .graphic{
width:200px;
height:300px;
box-sizing: border-box;
}
.graphic .img{
display:block;
width:159;
height:159px;
border-radius: 50%;
margin:20px 20px 0;
}
.graphic .img img{
width:100%;
height:100%;
}
.graphic p{
font-size:16px;
line-height:20px;
color:#677086;
text-align: center;
margin-top:9px;
}
.graphic .title{
font-size: 20px;
color:#242841;
margin-top:44px;
}
.operate{
justify-content: space-between;
}
.operate .move{
width:310px;
height:447px;
background:#F2F3FF;
border-radius: 20px;
}
.operate .title{
width:100%;
height:74px;
line-height: 74px;
text-align: center;
color: #fff;
background: #6974F5;
font-size: 18px;
font-weight: 700;
border-radius: 20px 20px 0 0;
}
.operate .move_item{
padding:35px 45px;
box-sizing: border-box;
position: relative;
}
.operate .move_item div{
width:221px;
height:56px;
margin:30px 0;
font-size: 16px;
color:#fff;
line-height: 56px;
text-align: center;
background:#5D9FFE;
border-radius: 10px;
position: relative;
z-index:99;
}
.operate .move_item .img{
position:absolute;
z-index:90;
width:201px;
height:254px;
bottom:-155px;
left:-66px;
background:none;
}
.operate .pc{
width:765px;
height:447px;
background:#FFF2EB;
border-radius: 20px;
}
.operate .pc .title{
background:#FF813D;
}
.operate .pc_item{
padding: 28px 20px 0;
}
.pc_item .list{
margin-bottom: 20px;
justify-content:space-between;
}
.operate .pc_item .list div{
box-sizing: border-box;
/* padding:10px 0; */
height:37px;
line-height: 37px;
text-align: center;
color:#666;
background:#fff;
border-radius: 19px;
font-size: 14px;
margin-right:10px;
width:192px;
}
.operate .pc_item .list div:last-child{
margin-right: 0;
}
.operate .pc_item .list:last-child div{
width:135px;
}
.operate .pc_item .list .dt{
border-radius: 3px;
background:#A5CC48;
width:105px!important;
}
.operate .pc_item .list:nth-child(even) .dt{
background:#FFBB33;
}
.characteristic{
text-align: center;
position:relative;
}
.characteristic_bg{
width:450px;
height:290px;
display: inline-block;
}
.characteristic_item{
position:absolute;
width:320px;
height:97px;
border-radius: 10px;
box-sizing: border-box;
padding:17px 24px;
background: #89C997;
color:#fff;
}
.characteristic_item p{
font-size: 14px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: left;
color: #ffffff;
line-height: 18px;
}
.characteristic_item p:first-child{
font-size:18px;
font-weight: 700;
margin-bottom: 14px;
}
.bottom{
width:100%;
height:214px;
background:url('{pboot:sitetplpath}/static/images/foot.png') no-repeat;
background-size: 100% 100%;
}
.bottom>div{
justify-content:space-between;
}
.bottom>div .left h3{
font-size: 30px;
color:#fff;
line-height: 90px;
margin-top:24px;
}
.bottom>div .left p{
line-height:30px;
font-size: 15px;
color:#fff;
}
.bottom>div .left p img{
margin-right:12px;
}
.bottom>div .right div{
width:140px;
height:48px;
border:1px solid rgba(255,255,255,0.60);
color:#fff;
font-size: 15px;
line-height: 48px;
display: inline-block;
margin-left:12px;
margin-top:73px;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.bottom>div .right div:first-child{
width:110px;
border:none;
color:#6974F5;
background:#fff;
}
.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,#488bfe 0%, #766cf1 100%)!important; ">
{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>
<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:#6974F5;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/we_banner.png" alt="三匠互联微商城系统">
</div>
</div>
</div>
</div>
<div class="overview editionCenter">
<div class="swiper_title">
<h2>三匠互联微商城系统简介</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="swiper dis_flex swiper_one">
<div class="swiper_item dis_flex" style="left:0">
<div class="left">
<h3>
<img src="{pboot:sitetplpath}/static/picture/marks.png" alt="">
</h3>
<h4>全行业适用，自定义商城装修，自由配置</h4>
<p>功能灵活，支持DIY拖拽式装修</p>
<p>自定义商城风格，更个性</p>
<p>数十种装修组件自由组合</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img style="transform: translateY(-70px);width:500px;" src="{pboot:sitetplpath}/static/picture/swiper_1.png" alt="自定义商城装修">
</div>
</div>
<div class="swiper_item dis_flex" style="left:1125px">
<div class="left">
<h3>
<img src="{pboot:sitetplpath}/static/picture/marks.png" alt="">
</h3>
<h4>订单管理系统方便快捷</h4>
<p>支持全部订单一键导出功能</p>
<p>订单分类管理，订单类型一目了然</p>
<p>精准对接百余家物流公司</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img style="width:700px" src="{pboot:sitetplpath}/static/picture/swiper_2.png" alt="订单管理系统方便快捷">
</div>
</div>
<div class="swiper_item dis_flex" style="left:2250px">
<div class="left">
<h3>
<img src="{pboot:sitetplpath}/static/picture/marks.png" alt="">
</h3>
<h4>会员管理系统更了解你的客户</h4>
<p>支持导入已有的会员信息到新系统</p>
<p>精细化管理会员，提升客单和复购</p>
<p>会员统一化管理，减轻人员工作量</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img style="transform: translateY(50px);width:600px;" src="{pboot:sitetplpath}/static/picture/swiper_3.png" alt="会员管理系统更了解你的客户">
</div>
</div>
<div class="swiper_item dis_flex" style="left:3375px">
<div class="left">
<h3>
<img src="{pboot:sitetplpath}/static/picture/marks.png" alt="">
</h3>
<h4>私有化部署系统</h4>
<p>使用独立服务器和域名</p>
<p>系统开源，支持二次开发</p>
<p>免费安装部署，免费更新，接受个性定制</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img style="width: 700px;" src="{pboot:sitetplpath}/static/picture/swiper_4.png" alt="私有化部署系统">
</div>
</div>
</div>
<div class="pointer dis_flex">
<div class="pointer_item active" index="1"><div></div></div>
<div class="pointer_item" index="2"><div></div></div>
<div class="pointer_item" index="3"><div></div></div>
<div class="pointer_item" index="4"><div></div></div>
</div>
</div>
<div style="width:100%;background:#fff;">
<div class="overview editionCenter" style="height:532px;">
<div class="swiper_title">
<h2>三匠互联微商城系统适用群体</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="applyPic">
<div class="graphic">
<div class="img">
<img src="{pboot:sitetplpath}/static/picture/zypp.png" alt="品牌服务商">
</div>
<p class="title">品牌服务商</p>
<p>自主经营品牌的商家</p>
</div>
<div class="graphic">
<div class="img">
<img src="{pboot:sitetplpath}/static/picture/qyjsj.png" alt="中小型企业">
</div>
<p class="title">中小型企业</p>
<p>小中大型企业商家</p>
</div>
<div class="graphic">
<div class="img">
<img src="{pboot:sitetplpath}/static/picture/gtsh.png" alt="个体工商户">
</div>
<p class="title">个体工商户</p>
<p>拥有工商资质的个体商户</p>
</div>
<div class="graphic">
<div class="img">
<img src="{pboot:sitetplpath}/static/picture/xxmd.png" alt="线下门店">
</div>
<p class="title">线下门店</p>
<p>拥有线下门店的店主</p>
</div>
</div>
</div>
</div>
<div class="overview editionCenter" style="height:790px;overflow: visible;">
<div class="swiper_title">
<h2>三匠互联微商城系统运营模式</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="operate dis_flex">
<div class="move">
<div class="title">移动端微商城</div>
<div class="move_item">
<div>H5商城</div>
<div style="background:#8D77FE">小程序商城</div>
<div style="background:#6085FF">APP商城</div>
<div class="img">
<img src="{pboot:sitetplpath}/static/picture/illustration.png" alt="三匠互联微商城系统运营模式">
</div>
</div>
</div>
<div class="pc">
<div class="title">pc端管理后台</div>
<div class="pc_item">
<div class="list dis_flex">
<div class="dt">商城</div>
<div>商城自定义装修</div>
<div>小程序分享海报自定义</div>
<div>商品分享海报自定义</div>
</div>
<div class="list dis_flex">
<div class="dt">商品</div>
<div>上下架商品</div>
<div>商品库存统一管理</div>
<div>商品分类管理</div>
</div>
<div class="list dis_flex">
<div class="dt">订单</div>
<div>交易订单统一管理</div>
<div>营销订单统一管理</div>
<div>售后及订单统一管理</div>
</div>
<div class="list dis_flex">
<div class="dt">会员</div>
<div>会员管理系统</div>
<div>会员操作日志</div>
<div>身份等级管理</div>
</div>
<div class="list dis_flex">
<div class="dt">营销</div>
<div>拼团活动管理</div>
<div>积分商城管理</div>
<div>限时活动活动等</div>
</div>
<div class="list dis_flex">
<div class="dt">数据</div>
<div>商品分析</div>
<div>交易分析</div>
<div>会员分析</div>
<div>订单分析</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;background:#fff;">
<div class="overview editionCenter" style="height:722px;overflow: visible;">
<div class="swiper_title">
<h2>三匠互联微商城系统特色</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="characteristic">
<div class="characteristic_bg">
<img src="{pboot:sitetplpath}/static/picture/center.png" alt="三匠互联微商城系统特色">
</div>
<div class="characteristic_item" style="top:44px;left:58px;">
<p>装修样式多端同步</p>
<p>商城完成装修后，装修效果同步到微信端H5商城和微信小程序中，所装即所见</p>
</div>
<div class="characteristic_item" style="top:229px;left:0;background: #a593e0;">
<p>操作简单快速上手</p>
<p>相较而言下，三匠互联微商城系统更适合新手，容易上手操作</p>
</div>
<div class="characteristic_item" style="top:339px;left:343px;background: #f6b352;">
<p>智能大数据</p>
<p>智能化的大数据分析系统帮你精准定位营销战略方向，助力销售额</p>
</div>
<div class="characteristic_item" style="top:292px;left:762px;background: #ee7785;">
<p>丰富的营销活动</p>
<p>优惠券、拼团、分销等特色营销 活动帮助拉新引流</p>
</div>
<div class="characteristic_item" style="top:64px;left:830px;background: #84B1ED;">
<p>支持个性化定制</p>
<p>三匠互联可以根据您的需求为您定制 个性化商城解决方案</p>
</div>
</div>
</div>
</div>
<div class="overview editionCenter">
<div class="swiper_title">
<h2>三匠互联微商城系统案例</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="swiper dis_flex swiper_two">
<div class="swiper_item dis_flex" style="left:0">
<div class="left">
<img src="{pboot:sitetplpath}/static/picture/phone1.png" alt="美丽天天秒商城">
</div>
<div class="left" style="margin-top: 100px;">
<h3>
<img src="{pboot:sitetplpath}/static/picture/marks.png" alt="">
</h3>
<h4>美丽天天秒商城</h4>
<p style="width:361px;">美丽天天秒是一家美妆产品厂家，利用链动2+1模式，三匠互联助力其营业额实现新的突破。</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
</div>
<div class="swiper_item dis_flex" style="left:1125px">
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/phone2.png" alt="快趣拼商城">
</div>
<div class="left" style="margin-top: 100px;">
<h3>
<img src="{pboot:sitetplpath}/static/picture/marks.png" alt="">
</h3>
<h4>快趣拼商城</h4>
<p style="width:361px;">快趣拼小程序商城主要经营护肤品、化妆品和母婴用品，目前使用会员达到数万人。</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
</div>
<div class="swiper_item dis_flex" style="left:2250px">
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/phone3.png" alt="光明新零售商城">
</div>
<div class="left" style="margin-top: 100px;">
<h3>
<img src="{pboot:sitetplpath}/static/picture/marks.png" alt="">
</h3>
<h4>光明新零售商城</h4>
<p style="width:361px;">光明新零售商城是一家主营光明膳纤饮产品,专注于排油排毒,引流大健康时代的商城，三匠互联提供的营销方案已帮助其大幅度提升营业额。</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
</div>
</div>
<div class="contrl dis_flex">
<div class="toRight" style="right:0;">
<img src="{pboot:sitetplpath}/static/picture/toright.png" alt="">
</div>
<div class="toLeft" style="left:0;background:#fff;">
<img src="{pboot:sitetplpath}/static/picture/toleft.png" alt="">
</div>
</div>
</div>
<div class="bottom">
<div class="dis_flex editionCenter">
<div class="left">
<h3>三匠互联助力企业实现营业额新突破</h3>
<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="right">
<div onclick="showClick()">系统演示</div>
<div onclick="wxclick()">联系客服</div>
</div>
</div>
</div>
{include file=comm/foot.html}
</div>
<script>
var _index = 1,index = 1;
var _width = Number($('.swiper').css('width').split('px')[0])
var intervalId; //定时器
var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
//自动轮播功能 使用定时器
autoNextPage();
function autoNextPage(){
intervalId = setInterval(function(){
nextPage();
},5000);
}
$('.pointer_item').on('click',function() {
$('.pointer_item').removeClass('active')
// $(this).addClass('active')
_index = $(this).attr('index')-1;
console.log(_index)
nextPage();
})
function nextPage(){
var targetLeft = 0;
$(buttonSpan[_index-1]).removeClass('active');
if(_index == 4){//到最后一张，直接跳到第一张
targetLeft = 0;
_index = 1;
}else{
_index++;
targetLeft = -(_width*(_index-1));
}
$('.swiper_one').animate({left:targetLeft+'px'});
//更新后的圆点加上样式
$(buttonSpan[_index-1]).addClass('active');
}
$('.toLeft').on('click',function() {
nextPage2(false)
})
$('.toRight').on('click',function() {
nextPage2(true)
})
function nextPage2(boo){
var targetLeft = 0;
if (boo) {
if(index == 3){//到最后一张，直接跳到第一张
targetLeft = 0;
index = 1;
}else{
index++;
targetLeft = -(_width*(index-1));
}
} else {
if(index == 1){//到最后一张，直接跳到第一张
targetLeft = -(_width * 2)
index = 3;
}else{
index--;
targetLeft = -(_width*(index-1));
}
}
$('.swiper_two').animate({left:targetLeft+'px'});
//更新后的圆点加上样式
}
</script>
</body>
</html>