Browse Source

添加手机模板。

liuyuqi-dellpc 4 years ago
parent
commit
9bed85f971

+ 117 - 0
src/css/h5-index.css

@@ -0,0 +1,117 @@
+html,
+body,
+div,
+p {
+  margin: 0;
+  padding: 0;
+}
+html{
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  font-family: Arial, Helvetica, sans-serif;
+  background: url(../img/h5-bg.png) no-repeat;
+  background-size: 100%;
+  background-color: #6e3991;
+}
+
+a {
+  display: inline-block;
+  text-decoration: none;
+  color: inherit;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.logo-wrapper {
+  padding-top: .6rem /* 45/75 */;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.logo-wrapper img {
+  width: 2.453333rem /* 184/75 */;
+  height: .826667rem /* 62/75 */;
+}
+
+.app-slogan {
+  margin: 1.933333rem /* 145/75 */ auto 0;
+  padding: 0 .866667rem /* 65/75 */;
+  text-align: center;
+}
+
+.app-slogan img {
+  width: 100%;
+}
+
+.app-dowload {
+  margin: 1.333333rem /* 100/75 */ auto 0;
+  color: #fff;
+  font-size: 0;
+  text-align: center;
+}
+
+.app-dowload a {
+  display: inline-block;
+  width: 4.666667rem /* 350/75 */;
+  height: 1.066667rem /* 80/75 */;
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.066667rem /* 80/75 */;
+  border-radius: 5px;
+}
+
+.download {
+  background: #eb97c5;
+}
+
+.show-image {
+  margin-top: 1.266667rem /* 95/75 */;
+  height: 9.48rem /* 711/75 */;
+  text-align: right;
+}
+
+.show-image img {
+  height: 100%;
+}
+
+footer {
+  width: 100%;
+  height: .666667rem /* 50/75 */;
+  line-height: .666667rem /* 50/75 */;
+  font-size: 12px;
+  color: #d9d9d9;
+  text-align: center;
+  background: #fff;
+}
+.tips {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, 0);
+  padding: 10px 15px;
+  font-size: 13px;
+  color: #fff;
+  background: rgba(0, 0, 0, .5);
+  border-radius: 50px;
+}
+.wx-down {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, .7);
+  z-index: 999;
+}
+.wx-down img {
+  display: block;
+  position: absolute;
+  right: .266667rem /* 20/75 */;
+  top: .266667rem /* 20/75 */;
+  width: 4.093333rem /* 307/75 */;
+  height: 3.613333rem /* 271/75 */;
+}

BIN
src/img/9.gif


BIN
src/img/favicon.ico


BIN
src/img/h5-bg.png


BIN
src/img/h5-foot.png


BIN
src/img/h5-logo.png


BIN
src/img/h5-logo1.png


BIN
src/img/h5-slogan.png


BIN
src/img/pause_524px_1205832_easyicon.net.png


BIN
src/img/running_512px_1101965_easyicon.net.png


BIN
src/img/wx_down.png


+ 1 - 0
src/js/flexible.min.js

@@ -0,0 +1 @@
+!function (e, t) { function n() { t.body ? t.body.style.fontSize = 12 * o + "px" : t.addEventListener("DOMContentLoaded", n) } function d() { var e = i.clientWidth / 10; i.style.fontSize = e + "px" } var i = t.documentElement, o = e.devicePixelRatio || 1; if (n(), d(), e.addEventListener("resize", d), e.addEventListener("pageshow", function (e) { e.persisted && d() }), o >= 2) { var a = t.createElement("body"), s = t.createElement("div"); s.style.border = ".5px solid transparent", a.appendChild(s), i.appendChild(a), 1 === s.offsetHeight && i.classList.add("hairlines"), i.removeChild(a) } }(window, document);

