transport_integrated_app/pages/highWay/runStatusData/form.vue

<template>
	<view class="form_warp">
		<view class="form_intro">
			<view>如有填报问题，请咨询公共服务中心</view>
			<view>中心值班电话：<text class="tel">66007587</text></view>
		</view>
		<view class="form_item_box">
			<view class="form_item_title">基本信息</view>
			<view class="form_item">
				<view class="form_item_label">管理单位名称：</view>
				<view class="form_item_input select">
					{{form.organizationName}}
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">统计日期：</view>
				<view class="form_item_input picker">
					<picker mode="date" :value="form.statDate" @change="bindDateChange">
						<text class="picker_select"
							:style="form.statDate?'color:#333;':''">{{form.statDate?form.statDate:'请选择时段'}}</text>
						<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">统计时段：</view>
				<view class="form_item_input picker">
					<picker :value="index" :range="array" range-key="dictLabel" @change="changeStatPeriod">
						<text class="picker_select"
							:style="index>-1?'color:#333;':''">{{index>-1?array[index].dictLabel:'请选择时段'}}</text>
						<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">高速开闭情况：</view>
				<view class="form_item_input form_input">
					<picker :value="isOpenIndex" :range="isOpenArry" range-key="label" @change="changeIsOpen">
						<text class="picker_select"
							:style="isOpenIndex > -1?'color:#333;':''">{{form.isOpen == 1 ? '开放' : form.isOpen === 0 ? '关闭' : '请选择'}}</text>
						<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">已处理事故数量：</view>
				<view class="form_item_input form_input">
					<uni-easyinput v-model="form.count1" placeholderStyle="color: #D4D4D4;font-size:28rpx;" placeholder="请输入"
						type="number" maxlength="30"></uni-easyinput>
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">正在处理事故数量：</view>
				<view class="form_item_input form_input">
					<uni-easyinput v-model="form.count2" placeholderStyle="color: #D4D4D4;font-size:28rpx;" placeholder="请输入"
						type="number" maxlength="30"></uni-easyinput>
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">事故数量：</view>
				<view class="form_item_input form_input">
					{{form.accidentCount}}
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">拥堵数量：</view>
				<view class="form_item_input form_input">
					{{form.congestionCount}}
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">伤者人数：</view>
				<view class="form_item_input form_input">
					<uni-easyinput v-model="form.injuredCount" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
						placeholder="请输入" type="number" maxlength="30"></uni-easyinput>
				</view>
			</view>
			<view class="form_item">
				<view class="form_item_label">亡者人数：</view>
				<view class="form_item_input form_input">
					<uni-easyinput v-model="form.deceasedCount" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
						placeholder="请输入" type="number" maxlength="30"></uni-easyinput>
				</view>
			</view>
		</view>
		<view class="form_item_box" style="margin-top: 30rpx;">
			<!-- tab 切换 -->
			<view class="tab_box">
				<view class="tab_nav" :class="tabType == 1 ? 'active' : ''" @click="tabType = 1">拥堵信息详情</view>
				<view class="tab_nav" :class="tabType == 2 ? 'active' : ''" @click="tabType = 2">事故信息详情</view>
			</view>
			<!-- 拥堵 -->
			<view class="form_item_li" v-if="tabType == 1" v-for="(item,index) in form.highwayCongestionDetailDTOS"
				:key="index">
				<view class="form_item" style="display:flex; justify-content: space-between; font-size: 30rpx;color:#333;font-weight: bold;margin-top: 30rpx;">
					拥堵信息-{{index+1}}
					<uni-icons type="trash" color="red" @click="delRow(index)" size="18"></uni-icons>
				</view>
				<view class="form_item">
					<view class="form_item_label">高速公路名称：</view>
					<view class="form_item_input picker">
						<picker :value="item.highwayNameIndex" :range="highwayDataList" range-key="stdName" @change="e => changeHighway(e, 'highwayCongestionDetailDTOS', index)">
							<text class="picker_select"
								:style="item.highwayName?'color:#333;':''">{{item.highwayName ? item.highwayName : '请选择'}}</text>
							<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
						</picker>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">拥堵发生时间：</view>
					<view class="form_item_input picker">
						<uni-datetime-picker v-model="item.congestionStartTime" :border="false">
							<text class="picker_select"
								:style="item.congestionStartTime?'color:#333;':''">{{item.congestionStartTime?item.congestionStartTime:'请选择'}}</text>
							<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
						</uni-datetime-picker>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">拥堵处理结束时间：</view>
					<view class="form_item_input picker">
						<uni-datetime-picker v-model="item.congestionEndTime" :border="false">
							<text class="picker_select"
								:style="item.congestionEndTime?'color:#333;':''">{{item.congestionEndTime?item.congestionEndTime:'请选择'}}</text>
							<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
						</uni-datetime-picker>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">发生位置：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.location" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">拥堵内容：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.congestionContent" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">阻断/拥堵持续时间：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.duration" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">截至当前拥堵空间范围(桩号及方向)：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.congestionRange" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">处置工作开展情况：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.disposalStatus" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">补充说明：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.additionalNotes" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="line"></view>
			</view>

			<!-- 事故 -->
			<view class="form_item_li" v-if="tabType == 2" v-for="(item,index) in form.highwayAccidentDetailDTOS" :key="index">
				<view class="form_item" style="display:flex; justify-content: space-between;font-size: 30rpx;color:#333;font-weight: bold;margin-top: 30rpx;">
					事故信息-{{index+1}}
					<uni-icons type="trash" color="red" @click="delRow(index)" size="18"></uni-icons>
				</view>
				<view class="form_item">
					<view class="form_item_label">高速公路名称：</view>
					<view class="form_item_input picker">
						<picker :value="item.highwayNameIndex" :range="highwayDataList" range-key="stdName" @change="e => changeHighway(e, 'highwayCongestionDetailDTOS', index)">
							<text class="picker_select"
								:style="item.highwayName?'color:#333;':''">{{item.highwayName ? item.highwayName : '请选择'}}</text>
							<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
						</picker>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">事故发生时间：</view>
					<view class="form_item_input picker">
						<uni-datetime-picker v-model="item.accidentStartTime" :border="false">
							<text class="picker_select"
								:style="item.accidentStartTime?'color:#333;':''">{{item.accidentStartTime?item.accidentStartTime:'请选择'}}</text>
							<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
						</uni-datetime-picker>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">事故处理结束时间：</view>
					<view class="form_item_input picker">
						<uni-datetime-picker v-model="item.accidentEndTime" :border="false">
							<text class="picker_select"
								:style="item.accidentEndTime?'color:#333;':''">{{item.accidentEndTime?item.accidentEndTime:'请选择'}}</text>
							<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
						</uni-datetime-picker>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">发生位置：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.location" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">事故内容：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.congestionContent" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">事故等级：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.congestionContent" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入金额" type="digit" maxlength="30"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">阻断/拥堵持续时间：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.duration" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">截至当前拥堵空间范围(桩号及方向)：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.congestionRange" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">处置工作开展情况：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.disposalStatus" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="form_item">
					<view class="form_item_label">补充说明：</view>
					<view class="form_item_input form_input">
						<uni-easyinput v-model="item.additionalNotes" placeholderStyle="color: #D4D4D4;font-size:28rpx;"
							placeholder="请输入" maxlength="200"></uni-easyinput>
					</view>
				</view>
				<view class="line"></view>
			</view>
			<view class="add_btn" @click="addRow()">增行</view>

		</view>
		<!-- 底部按钮 -->
		<view class="foot_btn">
			<view class="act_btn" @click="doCancel">取消</view>
			<view class="act_btn blue" @click="doSubmit">确认</view>
		</view>
	</view>
