v

pageA/login/login.vue

@@ -26,20 +26,58 @@
 			</view>
 			<!-- 注册 -->
 			<view class="more_Login">
+				<u-radio-group v-model="value" @change="radioGroupChange">
+					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
+						{{item.name}}
+					</u-radio>
+				</u-radio-group>
 				<text>新用户点击注册</text>
 				<text class="other">其他方式登录</text>
 			</view>
 		</view>
 	</view>
 </template>
-
 <script>
+	export default {
+		data() {
+			return {
+				list: [{
+						name: 'apple',
+						checked: false,
+						disabled: false
+					},
+					{
+						name: 'banner',
+						checked: false,
+						disabled: false
+					},
+					{
+						name: 'orange',
+						checked: false,
+						disabled: false
+					}
+				],
+				value: '',
+			};
+		},
+		methods: {
+			// 选中某个单选框时，由radio时触发
+			radioChange(e) {
+				// console.log(e);
+			},
+			// 选中任一radio时，由radio-group触发
+			radioGroupChange(e) {
+				// console.log(e);
+			}
+		}
+	};
 </script>
 
-<style  lang="scss" scoped>
-	.login{
+<style lang="scss" scoped>
+	.login {
+
 		// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
-		.images{
+		.images {
 			position: fixed;
 			width: 100%;
 			height: 100%;
@@ -47,79 +85,93 @@
 			left: 0;
 			z-index: -1;
 		}
-		.backes{
-			background: rgba(0,0,0,0.1);
+
+		.backes {
+			background: rgba(0, 0, 0, 0.4);
 			position: fixed;
 			width: 100%;
 			height: 100%;
-			
+			z-index: -1;
+
 		}
-		text{
+
+		text {
 			z-index: 9;
 			color: #fff;
 		}
-		.more_Login{
+
+		.more_Login {
 			overflow: hidden;
 			zoom: 1;
 			width: 630rpx;
 			margin: 0 auto;
 		}
-		.more_Login text{
+
+		.more_Login text {
 			display: inline-block;
 			width: 50%;
 			float: left;
-			font-size:30rpx;
-			color:rgba(255,255,255,1);
-			line-height:36px;
+			font-size: 30rpx;
+			color: rgba(255, 255, 255, 1);
+			line-height: 36px;
 			margin: 97rpx 0;
 		}
-		.more_Login .other{
+
+		.more_Login .other {
 			text-align: right;
 		}
 	}
-	.title{
-		font-size:36rpx;
-		font-weight:bold;
+
+	.title {
+		font-size: 36rpx;
+		font-weight: bold;
 		margin-bottom: 150rpx;
 		color: #fff;
 	}
-	.content{
+
+	.content {
 		width: 630rpx;
 		z-index: 99999;
 		margin: 0 auto;
 		padding-top: 130rpx;
-		.labales text{
+
+		.labales text {
 			font-size: 30rpx;
 		}
-		.labales{
+
+		.labales {
 			border-bottom: 1px #fff solid;
 			margin-bottom: 90rpx;
 		}
-		.labales{
+
+		.labales {
 			position: relative;
 		}
-		.identifying{
+
+		.identifying {
 			position: absolute;
 			right: 0;
 			top: 0;
 			bottom: 0;
 			margin: auto;
-			font-size:30rpx;
-			font-weight:500;
-			color:rgba(255,120,15,1);
-			line-height:36px;
+			font-size: 30rpx;
+			font-weight: 500;
+			color: rgba(255, 120, 15, 1);
+			line-height: 36px;
 		}
 	}
-	.pact text{
-		font-size:22rpx;
-		font-weight:400;
-		color:rgba(255,255,255,1);
-		line-height:36px;
+
+	.pact text {
+		font-size: 22rpx;
+		font-weight: 400;
+		color: rgba(255, 255, 255, 1);
+		line-height: 36px;
 	}
-	.pact_text{
-		font-size:22px;
-		font-weight:400;
-		color:rgba(129,188,253,1)!important;
-		line-height:36px;
+
+	.pact_text {
+		font-size: 22px;
+		font-weight: 400;
+		color: rgba(129, 188, 253, 1) !important;
+		line-height: 36px;
 	}
-</style>
+</style>