Skip to content

S
s_ibanshou
Commit b7380e54 authored by 汪波's avatar 汪波
Browse files
Options

APP下载页面

parent 881c5d4d
Hide whitespace changes
Inline Side-by-side
Showing with 336 additions and 29 deletions
appdownload/css/style.css
View file @ b7380e54
@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 {
height: 100%;
.banshou-logo {
position: fixed;
display: block;
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #f3f3f3;
background-color: #fff;
z-index: 2;
}
.banshou-logo img {
vertical-align: top;
}
body {
background: url(../img/iconbg.png) center 40px no-repeat #64cd08;
.service-intro {
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 {
position: fixed;
left: 0;
......@@ -26,7 +133,7 @@ body {
position: absolute;
left: 50%;
margin-left: -350px;
bottom: 20px;
bottom: 0;
z-index: 5;
}
.pic-text {
......@@ -45,10 +152,12 @@ body {
.download-group {
position: relative;
padding-right: 240px;
margin-top: 50px;
margin-top: 30px;
}
.download-group a {
float: left;
}
.download-group a.dw-btn {
display: inline-block;
border-radius: 44px;
height: 44px;
......@@ -58,13 +167,34 @@ body {
border: 3px solid #64cd08;
font-size: 14px;
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;
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;
}
.download-group .qrcode {
......@@ -78,6 +208,63 @@ body {
.download-group .qrcode img {
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 {
display: none;
}
......@@ -91,7 +278,7 @@ body {
body {
background: none;
}
.warp,.foot-bar {
.warp,.foot-bar,.web {
display: none;
}
.phone-box {
......
appdownload/index.html
View file @ b7380e54
......@@ -11,7 +11,7 @@
<meta name="description" content="扳手是一家集家电行业资讯、家电维修教程、维修师傅互动交流的平台。">
<!--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 -->
<link rel="stylesheet" href="css/basic.css">
......@@ -26,30 +26,135 @@
})();
</script>
<body>
<div class="warp">
<div class="pic-hand">
<img src="img/pic.png">
<div class="web">
<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 class="pic-text">
<img src="img/baiwan.png">
<div style="height: 100px;"></div>
<div class="dw-head">
<div class="warp clearfix">
<div class="about-banshou fl">
<div class="xy-center">
<h2>扳手APP</h2>
<p>
超过百万的家电维修师傅<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 class="foot-bar">
<div class="warp clearfix">
<div class="logo fl">
<img src="img/banshouApp.png">
<div class="service-intro">
<div class="warp">
<div class="tit">
<h1>扳手APP服务介绍</h1>
<p>service</p>
</div>
</div>
<div class="download-group fr">
<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="qrcode">
<img src="img/qrcode.png">
<p>手机扫描二维码下载</p>
</div>
<div class="kuaicha">
<div class="warp clearfix">
<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 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>
......@@ -62,5 +167,20 @@
<script type="application/javascript" src="js/mobile-detect.min.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>
</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