</template>
<script>
	import {
		getDateStr
	} from "../../../common/util.js"
	export default {
		data() {
			return {
				form: {
					"accidentCount": 0,
					"congestionCount": 0,
					"deceasedCount": 0,
					"highwayAccidentDetailDTOS": [{
						"accidentContent": "",
						"accidentEndTime": "",
						"accidentLevel": "string",
						"accidentStartTime": "",
						"additionalNotes": "",
						"congestionRange": "",
						"disposalStatus": "",
						"duration": "",
						"higwayNameIndex": "",
						"highwayName": "",
						"location": "",
					}],
					"highwayCongestionDetailDTOS": [{
						"additionalNotes": "",
						"congestionContent": "",
						"congestionEndTime": "",
						"congestionRange": "",
						"congestionStartTime": "",
						"disposalStatus": "",
						"duration": "",
						"higwayNameIndex": "",
						"highwayName": "",
						"location": "",
					}],
					"injuredCount": 0,
					"isOpen": 1,
					"organizationName": "",
					"statDate": "",
					"statPeriod": ""
				}, //登录form
				highwayDataList: [], //高速列表
				submitPerson: [], //报送人
				submitPersonIndex: -1, //报送人选择索引
				array: [], //时段选择列表
				index: 2, //时段选择,默认0-24
				isOpenArry: [{value:1,label:'开放'},{value:0,label:'关闭'}],//高速开闭情况
				isOpenIndex: 0,
				userInfo: {},
				tabType: 1, //拥堵事故类型
			}
		},
		onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo');
			this.queryHighway();//高速公路列表
			if (options.type == 'add') {
				let now = new Date();
				this.form.statDate = getDateStr(now, -1); //默认前一天
				this.form.statPeriod = '03'; //默认0-24
			} else if (options.item) {
				this.form = JSON.parse(options.item);
				this.form.highwayCongestionDetailDTOS = this.form.highwayCongestionDetailVOS;
				this.form.highwayAccidentDetailDTOS = this.form.highwayAccidentDetailVOS;
				console.log(this.form)
			}
			this.queryTime(); //统计时段
		},
		methods: {
			//高速公路权限列表
			queryHighway() {
				this.highwayDataList = [{
						"acctYear": 0,
						"cdd": 0,
						"createTime": "2016-06-12T16:47:50.992",
						"createUnit": "4EB98423C0000041919F523B5D7A5CB1",
						"createUserId": "AD049D34252E7C26A9B28DE393572C4B",
						"creator": "青岛交通委员会管理员",
						"dlwz": "",
						"gldw": "青岛市高管处",
						"glmc": "",
						"gylc": 175.307,
						"invalidTime": "9999-12-31T00:00:00",
						"isLeaf": 1,
						"jsdj": "540D47B620000001617BDD14C380A0D9",
						"jsdw": "",
						"jssj": "",
						"jxscsd": 0,
						"lddfmc": "",
						"ldqdmc": "",
						"ldqdzh": "",
						"ldzdmc": "",
						"ldzdzh": "",
						"level": 1,
						"ljlx": "",
						"lkpddj": "",
						"lmlx": "",
						"lxqdmc": "",
						"lxqdzh": "522.707",
						"lxzdmc": "",
						"lxzdzh": "698.014",
						"memo": "",
						"modifyTime": "2020-08-23T09:40:01.273",
						"modifyUser": "admin",
						"objectId": "5543CBB2C0000001F5F59149F1AF17CF",
						"parents": "005543CBB2C0000001F5F59149F1AF17CF",
						"recId": "5543CBB2C0000001F5F59149F1AF17CF",
						"recVer": 8365710010537214000,
						"resId": "5543CBB2C0000001F5F59149F1AF17CF",
						"schemeId": "00000000000000000000000000000000",
						"shareType": 0,
						"shortName": "shgs",
						"sjly": "",
						"sjysnl": "",
						"sortOrder": 21,
						"ssdw": "",
						"startFlag": 1,
						"stdCode": "G15",
						"stdIcon": "",
						"stdName": "沈海高速",
						"tcrq": null,
						"unitId": "00000000000000000000000000000000",
						"validTime": "1990-01-01T00:00:00",
						"xxdx": "",
						"xzdj": "540D4877C000000112D1F2C6DE6A1B49",
						"xzqh": "",
						"yhdw": "",
						"zyds": 0
				}]
				this.$request(getApp().globalData.baseUrl + '/api/biz/roadInfo/all?page=0&pageSize=-1&_t=' + Date.parse(new Date()), {}, 'GET').then(res => {
					this.highwayDataList = res.data.list;
				})
			},
			//高速公路切换选择
			changeHighway(e, key, index) {
				this.form[key][index].highwayNameIndex = e.detail.value;
				this.form[key][index].highwayName = this.highwayDataList[e.detail.value].stdName;
				console.log(this.form)
			},
			//统计时段切换选择
			changeStatPeriod(e) {
				this.index = e.detail.value;
				this.form.statPeriod = this.array[e.detail.value].dictValue;
				console.log('change 时段', this.form)
			},
			//开闭切换选择
			changeIsOpen(e) {
				this.isOpenIndex = e.detail.value;
				this.form.isOpen = this.isOpenArry[e.detail.value].value;
			},
			//取消
			doCancel() {
				uni.navigateBack();
			},
			//选择统计日期
			bindDateChange(e) {
				this.form.statDate = e.detail.value;
			},
			//时段
			queryTime() {
				this.$request(getApp().globalData.baseUrl + '/api/dict/dictList?dictType=airport_time' + '&_t=' + Date.parse(
					new Date()), {}, 'GET').then(res => {
					this.array = res.data;
				})
			},
			//增行
			addRow() {
				if(this.tabType == 1) {
					//拥堵增行
					this.form.highwayCongestionDetailDTOS.push({
						"additionalNotes": "",
						"congestionContent": "",
						"congestionEndTime": "",
						"congestionRange": "",
						"congestionStartTime": "",
						"disposalStatus": "",
						"duration": "",
						"highwayNameIndex": "",
						"highwayName": "",
						"location": "",
					});
					this.form.congestionCount = this.form.highwayCongestionDetailDTOS.length;
				}else{
					//事故增行
					this.form.highwayAccidentDetailDTOS.push({
						"accidentContent": "",
						"accidentEndTime": "",
						"accidentLevel": "",
						"accidentStartTime": "",
						"additionalNotes": "",
						"congestionRange": "",
						"disposalStatus": "",
						"duration": "",
						"highwayNameIndex": "",
						"highwayName": "",
						"location": "",
					});
					this.form.accidentCount = this.form.highwayCongestionDetailDTOS.length;
				}
			},
			//删行
			delRow(index) {
				if(this.tabType == 1) {
					//拥堵删行
					this.form.highwayCongestionDetailDTOS.splice(index,1);
					this.form.congestionCount = this.form.highwayCongestionDetailDTOS.length;
				}else{
					//事故删行
					this.form.highwayAccidentDetailDTOS.splice(index,1);
					this.form.accidentCount = this.form.highwayCongestionDetailDTOS.length;
				}
			},
			//确认提交
			doSubmit() {
				console.log(this.form)
				if (this.form.statDate == '' || this.form.statPeriod == '') {
					uni.showToast({
						title: '报送日期和时段不能为空',
						icon: 'none'
					})
					return;
				}
				let checkCongestion = this.form.highwayCongestionDetailDTOS.every(item => {
					return !item.highwayName || !item.congestionStartTime || !item.congestionEndTime || !item.duration || !item.location
				})
				let checkAccident = this.form.highwayAccidentDetailDTOS.every(item => {
					return !item.highwayName || !item.accidentStartTime || !item.accidentEndTime || !item.duration || !item.location
				})
				if (this.form.highwayCongestionDetailDTOS.length > 0 && checkCongestion) {
					uni.showToast({
						title: '拥堵信息详情不能为空',
						icon: 'none'
					})
					return;
				}
				if (this.form.highwayAccidentDetailDTOS.length > 0 && checkAccident) {
					uni.showToast({
						title: '事故信息详情不能为空',
						icon: 'none'
					})
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确认保存当前报送数据吗?',
					success: (res) => {
						if (res.confirm) {
							this.submitForm();
						}
					}
				})
			},
			submitForm() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				this.$request(getApp().globalData.baseUrl + '/api/biz/highSpeedOperationController/saveOrUpdate', this.form,
					'POST').then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: '报送提交成功',
							icon: 'none',
							success: () => {
								uni.navigateBack();
							}
						})
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form_warp {
		padding: 30rpx 30rpx 195rpx;

		.form_intro {
			color: #666;
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			line-height: 48rpx;
			text-align: center;
			margin-bottom: 20rpx;

			.tel {
				color: #2D8CF0;
				font-weight: bold;
			}
		}

		.form_item_box {
			padding: 30rpx 20rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;

			//环比同比
			.form_item_rate {
				background: #F6F6F6;
				border: 1px solid #F6F6F6;
				padding: 30rpx;
				margin-bottom: 30rpx;
				border-radius: 30rpx;

				.line {
					height: 1px;
					background-color: #dfdfdf;
					margin: 30rpx 0;
				}

				.rate_item {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;

					.rate_item_label {
						color: #666;
						font-size: 24rpx;
					}

					.rate_item_input {
						color: #333;
						font-size: 28rpx;
					}
				}

				&.danger {
					background-color: #FEF6F3;
					border-color: #F0622D;
				}
			}

			.form_item_title {
				color: #333;
				line-height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.form_item_remark {
				margin-bottom: 30rpx;

				.form_item_label {
					color: #333333;
					line-height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					margin-bottom: 30rpx;
				}
			}

			.form_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 37rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				margin-bottom: 30rpx;

				.form_item_label {
					width: 260rpx;
					color: #666666;
					font-size: 26rpx;
					word-break: break-all;
				}

				.form_item_input {
					color: #333;
					text-align: right;
					word-break: break-all;

					&.picker {
						flex: 1;
						display: flex;
						justify-content: space-between;
						/deep/ picker{
							flex: 1;
						}

						.picker_select {
							color: #D4D4D4;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							text-align: right;
						}
					}

					//纯展示
					&.text {
						color: #333333;
						line-height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
					}

					//输入框
					&.form_input {
						/deep/ .is-input-border {
							border: 0 !important;

							.uni-easyinput__content-input {
								height: 35rpx !important;
								text-align: right;
							}
						}
						/deep/ .uni-date-x--border{
							border: 0 !important;
							.uni-date__x-input{
								// height: 35rpx !important;
								text-align: right;
							}
						}
					}
				}
			}
		}
	}

	//收费站
	.station_box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;

		.station_item {
			height: 60rpx;
			color: #666666;
			line-height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			border-radius: 20rpx;
			border: 1rpx solid #C1C1C1;
			padding: 0 20rpx;
			margin-bottom: 40rpx;
			margin-right: 20rpx;

			&.active {
				position: relative;
				color: #1ECE5F;
				border-color: #1ECE5F;
				background: #EBFAF2;

				.tag {
					position: absolute;
					top: 0;
					right: 0;
					width: 34rpx;
					height: 23rpx;
					background: #1ECE5F;
					border-radius: 0rpx 20rpx 0rpx 5rpx;
					text-align: center;
				}
			}
		}
	}

	.foot_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 40rpx 30rpx;
		background-color: #f5f5f5;
		z-index: 11;

		.act_btn {
			width: 329rpx;
			height: 90rpx;
			color: #666666;
			font-size: 28rpx;
			line-height: 90rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			text-align: center;
			background: #F6F6F6;
			border-radius: 100rpx;
			border: 1rpx solid #C1C1C1;

			&.blue {
				color: #fff;
				background: #2D8CF0;
				border-color: #2D8CF0;
			}
		}
	}

	//增行
	.line {
		height: 1px;
		background-color: #E1E1E1;
	}

	.add_btn {
		height: 90rpx;
		line-height: 90rpx;
		color: #2D8CF0;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;
		background: #ECF5FF;
		border-radius: 30rpx;
		border: 2rpx solid #2D8CF0;
		margin-top: 30rpx;
	}

	.tab_box {
		display: flex;
		justify-content: space-around;

		.tab_nav {
			color: #999999;
			line-height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			padding-bottom: 25rpx;

			&.active {
				position: relative;
				color: #2D8CF0;
				font-weight: bold;

				&::after {
					position: absolute;
					content: '';
					left: 50%;
					bottom: 0;
					width: 74rpx;
					height: 6rpx;
					background: #2D8CF0;
					border-radius: 100rpx;
					margin-left: -37rpx;
				}
			}
		}
	}

	button {
		background-color: #007aff;
		color: #ffffff;
	}
</style>