|
|
@@ -9,6 +9,68 @@
|
|
|
<script src="js/mui.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
mui.init()
|
|
|
+ (function flexible (window, document) {
|
|
|
+ let docEl = document.documentElement
|
|
|
+ let dpr = window.devicePixelRatio || 1
|
|
|
+
|
|
|
+ // adjust body font size
|
|
|
+ function setBodyFontSize () {
|
|
|
+ if (document.body) {
|
|
|
+ document.body.style.fontSize = (12 * dpr) + 'px'
|
|
|
+ } else {
|
|
|
+ document.addEventListener('DOMContentLoaded', setBodyFontSize)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setBodyFontSize()
|
|
|
+
|
|
|
+ // set 1rem = viewWidth / 10
|
|
|
+ function setRemUnit () {
|
|
|
+ let rem = docEl.clientWidth / 375
|
|
|
+ docEl.style.fontSize = rem + 'px'
|
|
|
+ }
|
|
|
+
|
|
|
+ setRemUnit()
|
|
|
+
|
|
|
+ // reset rem unit on page resize
|
|
|
+ window.addEventListener('resize', setRemUnit)
|
|
|
+ window.addEventListener('pageshow', function(e) {
|
|
|
+ if (e.persisted) {
|
|
|
+ setRemUnit()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // detect 0.5px supports
|
|
|
+ if (dpr >= 2) {
|
|
|
+ let fakeBody = document.createElement('body')
|
|
|
+ let testElement = document.createElement('div')
|
|
|
+ testElement.style.border = '.5px solid transparent'
|
|
|
+ fakeBody.appendChild(testElement)
|
|
|
+ docEl.appendChild(fakeBody)
|
|
|
+ if (testElement.offsetHeight === 1) {
|
|
|
+ docEl.classList.add('hairlines')
|
|
|
+ }
|
|
|
+ docEl.removeChild(fakeBody)
|
|
|
+ }
|
|
|
+ }(window, document));
|
|
|
+ (function() {
|
|
|
+ if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
|
|
|
+ handleFontSize()
|
|
|
+ } else {
|
|
|
+ if (document.addEventListener) {
|
|
|
+ document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
|
|
|
+ } else if (document.attachEvent) {
|
|
|
+ document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function handleFontSize () {
|
|
|
+ // 设置网页字体为默认大小
|
|
|
+ WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
|
|
|
+ // 重写设置网页字体大小的事件
|
|
|
+ WeixinJSBridge.on('menu:setfont', function() {
|
|
|
+ WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })()
|
|
|
</script>
|
|
|
</head>
|
|
|
<style>
|
|
|
@@ -18,6 +80,14 @@
|
|
|
background: url('./img/blessing.png');
|
|
|
background-size: cover;
|
|
|
}
|
|
|
+ .show_box{
|
|
|
+ position: absolute;
|
|
|
+ top: 198rem;
|
|
|
+ background: #FFFFFF;
|
|
|
+ left: 15rem;
|
|
|
+ right: 15rem;
|
|
|
+ height: 290rem;
|
|
|
+ }
|
|
|
.send_btn {
|
|
|
width: 345px;
|
|
|
position: fixed;
|
|
|
@@ -26,6 +96,16 @@
|
|
|
</style>
|
|
|
<body>
|
|
|
<div class="bg_content">
|
|
|
+ <div class="show_box">
|
|
|
+ <div class="avatar_box">
|
|
|
+ <img class="avatar" src=""/>
|
|
|
+ <div class="info_box">
|
|
|
+ <div class="img_box">
|
|
|
+ <img src=""/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
|
|
|
</div>
|
|
|
</body>
|
