123456

api/login.js

@@ -8,6 +8,16 @@ export function login(data) {
 		data
 	});
 }
+
+
+// 退出登录
+export function logout(data) {
+	return request({
+		url: '/api/user/logout',
+		method: 'post',
+		data
+	});
+}
 // 注册
 export function register(data) {
 	return request({

api/project.js

@@ -25,4 +25,31 @@ export function user_list(data) {
 		method: 'get',
 		data
 	});
+}
+
+// 评分
+export function score(data, id, uid) {
+	return request({
+		url: '/api/index/score/id/' + id + '/user_id/' + uid,
+		method: 'post',
+		data
+	});
+}
+
+// 我的得分
+export function my_point(data, id) {
+	return request({
+		url: '/api/index/my_point/id/' + id,
+		method: 'post',
+		data
+	});
+}
+
+// 最近一场
+export function new_project(data) {
+	return request({
+		url: '/api/index/new_project',
+		method: 'get',
+		data
+	});
 }

pages.json

@@ -32,13 +32,24 @@
 		{
 			"path": "pages/user/user",
 			"style": {
-				"navigationBarTitleText": "个人中心"
+				"navigationBarTitleText": "个人中心",
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
+		{
+			"path": "pages/user/userInfo",
+			"style": {
+				"navigationBarTitleText": "设置"
 			}
 		},
 		{
 			"path": "pages/user/grade",
 			"style": {
-				"navigationBarTitleText": "我的成绩"
+				"navigationBarTitleText": "我的得分",
+				"navigationBarBackgroundColor": "#2a9cec",
+				"navigationBarTextStyle": "white"
 			}
 		}
 

pages/index/index.vue

@@ -30,7 +30,8 @@
 		tabbar1
 	} from '@/utils/tabbar.js';
 	import {
-		getproject
+		getproject,
+		new_project
 	} from '@/api/project.js'
 	export default {
 		data() {
@@ -52,11 +53,10 @@
 		onReady() {},
 		methods: {
 			loadData() {
-				getproject({}, 1).then(({
+				new_project({}).then(({
 					data
 				}) => {
-					console.log(data);
-					this.list = data.mission
+					this.list = data.new.mission
 				})
 			},
 			navTo(url) {

pages/index/main.vue

@@ -7,22 +7,89 @@
 			<view class="top-box">
 				<view class="top-item" v-for="(item,index) in list">
 					<view class="top-main">
-						<image class="top-icon" :src="baseURL + item.iconimage" mode=""></image>
-						<view class="top-name">
+						<image v-if="tabCurrentIndex >= index" class="top-icon" :src="baseURL + item.iconimage" mode="">
+						</image>
+						<image v-if="tabCurrentIndex < index" class="top-icon" :src="baseURL + item.icon2image" mode="">
+						</image>
+						<view class="top-name" :class="{curret:tabCurrentIndex==index}">
 							{{item.name}}
 						</view>
 					</view>
 					<image class="jt" v-if="index != list.length -1" src="../../static/img/jt.png" mode=""></image>
 				</view>
 			</view>
+			<swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300"
+				disable-touch>
+				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in list" :key="tabIndex">
+					<view class="student-box flex">
+						<view class="student-left">
+							<view class="shu">
+							</view>
+							<view class="student-name">
+								学生: <text>{{dquser.nickname}}</text>
+							</view>
+						</view>
+						<view class="student-right" @click="qh()">
+							<view class="student-qh">
+								切换
+							</view>
+							<image class="student-back" src="../../static/icon/back.png" mode=""></image>
+						</view>
+					</view>
+					<view class="step" v-for="(item,index) in tabItem.item" :key="index">
+						<view class="step-top">
+							<view class="shu"></view>
+							<view class="step-title">{{item.name}}</view>
+						</view>
+						<view class="step-main  flex">
+							<view class="step-left">分数(共{{item.max_score}}分)</view>
+							<view class="step-right">
+								<input class="step-input" type="digit" v-model="item.score" :max="item.max_score*1"
+									placeholder-class="place" placeholder="请输入分数">
+								<view class="step-font">分</view>
+							</view>
+						</view>
+						<view class="step-info" v-if="item.info">
+							<view class="set-info-title">说明:</view>
+							<view class="set-info-mian">{{item.info}}</view>
+						</view>
+					</view>
+					<view class="btn" @click="tj(tabItem)">
+						{{tabIndex == (this.list.length -1)?'确认提交' : '下一步'}}
+					</view>
+				</swiper-item>
+			</swiper>
 		</view>
+		<uni-popup ref="student" type="bottom">
+			<view class="popup-box">
+				<view class="popup-title flex">
+					<view class="qx" @click="cancel">取消</view>
+					<view class="qd" @click="cancel">确定</view>
+				</view>
+				<view class="popup">
+					<scroll-view class="popup-left" scroll-y="true">
+						<view class="popup-left-item" v-for="(item,index) in userlist" :key="index"
+							:class="{curr:index==studentIndex}" @click="changezu(index)">
+							{{item.group}}
+						</view>
+					</scroll-view>
+					<scroll-view class="popup-right" scroll-y="true">
+						<view v-for="(item,index) in userlist[studentIndex].users" :key="index" class="popup-right-item"
+							:class="{currRight:item.id==dquser.id}" @click="changepeople(item,index)">
+							{{item.nickname}}
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 	import {
 		misssion,
-		user_list
+		user_list,
+		score
 	} from '@/api/project.js'
 	import {
 		mapState,
@@ -31,13 +98,31 @@
 	export default {
 		data() {
 			return {
-				te
-				user: {},
+				studentIndex: 0,
+				tabCurrentIndex: 0,
+				dquser: '',
+				dqz: '',
+				dqdjg: '',
 				id: '',
 				list: [],
-				userlist: []
+				userlist: [],
+				height: ''
 			};
 		},
+		onReady(res) {
+			var _this = this;
+			uni.getSystemInfo({
+				success: resu => {
+					const query = uni.createSelectorQuery();
+					query.select('.swiper-box').boundingClientRect();
+					query.exec(function(res) {
+						_this.height = resu.windowHeight - res[0].top + 'px';
+						console.log('打印页面的剩余高度', _this.height);
+					});
+				},
+				fail: res => {}
+			});
+		},
 		onLoad(opt) {
 			this.id = opt.id
 		},
@@ -49,23 +134,126 @@
 			...mapState(['baseURL'])
 		},
 		onReachBottom() {},
-		onReady() {},
 		methods: {
 			loadData() {
 				user_list({}).then(e => {
 					console.log(e, '123456');
 					this.userlist = e.data
-					this.user = e.data[0].users[0]
+					this.dqz = 0;
+					this.dqdjg = 0;
+					this.dquser = e.data[0].users[0]
 					this.getproject()
 				})
 			},
 			getproject() {
-				misssion({}, this.id, this.user.id).then(({
+				uni.showLoading({
+					title: '加载中'
+				})
+				misssion({}, this.id, this.dquser.id).then(({
 					data
 				}) => {
+					uni.hideLoading()
 					this.list = data.step
-					console.log(data, '12456');
 				})
+			},
+			next() {
+				const obj = this
+				for (var i = this.dqz; i < this.userlist.length; i++) {
+					for (var j = this.dqdjg; j < this.userlist[i].users.length; j++) {
+						if (obj.dquser.id == this.userlist[i].users[j].id) {
+							if (j + 1 < this.userlist[i].users.length) {
+								obj.dqdjg = j + 1
+								break;
+							} else {
+								obj.dqdjg = 0;
+								obj.dqz++
+							}
+						}
+					}
+					if (obj.dqz == this.userlist.length) {
+						break
+					} else {
+						if (this.userlist[obj.dqz].users.length != 0) {
+							break
+						} else {
+							obj.dqz++
+						}
+					}
+
+				}
+				console.log(obj.dqz, obj.dqdjg);
+				if (obj.dqz >= this.userlist.length) {
+					uni.showModal({
+						title: '提示',
+						content: '当前关的全部学生已全部评完，是否跳回到首页',
+						success: function(res) {
+							if (res.confirm) {
+								uni.switchTab({
+									url: '/pages/index/index'
+								})
+							} else if (res.cancel) {}
+						}
+					})
+				} else {
+					obj.$api.msg('当前学生已评价，切换到下一个')
+					obj.dquser = obj.userlist[obj.dqz].users[obj.dqdjg]
+					this.tabCurrentIndex = 0
+					this.getproject()
+				}
+			},
+			qh() {
+				this.$refs.student.open()
+			},
+			cancel() {
+				this.$refs.student.close()
+			},
+			changezu(index) {
+				this.studentIndex = index
+			},
+			changepeople(item, index) {
+				this.dquser = item
+				this.dqz = this.studentIndex
+				this.dqdjg = index
+				this.cancel()
+				this.studentIndex = 0
+				this.tabCurrentIndex = 0
+				this.getproject()
+			},
+			tj(opt) {
+				const obj = this
+				let isok = 0;
+				try {
+					opt.item.forEach(e => {
+						if (!e.score) {
+							obj.$api.msg('请输入' + e.name + '的分数')
+							isok = 1
+							throw Error()
+						}
+						if (e.score * 1 > e.max_score) {
+							obj.$api.msg(e.name + '的最大分数为' + e.max_score + '，请不要超过这个分数')
+							isok = 1
+							throw Error()
+						}
+						score({
+							score: e.score
+						}, e.id, obj.dquser.id).then(e => {})
+
+					})
+					if (isok == 1) {
+						throw Error()
+					} else {
+						if (obj.tabCurrentIndex != obj.list.length - 1 && isok == 0) {
+							obj.tabCurrentIndex++
+						} else {
+							obj.next()
+						}
+					}
+				} catch (e) {
+					//TODO handle the exception
+				}
+
+
+
 			}
 		}
 	};
@@ -123,8 +311,13 @@
 						position: relative;
 						z-index: 2;
 						margin-top: 16rpx;
-						font-size: 30rpx;
+						font-size: 24rpx;
 						font-family: PingFang SC;
+						font-weight: 500;
+						color: rgba(#ffffff, 0.7);
+					}
+
+					.curret {
 						font-weight: bold;
 						color: #2A9CEC;
 						-webkit-text-stroke: 1rpx #FFFFFF;
@@ -140,4 +333,231 @@
 			}
 		}
 	}
+
+	.student-box {
+		margin: 34rpx auto 0;
+		width: 698rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 6rpx 12rpx 1rpx rgba(101, 101, 101, 0.06);
+		border-radius: 28rpx;
+		padding: 28rpx 22rpx;
+
+		.student-left {
+			display: flex;
+			align-items: center;
+
+			.shu {
+				width: 6rpx;
+				height: 30rpx;
+				background: #F9A81B;
+				border-radius: 3rpx;
+			}
+
+			.student-name {
+				margin-left: 16rpx;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #000000;
+
+				text {
+					color: #40547E;
+				}
+			}
+		}
+
+		.student-right {
+			display: flex;
+			align-items: center;
+
+			.student-qh {
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+				margin-right: 10rpx;
+			}
+
+			.student-back {
+				width: 12rpx;
+				height: 23rpx;
+			}
+		}
+	}
+
+	.step {
+		margin: 34rpx auto 0;
+		width: 698rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 6rpx 12rpx 1rpx rgba(101, 101, 101, 0.06);
+		border-radius: 20rpx;
+		padding: 28rpx 22rpx;
+
+		.step-top {
+			display: flex;
+			align-items: center;
+
+			.shu {
+				width: 6rpx;
+				height: 30rpx;
+				background: #F9A81B;
+				border-radius: 3rpx;
+			}
+
+			.step-title {
+				margin-left: 16rpx;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #000000;
+			}
+		}
+
+		.step-main {
+			padding: 50rpx 20rpx 32rpx;
+			line-height: 1;
+
+			.step-left {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+			}
+
+			.step-right {
+				display: flex;
+				align-items: center;
+
+				.step-input {
+					text-align: right;
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FF4C4C;
+				}
+
+				.place {
+					line-height: 1;
+					font-size: 28rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #999999;
+				}
+
+				.step-font {
+					margin-left: 10rpx;
+					font-size: 28rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #000000;
+				}
+			}
+		}
+
+		.step-info {
+			margin-right: 20rpx;
+			border-top: 1px solid #ECECEC;
+			padding: 32rpx 20rpx 0;
+			display: flex;
+			align-items: flex-start;
+
+			.set-info-title {
+				width: 80rpx;
+				flex-shrink: 0;
+				margin-right: 10rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+				line-height: 41rpx;
+			}
+
+			.set-info-mian {
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+				line-height: 41rpx;
+			}
+		}
+	}
+
+	.btn {
+		margin: 50rpx auto 0;
+		width: 674rpx;
+		height: 88rpx;
+		background: #2A9CEC;
+		border-radius: 20rpx;
+		text-align: center;
+		line-height: 88rpx;
+		font-size: 36rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+	}
+
+	.popup-box {
+		width: 750rpx;
+		background: #FFFFFF;
+		border-top-left-radius: 30rpx;
+		border-top-right-radius: 30rpx;
+
+		.popup-title {
+			padding: 32rpx 38rpx;
+
+			.qx {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+			}
+
+			.qd {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #2A9CEC;
+			}
+		}
+	}
+
+	.popup {
+		display: flex;
+		align-items: center;
+
+		.popup-left {
+			width: 244rpx;
+			height: 500rpx;
+
+			.popup-left-item {
+				width: 244rpx;
+				padding: 30rpx 0;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #000000;
+				background: #f6f6f6;
+			}
+
+			.curr {
+				background: #ffffff;
+			}
+		}
+
+		.popup-right {
+			width: 506rpx;
+			height: 500rpx;
+			padding: 0 20rpx;
+
+			.popup-right-item {
+				padding: 30rpx 20rpx;
+				border-bottom: 1px solid #f7f7f7;
+			}
+
+			.currRight {
+				color: #2A9CEC;
+			}
+		}
+	}
 </style>

pages/user/grade.vue

@@ -1,6 +1,16 @@
 <template>
 	<view class="content">
-		<m-tabbar fixed fill current="2" :tabbar="tabbar1"></m-tabbar>
+		<view class="main">
+			<view class="main-item flex" v-for="(item,index) in list" :key="index">
+				<view class="main-left">
+					{{item.name}}
+				</view>
+				<view class="main-right">
+					<text class="num">{{item.score}}</text>分
+				</view>
+			</view>
+		</view>
+		<m-tabbar fixed fill current="1" :tabbar="tabbar1"></m-tabbar>
 	</view>
 </template>
 
@@ -17,21 +27,40 @@
 		tabbar,
 		tabbar1
 	} from '@/utils/tabbar.js';
+	import {
+		new_project,
+		my_point
+	} from '@/api/project.js'
 	export default {
 		data() {
 			return {
 				tabbar: tabbar,
 				tabbar1: tabbar1,
+				list: [],
 			};
 		},
 		computed: {
 			...mapState('user', ['userInfo', 'hasLogin', 'urlFile'])
 		},
 		onLoad() {},
-		onShow() {},
+		onShow() {
+			this.loadData()
+		},
 		onReachBottom() {},
 		onReady() {},
-		methods: {}
+		methods: {
+			loadData() {
+				new_project().then(e => {
+					console.log(e);
+					my_point({}, e.data.new.id).then(({
+						data
+					}) => {
+						this.list = data;
+						console.log(data);
+					})
+				})
+			}
+		}
 	};
 </script>
 
@@ -41,4 +70,38 @@
 		min-height: 100%;
 		height: auto;
 	}
+
+	.main {
+		width: 702rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 20rpx;
+		margin: 20rpx auto;
+		padding: 0 25rpx;
+
+		.main-item {
+			padding: 36rpx 0;
+			border-bottom: 1px solid #F0F0F0;
+
+			.main-left {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+			}
+
+			.main-right {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #000000;
+
+				.num {
+					display: inline-block;
+					margin-right: 10rpx;
+					color: #FF4C4C;
+				}
+			}
+		}
+	}
 </style>

pages/user/user.vue

@@ -1,5 +1,41 @@
 <template>
 	<view class="content">
+		<view class="top">
+			<view class="vheight">
+			</view>
+			<view class="top-bg">
+				<image src="../../static/img/user-bg.png" mode=""></image>
+			</view>
+			<view class="userinfo-box">
+				<image class="avatar" :src="baseURL+userInfo.avatar" mode=""></image>
+				<view class="name">
+					{{userInfo.nickname}}
+				</view>
+			</view>
+
+		</view>
+		<view class="tou">
+		</view>
+		<view class="main">
+			<view class="main-item flex" @click="navTo('/pages/user/userInfo')">
+				<view class="main-left">
+					<image class="main-icon" src="../../static/icon/user1.png" mode="widthFix"></image>
+					<view class="main-name">
+						个人资料
+					</view>
+				</view>
+				<image class="main-jt" src="../../static/icon/user-bk.png" mode=""></image>
+			</view>
+			<view class="main-item flex" @click="cancel()">
+				<view class="main-left">
+					<image class="main-icon" src="../../static/icon/user2.png" mode="widthFix"></image>
+					<view class="main-name">
+						退出登录
+					</view>
+				</view>
+				<image class="main-jt" src="../../static/icon/user-bk.png" mode=""></image>
+			</view>
+		</view>
 		<m-tabbar v-if="userInfo.user_type==2" fixed fill current="1" :tabbar="tabbar"></m-tabbar>
 		<m-tabbar fixed fill v-if="userInfo.user_type!=2" current="2" :tabbar="tabbar1"></m-tabbar>
 	</view>
@@ -18,6 +54,9 @@
 		tabbar,
 		tabbar1
 	} from '@/utils/tabbar.js';
+	import {
+		logout
+	} from '@/api/login.js'
 	export default {
 		data() {
 			return {
@@ -26,13 +65,44 @@
 			};
 		},
 		computed: {
-			...mapState('user', ['userInfo', 'hasLogin', 'urlFile'])
+			...mapState('user', ['userInfo', 'hasLogin', 'urlFile']),
+			...mapState(['baseURL']),
+
 		},
 		onLoad() {},
-		onShow() {},
+		onShow() {
+			console.log(this.userInfo);
+		},
 		onReachBottom() {},
 		onReady() {},
-		methods: {}
+		methods: {
+			...mapMutations('user', ['logout']),
+			cancel() {
+				let obj = this;
+				uni.showModal({
+					content: '确定要退出登录么',
+					success: e => {
+						if (e.confirm) {
+							logout({})
+								.then(e => {
+									obj.logout();
+									uni.navigateTo({
+										url: '/pages/public/login'
+									});
+								})
+								.catch(e => {
+									console.log(e);
+								});
+						}
+					}
+				});
+			},
+			navTo(url) {
+				uni.navigateTo({
+					url
+				})
+			}
+		}
 	};
 </script>
 
@@ -41,5 +111,94 @@
 	.content {
 		min-height: 100%;
 		height: auto;
+		background: #FFFFFF;
+	}
+
+	.vheight {
+		height: var(--status-bar-height);
+		width: 100%;
+	}
+
+	.top {
+		width: 750rpx;
+		height: 416rpx;
+		position: relative;
+
+		.top-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			width: 100%;
+			height: 100%;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.userinfo-box {
+			position: relative;
+			z-index: 2;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 80rpx 0 0;
+			line-height: 1;
+
+			.avatar {
+				width: 102rpx;
+				height: 102rpx;
+				border-radius: 50%;
+			}
+
+			.name {
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				margin-top: 20rpx;
+			}
+		}
+	}
+
+	.tou {
+		position: relative;
+		z-index: 2;
+		width: 100%;
+		height: 100rpx;
+		margin-top: -80rpx;
+		border-top-left-radius: 60rpx;
+		border-top-right-radius: 60rpx;
+		background: #FFFFFF;
+	}
+
+	.main-item {
+		padding: 30rpx 70rpx;
+
+		.main-left {
+			display: flex;
+			align-items: center;
+
+			.main-icon {
+				width: 32rpx;
+			}
+
+			.main-name {
+				font-size: 32rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #1A3B34;
+				margin-left: 34rpx;
+			}
+		}
+
+		.main-jt {
+			width: 13rpx;
+			height: 22rpx;
+
+		}
 	}
 </style>

pages/user/userInfo.vue

@@ -0,0 +1,197 @@
+<template>
+	<view class="content">
+		<view class="row1">
+			<text class="tit">头像</text>
+			<view class="background-img">
+				<image class="background-img" :src="baseURL+userInfo.avatar" mode="aspectFill">
+				</image>
+			</view>
+		</view>
+		<view class="row b-b flex">
+			<text class="tit">姓名</text>
+			<input class="input" v-model="userInfo.nickname" disabled="true" type="text"
+				placeholder-class="placeholder" />
+		</view>
+		<view class="row">
+			<text class="tit">账号</text>
+			<input class="input" type="text" disabled="true" v-model="userInfo.mobile"
+				placeholder-class="placeholder" />
+		</view>
+		<view class="row">
+			<text class="tit">身份</text>
+			<view class="input">
+				{{userInfo.user_type == 2?'老师' : '学生'}}
+			</view>
+		</view>
+		<view class="add-btn" @click="cancel">退出登录</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		logout
+	} from '@/api/login.js';
+	export default {
+		data() {
+			return {};
+		},
+		onLoad() {
+			console.log(this.userInfo, '123456');
+		},
+		computed: {
+			...mapState('user', ['userInfo']),
+			...mapState(['baseURL'])
+		},
+		methods: {
+			...mapMutations('user', ['logout']),
+			cancel() {
+				let obj = this;
+				uni.showModal({
+					content: '确定要退出登录么',
+					success: e => {
+						if (e.confirm) {
+							logout({})
+								.then(e => {
+									obj.logout();
+									uni.navigateTo({
+										url: '/pages/public/login'
+									});
+								})
+								.catch(e => {
+									console.log(e);
+								});
+						}
+					}
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	.row1 {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		padding: 0 30upx;
+		height: 110upx;
+		background: #fff;
+		margin-bottom: 20upx;
+
+		.tit {
+			flex-shrink: 0;
+			width: 120upx;
+			font-size: $font-lg;
+			color: $font-color-dark;
+		}
+
+		.background-img {
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 50%;
+			background: #f2f2f2;
+		}
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		padding: 0 30upx;
+		height: 110upx;
+		background: #fff;
+
+		.tit {
+			flex-shrink: 0;
+			width: 120upx;
+			font-size: $font-lg;
+			color: $font-color-dark;
+		}
+
+		.input {
+			flex: 1;
+			text-align: right;
+			font-size: $font-base;
+			color: $color-gray;
+		}
+	}
+
+	.add-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 630rpx;
+		height: 90rpx;
+		margin: 80rpx auto 0;
+		font-family: PingFang SC;
+		font-weight: bold;
+		background: #2a9cec;
+		color: #fff;
+	}
+
+	.add-btn1 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 630rpx;
+		height: 90rpx;
+		margin: 140rpx auto 0;
+		font-family: PingFang SC;
+		font-weight: bold;
+		background: linear-gradient(90deg, #65B2E9, #CA57DC);
+		color: #fff;
+	}
+
+	.out {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 auto 30rpx;
+		width: 560rpx;
+		height: 80rpx;
+		border: 1px solid #dc262b;
+		background: #ffffff;
+		border-radius: 40px;
+		color: #dc262b;
+	}
+
+	.psw-wrapper {
+		width: 548rpx;
+		height: 344rpx;
+		background-color: #ffffff;
+
+		.psw-title {
+			width: 100%;
+			font-size: 35rpx;
+			padding: 43rpx 0 49rpx;
+			text-align: center;
+			font-weight: 800;
+		}
+
+		.psw-ipt {
+			display: block;
+			background-color: #dce3ed;
+			height: 90rpx;
+			width: 464rpx;
+			padding-left: 30rpx;
+			margin: 0 auto;
+			font-size: 80rpx;
+		}
+
+		.psw-btn text {
+			display: inline-block;
+			text-align: center;
+			width: 50%;
+			padding-top: 29rpx;
+			font-size: 35rpx;
+		}
+
+		.psw-qd {
+			color: #32c6ff;
+		}
+	}
+</style>