+ 201 - 0
src/mobile.html

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta content="telephone=no" name="format-detection" />
+    <link rel="stylesheet" href="css/h5-index.css" />
+  </head>
+  <body>
+    <header class="logo-wrapper">
+      <img src="img/h5-logo1.png" alt="" />
+    </header>
+    <section class="app-slogan">
+      <img src="img/h5-slogan.png" alt="" onclick="return false;" />
+    </section>
+    <section class="app-dowload">
+      <a class="download" href="javascript:;">点击下载</a>
+    </section>
+    <section class="show-image">
+      <img src="img/h5-foot.png" alt="" onclick="return false;" />
+    </section>
+    <div class="wx-down"><img src="img/wx_down.png" alt="" /></div>
+    <footer>
+      <img src="" alt="" onclick="return false;" />版权所有 &copy;
+      北京暖光科技有限公司
+    </footer>
+    <script src="js/flexible.min.js"></script>
+    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
+    <script>
+      $.ajax({
+        url: "https://api-admin.shuoshuo.art/share/sign",
+        data: {
+          url: location.href
+        },
+        type: "POST",
+        dataType: "text",
+        success: function(res, status, xhr) {
+          let returnDate = eval("(" + res + ")");
+          if (returnDate.errno === 0) {
+            let config = {
+              title: "说说官网",
+              desc: "发条说说,不再孤单",
+              link: "https://www.shuoshuo.art",
+              imgUrl: "https://www.shuoshuo.art/img/h5-logo.png"
+            };
+            wx.config({
+              debug: false,
+              appId: returnDate.data.app_id,
+              timestamp: returnDate.data.timestamp,
+              nonceStr: returnDate.data.noncestr,
+              signature: returnDate.data.signature,
+              jsApiList: ["updateAppMessageShareData", "onMenuShareAppMessage"]
+            });
+
+            wx.ready(() => {
+              wx.updateAppMessageShareData({
+                title: "说说官网", // 分享标题
+                desc: "发条说说,不再孤单", // 分享描述
+                link: "https://www.shuoshuo.art", // 分享链接
+                imgUrl: "https://www.shuoshuo.art/img/h5-logo.png" // 分享图标
+              });
+              wx.onMenuShareAppMessage(config);
+            });
+          }
+        },
+        error: function(er) {
+          console.log("error+" + er);
+        }
+      });
+    </script>
+    <script>
+      $(function() {
+        let BaseUrl = "https://api-admin.shuoshuo.art";
+        let BaseDownloadAndroid =
+          "http://shuoshuo-img.oss-cn-beijing.aliyuncs.com/apk/shuoshuo.apk?t=" +
+          new Date().getTime();
+        let _ = {
+          GetRequest: () => {
+            let url = location.search; //获取url中"?"符后的字串
+            let theRequest = new Object();
+            if (url.indexOf("?") != -1) {
+              let str = url.substr(1);
+              strs = str.split("&");
+              for (let i = 0; i < strs.length; i++) {
+                theRequest[strs[i].split("=")[0]] = unescape(
+                  strs[i].split("=")[1]
+                );
+              }
+            }
+            return theRequest;
+          },
+          post: data => {
+            $.ajax({
+              url: BaseUrl + "/stat/index",
+              type: "post",
+              data: {
+                source: data
+              }
+            });
+          }
+        };
+        let param = _.GetRequest();
+        let statStr = "";
+        // 埋点统计,短信来源
+        // if (param['source'] && ['A', 'B', 'C'].includes(param['source'])) {
+        //   if (navigator.userAgent.indexOf('iPhone')>-1 || navigator.userAgent.indexOf('iPad')>-1){
+        //     $('.download')[0].setAttribute('href', 'https://itunes.apple.com/cn/app/%E8%AF%B4%E8%AF%B4-%E5%9C%A8%E7%BA%BF%E9%99%AA%E4%BC%B4%E8%81%8A%E5%A4%A9%E4%BA%A4%E5%8F%8B/id1454088662')
+        //     statStr = param['source'] + '_ios_' + 'view'
+        //     _.post(statStr)
+        //     $('.download').on('click', function() {
+        //       statStr = param['source'] + '_ios_' + 'click';
+        //       _.post(statStr);
+        //     })
+        //   } else {
+        //     $('.download')[0].setAttribute('href', 'http://shuoshuo-img.oss-cn-beijing.aliyuncs.com/apk/shuoshuo_v1.1.3.sms.apk')
+        //     statStr = param['source'] + '_android_' + 'view'
+        //     _.post(statStr)
+        //     $('.download').on('click', function() {
+        //       statStr = param['source'] + '_android' + 'click';
+        //       _.post(statStr);
+        //       if (navigator.userAgent.indexOf('MicroMessenger')>-1) {
+        //         $('.wx-down').show();
+        //         // 遮罩层禁止页面滚动
+        //         document.addEventListener('touchmove', function (event) {
+        //           event.preventDefault();
+        //         })
+        //         return false;
+        //       }
+        //     })
+        //   }
+        // xby来源
+        if (param.hasOwnProperty("fromurl")) {
+          if (param["fromurl"] === "xby1") {
+            if (
+              navigator.userAgent.indexOf("iPhone") > -1 ||
+              navigator.userAgent.indexOf("iPad") > -1
+            ) {
+              $(".download")[0].setAttribute(
+                "href",
+                "https://itunes.apple.com/cn/app/%E8%AF%B4%E8%AF%B4-%E5%9C%A8%E7%BA%BF%E9%99%AA%E4%BC%B4%E8%81%8A%E5%A4%A9%E4%BA%A4%E5%8F%8B/id1454088662"
+              );
+            } else {
+              $(".download")[0].setAttribute(
+                "href",
+                "https://shuoshuo-img.oss-cn-beijing.aliyuncs.com/apk/shuoshuo.xuebuyuan.apk"
+              );
+              $(".download").on("click", function() {
+                if (navigator.userAgent.indexOf("MicroMessenger") > -1) {
+                  $(".wx-down").show();
+                  // 遮罩层禁止页面滚动
+                  document.addEventListener("touchmove", function(event) {
+                    event.preventDefault();
+                  });
+                  return false;
+                }
+              });
+            }
+          }
+        } else {
+          if (
+            navigator.userAgent.indexOf("iPhone") > -1 ||
+            navigator.userAgent.indexOf("iPad") > -1
+          ) {
+            $(".download")[0].setAttribute(
+              "href",
+              "https://itunes.apple.com/cn/app/%E8%AF%B4%E8%AF%B4-%E5%9C%A8%E7%BA%BF%E9%99%AA%E4%BC%B4%E8%81%8A%E5%A4%A9%E4%BA%A4%E5%8F%8B/id1454088662"
+            );
+            $(".download").on("click", function() {
+              _czc.push(["_trackEvent", "iOS", "下载链接"]);
+            });
+          } else {
+            $(".download")[0].setAttribute("href", BaseDownloadAndroid);
+            $(".download").on("click", function() {
+              _czc.push(["_trackEvent", "Android", "下载链接"]);
+              if (navigator.userAgent.indexOf("MicroMessenger") > -1) {
+                $(".wx-down").show();
+                // 遮罩层禁止页面滚动
+                document.addEventListener("touchmove", function(event) {
+                  event.preventDefault();
+                });
+                return false;
+              }
+            });
+          }
+        }
+      });
+    </script>
+    <!-- cnzz 统计 -->
+    <!-- <div style="display: none;">
+      <script
+        type="text/javascript"
+        src="https://s23.cnzz.com/z_stat.php?id=1276881507&web_id=1276881507"
+      ></script>
+    </div> -->
+  </body>
+</html>