登录页自适应

10 months ago · 34281de09a
5 changed files with 35 additions and 10 deletions
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@ -1,5 +1,5 @@
 <template>
-	<view class="bg" :style="{'min-height':minHeight}">
+	<view id="login-bg" class="bg" :style="{'min-height':minHeight+'px'}">
 		<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/title.png" mode="" class="title-img"></image>
 		<view class="item flex-between" style="margin-top: 83rpx;">
@ -39,11 +39,19 @@
 				showPassword: true,
 				codeImg: '',
-				minHeight: "1500rpx",
+				minHeight: 0,
 			}
 		},
-		onLoad () {
+		onReady () {
 		},
 		mounted () {
 			this.$nextTick(()=>{
 				setTimeout(()=>{
 					this.setScreen()
 				},1000)
 			})
 		},
 		onShow() {
@ -75,9 +83,26 @@
 			},
 			setScreen () {
-				let res = uni.getSystemInfoSync()
+				let _this = this
-				this.minHeight = res.screenHeight+"px"
+				let success = false
-				console.log(res.screenHeight)
+				
 				try {
 					_this.minHeight = document.getElementById("login-bg").clientHeight
 					success = true
 				} catch(e) {
 					success = false
 				}
 				if (!success) {
 					const query = uni.createSelectorQuery().in(this);
 					  query
 						.select("#login-bg")
 						.boundingClientRect(res => {
 							_this.minHeight = res.height
 						  console.log(res)
 						})
 						.exec();
 				}
 			}
 		}
 	}
--- a/unpackage/dist/build/web/index.html
+++ b/unpackage/dist/build/web/index.html
@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>daoyou</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.2c1f3bb5.js></script><script src=/static/js/index.f1573607.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.2c1f3bb5.js></script><script src=/static/js/index.d41bbdb9.js></script></body></html>
--- a/unpackage/dist/build/web/static/js/index.d41bbdb9.js
+++ b/unpackage/dist/build/web/static/js/index.d41bbdb9.js
--- a/unpackage/dist/build/web/static/js/pages-login-login.22285959.js
+++ b/unpackage/dist/build/web/static/js/pages-login-login.22285959.js
--- a/unpackage/dist/build/web/static/js/pages-login-login.67192312.js
+++ b/unpackage/dist/build/web/static/js/pages-login-login.67192312.js
`@ -1,2 +1,2 @@`
	`<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>daoyou</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') \|\| CSS.supports('top: constant(a)'))`	`<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>daoyou</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') \|\| CSS.supports('top: constant(a)'))`
	`document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.2c1f3bb5.js></script><script src=/static/js/index.f1573607.js></script></body></html>`	`document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.2c1f3bb5.js></script><script src=/static/js/index.d41bbdb9.js></script></body></html>`