From 290bf03803f24befe259ae201e04e4b73751c5a3 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期四, 17 八月 2023 23:05:48 +0800
Subject: [PATCH] #

---
 pages/LoginDemo/LoginDemo.vue |  143 ++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 114 insertions(+), 29 deletions(-)

diff --git a/pages/LoginDemo/LoginDemo.vue b/pages/LoginDemo/LoginDemo.vue
index 2a4b096..d01c25c 100644
--- a/pages/LoginDemo/LoginDemo.vue
+++ b/pages/LoginDemo/LoginDemo.vue
@@ -1,12 +1,32 @@
 <template>
 	<view class="main">
+		<!-- 璁剧疆鎸夐挳 -->
+		<uni-icons type="gear" size="30" color="#b1b3b8" class="setting"></uni-icons>
 		<view class="left">
 			<!-- logo -->
 			<view class="logo-box">
 				<image src="../../static/img/logo.png" mode="aspectFit"></image>
 			</view>
 		</view>
-		<view class="right">right</view>
+		<view class="right">
+			<view class="input-box">
+				<My-input style="width: 80%;margin: 32rpx 10% 32rpx 10%;" />
+				<My-input style="width: 80%;margin: 32rpx 10% 8rpx 10%;" />
+				<view class="rember-password">
+					<view class="text">璁颁綇瀵嗙爜</view>
+					<switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
+				</view>
+			</view>
+			<view class="button">
+				鐧诲綍
+			</view>
+		</view>
+		<!-- 鐗堟湰鍙� -->
+		<!-- #ifdef APP-PLUS -->
+		<view class="version">
+			褰撳墠鐗堟湰:{{version}}
+		</view>
+		<!-- #endif -->
 	</view>
 </template>
 
@@ -14,15 +34,23 @@
 	export default {
 		data() {
 			return {
+				version: '',
 				
 			}
 		},
 		mounted() {
 			uni.getSystemInfo({
 				success(res) {
-					console.log(res);
+					// console.log(res);
 				}
 			})
+			// 鎵嬫満绔増鏈彿
+			// #ifdef APP-PLUS
+			var that = this
+			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
+				that.version = wgtinfo.version
+			});
+			// #endif
 		},
 		methods: {
 			
@@ -30,56 +58,113 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	.setting {
+		position: absolute;
+		top: 16rpx;
+		right: 16rpx;
+		border-radius: 40rpx;
+		box-shadow: inset 4rpx 4rpx 4rpx rgba(0,0,0,.3),
+					inset -4rpx -4rpx 4rpx rgba(255,255,255,.7),
+					-4rpx -4rpx 4rpx rgba(0,0,0,.4);
+	}
+	.main {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		background-color: #ECF0F1;
+		position: absolute;
+	}
+	.left {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.logo-box {
+		background-color:  #ECF0F1;
+		border-radius: 40rpx;
+		box-shadow: inset 8px 8px 8px rgba(0,0,0,.3),
+					inset -8px -8px 8px rgba(255,255,255,.7),
+					-8px -8px 10px rgba(0,0,0,.4);
+	}
+	image {
+		height: 100%;
+		width: 100%;
+	}
+	.right {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+	}
+	.input-box {
+		width: 100%;
+		// background-color: #888;
+	}
+	.rember-password {
+		width: 78%;
+		margin: 0 11% 0 11%;
+		display: flex;
+		justify-content: space-between;
+		.text {
+			line-height: 1;
+		}
+	}
+	.button {
+		width: 40%;
+		margin: 0 auto;
+		height: 100rpx;
+		text-align: center;
+		line-height: 100rpx;
+		font-size: 20px;
+		background-color:  #409EFF;
+		color: #ECF0F1;
+		border-radius: 14rpx;
+		box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
+					inset -8rpx -8rpx 8rpx rgba(255,255,255,.4),
+					-8rpx -8rpx 10rpx rgba(0,0,0,.4);
+	}
 	@media screen and (orientation: portrait) {
 		/* 绔栧睆 */
 		.main {
-			position: absolute;
-			height: 100%;
-			width: 100%;
-			background-color: crimson;
-			display: flex;
 			flex-direction: column;
 		}
 		.left {
 			height: 40%;
 			width: 100%;
-			background-color: aqua;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+		}
+		.right {
+			height: 40%;
+			width: 100%;
 		}
 		.logo-box {
 			height: 60%;
-			background-color: aliceblue;
-		}
-		image {
-			height: 100%;
+			width: 80%;
 		}
 	}
 	@media screen and (orientation: landscape) {
 		/* 妯睆 */
 		.main {
-			position: absolute;
-			height: 100%;
-			width: 100%;
-			background-color: crimson;
 			display: flex;
 		}
 		.left {
 			height: 100%;
 			width: 50%;
-			background-color: aqua;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+		}
+		.right {
+			height: 100%;
+			width: 50%;
 		}
 		.logo-box {
-			height: 40%;
-			background-color: aliceblue;
+			height: 60%;
+			width: 80%;
 		}
-		image {
-			height: 100%;
-		}
+	}
+	.version {
+		position: fixed;
+		width: 100%;
+		bottom: 0;
+		text-align: center;
+		font-size: 10px;
+		color: #909399;
 	}
 </style>
\ No newline at end of file

--
Gitblit v1.9.1