Skip to content

S
s_ibanshou
Commit fa023037 authored by 夏彬's avatar 夏彬
Browse files
Options

Merge remote-tracking branch 'origin/test' into test

parents b369a2a5 4e6835de
Hide whitespace changes
Inline Side-by-side
Showing with 339 additions and 32 deletions
appdownload/css/style.css
View file @ fa023037
@charset "utf-8"; @charset "utf-8";
.dw-head {
height: 485px;
background-color: #fff;
border-bottom: 1px solid #f3f3f3;
}
.warp {
width: 1000px;
margin: 0 auto;
}
.dw-head .about-banshou {
position: relative;
width: 65%;
min-height: 485px;
}
.dw-head .about-banshou h2 {
font-size: 36px;
}
.dw-head .about-banshou p {
line-height: 28px;
padding-top: 20px;
color: #333;
}
.dw-head .bs-home {
width: 35%;
}
.xy-center {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
text-align: left;
}
html,body { .banshou-logo {
height: 100%; position: fixed;
display: block;
width: 100%; width: 100%;
padding: 20px 0;
border-bottom: 1px solid #f3f3f3;
background-color: #fff;
z-index: 2;
}
.banshou-logo img {
vertical-align: top;
} }
body { .service-intro {
background: url(../img/iconbg.png) center 40px no-repeat #64cd08; background-color: #f9f9f9;
}
.service-intro .tit {
text-align: center;
padding: 40px 0 0;
} }
.service-intro .tit h1 {
font-size: 24px;
font-weight: normal;
}
.service-intro .tit p {
padding-top: 10px;
text-transform: uppercase;
font-size: 18px;
color: #64cd08;
}
.kuaicha {
background-color: #f9f9f9;
border-bottom: 1px solid #f3f3f3;
}
.bbs {
min-height: 485px;
background-color: #fff;
border-bottom: 1px solid #f3f3f3;
}
.pic-main {
width: 50%;
height: 100%;
}
.pic-main img {
vertical-align: bottom;
}
.text-main {
position: relative;
width: 30%;
height: 485px;
padding-left: 60px;
}
.text-main h3 {
font-size: 24px;
padding-bottom: 30px;
color: #333;
}
.text-main b {
display: block;
font-size: 16px;
padding-bottom: 10px;
}
.text-main p {
color: #999;
line-height: 24px;
}
.foot {
height: 60px;
text-align: center;
line-height: 60px;
font-size: 12px;
color: #999;
background-color: #f9f9f9;
border-top: 1px solid #f3f3f3;
}
.foot-bar { .foot-bar {
position: fixed; position: fixed;
left: 0; left: 0;
...@@ -26,7 +133,7 @@ body { ...@@ -26,7 +133,7 @@ body {
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -350px; margin-left: -350px;
bottom: 20px; bottom: 0;
z-index: 5; z-index: 5;
} }
.pic-text { .pic-text {
...@@ -45,10 +152,12 @@ body { ...@@ -45,10 +152,12 @@ body {
.download-group { .download-group {
position: relative; position: relative;
padding-right: 240px; margin-top: 30px;
margin-top: 50px;
} }
.download-group a { .download-group a {
float: left;
}
.download-group a.dw-btn {
display: inline-block; display: inline-block;
border-radius: 44px; border-radius: 44px;
height: 44px; height: 44px;
...@@ -58,13 +167,34 @@ body { ...@@ -58,13 +167,34 @@ body {
border: 3px solid #64cd08; border: 3px solid #64cd08;
font-size: 14px; font-size: 14px;
margin-right: 10px; margin-right: 10px;
transition: all 1s; transition: all .2s;
} }
.download-group a:hover { .download-group a.ewm-btn {
position: relative;
display: inline-block;
border-radius: 44px;
height: 44px;
width: 44px;
text-align: center;
line-height: 44px;
color: #64cd08;
border: 3px solid #64cd08;
font-size: 14px;
margin-right: 10px;
transition: all .2s;
}
.download-group a.ewm-btn:hover {
background-color: #64cd08; background-color: #64cd08;
color: #fff; color: #fff;
} }
.download-group a i { .download-group a.ewm-btn i {
font-size: 24px;
}
.download-group a.dw-btn:hover {
background-color: #64cd08;
color: #fff;
}
.download-group a.dw-btn i {
padding-right: 5px; padding-right: 5px;
} }
.download-group .qrcode { .download-group .qrcode {
...@@ -78,6 +208,63 @@ body { ...@@ -78,6 +208,63 @@ body {
.download-group .qrcode img { .download-group .qrcode img {
width: 200px; width: 200px;
} }
.download-group a.ewm-btn span.tip {
display: none;
position: absolute;
top: -250px;
left: 50%;
margin-left: -80px;
padding: 5px;
background-color: #fff;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
transition: all .5s;
opacity: 0;
}
.download-group a.ewm-btn span.tip img {
vertical-align: top;
width: 150px;
}
.download-group a.ewm-btn span.tip:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
height: 0;
width: 0;
margin-left: -6px;
border: solid transparent;
border-top-color: #ffffff;
border-width: 8px 6px;
pointer-events: none;
}
.download-group a.ewm-btn:hover span.tip {
display: inline-block;
opacity: 1;
top: -180px;
}
.download-group a.top-need span.tip {
top: auto;
bottom: -250px;
}
.download-group a.top-need:hover span.tip {
display: inline-block;
top: auto;
bottom: -180px;
}
.download-group a.top-need span.tip:after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: #fff;
}
.phone-box { .phone-box {
display: none; display: none;
} }
...@@ -91,7 +278,7 @@ body { ...@@ -91,7 +278,7 @@ body {
body { body {
background: none; background: none;
} }
.warp,.foot-bar { .warp,.foot-bar,.web {
display: none; display: none;
} }
.phone-box { .phone-box {
......
appdownload/index.html
View file @ fa023037
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<title>扳手APP下载</title> <title>扳手APP下载,扳手APP官方网站 - 扳手</title>
<meta name="keywords" content="扳手,扳手平台,扳手门户"> <meta name="keywords" content="扳手,扳手app,扳手快查,扳手app官网">
<meta name="description" content="扳手是一家集家电行业资讯、家电维修教程、维修师傅互动交流的平台。"> <meta name="description" content="用扳手APP，和百万家维人在一起。扳手app为家电维修从业人员提供了扳手快查、问题互助、互动交流、接单赚钱等服务。">
<!--Font Icon--> <!--Font Icon-->
<link href="//at.alicdn.com/t/font_386523_h1qpzvbsdbihpvi.css" rel="stylesheet"> <link href="//at.alicdn.com/t/font_386523_2cql1vjt51m7vi.css" rel="stylesheet">
<!-- Css --> <!-- Css -->
<link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" href="css/basic.css">
...@@ -26,30 +26,135 @@ ...@@ -26,30 +26,135 @@
})(); })();
</script> </script>
<body> <body>
<div class="warp"> <div class="web">
<div class="pic-hand">
<img src="img/pic.png"> <div class="banshou-logo">
<div class="warp clearfix">
<img src="img/banshouApp.png">
<div class="download-group clearfix fr" style="margin-top: 5px; display: none" id="downloadBtn">
<a href="https://itunes.apple.com/cn/app/wei-xiu-hui-shi-fu-ban/id1034283227?mt=8" class="dw-btn"><i class="iconfont icon-ios"></i>iPhone版下载</a>
<a href="http://www.weixiuhui.cn/app_publish/banshou.apk" class="dw-btn"><i class="iconfont icon-android"></i>Android版下载</a>
<a href="#" class="ewm-btn top-need">
<i class="iconfont icon-erweima"></i>
<span class="tip"><img src="img/qrcode.png"></span>
</a>
</div>
</div>
</div> </div>
<div class="pic-text"> <div style="height: 100px;"></div>
<img src="img/baiwan.png">
<div class="dw-head">
<div class="warp clearfix">
<div class="about-banshou fl">
<div class="xy-center">
<h2>扳手APP</h2>
<p>
用扳手APP，和百万家维人在一起<br/>
除了工单，我们还有扳手快查、扳手互助<br/>
扳手快查，提升在维修过程中「定位问题」的效率<br/>
扳手互助，提升在维修过程中「解决问题」的效率
</p>
<div class="download-group clearfix">
<a href="https://itunes.apple.com/cn/app/wei-xiu-hui-shi-fu-ban/id1034283227?mt=8" class="dw-btn"><i class="iconfont icon-ios"></i>iPhone版下载</a>
<a href="http://www.weixiuhui.cn/app_publish/banshou.apk" class="dw-btn"><i class="iconfont icon-android"></i>Android版下载</a>
<a href="#" class="ewm-btn">
<i class="iconfont icon-erweima"></i>
<span class="tip">
<img src="img/qrcode.png">
</span>
</a>
</div>
</div>
</div>
<div class="bs-home fl">
<img src="img/topbanner.png">
</div>
</div>
</div> </div>
</div>
<div class="foot-bar"> <div class="service-intro">
<div class="warp clearfix"> <div class="warp">
<div class="logo fl"> <div class="tit">
<img src="img/banshouApp.png"> <h1>扳手APP服务介绍</h1>
<p>service</p>
</div>
</div> </div>
<div class="download-group fr"> </div>
<a href="https://itunes.apple.com/cn/app/wei-xiu-hui-shi-fu-ban/id1034283227?mt=8"><i class="iconfont icon-ios"></i>iPhone版下载</a>
<a href="http://www.weixiuhui.cn/app_publish/banshou.apk"><i class="iconfont icon-android"></i>Android版下载</a> <div class="kuaicha">
<div class="qrcode"> <div class="warp clearfix">
<img src="img/qrcode.png">
<p>手机扫描二维码下载</p> <div class="pic-main fl">
<img src="img/kuaicha.png">
</div>
<div class="text-main fl">
<div class="xy-center">
<h3>扳手快查</h3>
<b>提升10倍的故障码查询效率</b>
<p>涵盖124个家电品牌，故障码总数5万多条</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="bbs">
<div class="warp clearfix">
<div class="text-main fl">
<div class="xy-center">
<h3>扳手学院</h3>
<b>提供专业的、系统的家电维修技术资料</b>
<p>24位行业专家讲座，86本专业书籍，满足初、中、高级家维人对提升技能的渴望</p>
</div>
</div>
<div class="pic-main fr">
<img src="img/xueyuan.png">
</div>
</div>
</div>
<div class="kuaicha">
<div class="warp clearfix">
<div class="pic-main fl">
<img src="img/bbs.png">
</div>
<div class="text-main fl">
<div class="xy-center">
<h3>扳手社区</h3>
<b>数万名家维人在这里等你</b>
<p>在这里没有不理解、不尊重，只有众人抱团所带来的温度</p>
</div>
</div>
</div>
</div>
<div class="bbs">
<div class="warp clearfix">
<div class="text-main fl">
<div class="xy-center">
<h3>扳手工单</h3>
<b>点点手机，轻松接单</b>
<p>18个合作品牌，30%的保外工单</p>
</div>
</div>
<div class="pic-main fr">
<img src="img/gd.png">
</div>
</div>
</div>
<div class="foot"> © Copyright 2014 - 2018 weixiuhui. All rights reserved. 深圳唯修汇科技有限公司 版权所有</div>
</div> </div>
...@@ -62,5 +167,20 @@ ...@@ -62,5 +167,20 @@
<script type="application/javascript" src="js/mobile-detect.min.js"></script> <script type="application/javascript" src="js/mobile-detect.min.js"></script>
<script type="application/javascript" src="js/index.js"></script> <script type="application/javascript" src="js/index.js"></script>
<script type='text/javascript' src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
$(window).scroll(function () {
var winTop = $(window).scrollTop();
if (winTop > $(".service-intro").offset().top - 48) {
$("#downloadBtn").show();
}else {
$("#downloadBtn").hide();
}
});
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment