app下载页面优化

appdownload/css/style.css

@@ -267,39 +267,92 @@
 
 .phone-box {
     display: none;
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
-.phone-box a {
-    display: block;
-}
-.phone-box a img {
+.center-box {
     width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
 }
-
-.download-now {
-    position: fixed;
-    bottom: 20px;
-    left: 20%;
-    display: block;
-    width: 60%;
-    height: 50px;
-    background-image: linear-gradient(138deg,#ff6704,#fdac68);
+.center-box img {
+    width: 80px;
+    vertical-align: top;
+}
+.center-box h3 {
+    font-size: 24px;
+    padding-top: 20px;
+    font-weight: normal;
+    color: #333;
+}
+.center-box p {
+    font-size: 14px;
+    padding-top: 5px;
+    color: #999;
+}
+.center-box a {
+    display: inline-block;
+    width: 140px;
+    height: 44px;
+    line-height: 42px;
+    text-align: center;
+    border-radius: 44px;
+    background-color: #32B2A7;
     color: #fff;
-    line-height: 50px;
+    margin-top: 30px;
+    font-size: 14px;
+}
+.center-box span.warn {
+    display: block;
+    margin-top: 30px;
+    padding: 0 20px;
     text-align: center;
-    z-index: 2;
-    border-radius: 25px;
+    line-height: 24px;
+    font-size: 16px;
 }
 
+.center-box span.warn b {
+    font-weight: normal;
+    display: block;
+    margin-bottom: 15px;
+}
 
-.tip-expore {
+.oie-tip {
+    display: inline-block;
     position: absolute;
-    right: 0;
-    top: 0;
+    width: 160px;
+    line-height: 22px;
+    background: #666;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 6px;
+    top: 16px;
+    text-align: center;
+    right: 10px;
+    padding: 10px;
+}
+.oie-tip:after {
+    content: '';
+    right: 20px;
+    top: -10px;
+    margin-right: -10px;
     display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 12px solid #666;
+    z-index: 1;
 }
 @media screen and (max-width:450px){
-    body {
+    html,body {
         background: none;
+        height: 100%;
+        width: 100%;
     }
     .warp,.foot-bar,.web {
         display: none;

appdownload/index.html

@@ -159,12 +159,39 @@
 
 
 <div class="phone-box">
-    <a href="javascript:location.reload();">
+
+    <div class="center-box">
+        <img src="img/logo_banshou.png">
+        <h3>扳手</h3>
+        <p>和百万家维人在一起</p>
+
+        <!--微信里显示-->
+        <span class="warn" style="display: none">微信/QQ 内无法下载APP</span>
+
+        <!--浏览器中打开显示-->
+        <span class="warn">
+            <b>
+                请在通知栏中安装 <br/>已下载完成的扳手APP
+            </b>
+
+            <b>
+                如果安装失败 <br/> 请卸载扳手APP后重新安装
+            </b>
+        </span>
+
+    </div>
+
+    <!--微信里显示-->
+    <div class="oie-tip">请点击右上角 <br/> 选择“浏览器中打开”</div>
+
+
+
+    <!--<a href="javascript:location.reload();">
         <img src="img/download_phone_img.jpg">
         <span class="download-now">立即下载</span>
     </a>
 
-    <span class="tip-expore" id="tip-expore" style="display: none"><img src="img/up-tip.png"></span>
+    <span class="tip-expore" id="tip-expore" style="display: none"><img src="img/up-tip.png"></span>-->
 </div>