zhapp/components/uni-OCRUploadPopup/uni-OCRUploadPopup.vue

<template>
	<view class='uni-page'>
		<u-popup :show="OCRUploadPopup" @close="close" closeable round="20rpx">
			<view class="dis dis header a-end j-c">
				<u-tabs :list="list" @click="click" :activeStyle="{color:'#333',fontWeight:'bold'}"
					:inactiveStyle="{color:'#999'}" :current="current" :scrollable="true" lineColor="#FDE935"
					lineWidth="100rpx"></u-tabs>
			</view>
			<view class="content">
				<!-- 车辆类型显示内容 -->
				<template v-if="checkType=='carInfo'">
					<view class="img" v-if="current==0">
						<image :src="carfrontImg?carfrontImg:'/static/image/carbackimg.png'" mode=""
							@click="carfrontChange"></image>
					</view>
					<view class="img" v-else>
						<image :src="carbackImg?carbackImg:'/static/image/carbackimg.png'" mode=""
							@click="carbackChange">
						</image>
					</view>
				</template>
				<template v-else>
					<!-- 人员信息显示内容 -->
					<template v-if="current==0">
						<!-- 正反面区分按钮 -->
						<view class="user-Subsection dis a-c">
							<view class="item dis a-c j-c  " :class="[toggleModeIndex==index?'active':'']"
								v-for="(item,index) in toggleMode" :key="index" @click="Subsectionclick(index)">
								{{item.name}}
							</view>
						</view>
						<view class="img" v-if="toggleModeIndex==0">
							<image :src="userfrontImg?userfrontImg:'/static/image/userfrontImg.png'" mode=""
								@click="userfrontChange"></image>
						</view>
						<view class="img" v-else>
							<image :src="userbackImg?userbackImg:'/static/image/userbackImg.png'" mode=""
								@click="userbackChange">
							</image>
						</view>
					</template>
					<template v-else>
						<view class="img">
							<image :src="businessLicenseImg?businessLicenseImg:'/static/image/businessLicenseimg.png'"
								mode="" @click="businessLicenseChange"></image>
						</view>
					</template>

				</template>
				<view class="footer dis a-c j-s mt-2">
					<u-button class="btn" type="primary" text="关闭" shape="circle" plain color="#FDE935"
						:hairline="false" style="margin-right: 20px;" @click="close"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='carInfo'" :disabled="!carfrontImg && !carbackImg" :hairline="false"
						@click="ocrInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='ownerInfo'" :disabled="!userfrontImg && !userbackImg && !businessLicenseImg"
						:hairline="false" @click="ownerInfoInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='policyHolderInfo'"
						:disabled="!userfrontImg && !userbackImg && !businessLicenseImg" :hairline="false"
						@click="policyHolderInfoInt"></u-button>
					<u-button class="btn" type="primary" text="确定" shape="circle" color="#FDE935"
						v-if="checkType=='insuredPersonInfo'"
						:disabled="!userfrontImg && !userbackImg && !businessLicenseImg" :hairline="false"
						@click="insuredPersonInfoInt"></u-button>
				</view>
			</view>

		</u-popup>
	</view>
