teaching-uniapp/pages/mineEdit/mineEdit.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>

		<view class="editBox">
			<view class="edit_avatar">
				<view class="edit_title">
					<text>头像</text>
				</view>
				<view class="userAvatar" @click="updateava">
					<image :src="userData.avatar"></image>
				</view>
			</view>
			<view class="setName">
				<view class="edit_title">
					<text>姓名</text>
				</view>
				<view class="input_details">
					<view class="nickname">
						<input type="text" style=" text-align: right;" maxlength="10" placeholder="请输入昵称"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);"
							v-model="userData.username" />
					</view>
				</view>
			</view>
			<view class="setPicker">
				<view class="edit_title">
					<text>性别</text>
				</view>
				<picker mode="selector" :range="genderList" :value="userData.sex" @change="handelGender">
					<!-- <view class="content"> -->
					<view class="input_details">
						<view class="details">
							<view class="uni-input text">{{!genderList[userData.sex]?'请选择':genderList[userData.sex]}}
							</view>
						</view>
						<view class="arrow">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right_gray.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<!-- </view> -->
				</picker>
			</view>
			<view class="shade" v-if="allShow" @click="hiddenShade">
			</view>
			<view class="setPicker">
				<!-- <view class="content"> -->
				<view class="edit_title">
					<text>学校</text>
				</view>
				<view class="InpLeft" @click="show">
					<view class="" style="position: relative;">
						<view class="">
							{{ !userData.stuName?'请选择学校':userData.stuName }}
						</view>
						<view class="stuListSty" v-if="isshow">
							<view class="Usearch">
								<u-search placeholder="搜索学校" :showAction="false" shape="square"
									v-model="searchStudent"></u-search>
								<view class="UsearchBtn" @click.stop="typeIn(0)">
									手动录入
								</view>
							</view>
							<scroll-view scroll-y="true" show-scrollbar="true" class="list">
								<view id="demo1" class="listcon" @click.stop="addStu" :data-item="i"
									v-for="(i,index) in colleges" :key="i">{{i.name}}</view>
							</scroll-view>
						</view>
					</view>
					<view class="arrow">
						<image src="https://teacherapi.cocorobo.cn/teaching-file/static/mine/arrow-right_gray.png"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="setPicker">
				<view class="edit_title">
					<text>专业</text>
				</view>
				<view class="InpLeft" @click.stop="majorshow">
					<view class="" style="position: relative;">
						<view class="">
							{{ !userData.majorName?'请选择专业':userData.majorName }}
						</view>
						<view class="stuListSty" v-if="jorshow">
							<view class="Usearch">
								<u-search placeholder="搜索专业" :showAction="false" shape="square"
									v-model="searchMajor"></u-search>
								<view class="UsearchBtn" @click.stop="typeIn(1)">
									手动录入
								</view>
							</view>
							<scroll-view scroll-y="true" show-scrollbar="true" class="list">
								<view class="listcon" v-if="!majorList.length">
									此学校暂时没有专业分类哦
								</view>
								<view id="demo1" class="listcon" @click.stop="addmajor" :data-jor="i"
									v-for="(i,index) in majorList" :key="i">{{i.name}}</view>
							</scroll-view>
						</view>
					</view>
					<view class="arrow">
						<image src="https://teacherapi.cocorobo.cn/teaching-file/static/mine/arrow-right_gray.png"
							mode="aspectFill"></image>
					</view>
					<!-- 
					<input class="uni-input" v-model="searchMajor" style="width: 100%;" @click.stop="majorshow"
						placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" placeholder="请选择专业" /> -->
					<!-- <scroll-view scroll-y="true" show-scrollbar="true" class="list" v-if="jorshow">
						<view id="demo1" class="listcon" @click="addmajor" :data-jor="i" v-for="(i,index) in majorList"
							:key="index">{{i.name}}</view>
					</scroll-view>
					<view class="arrow">
						<image src="https://teacherapi.cocorobo.cn/teaching-file/static/mine/arrow-right_gray.png"
							mode="aspectFill"></image>
					</view> -->
				</view>

			</view>
			<view class="setPicker">
				<view class="edit_title">
					<text>职称</text>
				</view>
				<picker mode="selector" :range="rankList" :value="userData.rankl" @change="handelrank">
					<view class="input_details">
						<view class="details">
							<view class="uni-input text">{{!userData.rankl?'请选择':userData.rankl}}</view>
						</view>
						<view class="arrow">
							<image src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right_gray.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</picker>
			</view>

			<view class="setIntro">
				<view class="edit_title">
					<text>简介</text>
				</view>
				<view class="input_details">
					<view class="selfdomIntro">
						<textarea type="text" placeholder="请输入你的个性签名" maxlength="75"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" style="color: black;"
							v-model="userData.brief" />
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btn">
				<button @click="saveInfo">保存修改</button>
				<button @click="gotoLogin">退出登录</button>
			</view>
		</view>



		<!-- 弹窗 -->
		<view>
			<view class="mask" v-show="showPopup" @click="closePopup"></view>
			<view class="popup-container" v-show="showPopup">
				<view class="popup">
					<view class="header">
						<text>确认修改</text>
					</view>
					<view class="footer">
						<view class="cancel-btn" @click="closePopup">取消</view>
						<view class="confirm-btn" @click="conf">确认</view>
					</view>
				</view>
			</view>
		</view>

		<view>
			<view class="popup-container2" style="height: 175px;" v-show="showPopupConfirm">
				<view class="popup">
					<view class="header" style="margin-top: 15px;">
						<view class="imgShade" >
							<image  src="../../static/mine/gou3.png" mode="aspectFill">
						</view>
						</image>
						<text style="margin-bottom: 24px;">修改成功</text>
					</view>

				</view>
			</view>
		</view>
		<u-popup :show="popupshow" mode="center" round="10" :closeable='true' @close="popupclose">
			<view style="width: 600rpx;box-sizing: border-box;padding: 40px 20rpx; padding-bottom: 30px;">
				<view class="" style="display: flex;align-items: center;">
					<!-- <text>{{ typyInall?'专业':'学校' }} ：</text> -->
					<u--input :placeholder="typyInall?'请输入专业':'请输入学校'" border="surround" v-model="typyInCon"></u--input>
				</view>
				<view style="display: flex;width: 100%;justify-content: space-around;margin-top: 20rpx;">
					<view class="typyInbtn" @click="popupclose">
						取消
					</view>
					<view class="typyInbtn" @click="popupaffirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <van-popup v-model="popupshow" round position="bottom" :style="{ height: '30%' }" /> -->



	</view>
