From d4d9d9e2aff3089b26778fc69f3a2863ee2c1e95 Mon Sep 17 00:00:00 2001 From: Dragon <13925835632@139.com> Date: Thu, 21 Sep 2023 10:22:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9F=AD=E9=93=BE=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view/peko/shortLink/index.html | 58 ++++++++++++ view/peko/shortLink/js/flexible.js | 109 ++++++++++++++++++++++ view/peko/shortLink/js/layer.js | 2 + view/peko/shortLink/js/reset.css | 144 +++++++++++++++++++++++++++++ 4 files changed, 313 insertions(+) create mode 100644 view/peko/shortLink/index.html create mode 100644 view/peko/shortLink/js/flexible.js create mode 100644 view/peko/shortLink/js/layer.js create mode 100644 view/peko/shortLink/js/reset.css diff --git a/view/peko/shortLink/index.html b/view/peko/shortLink/index.html new file mode 100644 index 0000000..0fa8c16 --- /dev/null +++ b/view/peko/shortLink/index.html @@ -0,0 +1,58 @@ + + + + + + + + 下載 + + + + + + + + + + + \ No newline at end of file diff --git a/view/peko/shortLink/js/flexible.js b/view/peko/shortLink/js/flexible.js new file mode 100644 index 0000000..8f6f217 --- /dev/null +++ b/view/peko/shortLink/js/flexible.js @@ -0,0 +1,109 @@ +;(function(win, lib) { + var doc = win.document; + var docEl = doc.documentElement; + var metaEl = doc.querySelector('meta[name="viewport"]'); + var flexibleEl = doc.querySelector('meta[name="flexible"]'); + var dpr = 0; + var scale = 0; + var tid; + var flexible = lib.flexible || (lib.flexible = {}); + + if (metaEl) { + console.warn('将根据已有的meta标签来设置缩放比例'); + var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); + if (match) { + scale = parseFloat(match[1]); + dpr = parseInt(1 / scale); + } + } else if (flexibleEl) { + var content = flexibleEl.getAttribute('content'); + if (content) { + var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); + var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); + if (initialDpr) { + dpr = parseFloat(initialDpr[1]); + scale = parseFloat((1 / dpr).toFixed(2)); + } + if (maximumDpr) { + dpr = parseFloat(maximumDpr[1]); + scale = parseFloat((1 / dpr).toFixed(2)); + } + } + } + if (!dpr && !scale) { + var isAndroid = win.navigator.appVersion.match(/android/gi); + var isIPhone = win.navigator.appVersion.match(/iphone/gi); + var devicePixelRatio = win.devicePixelRatio; + if (isIPhone) { + // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 + if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { + dpr = 3; + } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ + dpr = 2; + } else { + dpr = 1; + } + } else { + // 其他设备下，仍旧使用1倍的方案 + dpr = 1; + } + scale = 1 / dpr; + } + docEl.setAttribute('data-dpr', dpr); + if (!metaEl) { + metaEl = doc.createElement('meta'); + metaEl.setAttribute('name', 'viewport'); + metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); + if (docEl.firstElementChild) { + docEl.firstElementChild.appendChild(metaEl); + } else { + var wrap = doc.createElement('div'); + wrap.appendChild(metaEl); + doc.write(wrap.innerHTML); + } + } + function refreshRem(){ + var width = docEl.getBoundingClientRect().width; + if (width / dpr > 540) { + width = 540 * dpr; + } + var rem = width / 10; + docEl.style.fontSize = rem + 'px'; + flexible.rem = win.rem = rem; + } + win.addEventListener('resize', function() { + clearTimeout(tid); + tid = setTimeout(refreshRem, 300); + }, false); + win.addEventListener('pageshow', function(e) { + if (e.persisted) { + clearTimeout(tid); + tid = setTimeout(refreshRem, 300); + } + }, false); + if (doc.readyState === 'complete') { + doc.body.style.fontSize = 12 * dpr + 'px'; + } else { + doc.addEventListener('DOMContentLoaded', function(e) { + doc.body.style.fontSize = 12 * dpr + 'px'; + }, false); + } + + refreshRem(); + flexible.dpr = win.dpr = dpr; + flexible.refreshRem = refreshRem; + flexible.rem2px = function(d) { + var val = parseFloat(d) * this.rem; + if (typeof d === 'string' && d.match(/rem$/)) { + val += 'px'; + } + return val; + } + flexible.px2rem = function(d) { + var val = parseFloat(d) / this.rem; + if (typeof d === 'string' && d.match(/px$/)) { + val += 'rem'; + } + return val; + } +})(window, window['lib'] || (window['lib'] = {})); diff --git a/view/peko/shortLink/js/layer.js b/view/peko/shortLink/js/layer.js new file mode 100644 index 0000000..2eb3e28 --- /dev/null +++ b/view/peko/shortLink/js/layer.js @@ -0,0 +1,2 @@ +/*! layer mobile-v2.0 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */ +;!function(a){"use strict";var b=document,c="querySelectorAll",d="getElementsByClassName",e=function(a){return b[c](a)},f={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},g={extend:function(a){var b=JSON.parse(JSON.stringify(f));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};g.touch=function(a,b){a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layui-m-layer"],j=function(a){var b=this;b.config=g.extend(a),b.view()};j.prototype.view=function(){var a=this,c=a.config,f=b.createElement("div");a.id=f.id=i[0]+h,f.setAttribute("class",i[0]+" "+i[0]+(c.type||0)),f.setAttribute("index",h);var g=function(){var a="object"==typeof c.title;return c.title?'

'+(a?c.title[0]:c.title)+"

":""}(),j=function(){"string"==typeof c.btn&&(c.btn=[c.btn]);var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a=''+c.btn[0]+"",2===b&&(a=''+c.btn[1]+""+a),'
'+a+"
"):""}();if(c.fixed||(c.top=c.hasOwnProperty("top")?c.top:100,c.style=c.style||"",c.style+=" top:"+(b.body.scrollTop+c.top)+"px"),2===c.type&&(c.content='

'+(c.content||"")+"

"),c.skin&&(c.anim="up"),"msg"===c.skin&&(c.shade=!1),f.innerHTML=(c.shade?"
':"")+'
"+g+'
'+c.content+"
"+j+"
",!c.type||2===c.type){var k=b[d](i[0]+c.type),l=k.length;l>=1&&layer.close(k[0].getAttribute("index"))}document.body.appendChild(f);var m=a.elem=e("#"+a.id)[0];c.success&&c.success(m),a.index=h++,a.action(c,m)},j.prototype.action=function(a,b){var c=this;a.time&&(g.timer[c.index]=setTimeout(function(){layer.close(c.index)},1e3*a.time));var e=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),layer.close(c.index)):a.yes?a.yes(c.index):layer.close(c.index)};if(a.btn)for(var f=b[d]("layui-m-layerbtn")[0].children,h=f.length,i=0;h>i;i++)g.touch(f[i],e);if(a.shade&&a.shadeClose){var j=b[d]("layui-m-layershade")[0];g.touch(j,function(){layer.close(c.index,a.end)})}a.end&&(g.end[c.index]=a.end)},a.layer={v:"2.0",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var c=e("#"+i[0]+a)[0];c&&(c.innerHTML="",b.body.removeChild(c),clearTimeout(g.timer[a]),delete g.timer[a],"function"==typeof g.end[a]&&g.end[a](),delete g.end[a])},closeAll:function(){for(var a=b[d](i[0]),c=0,e=a.length;e>c;c++)layer.close(0|a[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var a=document.scripts,c=a[a.length-1],d=c.src,e=d.substring(0,d.lastIndexOf("/")+1);c.getAttribute("merge")||document.head.appendChild(function(){var a=b.createElement("link");return a.href=e+"need/layer.css?2.0",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}())}()}(window); \ No newline at end of file diff --git a/view/peko/shortLink/js/reset.css b/view/peko/shortLink/js/reset.css new file mode 100644 index 0000000..affa98a --- /dev/null +++ b/view/peko/shortLink/js/reset.css @@ -0,0 +1,144 @@ +/** + * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) + * http://cssreset.com + */ + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, + menu, nav, output, ruby, section, summary, + time, mark, audio, video, input { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + } + + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, menu, nav, section { + display: block; + } + + body { + line-height: 1; + } + + blockquote, q { + quotes: none; + } + + blockquote:before, blockquote:after, + q:before, q:after { + content: none; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + /* custom */ + a { + color: #7e8c8d; + text-decoration: none; + -webkit-backface-visibility: hidden; + } + + li { + list-style: none; + } + + ::-webkit-scrollbar { + width: 5px; + height: 5px; + } + + ::-webkit-scrollbar-track-piece { + background-color: rgba(0, 0, 0, 0.2); + -webkit-border-radius: 6px; + } + + ::-webkit-scrollbar-thumb:vertical { + height: 5px; + background-color: rgba(125, 125, 125, 0.7); + -webkit-border-radius: 6px; + } + + ::-webkit-scrollbar-thumb:horizontal { + width: 5px; + background-color: rgba(125, 125, 125, 0.7); + -webkit-border-radius: 6px; + } + + html, body { + width: 100%; + } + + body { + -webkit-text-size-adjust: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + img{ + width: 100%; + vertical-align: top; + } + .mask,.share-mask { + position: fixed; + width: 100%; + left: 0; + bottom: 0; + display: flex; + height: 60px; + align-items: center; + background: rgba(0, 0, 0, 0.5); + justify-content: space-between; + padding: 0 8px; + box-sizing: border-box; + color:#fff; + display: none; } + + .mask .logo { + width: 40px; + } + + .mask .slogan { + color: #fff; + margin: 0 8px; + } + + #download { + border: 1px solid #fff; + color: #fff; + width: 80px; + text-align: center; + border-radius: 15px; + line-height: 30px; } + + #download a{ + color: #fff; } + + .share-mask{ + padding: 0 16px; + } + .share-mask .shareBtn{ + border-radius: 6px; + /*background: linear-gradient(to right,#fe95c0,#ff83b5);*/ + height: 30px; + line-height: 30px; + width: 80px; + text-align: center; + } + .singleTemplate{ + display: none; + } \ No newline at end of file