From 82babef77f3ba6cbf464d58040e48d49ba7d653e Mon Sep 17 00:00:00 2001
From: zmr900709 <1838875027@qq.com>
Date: Mon, 8 Jun 2020 11:32:07 +0800
Subject: [PATCH] v

---
 components/umaskes/umaskes.vue |  35 ++++
 pageA/bindinges/bindinges.vue  | 286 +++++++++++++++++++++++++++++++++
 pageA/login/login.vue          | 160 +++++++++++++++---
 pages.json                     |  11 ++
 4 files changed, 466 insertions(+), 26 deletions(-)
 create mode 100644 components/umaskes/umaskes.vue
 create mode 100644 pageA/bindinges/bindinges.vue

diff --git a/components/umaskes/umaskes.vue b/components/umaskes/umaskes.vue
new file mode 100644
index 0000000..c4e18f8
--- /dev/null
+++ b/components/umaskes/umaskes.vue
@@ -0,0 +1,35 @@
+<template>
+	<view>
+		<u-mask :show="show" @click="show = false">
+			<view class="warp">
+				<view class="rect" @tap.stop>{{type_login}}</view>
+			</view>
+		</u-mask>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: true
+			};
+		},
+		props: ["type_login"],
+		
+		mounted(){
+			console.log(this.type_login)
+			this.type_logines()
+		},
+		methods: {
+			type_logines(){
+				console.log("2345")
+				this.show = this.type_login
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>
diff --git a/pageA/bindinges/bindinges.vue b/pageA/bindinges/bindinges.vue
new file mode 100644
index 0000000..70d9d25
--- /dev/null
+++ b/pageA/bindinges/bindinges.vue
@@ -0,0 +1,286 @@
+<template>
+	<!-- login页面 -->
+	<view>
+		<view class="login">
+			<view class="content">
+				<view class="title">手机登录</view>
+				<view class="labales">
+					<text>手机号</text>
+					<input type="tel" placeholder="" />
+				</view>
+				<view class="labales">
+					<text>请输入验证码</text>
+					<input type="tel" placeholder="" />
+					<text class="identifying">获取验证码</text>
+				</view>
+				<!-- 服务协议 -->
+				<view class="pact">
+					<view></view>
+					<text>我已详细阅读并同意</text>
+					<text class="pact_text">《用户协议》</text>
+					<text class="pact_text">《隐私协议》</text>
+					<text class="pact_text">《使用协议》</text>
+					<u-checkbox-group @change="checkboxGroupChange" size="27">
+						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name"
+						 shape="circle" size="14" active-color="#19BE6B"></u-checkbox>
+					</u-checkbox-group>
+				</view>
+			</view>
+			<!-- denglu QQ weixin -->
+			<u-button>{{login}}</u-button>
+			
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					checked: false,
+					disabled: false
+				}],
+				value: '',
+				login: '注册',
+				show: true
+			};
+		},
+		methods: {
+			// 选中某个复选框时，由checkbox时触发
+			checkboxChange(e) {
+				//console.log(e);
+			},
+			// 选中任一checkbox时，由checkbox-group触发
+			checkboxGroupChange(e) {
+				// console.log(e);
+			},
+			mask_u(){
+				this.show = !this.show
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.uni-page-wrapper{
+		background: #fff;
+	}
+	.login {
+		// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
+		.images {
+			position: fixed;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			z-index: -1;
+		}
+
+		.backes {
+			background: rgba(0, 0, 0, 0.4);
+			position: fixed;
+			width: 100%;
+			height: 100%;
+			z-index: -1;
+
+		}
+
+		text {
+			z-index: 9;
+			color: #fff;
+		}
+
+		.more_Login {
+			overflow: hidden;
+			zoom: 1;
+			width: 630rpx;
+			margin: 0 auto;
+		}
+
+		.more_Login text {
+			display: inline-block;
+			width: 50%;
+			float: left;
+			font-size: 30rpx;
+			color: rgba(255, 255, 255, 1);
+			line-height: 36px;
+			margin: 97rpx 0;
+		}
+
+		.more_Login .other {
+			text-align: right;
+		}
+	}
+
+	.title {
+		font-size: 36rpx;
+		font-weight: bold;
+		margin-bottom: 150rpx;
+		color: #333;
+	}
+
+	.content {
+		width: 630rpx;
+		z-index: 99999;
+		margin: 0 auto;
+		padding-top: 130rpx;
+
+		.labales text {
+			font-size: 30rpx;
+			color: #999;
+		}
+
+		.labales {
+			border-bottom: 1px #BFBFBF solid;
+			margin-bottom: 90rpx;
+		}
+
+		.labales {
+			position: relative;
+		}
+
+		.identifying {
+			position: absolute;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			margin: auto;
+			font-size: 30rpx;
+			font-weight: 500;
+			color: #FF780F!important;
+		}
+	}
+
+	.pact text {
+		font-size: 22rpx;
+		font-weight: 400;
+		color: #333;
+		line-height: 36px;
+	}
+
+	.pact_text {
+		font-size: 22px;
+		font-weight: 400;
+		color: rgba(129, 188, 253, 1) !important;
+		line-height: 36px;
+	}
+
+	//单选框的样式
+	.pact {
+		position: relative;
+		padding-left: 38rpx;
+	}
+
+	.u-checkbox-group {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+	}
+
+	.u-checkbox__icon--square {
+		border-radius: 50rpx !important;
+		width: 22rpx;
+		height: 22rpx;
+	}
+
+	.u-btn {
+		width: 628rpx;
+		height: 98rpx;
+		background: rgba(255, 120, 15, 1) !important;
+		border-radius: 49rpx;
+		margin: 0 auto;
+		font-size: 36rpx;
+		color: rgba(255, 255, 255, 1) !important;
+		line-height: 36px;
+		border: 1px #ff780f solid;
+		outline: none;
+		border-color: rgba(255, 120, 15, 1) !important;
+		margin-top: 225rpx;
+	}
+
+	.warp {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.rect {
+		width: 558rpx;
+		height: 300rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		zoom: 1;
+		position: relative;
+		display: flex;
+		 flex-wrap:wrap;
+		 display: -webkit-flex; /* Safari */
+		.rect_view{
+			width: 100rpx;
+			height: 100rpx;
+			.image{
+			width: 45rpx;
+			height: 53rpx;
+			display: inline-block;
+			
+			}
+			flex:1;
+			margin-top: 77rpx;
+		}
+		.rect_view:nth-child(2) image{
+			width: 57rpx;
+			height: 45rpx;
+		}
+		
+		.rect_butoon{
+			width: 100%;
+			position: absolute;
+			bottom: 0;
+			height: 85rpx;
+			text-align: center;
+			line-height: 85rpx;
+			border-top: 1px #999999 solid;
+		}
+		view{
+			color: #666;
+			font-size:24rpx;
+			margin-top: 30rpx;
+			
+		}
+	}
+	.rect_view:nth-child(1) image,.rect_view:nth-child(1) view{
+		float: right;
+	}
+	.rect_view:nth-child(1) image{
+		margin-right: 20rpx;
+	}
+	.rect_view:nth-child(1){
+		position: relative;
+		margin-right: 79rpx;
+	}
+	.rect_view:nth-child(1) view{
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
+	.rect_view:nth-child(2) image,.rect_view:nth-child(2) view{
+		float: left;
+	}
+	.rect_view:nth-child(2) image{
+		margin-left: 20rpx;
+	}
+	.rect_view:nth-child(2){
+		position: relative;
+	}
+	.rect_view:nth-child(2) view{
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+	u-button{
+		margin-top: 225rpx;
+	}
+</style>
diff --git a/pageA/login/login.vue b/pageA/login/login.vue
index 045cd52..82e6073 100644
--- a/pageA/login/login.vue
+++ b/pageA/login/login.vue
@@ -22,18 +22,34 @@
 					<text class="pact_text">《用户协议》</text>
 					<text class="pact_text">《隐私协议》</text>
 					<text class="pact_text">《使用协议》</text>
-					<u-checkbox-group @change="checkboxGroupChange">
-						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name" shape="circle" icon-size='16' active-color="#19BE6B"></u-checkbox>
+					<u-checkbox-group @change="checkboxGroupChange" size="27">
+						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name"
+						 shape="circle" size="14" active-color="#19BE6B"></u-checkbox>
 					</u-checkbox-group>
 				</view>
 			</view>
 			<!-- 注册 -->
 			<view class="more_Login">
 				<text>新用户点击注册</text>
-				<text class="other">其他方式登录</text>
+				<text class="other" @click="mask_u">其他方式登录</text>
 			</view>
-			<!-- denglu  -->
-			<u-button >{{login}}</u-button>
+			<!-- denglu QQ weixin -->
+			<u-button>{{login}}</u-button>
+			<u-mask :show="show" @click="show = false">
+				<view class="warp">
+					<view class="rect" @tap.stop>
+						<view class="rect_view">
+							<image src="../../static/pageA/qq.png" class="image"></image>
+							<view>QQ登录</view>
+						</view>
+						<view class="rect_view">
+							<image src="../../static/pageA/weixin.png" class="image" ></image>
+							<view>微信登录</view>
+						</view>
+						<view class="rect_butoon" @click="show = false">取消</view>
+					</view>
+				</view>
+			</u-mask>
 		</view>
 	</view>
 </template>
@@ -46,18 +62,22 @@
 					disabled: false
 				}],
 				value: '',
-				login:'登录',
+				login: '登录',
+				show: false
 			};
 		},
 		methods: {
 			// 选中某个复选框时，由checkbox时触发
-					checkboxChange(e) {
-						//console.log(e);
-					},
-					// 选中任一checkbox时，由checkbox-group触发
-					checkboxGroupChange(e) {
-						// console.log(e);
-					}
+			checkboxChange(e) {
+				//console.log(e);
+			},
+			// 选中任一checkbox时，由checkbox-group触发
+			checkboxGroupChange(e) {
+				// console.log(e);
+			},
+			mask_u(){
+				this.show = !this.show
+			},
 		}
 	};
 </script>