</template>

<script>
	export default {
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			return {
				navBarData: {
					title: '个人资料',
					btn: 1
				},

				allShow: false,
				searchStudent: '', //学校搜索栏
				searchMajor: '', //专业搜索栏

				// 相别选项
				genderList: ['男', '女'],
				//学校选项
				isshow: false,
				stuName: '', //学校名称
				colleges: [], //学校列表
				// schoolList: ['深圳信息XX学院', '深圳XX学院', '深圳XX学院'],
				//专业选项
				jorshow: false,
				majorList: [],
				majorName: '',
				// speList: ['互联网', '网络通信', '航空', '汽修', '珠宝', '文秘', '设计'],
				//职称选项
				rankList: ['教授', '副教授', '讲师', '助教', '其他'],
				// rankList: ['xx', 'xx', 'xx'],
				// 兴趣选项
				hobbyList: ['篮球', '编程', '钢琴', '美术', '摄影'],

				gender: '男',
				school: 'xx学院',

				//控制弹窗
				showPopup: false,
				//修改成功弹窗
				showPopupConfirm: false,
				// isFirstShow: true,
				// 手动录入弹窗
				popupshow: false,
				typyInCon: '',
				typyInall: 0,
				// 用户信息数据

				// 这两个因为要监视,所以不能放对象里面
				inpTxt: '', //学校id
				majorInpTxt: '', //专业id
				userData: {
					// oid: '',
					// avatar: '', //头像
					// username: '', //用户名
					// sex: '', //用户性别
					// inpTxt: '', //学校
					// majorInpTxt: '', //专业
					// rankl: '', //职称
					// brief: '', //用户简介
				}


			};
		},
		watch: {

			searchMajor: {
				handler(val) {
					// console.log('val', val);
					if (val === '') {
						this.majorInpTxt = ''
					}
					// 模糊搜索专业
					let data = {
						mid: this.inpTxt,
						txt: val
					}
					this.$request('/selectLikeMajors', "get", data).then(res => {
						// console.log('模糊搜索专业', res);
						this.majorList = res[0]
					})
					// this.selectMajor(val)
				}
			},
			searchStudent: {
				handler(val) {
					// console.log('val', val);
					// 模糊搜索学院
					// if (val === '') {
					// 	this.inpTxt = ''
					// 	this.majorName = ''
					// 	this.majorInpTxt = ''
					// }
					this.$request('/selectLikeColleges', "get", {
						txt: val
					}).then(res => {
						// console.log(res);
						this.colleges = res[0]
					})
					// this.selectMajor(val)
				}
			},
			inpTxt: {
				handler(val) {
					// console.log('val', val);
					this.selectMajor(val)
				}
			}
		},

		methods: {
			popupclose() {
				this.popupshow = false
				this.typyInCon = ''
				this.searchStudent = ''
			},
			popupaffirm() {
				if (!this.typyInall) {
					if (!this.typyInCon) return uni.showToast({
						title: '请输入学校',
						icon: 'none',
					})

					this.userData.stuName = this.typyInCon
					this.searchStudent = ''
					this.inpTxt = ''
					this.majorInpTxt = ''
					this.searchMajor = ''
					this.userData.majorName = ''
					this.popupshow = false
					// 赋值完清空
					this.typyInCon = ''
				} else {
					if (!this.typyInCon) return uni.showToast({
						title: '请输入专业',
						icon: 'none',
					})

					this.userData.majorName = this.typyInCon
					this.majorInpTxt = ''
					this.searchMajor = ''
					this.popupshow = false
					// 赋值完清空
					this.typyInCon = ''
				}
			},
			// 遮罩层关闭
			hiddenShade() {
				this.isshow = false
				this.jorshow = false
				this.allShow = false
			},
			typeIn(e) {
				this.hiddenShade()
				this.typyInall = e
				this.popupshow = true


			},
			// typeInMajor() {
			// 	if (!this.searchMajor) return

			// 	this.userData.majorName = this.searchMajor
			// 	this.majorInpTxt = ''
			// 	this.searchMajor = ''
			// 	this.hiddenShade()
			// },
			// 学校list显示与隐藏
			show() {
				this.isshow = true
				this.allShow = true
			},
			// 专业list显示与隐藏
			majorshow() {
				// console.log('专业list显示与隐藏',this.inpTxt);
				if (!this.userData.stuName) {
					uni.showToast({
						title: '请先选择学校',
						icon: 'none',
						duration: 1000
					});
					return
				}
				this.allShow = true
				this.jorshow = true
			},
			// 选择学校
			addStu(e) {
				let data = e.currentTarget.dataset.item
				if (this.inpTxt == data.id) {
					// uni.showToast({
					// 	title: '请勿选择相同学校',
					// 	icon: 'none',
					// })
					// this.userData.majorName = ''
					this.userData.stuName = data.name
					this.isshow = false
					this.allShow = false
					return
				}
				// 选择学校时,将专业的数据清除，让其重新选择
				this.majorInpTxt = ''
				this.userData.majorName = ''
				this.majorList = []

				// console.log(data);
				this.inpTxt = data.id
				this.userData.stuName = data.name

				this.isshow = false
				this.allShow = false
			},
			// 选择专业
			addmajor(e) {
				let data = e.currentTarget.dataset.jor
				// console.log('选择专业', e);
				this.majorInpTxt = data.id
				this.userData.majorName = data.name
				// console.log('选择专业', this.majorInpTxt);
				this.jorshow = false
				this.allShow = false
			},
			// 根据选择的学校来进行显示专业
			selectMajor(e) {
				// console.log('根据选择的学校来进行显示专业', e);
				let data = {
					mid: e
				}
				this.$request('/selectMajors', "get", data).then(res => {
					console.log('显示专业列表', res);
					// if (res[0].length === 0) {
					// 	this.majorList[0] = {
					// 		name: '此学校没有专业分类哦'
					// 	}
					// } else {
					this.majorList = res[0]
					// }
				})
			},
			// 上传图片
			updateava() {
				let that = this
				uni.chooseImage({
					count: 1, // 图片数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];

						const uploadTask = uni.uploadFile({
							url: 'http://139.159.246.165:7006/img', // post请求地址
							filePath: tempFilePaths,
							name: 'file', // 待确认
							header: {
								// 不要写这个不然报错
								// 'Content-Type': 'multipart/form-data',
							},
							formData: {
								// 携带的用户数据
								// userId: that.$store.getters.getUser._id, // 用户ID
							},
							success: function(res) {
								// console.log(res);
								that.userData.avatar = res.data

							},
							fail: function(uploadFileFail) {
								console.log('Error:', uploadFileFail.data);
							},
							complete: () => {
								// 接口调用结束的回调函数（调用成功、失败都会执行）
								// console.log('Complete:');
							}
						});


					}
				});

			},
			// 获取渲染数据
			getData() {
				const value = this.$store.state.user.openid;
				if (value == '') return
				// console.log('????', this.$store.state.user.openid);
				this.$request('/selectUser', "POST", {
					openid: this.$store.state.user.openid
				}).then(res => {
					// 假如简介为null
					console.log('res[0][0].brief', res);
					if (!res[0][0].brief) {
						res[0][0].brief = ''
					}
					// console.log('获取渲染数据', res[0][0]);
					this.userData = res[0][0]
					this.inpTxt = res[0][0].school
					this.majorInpTxt = res[0][0].spe
					// this.stuName = res[0][0].stuName
					// console.log('this.stuName', this.stuName);
					this.majorName = res[0][0].majorName
					this.selectMajor(this.inpTxt)

				})
				// 获取学院
				this.$request('/selectColleges', "get", {}).then(res => {
					console.log(res);
					this.colleges = res[0]
				})
			},
			// 取消操作
			closePopup() {
				this.showPopup = false;
			},
			// 确认操作
			conf() {
				this.showPopup = false;
				// console.log(' this.userData', this.userData);
				this.userData.school = this.inpTxt
				this.userData.spe = this.majorInpTxt
				// delete this.userData.stuName;
				// delete this.userData.majorName;
				// this.userData.stuName=this.searchStudent
				// this.userData.majorName=this.searchMajor
				// return console.log('提交修改', this.userData);
				this.$request('/updateUserInfo', "POST", this.userData).then(res => {
					this.showPopupConfirm = true
					// console.log('this', this);
					this.$request('/selectUser', 'POST', {
						oId: this.$store.state.user.openid
					}).then(res => {
						// console.log('获取caozuo', res[0][0]);
						this.$store.dispatch('asyncUpdateUser', res[0][0])
					})
					setTimeout(() => {
						this.showPopupConfirm = false
						this.getData()
					}, 1500)
				})
			},
			// 点击保存修改
			saveInfo() {
				console.log('点击保存修改', this.userData);
				const value = this.$store.state.user.openid;
				if (value == '') return uni.showToast({
					title: '未登录',
					icon: 'none'
				})
				if (!this.userData.username) {
					return uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
				}

				if (!this.userData.stuName) {
					return uni.showToast({
						title: '学校不能为空',
						icon: 'none'
					})
				}
				this.showPopup = true
			},
			// 选择用户性别
			handelGender(e) {
				// console.log(e);
				this.userData.sex = e.detail.value
			},

			// 职位
			handelrank(e) {
				// console.log(e);
				this.userData.rankl = this.rankList[e.detail.value]
			},
			// 兴趣
			handeHobby(e) {
				this.userData.tag = e.detail.value
			},

			// 清除vuex的数据
			gotoLogin() {
				let user = {
					openid: '',
					avatar: '', //头像
					username: '', //用户名
					sex: '', //用户性别
					school: '', //学校id
					spe: '', //专业id
					rankl: '', //职称
					brief: '', //用户简介
					stuName: '', //学校名称
					majorName: '' //专业名称
				}

				this.$store.dispatch('asyncUpdateUser', user)
				uni.navigateTo({
					url: '/pages/login_Wechat/login_Wechat'
				})
				// 清除本页面数据
				this.userData = {}
			},
		},
		onReady() {
			// console.log(this.$store.state);
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	// .popupInp{
	// 	width: 100%;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	// .typyInbtnS{
	// 	width: 100%;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: flex-end;
	.typyInbtn {
		// width: 40rpx;
		// width: 200rpx;
		box-sizing: border-box;
		padding: 10rpx 60rpx;
		border-radius: 10rpx;
		color: #fff;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		background-color: #0081FE;
	}
	
	::v-deep .u-safe-bottom{
		display: none;
	}

	.typyInbtn2 {
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0081FE;
		color: #E7E7E7;
		margin-right: 20px;
	}

	// }
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
		overflow: hidden;
		// display: none;
	}

	.stuListSty {
		position: absolute;
		top: calc(100% + 15rpx);
		right: -20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		z-index: 12;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx 0 #ccc;
		padding: 30rpx;
		padding-top: 10rpx;

		.Usearch {
			margin: 20rpx 0;
			// background-color: #0056a8;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.UsearchBtn {
				width: 120rpx;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				// background-color: #0056a8;
				// color: #fff;
			}
		}
	}

	.shade {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background-color: #0056a8;
		z-index: 10;
	}

	.list {
		position: relative;
		// top: calc(100% + 15rpx);
		// right: -20rpx;
		width: 550rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		// padding: 10rpx 15rpx;
		border-radius: 20rpx;
		// box-shadow: 0 0 20rpx 0 #ccc;
		z-index: 11;

		.listcon {
			width: 100%;
			padding: 20rpx 0;
			font-size: 28rpx;
			border-bottom: 1rpx #e7e7e7 solid;
		}
	}

	// .list {
	// 	position: absolute;
	// 	top: calc(100% + 15rpx);
	// 	right: -20rpx;
	// 	width: 550rpx;
	// 	height: 600rpx;
	// 	display: flex;
	// 	flex-direction: column;
	// 	background-color: #fff;
	// 	padding: 10rpx 15rpx;
	// 	border-radius: 20rpx;
	// 	box-shadow: 0 0 20rpx 0 #ccc;
	// 	z-index: 10;

	// 	.listcon {
	// 		width: 100%;
	// 		padding: 20rpx 0;
	// 		border-bottom: 1rpx #ccc solid;
	// 	}
	// }

	.arrow {
		display: flex;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.uni-input {
		text-align: right;
		color: rgb(153, 153, 153);
	}

	.popup-container2 {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 520rpx;
		height: 260rpx;
		z-index: 1000;
		border-radius: 16rpx;
		// display: none;
		box-shadow: 0rpx 3rpx 10rpx 5rpx rgba(0, 0, 0, .1);
		overflow: hidden;

		.popup {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			.header {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: 24px;
				font-size: 34rpx;
				font-weight: 600;
				.imgShade{
					width: 170rpx;
					height: 170rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 10rpx #0056A8 solid;
					border-radius: 50%;
					box-shadow: 0 0 10rpx #0056A8;
					margin-bottom: 10rpx;
				}
				image {
					width: 150rpx;
					height: 150rpx;
					margin-top: 15px;
					margin-bottom: 15px;
				}
			}

			.footer {
				width: 100%;
				display: flex;
				overflow: hidden;

				.cancel-btn {
					width: 50%;
					height: 100rpx;
					background-color: #F7F7F7;
					color: #000;
					font-size: 34rpx;
					text-align: center;
					border-bottom-left-radius: 16rpx;
					line-height: 50px;
				}

				.confirm-btn {
					width: 50%;
					height: 100rpx;
					background-color: #0081FE;
					color: #fff;
					font-size: 34rpx;
					text-align: center;
					line-height: 50px;
				}
			}
		}
	}

	.edit_title {
		display: flex;
		align-items: center;
		font-size: 32rpx;

	}

	.editBox {
		width: 100%;
		// height: 800rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top: 1px solid #E7E7E7;
		padding: 0 18px;

		.edit_avatar {
			height: 164rpx;
			display: flex;
			justify-content: space-between;

			.userAvatar {
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		.setName {
			display: flex;
			justify-content: space-between;
			height: 92rpx;
			border-top: 1px solid #E7E7E7;

			.input_details {
				display: flex;
				align-items: center;
				flex-direction: row;

				.nickname {
					width: 350rpx;
					text-align: end;
					// padding-right: 10rpx;
					// margin-right: 10rpx;
					font-size: 28rpx;
					color: rgb(153, 153, 153);
				}
			}
		}

		.setPicker {
			height: 92rpx;
			border-top: 1px solid #E7E7E7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;

			.InpLeft {
				color: rgb(153, 153, 153);
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			// .content {
			// 	height: 92rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: space-between;

			.input_details {
				display: flex;
				align-items: center;
				justify-content: flex-end;

			}

			// }
		}

		.setIntro {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 230rpx;
			border-top: 1px solid #E7E7E7;

			.input_details {
				display: flex;
				align-items: center;

				.selfdomIntro {
					width: 100%;
					height: 120rpx;

					textarea {
						width: 100%;
						height: 120rpx;
						font-size: 28rpx;
						color: rgb(153, 153, 153);
					}
				}
			}
		}
	}

	.btnBox {
		position: absolute;
		margin: 0 85rpx;
		bottom: 40px;

		.btn {
			button {
				width: 580rpx;
				height: 88rpx;
				border: none;
				border-radius: 100rpx;
				border: 1px solid lightgray;
				font-size: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #545454;
				text-align: center;

				&:first-child {
					background-color: rgb(0, 86, 168);
					color: white;
					margin-bottom: 24rpx;
				}

				&::after {
					border: none;
				}
			}
		}
	}
</style>