</template>
<script>
	import store from '@/store';
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			checkType: {
				type: String,
				default: 'carInfo'
			}
		},
		data() {
			return {
				OCRUploadPopup: this.show,
				current: 0,
				carfrontImg: null, //行驶证正面
				carbackImg: null, //行驶证反面
				carImageListId: [],
				carfront: {},
				carback: {},
				userfront: {},
				userback: {},
				userfrontImg: null, //人像面
				userbackImg: null, //国徽面
				businessLicenseImg: null, //营业执照
				businessLicenseInfo: {}, //营业执照识别内容
				ownerImageListId: [],
				policyHolderImageListId: [],
				insuredPersonImageListId: [],
				toggleMode: [{
					name: "人像面"
				}, {
					name: "国徽面",
				}],
				toggleModeIndex: 0,
			}
		},
		watch: {
			show(newVal) {
				this.OCRUploadPopup = newVal
			}
		},
		onShow() {},
		onLoad() {

		},
		methods: {
			Subsectionclick(item) {
				this.toggleModeIndex = item;
			},
			ocrInt() {
				let Info = Object.assign({}, this.carfront, this.carback)
				if (this.isEmptyObject(Info)) {
					uni.showToast({
						icon: 'none',
						title: '未检测到图片',
						duration: 1500
					});
				} else {
					let ImgList = this.carImageListId;
					let frontImg = this.carfrontImg;
					let backImg = this.carbackImg;
					this.$emit('carCallback', {
						Info,
						ImgList,
						frontImg,
						backImg,
					});
					this.userfrontImg = '';
					this.userbackImg = '';
					this.carfrontImg = '';
					this.carbackImg = '';
					this.current = 0;
				}
			},
			ownerInfoInt() {
				if (this.current == 0) {
					let Info = Object.assign({}, this.userfront, this.userback)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.ownerImageListId;
						let frontImg = this.userfrontImg;
						let backImg = this.userbackImg;
						this.$emit('ownerInfoCallback', {
							Info,
							ImgList,
							frontImg,
							backImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				} else {
					let Info = Object.assign({}, this.businessLicenseInfo)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.ownerImageListId;
						let businessLicenseImg = this.businessLicenseImg;
						this.$emit('ownerInfoCallback', {
							Info,
							ImgList,
							businessLicenseImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				}

			},
			policyHolderInfoInt() {
				if (this.current == 0) {
					let Info = Object.assign({}, this.userfront, this.userback)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.policyHolderImageListId;
						let frontImg = this.userfrontImg;
						let backImg = this.userbackImg;
						this.$emit('applicantInfoCallback', {
							Info,
							ImgList,
							frontImg,
							backImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.current = 0;
					}
				} else {
					let Info = Object.assign({}, this.businessLicenseInfo)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.policyHolderImageListId;
						let businessLicenseImg = this.businessLicenseImg;
						this.$emit('applicantInfoCallback', {
							Info,
							ImgList,
							businessLicenseImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				}

			},
			insuredPersonInfoInt() {
				if (this.current == 0) {
					let Info = Object.assign({}, this.userfront, this.userback)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.insuredPersonImageListId;
						let frontImg = this.userfrontImg;
						let backImg = this.userbackImg;
						this.$emit('InsuredInfoCallback', {
							Info,
							ImgList,
							frontImg,
							backImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				} else {
					let Info = Object.assign({}, this.businessLicenseInfo)
					if (this.isEmptyObject(Info)) {
						uni.showToast({
							icon: 'none',
							title: '未检测到图片',
							duration: 1500
						});
					} else {
						let ImgList = this.insuredPersonImageListId;
						let businessLicenseImg = this.businessLicenseImg;
						this.$emit('InsuredInfoCallback', {
							Info,
							ImgList,
							businessLicenseImg,
						});
						this.userfrontImg = '';
						this.userbackImg = '';
						this.carfrontImg = '';
						this.carbackImg = '';
						this.businessLicenseImg = '';
						this.current = 0;
					}
				}

			},
			click(item) {
				this.current = item.index;
			},
			close() {
				this.current = 0;
				this.$emit('close')
			},
			isEmptyObject(obj) {
				return JSON.stringify(obj) === '{}';
			},
			//car正面
			async carfrontChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.carfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							console.log(data);
							if (data.code == '200') {
								if (this.carImageListId.some(v => v.imageCode == 'C01')) {
									this.carImageListId.map(val => {
										if (val.imageCode == 'C01') {
											val.imageBase64List[0].imageId = data.data.id;
										}
									})
								} else {
									this.carImageListId.push({
										imageBase64List: [{
											imageId: data.data.id
										}],
										imageCode: "C01",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/drivingPermit',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image1",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data).data;
										let rdate = '';
										if (!!data.carInfo.registerDate) {
											rdate = data.carInfo.registerDate.substr(0,
													4) +
												'-' + data.carInfo
												.registerDate.substr(4, 2) + '-' + data
												.carInfo
												.registerDate
												.substr(6,
													2)
										}
										let isdate = '';
										if (!!data.carInfo.issueDate) {
											isdate = data.carInfo.issueDate.substr(0, 4) +
												'-' + data.carInfo
												.issueDate.substr(4, 2) + '-' + data
												.carInfo
												.issueDate.substr(6, 2)
										}
										this.carfront = {
											carOwner: data.carInfo.carOwner, //车主
											licenseNo: data.carInfo.plateNo, //车牌号
											brandName: data.carInfo.backOcrID, //品牌型号
											frameNo: data.carInfo.vin, //车架号
											engineNo: data.carInfo.engine, //发动机号
											vinNo: data.carInfo.vin, //车架号
											issueDate: isdate, //发证日期
											registerDate: rdate, //注册日期
											carKindCode: data.carInfo
												.plateType, //车辆种类
											carTypeCode: data.carInfo.category, //车辆类型
											carnature: data.carInfo.useNature,
											vehicleUseCode: data.carInfo
												.vehicleUse, //车辆用途

										}
									}
								});
							}

						}
					});
				} else {}
			},
			async carbackChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.carbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								if (this.carImageListId.some(v => v.imageCode == 'D01')) {
									this.carImageListId.map(val => {
										if (val.imageCode == 'D01') {
											val.imageBase64List[0].imageId = data.data.id;
										}
									})
								} else {
									this.carImageListId.push({
										imageBase64List: [{
											imageId: data.data.id
										}],
										imageCode: "D01",
									})
								}
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/drivingPermit',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image2",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									success: (uploadFileRes) => {

										let data1 = JSON.parse(uploadFileRes.data).data;
										this.carback = {
											vehicleweight: data1.carInfo
												.grossMass, //总质量
											completeKerbMass: data1.carInfo
												.unladenMass, //整备质量
											seatCount: data1.carInfo
												.approvedPassengersCapacity, //核定载客数
											limitLoad: data1.carInfo
												.limitLoad, //核定载质量
										}
									}
								});

							}

						}
					});
				} else {}
			},
			async userfrontChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});

				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.userfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								switch (this.checkType) {
									case 'ownerInfo':
										if (this.ownerImageListId.some(v => v.imageCode == 'C02')) {
											this.ownerImageListId.map(val => {
												if (val.imageCode == 'C02') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.ownerImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "C02",
											})
										}
										break;
									case 'policyHolderInfo':
										if (this.policyHolderImageListId.some(v => v.imageCode ==
												'C03')) {
											this.policyHolderImageListId.map(val => {
												if (val.imageCode == 'C03') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.policyHolderImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "C03",
											})
										}
										break;
									case 'insuredPersonInfo':
										if (this.insuredPersonImageListId.some(v => v.imageCode ==
												'C04')) {
											this.insuredPersonImageListId.map(val => {
												if (val.imageCode == 'C04') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.insuredPersonImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "C04",
											})
										}
										break;
									default:
										break;
								};

								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/idCard',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image1",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data).data;
										this.userfront = {
											name: data.customerInfo.name,
											identifyNumber: data.customerInfo
												.identifyNumber,
											addr: data.customerInfo.addr,
										}
									}
								});
							}

						}
					});
				} else {}
			},
			//身份证背面
			async userbackChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.userbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								switch (this.checkType) {
									case 'ownerInfo':
										if (this.ownerImageListId.some(v => v.imageCode == 'D02')) {
											this.ownerImageListId.map(val => {
												if (val.imageCode == 'D02') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.ownerImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "D02",
											})
										}
										break;
									case 'policyHolderInfo':
										if (this.policyHolderImageListId.some(v => v.imageCode ==
												'D03')) {
											this.policyHolderImageListId.map(val => {
												if (val.imageCode == 'D03') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.policyHolderImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "D03",
											})
										}
										break;
									case 'insuredPersonInfo':
										if (this.insuredPersonImageListId.some(v => v.imageCode ==
												'D04')) {
											this.insuredPersonImageListId.map(val => {
												if (val.imageCode == 'D04') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.insuredPersonImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "D04",
											})
										}
										break;
									default:
										break;
								};
								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/idCard',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image2",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									success: (uploadFileRes) => {
										let data1 = JSON.parse(uploadFileRes.data).data;
										let identifyValidDate = '';
										if (!!data1.customerInfo
											.identifyValidDate) {
											identifyValidDate = data1
												.customerInfo
												.identifyValidDate
												.substr(0, 4) +
												'-' + data1
												.customerInfo
												.identifyValidDate
												.substr(4, 2) + '-' +
												data1
												.customerInfo
												.identifyValidDate
												.substr(6,
													2)
										}
										let identifyValidEndDate = '';
										if (!!data1.customerInfo
											.identifyValidEndDate) {
											identifyValidEndDate =
												data1.customerInfo
												.identifyValidEndDate
												.substr(0,
													4) + '-' + data1
												.customerInfo
												.identifyValidEndDate
												.substr(4, 2) + '-' +
												data1
												.customerInfo
												.identifyValidEndDate
												.substr(6, 2)
										}
										this.userback = {
											identifyValidDate: identifyValidDate, //起期
											identifyValidEndDate: identifyValidEndDate ==
												'长期--' ? '9999-12-31' :
												identifyValidEndDate, //止期
										}
									}
								});

							}

						}
					});
				} else {}
			},
			//营业执照识别
			async businessLicenseChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});

				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.businessLicenseImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								switch (this.checkType) {
									case 'ownerInfo':
										if (this.ownerImageListId.some(v => v.imageCode == 'Y02')) {
											this.ownerImageListId.map(val => {
												if (val.imageCode == 'Y02') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.ownerImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "Y02",
											})
										}
										break;
									case 'policyHolderInfo':
										if (this.policyHolderImageListId.some(v => v.imageCode ==
												'Y03')) {
											this.policyHolderImageListId.map(val => {
												if (val.imageCode == 'Y03') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.policyHolderImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "Y03",
											})
										}
										break;
									case 'insuredPersonInfo':
										if (this.insuredPersonImageListId.some(v => v.imageCode ==
												'Y04')) {
											this.insuredPersonImageListId.map(val => {
												if (val.imageCode == 'Y04') {
													val.imageBase64List[0].imageId = data.data.id;
												}
											})
										} else {
											this.insuredPersonImageListId.push({
												imageBase64List: [{
													imageId: data.data.id
												}],
												imageCode: "Y04",
											})
										}
										break;
									default:
										break;
								};

								uni.uploadFile({
									url: this.$base.baseUrl + '/order/identify/businessLicense',
									filePath: chooseImageRes.tempFilePaths[0],
									name: "image1",
									header: {
										Authorization: store.state.token,
										system_code: store.state.system_code ? store.state
											.system_code : ''
									},
									success: (uploadFileRes) => {
										let data = JSON.parse(uploadFileRes.data).data;
										this.businessLicenseInfo = {
											name: data.company,
											organizationCode: data
												.socialCreditCode, //社会信用代码
											addr: data.address,
											identifyType: "10",
											scope: data.businessScope,
											legalPerson: data.legalRepresentative,
											registeredCapital: data.registeredCapital
										}
									}
								});
							}

						}
					});
				} else {}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		padding: 4rpx 27rpx;

	}

	.content {
		padding: 40rpx 60rpx;

		.img {
			background: #fff;

			image {
				width: 100%;
				height: 360rpx;
			}
		}

		.footer {
			.btn {
				color: #1F1F1F !important;
			}
		}

		.user-Subsection {
			width: fit-content;
			margin: 0 auto 40rpx;
			border-radius: 4rpx;

			.item {
				padding: 9rpx 24rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #666;
				border: 1rpx solid #eee;
			}

			.item:first-child {
				border-right-color: #FDE935;
			}

			.item:last-child {
				border-left: none;
			}

			.active {
				background: rgba(253, 233, 53, 0.2);
				font-size: 30rpx;
				color: #333;
				border-color: #FDE935;
			}
		}
	}
</style>