【HTML+js+css】-微信扫描打开页面提示用户使用系统浏览器打开网页

共1个文件

html：1个

html

javascript

微信

系统浏览器

117 浏览量 2024-07-01 11:40:30 上传评论 1 收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

apps-dl.zip （1个子文件）

apps-dl.html 3KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> <title>SUMER UI效果预览页</title> <script type="text/javascript"> window.onload = function () { show_tips(0); } function show_tips(show) { if (isWeiXin()) { if (show == 1) { var shade = document.getElementById('shade') shade.style.display = 'block' document.getElementById('box').style.filter = 'blur(20px)' } } else { window.location.href = "https://m.sumer.work/apps/sumer/detail/apps?db=sumer&id=140" } } function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } </script> <style> * { box-sizing: border-box; padding: 0; margin: 0; } body { width: 100%; height: 100vh; overflow: hidden; } #shade { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; display: none; z-index: 99; background-color: rgba(0, 0, 0, 0.2); } #shade::before { content: ''; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(20px); z-index: 1; } #shade img { position: absolute; z-index: 3; } #box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 50px; } .logo { width: 30vw; height: 30vw; border: 1px solid #e0e0e0; border-radius: 40px; overflow: hidden; padding: 10px; } .title { margin-top: 30px; font-size: 20px; color: #111; font-weight: 700; } .desc { margin-top: 50px; font-size: 16px; color: #888; } img { width: 100%; height: 100%; } .btn-box { margin-top: 50px; } .btn-box .btn { width: 50vw; height: 50px; background-color: #359f00; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 20px; } </style> </head> <body> <div id="box"> <div class="logo"> <img src="logo.jpg" alt=""> </div> <div class="title">SUMER作品演示</div> <div class="desc">请使用系统浏览器打开！</div> <div class="btn-box"> <div class="btn" onClick="show_tips(1)">查看演示</div> </div> </div> <div class="shade" id="shade"> <img src="browser.png" alt="" srcset=""> </div> </body> </html>

评论收藏

内容反馈