zz--front/pages2/index/searchRecruit.vue

<template>
	<view>
		<view class="headerSearchBox">
			<view class="leftSearchBox">
				<u-icon name="search" color="#999" size="36"></u-icon>
				<view class="textICS" @click="showActiveTypes">
					<view class="texs">{{ searchType === 0 ? '岗位' : searchType === 1 ? '公司' : '未知' }}</view>
					<u-icon class="icnst" :class="showType ? 'openTypes' : ''" name="arrow-down-fill" color="#999" size="18"></u-icon>
				</view>
				<input class="linpt" type="text" value="" placeholder="请输入" v-model="job" focus @confirm="submitForms"/>
			</view>
			<view class="exit" @click="backHome">取消</view>
		</view>
		<u-dropdown ref="uDropdown" border-bottom>
			<u-dropdown-item :title="city === null ? '全国' : city">
				<view class="slot-content">
					<view class="tyStyleZ">
						<u-cell-item
							:border-bottom="false"
							title="工作地点"
							:arrow="true"
							arrow-direction="down"
							@click="showCityPicker = true"
							:value="city === null ? '请选择省市' : city"
						></u-cell-item>
						<view class="dis_fs">
							<view class="left_in" @click="initResult">重置</view>
							<view class="sultRight" @click="submitForms">确定</view>
						</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item title="薪资范围">
				<view class="slot-content">
					<view class="tyStyleZ">
						<view class="priceType">
							<view class="lstq" :class="priceType === 1 ? 'activeLstq' : ''" @click="priceType = 1">月薪</view>
							<view class="lstq" :class="priceType === 2 ? 'activeLstq' : ''" @click="priceType = 2">年薪</view>
						</view>
						<view class="priceInput">
							<input class="inputSty" type="number" value="" placeholder="最低(元)" v-model="incomeStart" />
							至
							<input class="inputSty" type="number" value="" placeholder="最高(元)" v-model="incomeEnd" />
						</view>
						<view class="heards">月薪薪资范围（至多选三项）</view>
						<view class="boxPlus">
							<view
								class="liszing"
								v-for="(item, index) in priceActList"
								:key="index"
								@click="activeProceAc(item)"
								:class="priceActiveBoxs.indexOf(item.value) !== -1 ? 'activesLiszing' : ''"
							>
								{{ item.label }}
							</view>
							<view style="clear: both;"></view>
						</view>
						<view class="dis_fs">
							<view class="left_in" @click="initResult">重置</view>
							<view class="sultRight" @click="submitForms">确定</view>
						</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item title="工作类型">
				<view class="slot-content">
					<view class="tyStyleZ">
						<view class="heards">工作类型</view>
						<view class="boxPlus">
							<view
								class="liszing"
								v-for="(item, index) in workTypeList"
								:key="index"
								@click="activeWorkType(item)"
								:class="workActiveBoxs.indexOf(item) !== -1 ? 'activesLiszing' : ''"
							>
								{{ item }}
							</view>
							<view style="clear: both;"></view>
						</view>
						<view class="dis_fs">
							<view class="left_in" @click="initResult">重置</view>
							<view class="sultRight" @click="submitForms">确定</view>
						</view>
					</view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item title="更多筛选">
				<view class="slot-content">
					<view class="tyStyleZ">
						<view class="heards">学历要求(可多选)</view>
						<view class="boxPlus">
							<view
								class="liszing"
								v-for="(item, index) in eduList"
								:key="index"
								@click="activeEduType(item)"
								:class="eduActiveBoxs.indexOf(item.value) !== -1 ? 'activesLiszing' : ''"
							>
								{{ item.label }}
							</view>
							<view style="clear: both;"></view>
						</view>
						<view class="heards">工作年限(可多选)</view>
						<view class="boxPlus">
							<view
								class="liszing"
								v-for="(item, index) in workYearsList"
								:key="index"
								@click="activeWorkYearsType(item)"
								:class="workYearsActiveBoxs.indexOf(item.value) !== -1 ? 'activesLiszing' : ''"
							>
								{{ item.label }}
							</view>
							<view style="clear: both;"></view>
						</view>
						<view class="heards">企业规模(可多选)</view>
						<view class="boxPlus">
							<view
								class="liszing"
								v-for="(item, index) in companySizeList"
								:key="index"
								@click="activeCompanySize(item)"
								:class="companySizeActiveBoxs.indexOf(item.value) !== -1 ? 'activesLiszing' : ''"
							>
								{{ item.label }}
							</view>
							<view style="clear: both;"></view>
						</view>
						<view class="heards">公司类型(可多选)</view>
						<view class="boxPlus">
							<view
								class="liszing"
								v-for="(item, index) in companyTypeList"
								:key="index"
								@click="activeCompanyType(item)"
								:class="companyTypeActiveBoxs.indexOf(item.value) !== -1 ? 'activesLiszing' : ''"
							>
								{{ item.label }}
							</view>
							<view style="clear: both;"></view>
						</view>
						<view class="dis_fs">
							<view class="left_in" @click="initResult">重置</view>
							<view class="sultRight" @click="submitForms">确定</view>
						</view>
					</view>
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<u-divider v-if="posts.length === 0 && enterprise.length === 0 && searStatus">暂无符合条件的公司</u-divider>
		<scroll-view scroll-y="true" style="padding-top: 20rpx;" :style="'height: ' + windowHeight + 'px;'">
			<view v-if="current === 0">
				<view class="boxsize lines" v-for="(item, index) in posts" :key="index" @click="jumpDetails(item)">
					<view class="top_sty">
						<view>
							<view class="heasd">
								{{ item.job }}
								<image style="width:27rpx;height:27rpx;" src="@/static/ji@3x.png" mode=""></image>
							</view>
							<view class="fotHs">{{ item.companyName }}</view>
						</view>
						<view class="priceSty">
							{{ item.incomeStart === item.incomeEnd ? item.incomeStart : item.incomeStart + '~' + item.incomeEnd }}/{{ item.incomeType === 1 ? '月' : '年' }}
						</view>
					</view>
					<view class="dis_foter">
						<view class="dis_f">
							<view class="fot_size">{{ item.workingYearsLabel }}</view>
							<view class="fot_size">{{ item.minimumEduLabel }}</view>
							<view class="yys" v-for="(items, indexs) in item.bonusCertificate" :key="indexs">{{ items }}</view>
						</view>
						<view class="right_address">{{ item.city }}•{{ item.district }}</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="boxsize" v-for="(item, index) in enterprise" :key="index">
					<view class="dis_flexs" @click="jumpCompany(item)">
						<view class="imgboxs"><image style="width: 100%; height: 100%;" src="/static/avatar1.png" mode=""></image></view>
						<view style="flex: 1;">
							<view class="headTits">{{ item.companyName }}</view>
							<view class="lisz">
								<view class="bqB">{{ item.city }}</view>
								<view class="bqB">{{ item.companyType }}</view>
								<view class="bqB">{{ item.companySize }}</view>
							</view>
						</view>
					</view>
					<view class="tnsz">
						<view class="litns" v-for="(items, indexs) in item.newNumObj" :key="indexs" @click="jumpDetails(items)">{{ items.job }}</view>
						<view class="moreLs" v-if="item.recruitNeedsVoList.length > 3" @click="jumpDetails(item.recruitNeedsVoList[0])">•••</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-action-sheet safe-area-inset-bottom :cancel-btn="false" :list="searchLists" @click="clickAs" v-model="showType"></u-action-sheet>
		<u-picker mode="region" v-model="showCityPicker" :params="{ province: true, city: true }" @confirm="activeCitys"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searStatus: false,
			showCityPicker: false,
			job: '',
			windowHeight: 0,
			searchType: 0,
			showType: false,
			searchLists: [
				{
					text: '岗位'
				},
				{
					text: '公司'
				}
			],
			posts: [], //岗位列表
			enterprise: [], //企业列表
			current: 0,
			workTypeList: ['全职', '兼职', '实习生'], //工作类型
			workActiveBoxs: [], //选中工作类型
			priceType: 1, //薪资类型 1月薪2年薪
			incomeStart: '', //薪资起点
			incomeEnd: '', //薪资结点
			priceActList: [], //薪资范围列表
			priceActiveBoxs: [], //薪资选中列表
			eduList: [], //学历
			eduActiveBoxs: [], //选中学历
			workYearsList: [], //工作年限类型
			workYearsActiveBoxs: [], //选中工作年限类型

			companySizeList: [], //公司规模
			companySizeActiveBoxs: [], //选中公司规模
			companyTypeList: [], //公司类型
			companyTypeActiveBoxs: [], //选中公司类型
			province: null,
			city: null
		};
	},
	created() {
		this.windowHeight = uni.getSystemInfoSync().windowHeight - 120;
		this.getDict();
		this.initPriceList();
	},
	methods: {
		jumpCompany(v){
			var data = {
				companyId: v.companyId
			}
			if(v.recruitNeedsVoList.length > 0){
				data.id = v.recruitNeedsVoList[0].id
			}
			this.$navTo.togo('/pages2/recruitment/detailsInfo', data);
		},
		jumpDetails(v) {
			this.$navTo.togo('/pages2/recruitment/detailsInfo', {
				id: v.id,
				companyId: v.companyId
			});
		},
		initResult() {
			this.workActiveBoxs = []; //选中工作类型
			this.priceType = 1; //薪资类型 1月薪2年薪
			this.incomeStart = ''; //薪资起点
			this.incomeEnd = ''; //薪资结点
			this.priceActiveBoxs = []; //薪资选中列表
			this.eduActiveBoxs = []; //选中学历
			this.workYearsActiveBoxs = []; //选中工作年限类型
			this.companySizeActiveBoxs = []; //选中公司规模
			this.companyTypeActiveBoxs = []; //选中公司类型
			this.province = null;
			this.city = null;
		},
		submitForms() {
			var self = this
			var data = {};
			if(this.companySizeActiveBoxs.length){
				data.sizeIds = this.companySizeActiveBoxs.toString()
			}
			if(this.companyTypeActiveBoxs.length){
				data.typeIds = this.companyTypeActiveBoxs.toString()
			}
			if(this.searchType === 0){
			if (this.province !== null && this.city !== null) {
				data.province = this.province;
				data.city = this.city;
			}
			if (this.priceActiveBoxs.length > 0) {
				data.incomeType = 1;
				data.incomeList = JSON.stringify(this.priceActiveBoxs);
			} else {
				if (this.incomeStart !== '' || this.incomeEnd !== '') {
					if (this.incomeStart !== '' && this.incomeEnd !== '') {
						var testPrice = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
						if (!testPrice.test(Number(this.incomeStart))) {
							uni.showToast({
								title: '请规范填写最低薪资',
								icon: 'none'
							});
							return;
						}
						if (!testPrice.test(Number(this.incomeEnd))) {
							uni.showToast({
								title: '请规范填写最高薪资',
								icon: 'none'
							});
							return;
						}
						if (Number(this.incomeStart) > Number(this.incomeEnd)) {
							uni.showToast({
								title: '请规范填写薪资范围',
								icon: 'none'
							});
							return;
						}
						data.incomeType = this.priceType;
						data.incomeList = JSON.stringify([{ incomeStart: Number(this.incomeStart), incomeEnd: Number(this.incomeEnd) }]);
					} else {
						uni.showToast({
							title: '请填写薪资范围',
							icon: 'none'
						});
						return;
					}
				}
			}
				if(this.workActiveBoxs.length){
					data.jobNatures = this.workActiveBoxs.toString()
				}
				if(this.eduActiveBoxs.length){
					data.minimumEduDictList = this.eduActiveBoxs.toString()
				}
				if(this.workYearsActiveBoxs.length){
					data.workingYearsDictList = this.workYearsActiveBoxs.toString()
				}
				if(this.job){
					data.job = this.job
				}
				this.$api.recruitneedslist(data).then(res => {
					if (res.data.code === 200) {
						res.data.rows.forEach((item, index) => {
							if (item.jobNature) {
								item.jobNature = item.jobNature.split(',');
							}
							if (item.welfare) {
								item.welfare = item.welfare.split(',');
							}
							if (item.bonusCertificate) {
								item.bonusCertificate = item.bonusCertificate.split(',');
							}
						});
						self.posts = res.data.rows
						self.enterprise = []
						self.current = 0
						self.$refs.uDropdown.close();
					}
				})
			}
			if(this.searchType === 1){
				if(this.job){
					data.companyName = this.job
				}
				this.$api.recruitcompanyConlist(data).then(res => {
					if (res.data.code === 200) {
						for (let k = 0; k < res.data.rows.length; k++) {
							if (res.data.rows[k].recruitNeedsVoList) {
								var anum = [];
								for (let i = 0; i < res.data.rows[k].recruitNeedsVoList.length; i++) {
									if (i >= 3) {
										break;
									} else {
										anum.push(res.data.rows[k].recruitNeedsVoList[i]);
									}
								}
								res.data.rows[k].newNumObj = anum;
							}
						}
						self.enterprise = res.data.rows;
						self.posts = []
						self.current = 1
						self.$refs.uDropdown.close();
					}
				})
			}
			this.searStatus = true
			console.log(data)
		},
		closeDropdown() {
			this.$refs.uDropdown.close();
		},
		showActiveTypes() {
			this.showType = true;
		},
		clickAs(index) {
			this.searchType = index;
			this.showType = false;
		},
		activeWorkType(item) {
			if (this.workActiveBoxs.indexOf(item) !== -1) {
				this.workActiveBoxs.splice(this.workActiveBoxs.indexOf(item), 1);
			} else {
				this.workActiveBoxs.push(item);
			}
		},
		activeProceAc(item) {
			if (this.priceActiveBoxs.indexOf(item.value) !== -1) {
				this.priceActiveBoxs.splice(this.priceActiveBoxs.indexOf(item.value), 1);
			} else {
				if (this.priceActiveBoxs.length >= 3) {
					uni.showToast({
						title: '最多选中三个',
						icon: 'none'
					});
					return;
				}
				this.priceActiveBoxs.push(item.value);
			}
			console.log(this.priceActiveBoxs);
		},
		activeEduType(item) {
			if (this.eduActiveBoxs.indexOf(item.value) !== -1) {
				this.eduActiveBoxs.splice(this.eduActiveBoxs.indexOf(item.value), 1);
			} else {
				this.eduActiveBoxs.push(item.value);
			}
		},
		activeWorkYearsType(item) {
			if (this.workYearsActiveBoxs.indexOf(item.value) !== -1) {
				this.workYearsActiveBoxs.splice(this.workYearsActiveBoxs.indexOf(item.value), 1);
			} else {
				this.workYearsActiveBoxs.push(item.value);
			}
		},
		activeCompanySize(item) {
			if (this.companySizeActiveBoxs.indexOf(item.value) !== -1) {
				this.companySizeActiveBoxs.splice(this.companySizeActiveBoxs.indexOf(item.value), 1);
			} else {
				this.companySizeActiveBoxs.push(item.value);
			}
		},
		activeCompanyType(item) {
			if (this.companyTypeActiveBoxs.indexOf(item.value) !== -1) {
				this.companyTypeActiveBoxs.splice(this.companyTypeActiveBoxs.indexOf(item.value), 1);
			} else {
				this.companyTypeActiveBoxs.push(item.value);
			}
		},
		getDict() {
			var self = this;
			this.$api.dictList().then(res => {
				res.data.data.forEach((item, index) => {
					if (item.dictType == 'edu_level') {
						self.eduList.push({ label: item.dictLabel, value: item.dictCode });
					}
					if (item.dictType == 'working_years') {
						if (item.dictCode !== 109) {
							self.workYearsList.push({ label: item.dictLabel, value: item.dictCode });
						}
					}
					if (item.dictType == 'company_size') {
						self.companySizeList.push({ label: item.dictLabel, value: item.dictCode });
					}
					if (item.dictType == 'company_type') {
						self.companyTypeList.push({ label: item.dictLabel, value: item.dictCode });
					}
				});
			});
		},
		initPriceList() {
			this.priceActList = [
				{
					label: '2千以下',
					value: {
						incomeStart: 0,
						incomeEnd: 2000
					}
				},
				{
					label: '2-3千',
					value: {
						incomeStart: 2000,
						incomeEnd: 3000
					}
				},
				{
					label: '3-5千',
					value: {
						incomeStart: 3000,
						incomeEnd: 5000
					}
				},
				{
					label: '5-6千',
					value: {
						incomeStart: 5000,
						incomeEnd: 6000
					}
				},
				{
					label: '6-7千',
					value: {
						incomeStart: 6000,
						incomeEnd: 7000
					}
				},
				{
					label: '7-8千',
					value: {
						incomeStart: 7000,
						incomeEnd: 8000
					}
				},
				{
					label: '8-9千',
					value: {
						incomeStart: 8000,
						incomeEnd: 9000
					}
				},
				{
					label: '0.9-1万',
					value: {
						incomeStart: 9000,
						incomeEnd: 10000
					}
				},
				{
					label: '1-1.5万',
					value: {
						incomeStart: 10000,
						incomeEnd: 15000
					}
				},
				{
					label: '1.5-2万',
					value: {
						incomeStart: 15000,
						incomeEnd: 20000
					}
				},
				{
					label: '2-3万',
					value: {
						incomeStart: 20000,
						incomeEnd: 30000
					}
				},
				{
					label: '3-5万',
					value: {
						incomeStart: 30000,
						incomeEnd: 50000
					}
				}
			];
		},
		// 取消
		backHome() {
			uni.navigateBack({
				delta: 1
			});
		},
		activeCitys(options) {
			console.log(options);
			this.province = options.province.label;
			this.city = options.city.label;
		}
	}
};
</script>

