chuangte_bike_newxcx/page_shanghu/yunwei/index.vue

<template>
	<view class="page">
		<u-navbar title="换电工单" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='36' height='44'></u-navbar>

		<!-- 顶部固定区域 -->
		<view class="fixed-header">
			<!-- 搜索栏 -->
			<view class="search-box">
				<view class="search-bar">
					<view class="scan-btn" @click="btnsaoma">
						<u-icon name="scan" size="40" color="#333"></u-icon>
					</view>
					<view class="divider"></view>
					<input type="text" v-model="sn" placeholder="搜索车辆编号/换电工单" placeholder-class="placeholder-style" />
					<view class="search-btn" @click="btnsousuo">
						<u-icon name="search" size="40" color="#4C97E7"></u-icon>
					</view>
				</view>
			</view>

			<!-- 筛选栏 -->
			<view class="filter-box">
				<view class="tab-list">
					<view class="tab-item" v-for="(item,index) in tablist" :key="index"
						:class="{active: tabindex == index}" @click="btntab(item,index)">
						{{item.name}}
						<view class="active-indicator" v-if="tabindex == index"></view>
					</view>
				</view>
				<view class="filter-option" @click="btndj">
					<view class="custom-checkbox" :class="{checked: !chenchex}">
						<u-icon name="checkmark" color="#fff" size="20" v-if="!chenchex"></u-icon>
					</view>
					<text>仅看我的</text>
				</view>
			</view>
		</view>

		<!-- 列表区域 -->
		<scroll-view @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh"
			:refresher-triggered="isRefreshing" class="list-container">
			
			<!-- 占位元素，把内容顶下来 -->
			<!-- <view style="height: 220rpx;"></view> -->

			<view class="card" v-for="(item,index) in hdlist" :key="index" @click="btnitem(item)">
				<!-- 卡片头部 -->
				<view class="card-header">
					<view class="order-info">
						<text class="no">No.{{item.no}}</text>
					</view>
					<view class="status-badge" :class="'status-' + item.status">
						<text v-if="item.status == 1">待接单</text>
						<text v-else-if="item.status == 2">进行中</text>
						<text v-else-if="item.status == 3">已完成</text>
					</view>
				</view>

				<!-- 卡片内容 -->
				<view class="card-body">
					<view class="info-row time-row">
						<u-icon name="clock" size="28" color="#999" style="margin-right: 8rpx;"></u-icon>
						<text>{{item.createTime}}</text>
					</view>
					
					<view class="info-grid">
						<view class="grid-item">
							<text class="label">当前电量</text>
							<text class="value highlight">{{item.createPower}}%</text>
						</view>
						<view class="grid-item">
							<text class="label">车牌号</text>
							<text class="value">{{item.deviceVehicleNum || '暂无'}}</text>
						</view>
						<view class="grid-item full-width">
							<text class="label">设备编号</text>
							<text class="value">{{item.deviceSn}}</text>
						</view>
					</view>
				</view>

				<!-- 卡片底部操作 -->
				<view class="card-footer" v-if="item.status != 3">
					<view class="spacer"></view>
					<view class="action-btn primary" v-if="item.status == 1" @click.stop="btnjd(item,index)">
						立即接单
					</view>
					<view class="action-btn success" v-if="item.status == 2" @click.stop="btnwc(item,index)">
						确认完成
					</view>
				</view>
			</view>

			<view class="loading-text">
				{{ total > hdlist.length ? '加载中...' : '当前没有更多工单咯' }}
			</view>
			<view style="height: 150rpx;"></view>
		</scroll-view>

		<!-- 悬浮添加按钮 -->
		<view class="fab-add" @click="btnaddflag">
			<u-icon name="plus" color="#fff" size="48"></u-icon>
		</view>

		<!-- 完成输入备注弹窗 -->
		<view class="modal-mask" v-if="beizhuflag" @click="btnqx"></view>
		<view class="custom-modal" v-if="beizhuflag">
			<view class="modal-title">工单备注</view>
			<textarea class="modal-textarea" v-model="finishRemark" placeholder="请输入完成备注信息..." fixed="true"></textarea>
			<view class="modal-footer">
				<view class="btn cancel" @click="btnqx">取消</view>
				<view class="btn confirm" @click="btnqdwc">完成</view>
			</view>
		</view>

		<!-- 新增工单弹窗 -->
		<view class="modal-mask" v-if="addflag" @click="btnyc"></view>
		<view class="add-popup" v-if="addflag">
			<view class="popup-header">
				<text class="title">添加换电工单</text>
				<view class="close-btn" @click="btnyc">
					<u-icon name="close" size="32" color="#999"></u-icon>
				</view>
			</view>
			
			<scroll-view scroll-y class="popup-body">
				<!-- 选择设备 -->
				<view class="form-section">
					<view class="section-title">选择设备</view>
					<view class="search-input-group">
						<view class="scan-mini" @click="btnsaoma">
							<u-icon name="scan" size="36" color="#333"></u-icon>
						</view>
						<view class="v-divider"></view>
						<input type="text" v-model="bianhao" placeholder="输入车辆编号/车牌号" />
						<view class="add-btn-mini" @click="btnadd">添加</view>
					</view>
					
					<view class="selected-tags">
						<view class="tag-item" v-for="(item,index) in addlist" :key="index">
							<text>{{item.sn}} {{item.vehicleNum ? `(${item.vehicleNum})` : ''}}</text>
							<u-icon name="close-circle-fill" color="#ff4d4f" size="32" @click="btndel(item)" style="margin-left: 10rpx;"></u-icon>
						</view>
					</view>
				</view>

				<!-- 派发人员 -->
				<view class="form-section">
					<view class="section-title">派发人员</view>
					<view class="select-box" @click="btnry">
						<text :class="{placeholder: renyuan === '请选择'}">{{renyuan}}</text>
						<u-icon :name="renyuanflag ? 'arrow-up' : 'arrow-down'" color="#999" size="28"></u-icon>
					</view>
					
					<view class="dropdown-list" v-if="renyuanflag">
						<view class="dropdown-item" v-for="(item,index) in xzlist" :key="index" @click="btnrenyuan(item)">
							<text class="name">{{item.userName}}</text>
							<text class="remark">{{item.remark || '无备注'}}</text>
						</view>
					</view>
				</view>

				<!-- 备注 -->
				<view class="form-section">
					<view class="section-title">备注信息</view>
					<textarea class="form-textarea" v-model="txtcont" placeholder="请输入工单备注..." fixed="true"></textarea>
				</view>
			</scroll-view>

			<view class="popup-footer">
				<view class="submit-btn" @click="btnaddqd">确认创建</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
					name: '待换电',
					type: '1'
				}, {
					name: '换电中',
					type: '2'
				}, {
					name: '已完成',
					type: '3'
				}, {
					name: '全部',
					type: '4'
				}],
				bgc: {
					backgroundColor: "#fff",
				},
				areaId: '',
				chenchex: true, // 注意：原逻辑 true 是 "未选中" (check value=true 点击变 false), false 是 "选中"
				tabindex: 0,
				pageNum: 1,
				hdlist: [],
				total: 0,
				isRefreshing: false,
				status: 1,
				userId: '',
				beizhuflag: false,
				wcid: '',
				wcindex: '',
				finishRemark: '',
				sn: '',
				txtcont: '',
				xzlist: [],
				renyuan: '请选择',
				renyuanid: '',
				renyuanflag: false,
				bianhao: '',
				addlist: [],
				addflag: false
			}
		},
		onLoad(option) {
			this.areaId = option.areaId
			this.getlist()
			this.getshebei()
		},
		methods: {
			// 点击确定添加工单
			btnaddqd() {
				let arrid = []
				this.addlist.forEach(item => {
					arrid.push(item.id)
				})
				let data = {
					deviceIds: arrid,
					receiveUserId: this.renyuanid,
					createRemark: this.txtcont
				}
				this.$u.post(`/bst/powerWork`, data).then(res => {
					if (res.code == 200) {
						this.addflag = false
						this.pageNum = 1
						this.addlist = []
						this.getlist()
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 3000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 点击显示添加工单
			btnaddflag() {
				this.addflag = true
			},
			// 点击隐藏添加工单
			btnyc() {
				this.addflag = false
				this.addlist = []
			},
			// 点击删除设备
			btndel(item) {
				const deviceId = item.id
				this.addlist = this.addlist.filter(item => item.id !== deviceId)
				console.log(this.addlist);
			},
			// 点击添加设备
			btnadd() {
				if (!this.bianhao) return;
				this.$u.get(`/bst/device?keyword=${this.bianhao}`).then(res => {
					if (res.code == 200) {
						if (res.data) {
							this.bianhao = ''
							const isExist = this.addlist.some(item => item.id == res.data.id)
							if (isExist) {
								uni.showToast({
									title: '该设备已存在',
									icon: 'none',
									duration: 3000
								})
							} else {
								this.addlist.push(res.data)
								console.log(this.addlist);
							}
						} else {
							uni.showToast({
								title: '未查询到该设备',
								icon: 'none',
								duration: 2000
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击显示人员列表
			btnry() {
				this.renyuanflag = !this.renyuanflag
			},
			// 点击选择派发人员
			btnrenyuan(item) {
				this.renyuan = item.userName
				this.renyuanid = item.userId
				this.renyuanflag = false
			},
			// 请求运营区所有人员
			getshebei() {
				this.$u.get(`/bst/areaJoin/list?areaId=${this.areaId}&pageNum=1&pageSize=999`).then(res => {
					if (res.code == 200) {
						this.xzlist = res.rows
					}
				})
			},

			btnqx() {
				this.beizhuflag = false
			},
			// 点击跳转详情
			btnitem(item) {
				uni.navigateTo({
					url: '/page_shanghu/yunwei/gongdanxq?id=' + item.id
				})
			},

			// 点击进行搜索
			btnsousuo() {
				this.pageNum = 1
				this.getlist()
			},
			// 点击扫码
			btnsaoma() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log(res)
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						this.sn = getQueryParam(decodedValue, 's') || getQueryParam(decodedValue, 'sn')
						this.bianhao = getQueryParam(decodedValue, 's') || getQueryParam(decodedValue, 'sn')
						this.pageNum = 1
						this.getlist()
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击完成
			btnwc(item, index) {
				this.beizhuflag = true
				this.wcid = item.id
				this.wcindex = index
				// this.getlist() // 没必要重新获取列表
			},
			//点击确定完成
			btnqdwc() {
				let data = {
					id: this.wcid,
					finishRemark: this.finishRemark
				}
				this.$u.put(`/bst/powerWork/complete`, data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作完成',
							icon: 'success',
							duration: 2000
						})
						this.hdlist[this.wcindex].status = 3
						this.beizhuflag = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击接单
			btnjd(item, index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您是否要进行接单？',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: item.id
							}
							that.$u.put(`/bst/powerWork/receive`, data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '接单成功',
										icon: 'success',
										duration: 2000
									})
									that.hdlist[index].status = 2
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				})
			},
			// 点击是否只查看自己的
			btndj() {
				this.chenchex = !this.chenchex
				if (this.chenchex == false) {
					this.userId = uni.getStorageSync('user').userId
					this.pageNum = 1
					this.getlist()
				} else {
					this.userId = ''
					this.pageNum = 1
					this.getlist()
				}
				console.log(this.chenchex);
			},
			// 点击切换tab
			btntab(item, index) {
				this.tabindex = index
				this.status = item.type
				this.pageNum = 1
				this.getlist()
			},
			// 获取换电工单列表
			getlist() {
				this.$u.get(
					`/bst/powerWork/list?pageNum=${this.pageNum}&pageSize=20&areaId=${this.areaId}&status=${this.status == 4 ? '' : this.status}&receiveUserId=${this.userId}&keyword=${this.sn}`
				).then((res) => {
					if (res.code === 200) {
						this.total = res.total
						if (this.pageNum == 1) {
							this.hdlist = res.rows
						} else {
							this.hdlist = this.hdlist.concat(res.rows)
						}
					}
				})
			},
			handqixing() {
				console.log(1);
				if (this.hdlist.length < this.total) {
					this.pageNum++ // 这里需要增加页码
					this.getlist()
				}
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				setTimeout(() => {
					this.isRefreshing = false
					this.pageNum = 1
					this.getlist()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.page {
		width: 100%;
		min-height: 100vh;
	}

	/* 固定头部 */
	.fixed-header {
		// position: fixed;
		// top: 0; 
		/* 注意：这里top设为0，实际可能需要避开navbar高度，或者navbar是占位的？ */
		/* u-navbar默认是fixed的，如果不占位，需要margin-top。根据原代码推测，这里需要用margin-top来避开navbar */
		/* u-navbar :height="44" -> 88rpx. + statusbar height. */
		/* 为了简单适配，建议给list-container加padding-top，header用z-index覆盖 */
		/* 这里我们将header放在navbar下面 */
		// margin-top: calc(44px + var(--status-bar-height));
		// left: 0;
		width: 100%;
		z-index: 10;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}

	/* 搜索栏 */
	.search-box {
		padding: 20rpx 30rpx;
		background: #fff;
		
		.search-bar {
			display: flex;
			align-items: center;
			background: #F5F7FA;
			border-radius: 40rpx;
			padding: 12rpx 24rpx;
			height: 80rpx;
			box-sizing: border-box;
			
			.scan-btn {
				padding: 10rpx;
			}
			
			.divider {
				width: 2rpx;
				height: 32rpx;
				background: #DCDFE6;
				margin: 0 20rpx;
			}
			
			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
			
			.placeholder-style {
				color: #999;
			}
			
			.search-btn {
				padding: 10rpx;
			}
		}
	}

	/* 筛选栏 */
	.filter-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 88rpx;
		background: #fff;
		border-top: 1rpx solid #f0f0f0;
		
		.tab-list {
			display: flex;
			gap: 40rpx;
			
			.tab-item {
				font-size: 28rpx;
				color: #666;
				position: relative;
				padding: 20rpx 0;
				font-weight: 500;
				
				&.active {
					color: #4C97E7;
					font-weight: 600;
					font-size: 30rpx;
				}
				
				.active-indicator {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					background: #4C97E7;
					border-radius: 4rpx;
				}
			}
		}
		
		.filter-option {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #666;
			
			.custom-checkbox {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #ccc;
				border-radius: 6rpx;
				margin-right: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&.checked {
					background: #4C97E7;
					border-color: #4C97E7;
				}
			}
		}
	}

	/* 列表容器 */
	.list-container {
		height: 75vh;
		box-sizing: border-box;
		padding: 0 24rpx;
		padding-top: 24rpx;
	}

	/* 卡片样式 */
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #f5f5f5;
			margin-bottom: 24rpx;
			
			.no {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}
			
			.status-badge {
				padding: 6rpx 20rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				
				&.status-1 {
					background: #FFF0F0;
					color: #FF4D4F;
				}
				&.status-2 {
					background: #EBF4FF;
					color: #4C97E7;
				}
				&.status-3 {
					background: #F0F9EB;
					color: #67C23A;
				}
			}
		}
		
		.card-body {
			.info-row {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #999;
				margin-bottom: 20rpx;
			}
			
			.info-grid {
				display: flex;
				flex-wrap: wrap;
				background: #F8F9FB;
				border-radius: 12rpx;
				padding: 20rpx;
				
				.grid-item {
					width: 50%;
					display: flex;
					flex-direction: column;
					margin-bottom: 16rpx;
					
					&.full-width {
						width: 100%;
						margin-bottom: 0;
					}
					
					.label {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 8rpx;
					}
					
					.value {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						word-break: break-all;
						
						&.highlight {
							color: #4C97E7;
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}
			}
		}
		
		.card-footer {
			margin-top: 24rpx;
			display: flex;
			
			.spacer {
				flex: 1;
			}
			
			.action-btn {
				min-width: 160rpx;
				height: 64rpx;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				
				&.primary {
					background: #4C97E7;
					color: #fff;
					box-shadow: 0 4rpx 12rpx rgba(76, 151, 231, 0.3);
				}
				
				&.success {
					background: #67C23A;
					color: #fff;
					box-shadow: 0 4rpx 12rpx rgba(103, 194, 58, 0.3);
				}
			}
		}
	}

	.loading-text {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		padding: 30rpx 0;
	}

	/* 悬浮按钮 */
	.fab-add {
		position: fixed;
		right: 40rpx;
		bottom: 180rpx;
		width: 110rpx;
		height: 110rpx;
		background: #4C97E7;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(76, 151, 231, 0.4);
		z-index: 100;
		transition: all 0.2s;
		
		&:active {
			transform: scale(0.95);
		}
	}

	/* 弹窗通用 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
		z-index: 990;
	}

	/* 备注弹窗 */
	.custom-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx;
		z-index: 999;
		
		.modal-title {
			font-size: 34rpx;
			font-weight: 600;
			text-align: center;
			margin-bottom: 30rpx;
		}
		
		.modal-textarea {
			width: 100%;
			height: 240rpx;
			background: #F5F7FA;
			border-radius: 12rpx;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
		
		.modal-footer {
			display: flex;
			gap: 30rpx;
			margin-top: 40rpx;
			
			.btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				
				&.cancel {
					background: #F5F7FA;
					color: #666;
				}
				
				&.confirm {
					background: #4C97E7;
					color: #fff;
				}
			}
		}
	}

	/* 新增工单弹窗 */
	.add-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80vh;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		
		.popup-header {
			padding: 30rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #f5f5f5;
			
			.title {
				font-size: 34rpx;
				font-weight: 600;
				color: #333;
			}
		}
		
		.popup-body {
			flex: 1;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			overflow-y: auto;
		}
		
		.form-section {
			margin-bottom: 40rpx;
			
			.section-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 20rpx;
			}
			
			.search-input-group {
				display: flex;
				align-items: center;
				background: #F5F7FA;
				border-radius: 12rpx;
				padding: 10rpx 20rpx;
				border: 1rpx solid #E4E7ED;
				
				.v-divider {
					width: 2rpx;
					height: 30rpx;
					background: #DCDFE6;
					margin: 0 20rpx;
				}
				
				input {
					flex: 1;
					font-size: 28rpx;
				}
				
				.add-btn-mini {
					background: #4C97E7;
					color: #fff;
					font-size: 24rpx;
					padding: 10rpx 24rpx;
					border-radius: 8rpx;
				}
			}
			
			.selected-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				margin-top: 20rpx;
				
				.tag-item {
					background: #EBF4FF;
					color: #4C97E7;
					padding: 12rpx 24rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
				}
			}
			
			.select-box {
				background: #F5F7FA;
				padding: 24rpx;
				border-radius: 12rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				
				.placeholder {
					color: #999;
				}
			}
			
			.dropdown-list {
				margin-top: 10rpx;
				background: #fff;
				border: 1rpx solid #E4E7ED;
				border-radius: 12rpx;
				max-height: 300rpx;
				overflow-y: auto;
				box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
				
				.dropdown-item {
					padding: 20rpx;
					border-bottom: 1rpx solid #f5f5f5;
					display: flex;
					justify-content: space-between;
					
					&:active {
						background: #F5F7FA;
					}
					
					.name { font-size: 28rpx; color: #333; }
					.remark { font-size: 24rpx; color: #999; }
				}
			}
			
			.form-textarea {
				width: 100%;
				height: 200rpx;
				background: #F5F7FA;
				border-radius: 12rpx;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}
		
		.popup-footer {
			padding: 20rpx 40rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			border-top: 1rpx solid #f5f5f5;
			
			.submit-btn {
				width: 100%;
				height: 88rpx;
				background: #4C97E7;
				border-radius: 44rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&:active {
					opacity: 0.9;
				}
			}
		}
	}
</style>