File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/duoshangjia.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/head.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/home.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/public.css">
<style>
img{
vertical-align: middle;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #FA6278 !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: #FA6278;
font-size: 14px;
cursor: pointer;
}
.otherbtn{
border: 1px solid #fff;
background: rgba(255,255,255,0.2);
color: #fff;
margin-left: 13px;
}
.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: space-around;
}
.dis_flex .right{
text-align: center;
}
.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;
opacity: .2;
}
.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;
}
.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;
}
.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;
cursor: pointer;
}
.pointer{
position: absolute;
height:20px;
width:100%;
bottom:30px;
justify-content:center;
}
.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_left{
width: 475px;
height: 398px;
border-radius: 20px 20px 0 0;
background: #F4F5FF;
}
.operate_left_title{
background: #6A78F2;
width: 100%;
height: 74px;
line-height: 74px;
border-radius: 20px 20px 0 0;
color: #ffffff;
text-align: center;
font-size: 22px;
}
.operate_right_title{
background: #F54D81;
width: 100%;
height: 74px;
line-height: 74px;
border-radius: 20px 20px 0 0;
color: #ffffff;
text-align: center;
font-size: 22px;
}
.operate_left_content,.operate_right_content{
padding: 38px 24px;
box-sizing: border-box;
}
.operate_left_content ul,.operate_right_content ul{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.operate_left_content ul li,.operate_right_content ul li{
font-size: 18px;
display: block;
margin-bottom: 15px;
}
.operate_left_content ul li:first-child,.operate_right_content ul li:first-child{
color: #ffffff;
width: 92px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 4px;
background: #A2A9F3;
}
.operate_right_content ul li:first-child{
background: #F98FB0;
}
.operate_left_content ul li:nth-child(2),.operate_left_content ul li:last-child,
.operate_right_content ul li:nth-child(2),.operate_right_content ul li:last-child{
color: #6A78F2;
width: 146px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 26px;
background: #fff;
}
.operate_right_content ul li:nth-child(2),.operate_right_content ul li:last-child{
color: #F54D81;
}
.operate_center{
width: 100px;
color: #333333;
font-size: 18px;
opacity: 0.6;
text-align: center;
position: relative;
top: -25px;
}
.operate_center span{
display: block;
}
.operate_center img{
width: 80px;
margin-bottom: 26px;
}
.operate_right{
width: 475px;
height: 398px;
border-radius: 20px 20px 0 0;
background: #FFF6F9;
}
.characteristic_title{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 55px;
}
.characteristic_title span{
width: 24px;
height: 42px;
display: block;
transform:skewX(30deg);
background: #ffffff;
position: absolute;
}
.characteristic_title div{
width: 200px;
height: 42px;
line-height: 42px;
background: #e3e8ef;
text-align: center;
}
.characteristic_title div:first-child{
border-radius: 20px 0 0 20px;
}
.characteristic_title div:last-child{
border-radius: 0 20px 20px 0;
}
.characteristic_right{
width: 30%;
}
.characteristic_right h4{
color: #26365B;
font-size: 24px;
font-weight: bold;
margin-bottom: 40px;
}
.characteristic_right p{
margin-bottom: 20px;
color: #677086;
line-height: 26px;
font-size: 18px;
}
.bottom{
width:100%;
height:214px;
background:url('{pboot:sitetplpath}/static/images/footer.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 .dis_flex .right div:nth-child(1){
width:110px;
}
.show{
background: linear-gradient(-90deg,#ff501a 0%, #ff8a34 98%) !important;
color: #ffffff !important;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #FA6278 !important;
}
.yuan{
width: 8px;
height: 8px;
display: inline-block;
background: #fefbfc;
border: 2px solid #fc692b;
border-radius: 50%;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="head cy_about_bg" style="background: linear-gradient(180deg,#f54d81 0%, #f97e90 99%);">
{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:#FA6278;font-weight: 800;border: 1px solid #fff" onclick="wxclick()">立即咨询</div>
<div class="banner-word-btn otherbtn" onclick="showClick()">获取解决方案</div>
</div>
<div class="banner-pic">
<img src="{pboot:sitetplpath}/static/picture/banner0.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 style="font-family: Helvetica, Helvetica-Bold;"><img src="{pboot:sitetplpath}/static/picture/marks.png" alt=""></h3>
<h4>适用于拥有多个商家门店的企业</h4>
<p><span class="yuan"></span>商家门店数量无上限，可创建多家门店</p>
<p><span class="yuan"></span>平台拥有最高权限，统一管理各个门店</p>
<p><span class="yuan"></span>门店商家有单独的管理端，可独立管理商家端</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/moremerchant.png" alt="适用于拥有多个商家门店的企业" style="width: 470px">
</div>
</div>
<div class="swiper_item dis_flex" style="left:1125px">
<div class="left">
<h3 style="font-family: Helvetica, Helvetica-Bold;"><img src="{pboot:sitetplpath}/static/picture/marks.png" alt=""></h3>
<h4>平台管理商品，商家添加商品</h4>
<p><span class="yuan"></span>商家在店铺端可自主添加商家商品</p>
<p><span class="yuan"></span>平台拥有审核权限，可审核门店商品是否合规</p>
<p><span class="yuan"></span>平台可对旗下商家商品进行冻结等处理</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/moremerchant2.png" alt="平台管理商品，商家添加商品" style="width: 440px">
</div>
</div>
<div class="swiper_item dis_flex" style="left:2250px">
<div class="left">
<h3 style="font-family: Helvetica, Helvetica-Bold;"><img src="{pboot:sitetplpath}/static/picture/marks.png" alt=""></h3>
<h4>商家独立后台管理</h4>
<p><span class="yuan"></span>可以编辑门店名称和门店其他信息等</p>
<p><span class="yuan"></span>编辑门店位置，用户导航到商家</p>
<p><span class="yuan"></span>可以选择自提核销还是快递产品</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/moremerchant3.png" alt="商家独立后台管理" style="width: 560px">
</div>
</div>
<div class="swiper_item dis_flex" style="left:3375px">
<div class="left">
<h3 style="font-family: Helvetica, Helvetica-Bold;"><img src="{pboot:sitetplpath}/static/picture/marks.png" alt=""></h3>
<h4>数据报表分析</h4>
<p><span class="yuan"></span>店铺分析，帮助平台掌握店铺经营状况</p>
<p><span class="yuan"></span>商品分析，哪个商品卖的好一目了然</p>
<p><span class="yuan"></span>会员分析，精准分析用户喜好</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/moremerchant4.png" alt="数据报表分析" style="width: 560px">
</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/scpfs.png" alt="市场批发商">
</div>
<p class="title">市场批发商</p>
<p>小中大型市场批发商</p>
</div>
<div class="graphic">
<div class="img">
<img src="{pboot:sitetplpath}/static/picture/bhsc.png" alt="百货商场">
</div>
<p class="title">百货商场</p>
<p>各大百货商场</p>
</div>
</div>
</div>
</div>
<div style="background: url('{pboot:sitetplpath}/static/images/bg.png') no-repeat center">
<div class="overview editionCenter" style="">
<div class="swiper_title">
<h2>多商家多门店系统运营模式</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div style="display: flex;align-items: center; justify-content: center">
<div class="operate_left">
<div class="operate_left_title">平台端管理后台</div>
<div class="operate_left_content">
<ul>
<li>店铺</li>
<li>创建店铺</li>
<li>店铺审核</li>
</ul>
<ul>
<li>商品</li>
<li>商品管理</li>
<li>商品审核</li>
</ul>
<ul>
<li>会员</li>
<li>会员管理</li>
<li>等级管理</li>
</ul>
<ul>
<li>数据</li>
<li>店铺分析</li>
<li>交易分析</li>
</ul>
</div>
</div>
<div class="operate_center">
<span>通过审核</span>
<img src="{pboot:sitetplpath}/static/picture/adopt.png" alt="">
<span>通过审核</span>
<img src="{pboot:sitetplpath}/static/picture/adopt.png" alt="">
</div>
<div class="operate_right">
<div class="operate_right_title">商家端管理后台</div>
<div class="operate_right_content">
<ul>
<li style="background: none"></li>
<li>开店成功</li>
<li style="background: none"></li>
</ul>
<ul>
<li>商品</li>
<li>上架商品成功</li>
<li style="background: none"></li>
</ul>
<ul>
<li>粉丝</li>
<li>店铺粉丝管理</li>
<li style="background: none"></li>
</ul>
<ul>
<li>数据</li>
<li>商品分析</li>
<li>交易分析</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div style="background: #ffffff">
<div class="overview editionCenter" style="">
<div class="swiper_title">
<h2>多商家多门店系统特色</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="characteristic_title">
<div class="show">平台端</div>
<span></span>
<div>商家端</div>
</div>
<div class="characteristic" style="display: flex;justify-content: space-around;align-items: center">
<div class="characteristic_left">
<img src="{pboot:sitetplpath}/static/picture/platformleft.png" alt="全方位商城平台管理系统" style="width: 582px;">
</div>
<div class="characteristic_right">
<h4 style="margin-bottom: 0">全方位商城平台管理系统</h4>
<h4>大大提升操作体验</h4>
<p>旗下所有店铺统一管理，可以创建无限制数量店铺，一键处理店铺入驻审核申请，支持店铺提现申请管理。</p>
<p>大数据分析系统，有效地收集各个店铺和商城商品、会员、营销活动等信息，智能分析平台营销状况，实现数据全掌握</p>
</div>
</div>
<div class="shop" style="display: flex;justify-content: space-around;align-items: center">
<div class="characteristic_left">
<img src="{pboot:sitetplpath}/static/picture/shop.png" alt="独立自主的店铺管理系统" style="width: 582px;">
</div>
<div class="characteristic_right">
<h4 style="margin-bottom: 0">独立自主的店铺管理系统</h4>
<h4>商品订单归店铺处理</h4>
<p>可添加商品，商品经由平台统一审核后可上架售卖。交易订单交由商家单独处理，可以自主进行发货和退款等操作。</p>
<p>丰富的营销活动，优惠券、拼团、秒杀、砍价等，帮助商家打开销路，吸引更多的买家进入商城，下单购买。</p>
</div>
</div>
</div>
</div>
<div style="background: #FEFBFC">
<div class="overview editionCenter" style="">
<div class="swiper_title">
<h2>多商家多门店系统展示</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div style="display: flex;justify-content: space-around;align-items: center">
<div class="characteristic_left">
<img src="{pboot:sitetplpath}/static/picture/exhibition.png" alt="多商家多门店系统演示案例" style="width: 582px;">
</div>
<div class="characteristic_right">
<h4>多商家多门店系统演示案例</h4>
<p>三匠互联打造全方位全功能的多商户商城管理系统，致力于为您的企业实现营销额突破</p>
<button class="learn" onclick="showClick()">获取演示案例</button>
</div>
</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">
<img src="{pboot:sitetplpath}/static/picture/footer1.png" alt="" style="height: 204px;margin-right: 40px;">
<div onclick="wxclick()" style=" border:none; color:#F54D81; background:#fff;">立即咨询</div>
<div onclick="showClick()">系统演示</div>
</div>
</div>
</div>
{include file=comm/foot.html}
</div>
<script>
$('.shop').hide()
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');
}
$('.characteristic_title div').click(function () {
$('.characteristic_title div').removeClass('show')
$(this).addClass('show')
if($(this).text() == '商家端'){
console.log(111)
$('.characteristic').hide()
$('.shop').show()
} else {
console.log(222)
$('.characteristic').show()
$('.shop').hide()
}
})
</script>
</body>
</html>