@@ -163,34 +183,122 @@
 		color: rgba(129, 188, 253, 1) !important;
 		line-height: 36px;
 	}
+
 	//单选框的样式
-	.pact{
+	.pact {
 		position: relative;
 		padding-left: 40rpx;
 	}
-	.u-checkbox-group{
+
+	.u-checkbox-group {
 		position: absolute;
 		left: 0;
 		top: 0;
 		bottom: 0;
 		margin: auto;
 	}
-	.u-checkbox__icon--square{
-		border-radius: 50rpx!important;
+
+	.u-checkbox__icon--square {
+		border-radius: 50rpx !important;
 		width: 22rpx;
 		height: 22rpx;
 	}
-	.u-btn{
-		width:628rpx;
-		height:98rpx;
-		background:rgba(255,120,15,1)!important;
-		border-radius:49rpx;
+
+	.u-btn {
+		width: 628rpx;
+		height: 98rpx;
+		background: rgba(255, 120, 15, 1) !important;
+		border-radius: 49rpx;
 		margin: 0 auto;
-		font-size:36rpx;
-		color:rgba(255,255,255,1)!important;
-		line-height:36px;
+		font-size: 36rpx;
+		color: rgba(255, 255, 255, 1) !important;
+		line-height: 36px;
 		border: 1px #ff780f solid;
 		outline: none;
-		border-color: rgba(255,120,15,1)!important;
+		border-color: rgba(255, 120, 15, 1) !important;
+	}
+
+	.warp {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.rect {
+		width: 558rpx;
+		height: 300rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		zoom: 1;
+		position: relative;
+		display: flex;
+		 flex-wrap:wrap;
+		 display: -webkit-flex; /* Safari */
+		.rect_view{
+			width: 100rpx;
+			height: 100rpx;
+			.image{
+			width: 45rpx;
+			height: 53rpx;
+			display: inline-block;
+			
+			}
+			flex:1;
+			margin-top: 77rpx;
+		}
+		.rect_view:nth-child(2) image{
+			width: 57rpx;
+			height: 45rpx;
+		}
+		
+		.rect_butoon{
+			width: 100%;
+			position: absolute;
+			bottom: 0;
+			height: 85rpx;
+			text-align: center;
+			line-height: 85rpx;
+			border-top: 1px #999999 solid;
+		}
+		view{
+			color: #666;
+			font-size:24rpx;
+			margin-top: 30rpx;
+			
+		}
+	}
+	.rect_view:nth-child(1) image,.rect_view:nth-child(1) view{
+		float: right;
+	}
+	.rect_view:nth-child(1) image{
+		margin-right: 20rpx;
+	}
+	.rect_view:nth-child(1){
+		position: relative;
+		margin-right: 79rpx;
+	}
+	.rect_view:nth-child(1) view{
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
+	.rect_view:nth-child(2) image,.rect_view:nth-child(2) view{
+		float: left;
+	}
+	.rect_view:nth-child(2) image{
+		margin-left: 20rpx;
+	}
+	.rect_view:nth-child(2){
+		position: relative;
+	}
+	.rect_view:nth-child(2) view{
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+	uni-page-wrapper{
+		background: #fff;
 	}
 </style>
diff --git a/pages.json b/pages.json
index b7781a2..133e747 100644
--- a/pages.json
+++ b/pages.json
@@ -6,6 +6,17 @@
 		{
 			"root": "pageA",
 			"pages": [
+				{
+					"path": "bindinges/bindinges",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"app-plus": {
+							"titleNView": false,
+							"animationType": "slide-in-bottom"
+						}
+					}
+				},
 				{
 					"path": "welcome/welcome",
 					"style": {