说明：按照美工要求修改了，用户绑定窗口

pages/index/index.vue

@@ -16,16 +16,22 @@
 			</view>
 		</view>
 		<!--弹窗-->
-		<modal v-if="showPop" title="用户绑定" confirm-text="确定" cancel-text="重置" @cancel="resetPop" @confirm="confirmPop">
-			<view class="lineGroup">
-				<text class="iconfont icon-shengchengmingpianicon label-icon"></text>
-				<input type='text' class="stu-number" maxlength="14" placeholder="请输入学号" v-model="stu_number" />
+		<view class="banding-bg" v-if="showPop">
+			<view class="banding-model">
+				<view class="title-model">绑定</view>
+				<view class="lineGroup-model">
+					<text class="iconfont icon-shengchengmingpianicon label-icon-model"></text>
+					<input type='number' class="input-model" maxlength="14" placeholder="请输入学号" v-model="stu_number" />
+				</view>
+				<view class="lineGroup-model">
+					<text class="iconfont icon-cardid label-icon-model"></text>
+					<input type='number' class="input-model" maxlength="18" placeholder="请输入身份证号码" v-model="id_card" />
+				</view>
+				<view class="btn-model">
+					<button class="btn" @tap="confirmPop">绑定</button>
+				</view>
 			</view>
-			<view class="lineGroup">
-				<text class="iconfont icon-cardid label-icon"></text>
-				<input type='text' class="stu-number" maxlength="18" placeholder="请输入身份证号码" v-model="id_card" />
-			</view>
-		</modal>
+		</view>
 	</view>
 </template>
 
@@ -34,7 +40,7 @@
 		data() {
 			return {
 				code: '',
-				showPop: false, //弹窗
+				showPop: true, //弹窗
 				stu_number: '',
 				id_card: '',
 				ceshi: 'code',
@@ -95,10 +101,6 @@
 					});
 				}
 			},
-			resetPop() { // 重置
-				this.stu_number = ''
-				this.id_card = ''
-			},
 			/**
 			 * param获得code
 			 */
@@ -117,6 +119,7 @@
 								title: res.errMsg,
 								icon: 'none'
 							});
+							this.showPop = true
 						}
 					}
 				})
@@ -156,6 +159,8 @@
 						title: res.data.mess,
 						icon: 'success'
 					});
+					
+					this.showPop = true
 				}
 			},
 			/**
@@ -236,31 +241,78 @@
 			}
 		}
 
-		.lineGroup {
+		.banding-bg {
 			display: flex;
-			flex-direction: row;
-			border-bottom: 1px solid #c2c2c2;
-			font-size: 38rpx;
-			white-space: nowrap;
-			
-			.label-icon {
+			justify-content: center;
+			align-items: center;
+			position: fixed;
+			width: 750rpx;
+			height: 1500rpx;
+			background: rgba(0, 0, 0, 0.5);
+
+			.banding-model {
 				display: flex;
-				flex-direction: row;
-				justify-items: right;
-				align-items: center;
-				font-size: 58rpx;
-				width: 88rpx;
-				height: 88rpx;
-				line-height: 88rpx;
-				color: $my-color-primary;
-				margin: 22rpx 0 0 50rpx;
-			}
+				flex-direction: column;
+				justify-content: flex-start;
+				background-color: #FFFFFF;
+				position: fixed;
+				left: 25rpx;
+				top: 300rpx;
+				width: 650rpx;
+				border-radius: 15rpx;
+				padding: 30rpx;
+
+				.title-model {
+					font-size: 46rpx;
+					font-weight: bold;
+					padding: 20rpx 0 20rpx 30rpx;
+				}
 
-			.stu-number {
-				margin-top: 20rpx;
-				color: #00c200;
-				height: 88rpx;
-				line-height: 88rpx;
+				.lineGroup-model {
+					display: flex;
+					flex-direction: row;
+					box-shadow: none;
+					border-bottom: 1px solid #c2c2c2;
+					font-size: 38rpx;
+					white-space: nowrap;
+
+					.label-icon-model {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						font-size: 58rpx;
+						width: 88rpx;
+						height: 108rpx;
+						line-height: 108rpx;
+						color: $my-color-primary;
+						margin: 22rpx 0 0 50rpx;
+					}
+
+					.input-model {
+						margin-top: 20rpx;
+						color: #00c200;
+						height: 108rpx;
+						line-height: 108rpx;
+					}
+				}
+
+				.btn-model {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: 50rpx;
+
+					.btn {
+						width: 280rpx;
+						height: 110rpx;
+						line-height: 110rpx;
+						background-color: $my-color-primary;
+						border-radius: 15rpx;
+						font-size: 38rpx;
+						text-align: center;
+						color: #FFFFFF;
+					}
+				}
 			}
 		}
 	}