File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/minimall.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/layui.css">
<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: #10cbfe !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;
padding-top: 48px;
box-sizing: border-box;
}
.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:35px;
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.5;
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%;
align-items: center;
justify-content: space-around;
}
.swiper_item .left{
width:400px;
box-sizing: border-box;
padding-left: 20px;
}
.swiper_item h4{
color: #242841;
font-weight: 700;
font-size: 24px;
line-height:36px;
}
.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,.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 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:-99px;
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;
}
.editionCenter{
width:1125px;
margin:0 auto;
}
.cy_about_bg_content{
padding-top: 0;
}
.head{
/*padding-top: 75px;*/
height: auto;
}
.banner-pic{
width: 450px;
margin-bottom: 34px;
}
.banner-pic img{
width: 100%;
}
.advantage ul{
width: 100%;
}
.advantage ul li {
width: 24%;
display: inline-block;
text-align: center;
margin-bottom: 50px;
}
.advantage ul li img{
width: 100px;
height: 70px;
margin-bottom: 20px;
}
.advantage ul li p{
color: #434A5F;
font-size: 16px;
}
.characteristic{
display: flex;
align-items: center;
justify-content: space-around;
background: url("{pboot:sitetplpath}/static/images/applets12.png") no-repeat;
background-position: -55px 50%;
background-size: 58%;
}
.characteristic ul li{
width: 570px;
height: 126px;
border-radius: 6px;
border: 1px solid #D6D6D6;
padding: 40px 25px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.characteristic ul li:hover{
border-color: #7EB5FE!important;
box-shadow: 0px 3px 30px 0px rgba(0,0,0,0.10); ;
}
.characteristic ul li img{
margin-right: 20px;
}
.characteristic ul li div{
text-align: left;
width: 85%;
}
.characteristic ul li div h4{
font-size: 16px;
color: #434A60;
margin-bottom: 16px;
}
.characteristic ul li div p{
font-size: 14px;
color: #9599A8;
}
.step ul{
width: 100%;
margin-bottom: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.step ul li{
display: inline-flex;
width: 24%;
align-items: center;
justify-content: space-evenly;
}
.more{
width: 12px;
height: 22px;
margin-left: 34px;
}
.step ul li div h3{
font-size: 18px;
margin-bottom: 6px;
font-weight: bold;
color: #999999;
}
.step ul li div p{
font-size: 14px;
color: #999999;
}
.stepContent .indexClass{
display: flex;
align-items: center;
justify-content: space-evenly;
}
.two div{
display: flex;
}
.two div img{
width: 190px;
margin-right: 20px;
}
.two div p{
text-align: center;
}
.two div p span{
color: #242841;
font-size: 16px;
}
.two div span{
color: #2E6EEB;
font-size: 20px;
margin-right: 10px;
}
.four{
justify-content: center !important;
}
.four img{
margin-right: 100px;
}
.black h3{
color: #434A5F !important;
}
.black p{
color: #434A5F !important;
}
.stepContent .indexClass h4 {
font-weight: bold;
font-size: 16px;
color: #242841;
}
.stepContent .indexClass button{
margin-top: 20px;
}
.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;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #057be9 !important;
}
</style>
</head>
<body>
<div class="main">
<div class="head cy_about_bg" style="background: url('{pboot:sitetplpath}/static/images/banner.png') no-repeat !important; background-size: cover !important; background-color: #047eea">
{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="font-weight: 800;border: 1px solid #fff" onclick="wxclick()">立即咨询</div>
<div class="banner-word-btn" onclick="showClick()" style="background: rgba(255,255,255,.2);border: 1px solid #fff;color: #fff; margin-left: 10px;">获取解决方案</div>
</div>
<div class="banner-pic">
<img src="{pboot:sitetplpath}/static/picture/xcxbg.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;padding-top: 0">
<div class="swiper_item dis_flex">
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/xiaochengxu1.png" alt="小程序电商风口">
</div>
<div class="left">
<h4>小程序电商风口</h4>
<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">
<h4>实现社群裂变</h4>
<h4>成本更低获客速度更快</h4>
<p>丰富的营销活动和分享功能可以活跃群员，帮助商城吸引更多的用户</p>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/applets2.png" alt="丰富的营销活动和分享功能可以活跃群员" style="width: 400px">
</div>
</div>
</div>
<div style="width:100%;background:#fff;padding-bottom: 50px;">
<div class="editionCenter" style="height:542px;">
<div class="swiper_item dis_flex">
<div class="right">
<img src="{pboot:sitetplpath}/static/picture/xiaochengxu3.png" alt="小程序商城更加地稳定和流畅">
</div>
<div class="left">
<h4>用户体验极佳</h4>
<h4>轻量级小程序应用不占内存</h4>
<p>相比传统的H5商城，小程序商城更加地稳定和流畅买家的购物体验如同APP般丝滑。</p>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
</div>
</div>
<div style="width: 100%;background: #F6F8FB">
<div class="swiper_title editionCenter">
<h2>小程序商城优势</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="advantage editionCenter">
<ul>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets4.png" alt="流量入口更丰富">
<p>流量入口更丰富</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets5.png" alt="购物订单全同步">
<p>购物订单全同步</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets6.png" alt="公众号小程序商城一体化">
<p>公众号小程序商城一体化</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets7.png" alt="分享途径多元化" style="height: 64px">
<p>分享途径多元化</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets8.png" alt="打造社交营销系统">
<p>打造社交营销系统</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets9.png" alt="用户范围更广">
<p>用户范围更广</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets10.png" alt="消息统一化管理" style="width: 74px">
<p>消息统一化管理</p>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets11.png" alt="符合大众用户习惯" style="width: 74px">
<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="characteristic editionCenter">
<div style="width: 100%; display: flex; justify-content: flex-end;">
<ul>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets13.png" alt="用户体验佳，页面更加精美">
<div>
<h4>用户体验佳，页面更加精美</h4>
<p>相比H5商城，用户操作体验更加流畅，页面也会更加精致</p>
</div>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets14.png" alt="轻量级应用，即用即走">
<div>
<h4>轻量级应用，即用即走</h4>
<p>免去下载App的麻烦，节省储存空间，在小程序内就可以直接下单支付</p>
</div>
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets15.png" alt="推广迅速，帮助客户引流">
<div>
<h4>推广迅速，帮助客户引流</h4>
<p>小程序基于微信生态系统，还可以与公众号连接，线上线下推广都容易</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div style="width: 100%;background: #ffffff; padding-bottom: 80px;">
<div class="swiper_title editionCenter">
<h2>只需四步轻松拥有小程序商城</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="step editionCenter">
<div>
<ul>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets16_1.png" alt="需求分析" class="stepPic2">
<img src="{pboot:sitetplpath}/static/picture/applets16.png" alt="需求分析" class="stepPic1" style="display: none">
<div class="black">
<h3>步骤一</h3>
<p>需求分析</p>
</div>
<img src="{pboot:sitetplpath}/static/picture/appletsnext1.png" alt="" class="more1">
<img src="{pboot:sitetplpath}/static/picture/appletsnext2.png" alt="" class="more2" style="display: none">
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets17.png" alt="小程序开发" class="stepPic1">
<img src="{pboot:sitetplpath}/static/picture/applets17_1.png" alt="小程序开发" class="stepPic2" style="display: none">
<div>
<h3>步骤二</h3>
<p>小程序开发</p>
</div>
<img src="{pboot:sitetplpath}/static/picture/appletsnext1.png" alt="" class="more1" style="display: none">
<img src="{pboot:sitetplpath}/static/picture/appletsnext2.png" alt="" class="more2">
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets18.png" alt="测试验收" class="stepPic1">
<img src="{pboot:sitetplpath}/static/picture/applets18_1.png" alt="测试验收" class="stepPic2" style="display: none">
<div>
<h3>步骤三</h3>
<p>测试验收</p>
</div>
<img src="{pboot:sitetplpath}/static/picture/appletsnext1.png" alt="" class="more1" style="display: none">
<img src="{pboot:sitetplpath}/static/picture/appletsnext2.png" alt="" class="more2">
</li>
<li>
<img src="{pboot:sitetplpath}/static/picture/applets19.png" alt="售后维护" class="stepPic1">
<img src="{pboot:sitetplpath}/static/picture/applets19_1.png" alt="售后维护" class="stepPic2" style="display: none">
<div>
<h3>步骤四</h3>
<p>售后维护</p>
</div>
</li>
</ul>
</div>
<div class="stepContent">
<div class="indexClass one">
<img src="{pboot:sitetplpath}/static/picture/inspiration.png" alt="我们会根据您的需求，提出专业的解决方案。" style=" width: 400px;">
<div>
<h4>我们会根据您的需求，提出专业的解决方案。</h4>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
<div class="indexClass two">
<img src="{pboot:sitetplpath}/static/picture/development.png" alt="原型和设计稿确认后正式进入 程序开发阶段。" style=" width: 400px;">
<div style="display: block">
<h4>原型和设计稿确认后正式进入 程序开发阶段。</h4>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
<div class="indexClass three">
<img src="{pboot:sitetplpath}/static/picture/design-team.png" alt="测试团队测试完成后，解决每 一个测试问题再交付给您。" style=" width: 400px;">
<div>
<h4>测试团队测试完成后，解决每 一个测试问题再交付给您。</h4>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
<div class="indexClass four">
<img src="{pboot:sitetplpath}/static/picture/maintenance.png" alt="完善的售后服务，7*12小时在线解决产品问题。" style=" width: 400px;">
<div>
<h4>完善的售后服务，7*12小时在线解决产品问题。</h4>
<button class="learn" onclick="wxclick()">立即咨询</button>
</div>
</div>
</div>
</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/xiaochengxu1.png" alt="三匠互联小程序商城优势">
<div class="footerContent">
<h3>三匠互联小程序商城优势</h3>
<p>小程序相比传统的H5商城来说，页面更加的精致、用户体验更加的流畅、传播的速度更快，易于传播和分享。只要在商城内绑定小程序，即刻拥有自己的小程序。</p>
</div>
</div>
</div>
</div>
{include file=comm/foot.html}
</div>
<script>
$('.one').show()
$('.two').hide()
$('.three').hide()
$('.four').hide()
$('.step ul li').click(function () {
$('.step ul li div').removeClass('black')
$('.stepPic2').css('display','none')
$('.stepPic1').css('display','block')
$('.more1').css('display','none')
$('.more2').css('display','block')
if($(this).children('div').find('h3').text() == '步骤一'){
$(this).children('div').addClass('black')
if($(this).children('div').hasClass('black')){
$(this).children('.stepPic1').hide()
$(this).children('.stepPic2').css('display','block')
$(this).children('.more1').show()
$(this).children('.more2').css('display','none')
} else {
$(this).children('.stepPic1').css('display','block')
$(this).children('.stepPic2').css('display','none')
$(this).children('.more1').hide()
$(this).children('.more2').css('display','block')
}
$('.one').show()
$('.two').hide()
$('.three').hide()
$('.four').hide()
} else if($(this).children('div').find('h3').text() == '步骤二'){
$(this).children('div').addClass('black')
if($(this).children('div').hasClass('black')){
$(this).children('.stepPic1').hide()
$(this).children('.stepPic2').css('display','block')
$(this).children('.more1').show()
$(this).children('.more2').css('display','none')
} else {
$(this).children('.stepPic1').css('display','block')
$(this).children('.stepPic2').css('display','none')
$(this).children('.more1').hide()
$(this).children('.more2').css('display','block')
}
$('.one').hide()
$('.two').show()
$('.three').hide()
$('.four').hide()
} else if($(this).children('div').find('h3').text() == '步骤三'){
$(this).children('div').addClass('black')
if($(this).children('div').hasClass('black')){
$(this).children('.stepPic1').hide()
$(this).children('.stepPic2').css('display','block')
$(this).children('.more1').show()
$(this).children('.more2').css('display','none')
} else {
$(this).children('.stepPic1').css('display','block')
$(this).children('.stepPic2').css('display','none')
$(this).children('.more1').hide()
$(this).children('.more2').css('display','block')
}
$('.one').hide()
$('.two').hide()
$('.three').show()
$('.four').hide()
} else if($(this).children('div').find('h3').text() == '步骤四'){
$(this).children('div').addClass('black')
if($(this).children('div').hasClass('black')){
$(this).children('.stepPic1').hide()
$(this).children('.stepPic2').css('display','block')
} else {
$(this).children('.stepPic1').css('display','block')
$(this).children('.stepPic2').css('display','none')
}
$('.one').hide()
$('.two').hide()
$('.three').hide()
$('.four').show()
}
})
</script>
</body>
</html>