<style scoped>
.arr-icon {
	width: 40rpx;
	height: 40rpx;
}
.popup_t1 {
	display: flex;
	align-items: center;
	padding-left: 35rpx;
	border-bottom: 1rpx solid #eee;
	height: 57rpx;
	margin-top: 86rpx;
}
.mors {
	font-size: 30rpx;
	font-weight: bold;
	color: #999;
}
.activesSty {
	font-size: 30rpx;
	font-weight: bold;
	color: #2a4174;
}
.boxsize {
	border-radius: 32rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
	margin: 0rpx 35rpx 24rpx;
	padding: 22rpx 20rpx;
}
.lines {
	height: 196rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.dis_flexs {
	display: flex;
	margin-bottom: 24rpx;
}
.dis_flexs > .imgboxs {
	width: 100rpx;
	height: 100rpx;
	border-radius: 24rpx;
	overflow: hidden;
	margin-right: 24rpx;
}
.top_sty {
	display: flex;
	justify-content: space-between;
}
.dis_foter {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dis_f {
	display: flex;
	align-items: center;
	overflow-x: auto;
	flex: 1;
	margin-right: 20rpx;
}
.right_address {
	font-weight: 500;
	font-size: 24rpx;
	color: #636a75;
}
.fot_size {
	height: 32rpx;
	line-height: 32rpx;
	padding: 0rpx 12rpx;
	margin-right: 8rpx;
	border-radius: 16rpx;
	font-size: 20rpx;
	background: #f2f6ff;
	flex-shrink: 0;
	color: #636a75;
}
.yys {
	height: 32rpx;
	font-size: 20rpx;
	line-height: 32rpx;
	padding: 0rpx 12rpx;
	margin-right: 8rpx;
	border-radius: 16rpx;
	color: #fff;
	background: #3fefb7;
	flex-shrink: 0;
}
.heasd {
	font-size: 30rpx;
	font-weight: bold;
	color: #2a4174;
	margin-bottom: 14rpx;
}
.fotHs {
	font-size: 20rpx;
	font-weight: 500;
	color: #636a75;
}
.priceSty {
	font-weight: bold;
	font-size: 28rpx;
	color: #32467b;
}
.headTits {
	font-size: 30rpx;
	font-weight: bold;
	color: #2a4174;
	margin-bottom: 26rpx;
}
.lisz {
	display: flex;
	align-items: center;
}
.lisz > .bqB {
	border-radius: 16rpx;
	background-color: #f2f6ff;
	padding: 0rpx 22rpx;
	text-align: center;
	height: 32rpx;
	line-height: 32rpx;
	margin-right: 8rpx;
	font-size: 20rpx;
	color: #636a75;
}
.tnsz {
	display: flex;
	align-items: center;
}
.litns {
	padding: 0rpx 15rpx;
	margin-right: 24rpx;
	border-radius: 16rpx;
	height: 48rpx;
	line-height: 48rpx;
	background-color: #32467b;
	color: #fff;
	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(47, 67, 121, 0.05);
	font-size: 26rpx;
	font-weight: bold;
}
.headerSearchBox {
	padding: 30rpx;
	padding-bottom: 0rpx;
	display: flex;
	align-items: center;
	height: 72rpx;
}
.leftSearchBox {
	background-color: #f5f7f9;
	border-radius: 36rpx;
	display: flex;
	align-items: center;
	flex: 1;
	height: 72rpx;
	padding: 0rpx 20rpx;
}
.textICS {
	display: flex;
	align-items: center;
	margin-left: 17rpx;
	margin-right: 10rpx;
}
.texs {
	font-size: 24rpx;
	color: #636a75;
	font-weight: 500;
}
.icnst {
	margin-left: 7rpx;
	margin-top: 4rpx;
	transition: all 0.2s;
}
.linpt {
	margin-top: 2rpx;
	font-size: 26rpx;
	color: #333;
	border: none;
	flex: 1;
}
.exit {
	color: #333;
	font-weight: 500;
	font-size: 24rpx;
	margin: 0rpx 11rpx;
}
.openTypes {
	transform: rotate(-180deg);
}

.moreLs {
	border-radius: 16rpx;
	font-size: 26rpx;
	font-weight: bold;
	color: #32467b;
	border: 1rpx solid #32467b;
	padding: 0rpx 11rpx;
	height: 48rpx;
	letter-spacing: 1rpx;
	line-height: 40rpx;
}
.flex-d {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.contentZ {
	flex: 1;
	overflow-y: auto;
	padding-left: 35rpx;
}
.contentZ::-webkit-scrollbar {
	display: none;
}
.fots {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-top: 1rpx solid #eee;
}
.leftBtns {
	font-size: 30rpx;
	color: #32467b;
	font-weight: 500;
}
.right_Btns {
	font-size: 30rpx;
	color: #fff;
	background-color: #32467b;
	border-radius: 24rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	padding: 0rpx 23rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
}
.heards {
	padding-top: 25rpx;
	margin-bottom: 25rpx;
	font-size: 24rpx;
	color: #32467b;
	font-weight: bold;
}
.liszing {
	float: left;
	width: 161rpx;
	height: 57rpx;
	text-align: center;
	line-height: 57rpx;
	border: 1rpx solid transparent;
	border-radius: 16rpx;
	color: #999;
	background-color: #f5f7f9;
	margin-right: 13rpx;
	margin-bottom: 13rpx;
}
.activesLiszing {
	color: #2a4174;
	border-color: #2a4174;
}
.priceType {
	display: flex;
	align-items: center;
	margin-bottom: 22rpx;
	padding-top: 20rpx;
}
.lstq {
	font-size: 30rpx;
	color: #999;
	font-weight: 400;
	margin-right: 27rpx;
}
.activeLstq {
	color: #2a4174;
	font-weight: 500;
}
.priceInput {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 56rpx;
}
.inputSty {
	border: none;
	border-bottom: 1rpx solid #eee;
	/* width: 220rpx; */
	text-align: center;
}
.tyStyleZ {
	padding: 0rpx 32rpx 27rpx;
	background-color: #fff;
}
.dis_fs {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.left_in {
	height: 88rpx;
	width: 160rpx;
	text-align: center;
	line-height: 88rpx;
	border-radius: 32rpx;
	background-color: rgba(145, 156, 178, 0.2);
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	font-size: 30rpx;
	color: #999;
	font-weight: 500;
}
.sultRight {
	font-size: 30rpx;
	font-weight: 500;
	color: #fff;
	border-radius: 32rpx;
	background-color: #32467b;
	width: 502rpx;
	height: 88rpx;
	text-align: center;
	line-height: 88rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
}
</style>