File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/abouts.html
<!DOCTYPE html>
<html>
<head>
<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" href="{pboot:sitetplpath}/static/css/button.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/idangerous.swiper.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/idangerous.swiper.3dflow.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/login.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>
.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;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #23202D !important;
font-weight: bold;
}
.banner{
}
.cy_about_bghead{
background: #060714;
height: 440px;
width: 100%;
}
.cy_about_bg_content{
padding-top: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.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%;
}
.mainT{
font-size: 48px;
font-weight: 700;
color: #ffffff;
line-height: 96px;
}
.secordT{
display: flex;
align-content: center;
position: relative;
}
.secordT .p1{
font-size: 34px;
font-weight: 700;
color: #ffffff;
}
.secordT .p2{
font-size: 34px;
color: #ffffff;
}
.secordT::after{
bottom: -9px;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
content: '';
width: 77px;
height: 1px;
opacity: 1;
background: #fff;
}
.knowUs{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 80px;
}
.knowUs_name{
font-size: 36px;
font-weight: 700;
color: #242841;
position: relative;
padding-bottom: 28px;
text-align: center;
}
.knowUs_name::before{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: block;
content: '';
width: 60px;
height: 8px;
background: #fc473c;
border-radius: 0px 0px 5px 5px;
}
.knowUs_desc{
width: 893px;
font-size: 18px;
text-align: center;
color: #626573;
line-height: 36px;
margin-top: 36px;
}
.absoutMe{
display: flex;
}
.absoutMe .me{
width: 450px;
height: 250px;
background: url("{pboot:sitetplpath}/static/images/talkme.png") no-repeat 100% 100%;
padding: 59px 62px;
box-sizing: border-box;
}
.absoutMe .me h3{
font-size: 24px;
font-weight: 700;
color: #fff;
margin-bottom: 30px;
}
.absoutMe .me p{
font-size: 16px;
font-weight: 400;
text-align: left;
color: #fff;
line-height: 30px;
}
.absoutMe .bg{
width: 650px;
height: 250px;
background: url("{pboot:sitetplpath}/static/images/about_mebg.png") no-repeat 100% 100%;
}
.delDefaultAStyleAll:hover{
opacity: 1;
color: #ffffff;
}
</style>
</head>
<body>
<div class="main">
<div class="cy_about_bghead">
<div class="head cy_about_bg" style="background: url('{pboot:sitetplpath}/static/images/about_2.4.png') no-repeat !important; background-size: 100% 100% !important; background-color: #030613">
{include file=comm/head.html}
<div class="head-in">
<div class="banner">
<div class="banner-word cy_about_bg_content">
<div class="mainT">专注移动互联网电商系统开发</div>
<div class="secordT"><p class="p1">三匠互联商城系统</p>
<p class="p2">落地社交电商、新零售、小程序</p></div>
</div>
</div>
</div>
</div>
</div>
<section class="cy_about">
<div class="knowUs cy_about_width">
<div class="knowUs_name">了解我们</div>
<p class="knowUs_desc">三匠互联是一家专注于移动互联网系统开发的公司，主营产品是分销商城系统、微商新零售系统、共享店铺股东分红系统，涵盖微信小程序、公众号、APP、H5等主流端口。拥有丰富的商业模式以及项目落地开发的经验，团队合作已超过5年，为了迎合市场趋势发展，不忘初心，再度起航。三匠互联拥有自己的独立研发团队，为化妆品、保健品、食品、农副产品、生鲜水果、日化用品、母婴、酒、茶等多个行业提供一站式解决方案。
</p>
</div>
<div class="cy_about_core">
<div class="cy_about_width cy_about_core_box">
<div class="knowUs_name">三匠互联软件著作权登记证书</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="">
</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="">
</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="">
</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="">
</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="">
</div>
<div class="toRight" style="right:0;">
<img src="{pboot:sitetplpath}/static/picture/toright1.png" alt="">
</div>
</div>
</div>
</div>
<div class="cy_about_core">
<div class="cy_about_width cy_about_core_box">
<div class="knowUs_name">三匠互联核心优势</div>
<div class="clearfix cy_about_core_branch" style="margin-top: 50px">
<div class="clearfix cy_about_core_branch_left">
<div class="cy_about_core_branch_one_left">
<img src="{pboot:sitetplpath}/static/picture/2.png" alt="">
</div>
<div class="cy_about_core_branch_one_right cy_about_core_branch_triangle cy_about_core_branch_text">
<h4>我们的团队</h4>
<p>9年+电商系统技术开发经验，大多资深IT经理有高企履历经验。站在客户的立场思考问题，全力以赴、履行承诺，能力是基础，态度是关键。</p>
</div>
</div>
<div class="cy_about_core_branch_right">
<img src="{pboot:sitetplpath}/static/picture/1.png" alt="">
</div>
<div class="cy_about_core_branch_left">
<div class="cy_about_core_branch_two_left cy_about_core_branch_triangle_left cy_about_core_branch_text">
<h4>我们做什么</h4>
<p>主营业务包含：微商分销系统、社交新零售系统、APP商城、微信小程序开发、商城源码定制。通过先进的信息化技术为客户带来价值，高度的安全性、稳定性和可靠性解决方案满足不同行业企业的不同营销需求。</p>
</div>
<div class="cy_about_core_branch_two_right">
<img src="{pboot:sitetplpath}/static/picture/3.png" alt="">
</div>
</div>
<div class="cy_about_core_branch_right">
<div class="cy_about_core_branch_two_left cy_about_core_branch_triangle_left cy_about_core_branch_text">
<h4>我们的服务</h4>
<p>强大的行业顾问团队，对品牌电商系统开发的深度认知，多个行业的实践经验，有丰富的经验为用户提供服务，对客户的商业模式提供有效的改进建议，使系统交付获得客户预期的价值。</p>
</div>
<div class="cy_about_core_branch_two_right ">
<img src="{pboot:sitetplpath}/static/picture/4.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="absoutMe cy_about_width">
<div class="me">
<h3>联系我们</h3>
<p>{pboot:companyname}</p>
<p>电话 : <span> {pboot:companymobile} </span></p>
<p>地址 : <span> {pboot:companyaddress} </span></p>
</div>
<div class="bg"></div>
</div>
</section>
{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>