epmet-oper-gov/src/views/modules/census/census-houseList.vue

<template>
	<div class="div_main">
		<div>
			<div class="div_search">
				<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'">
					<div>
						<el-form-item label="所属组织" prop="orgId">
							<el-cascader
								class="customer_cascader"
								ref="myCascader"
								filterable
								v-model="formData.orgId"
								:options="orgOptions"
								:props="orgOptionProps"
								:show-all-levels="false"
								@change="handleChangeAgency"
							></el-cascader>
						</el-form-item>
						<el-form-item label="更新时间" prop="startTime">
							<el-date-picker
								v-model="formData.startDate"
								:picker-options="startPickerOptions"
								class="item_width_2"
								size="small"
								type="date"
								value-format="yyyy-MM-dd HH:mm:ss"
								value="yyyy-MM-dd"
								placeholder="开始时间"
							></el-date-picker>
							<span class="data-tag">至</span>
							<el-date-picker
								v-model="formData.endDate"
								:picker-options="endPickerOptions"
								class="item_width_2 data-tag"
								size="small"
								type="date"
								value-format="yyyy-MM-dd HH:mm:ss"
								value="yyyy-MM-dd"
								placeholder="结束时间"
							></el-date-picker>
						</el-form-item>
						<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button>
						<el-button class="diy-button--output" size="small" @click="resetForm">重置</el-button>
					</div>
				</el-form>
			</div>
			<div class="div_table">
				<el-row :gutter="20">
					<el-col :span="12">
						<div class="div_table_title">房屋用途统计</div>
						<div class="flex">
							<div class="width1">
								<div class="box">
									<screen-echarts-frame
										@handelClickMyPei="handelClickMyPei"
										:style="{ width: '100%', height: '100%' }"
										@myChartMethod="pieInitOk"
										ref="pieChart"
									></screen-echarts-frame>
								</div>
							</div>
							<div class="flex1">
								<div class="box">
									<div class="legend">
										<div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
											<div class="kuai" :style="{ backgroundColor: color1[index] }"></div>
											<div class="content">
												<div class="name">{{ item.name }}</div>
												<div class="num">{{ item.value }}</div>
												<div class="unit" :style="{ color: color1[index] }">{{ item.radio }}%</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="div_table_title">房屋状态统计</div>
						<div class="flex">
							<div class="width1">
								<div class="box">
									<screen-echarts-frame2
										@handelClickMyPei="handelClickMyPei2"
										:style="{ width: '100%', height: '100%' }"
										@myChartMethod="pieInitOk2"
										ref="pieChart2"
									></screen-echarts-frame2>
								</div>
							</div>
							<div class="flex1">
								<div class="box">
									<div class="legend2">
										<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem2(item)">
											<div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div>
											<div class="kuai" v-if="item.name == '出租'"><img src="../../../assets/img/census/出租.png" /></div>
											<div class="kuai" v-if="item.name == '闲置'"><img src="../../../assets/img/census/闲置.png" /></div>
											<div class="kuai" v-if="item.name == '未售出'"><img src="../../../assets/img/census/未售出.png" /></div>
											<div class="content">
												<div class="name">{{ item.name }}</div>
												<div class="num">{{ item.value }}</div>
												<div class="unit" :style="{ color: color2[index] }">{{ item.radio }}%</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-col>

					<el-col :span="24">
						<div class="census_searchcensus2">
							<div class="census_searchcensus_box"></div>
							<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button>
						</div>
						<el-table
							:data="tableData"
							border
							v-loading="tableLoading"
							:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
							class="table"
							style="width: 100%;"
							:height="maxTableHeight"
						>
							<el-table-column label="序号" type="index" align="center" width="50" />
							<el-table-column prop="streetName" width="110" label="镇街" align="center" :show-overflow-tooltip="true" />
							<el-table-column prop="districtName" label="区县" width="110" align="center" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="communityName" width="110" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="gridName" align="center" width="110" label="网格" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="houseName" align="center" label="房屋名称" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="purposeName" align="center" width="110" label="房屋用途" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="rentFlagName" align="center" width="110" label="房屋状态" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true">
								<template slot-scope="scope">
									<el-button size="small" type="text" @click="show(scope.row)">查看</el-button>
								</template>
							</el-table-column>
						</el-table>

						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page.sync="pageNo"
							:page-sizes="[10, 20, 50, 100, 200]"
							:page-size="parseInt(pageSize)"
							layout="sizes, prev, pager, next, total,jumper"
							:total="total"
						></el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>
		<div>
			<addForm
				v-if="dialogVisible"
				:dialogVisible="dialogVisible"
				:pageType="pageType"
				:disabled="disabled"
				:detailId="detailId"
				:detailData="detailData"
				@handleClose="handleClose"
			/>
		</div>
	</div>
</template>

<script>
import screenEchartsFrame from './chart';
import screenEchartsFrame2 from './chart';
import { requestPost, requestGet } from '@/js/dai/request';
import nextTick from 'dai-js/tools/nextTick';
import { mapGetters } from 'vuex';
import addForm from './addFormHouse';
import axios from 'axios';

export default {
	components: { screenEchartsFrame, screenEchartsFrame2, addForm },
	data() {
		let endDisabledDate = time => {
			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
			let nowData = Date.now();
			if (this.formData.startTime) {
				let startTime = new Date(this.formData.startTime);
				return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime;
			} else {
				return time.getTime() > nowData;
			}
		};
		let startDisabledDate = time => {
			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
			let nowData = Date.now();
			return time.getTime() > nowData;
		};
		return {
			optionData: {},
			dialogVisible: false,
			detailId: '',
			detailData: {},
			pageType: '',
			disabled: false,
			tableLoading: false,
			user: {},
			gridList: [], //所属网格list--场所区域
			tableData: [],
			formData: {
				orgId: ''
			},
			pageNo: 1,
			pageSize: window.localStorage.getItem('pageSize') || 20,
			total: 1,
			endPickerOptions: {
				//时间
				disabledDate: endDisabledDate
			},
			startPickerOptions: {
				//时间
				disabledDate: startDisabledDate
			},
			agencyId: '', //组织
			agencyIdArray: [], //组织
			orgOptions: [], //组织
			orgOptionProps: {
				//组织
				multiple: false,
				value: 'agencyId',
				label: 'agencyName',
				children: 'subAgencyList',
				emitPath: false,
				checkStrictly: true
			},
			TableHeight: '',
			pieInitState: false,
			pieInitState2: false,
			pieOption: [],
			pieOption2: [],
			color1: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
			color2: ['#3C94FE', '#22C1C3', '#F0D915', '#FE6252', '#A17AFA', '#A19FFF', '#6FC364', '#FEB349', '#F44230', '#5DC7F0'],
			chartData: [],
			chartData2: [],
			pieData: [],
			pieData2: [],
			orgId: '',
			purpose: '',
			rentFlag: '',
			orgIdPath: '',
			chartDataData:[],
			chartData2Data:[]
		};
	},
	computed: {
		maxTableHeight() {
			this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 638 + this.iframeHeigh : this.clientHeight - 638;
			return this.TableHeight;
		},
		...mapGetters(['clientHeight', 'iframeHeight'])
	},
	watch: {
		'formData.endDate': function(val) {
			if (val && val != '') {
				let arrayTemp = val.split(' ');
				this.formData.endDate = arrayTemp[0] + ' 23:59:59';
			}
		}
	},
	mounted() {
		console.log(this.$store.state);
		this.user = this.$store.state.user;
		this.agencyId = this.user.agencyId;

		this.getOrgTreeList();
	},
	methods: {
		resetForm() {
			for (const n in this.formData) {
				if (typeof this.formData[n] == 'object') this.formData[n] = [];
				else this.formData[n] = '';
			}
			this.orgId = this.optionData.agencyId;
			this.orgIdPath = this.optionData.orgIdPath;
			this.orgType = this.optionData.level;
			this.handleSearch();
		},
		show(row) {
			this.dialogVisible = true;
			this.pageType = 'view';
			this.detailId = row.houseId;

			this.detailData = row;
		},
		handleClose() {
			this.dialogVisible = false;
			this.pageType = 'list';
			this.detailId = '';
			this.getTableData();
		},
		async getTableData() {
			this.tableLoading = true;

			const url = '/gov/org/ichouse/getHousePictureList';

			const { pageSize, pageNo, formData } = this;
			const { data, code, msg } = await requestPost(url, {
				pageSize,
				pageNo,
				orgIdPath: this.orgIdPath,
				orgId: this.orgId,
				orgType: this.orgType,
				timeStart: this.formData.startDate,
				timeEnd: this.formData.endDate,
				purpose: this.purpose,
				rentFlag: this.rentFlag
			});

			this.tableLoading = false;
			if (code === 0) {
				this.total = data.total || 0;
				this.tableData = data.list
					? data.list.map(item => {
							return item;
					  })
					: [];
			} else {
				this.$message.error(msg);
			}
		},
		handleSizeChange(val) {
			this.pageSize = val;
			window.localStorage.setItem('pageSize', val);
			this.getTableData();
		},
		handleCurrentChange(val) {
			this.pageNo = val;
			this.getTableData();
		},
		async getsubData() {
			this.$refs.pieChart.showLoading();
			let url = '/gov/org/ichouse/getHousePurposeCount';
			let param = {
				orgIdPath: this.orgIdPath,
				timeStart: this.formData.startDate,
				timeEnd: this.formData.endDate,
				orgId: this.orgId,
				orgType: this.orgType
			};
			const { data, code, msg } = await requestPost(url, param);
			this.$refs.pieChart.hideLoading();
			if (code === 0) {
				this.pieData = data;
				this.getPie();
			} else {
				this.$message.error(msg);
			}
		},
		async getsubData2() {
			this.$refs.pieChart2.showLoading();
			let url = '/gov/org/ichouse/getHouseStatusCount';
			let param = {
				orgIdPath: this.orgIdPath,
				timeStart: this.formData.startDate,
				timeEnd: this.formData.endDate,
				orgId: this.orgId,
				orgType: this.orgType
			};
			const { data, code, msg } = await requestPost(url, param);
			this.$refs.pieChart2.hideLoading();
			if (code === 0) {
				this.pieData2 = data;

				this.getPie2();
			} else {
				this.$message.error(msg);
			}
		},
		pieInitOk() {
			this.pieInitState = true;
		},
		pieInitOk2() {
			this.pieInitState2 = true;
		},
		getPie() {
			if (this.pieInitState) {
				this.setPieData();
			} else {
				setTimeout(() => {
					this.getPie();
				}, 500);
			}
		},
		getPie2() {
			if (this.pieInitState2) {
				this.setPieData2();
			} else {
				setTimeout(() => {
					this.getPie2();
				}, 500);
			}
		},
		setPieData() {
			let data = [...this.pieData.list];
			let type = {
				1: '住宅',
				2: '商业',
				3: '办公',
				4: '工业',
				5: '存储',
				6: '商住混用',
				7: '其它'
			};
			this.chartData.name = data.map(item => type[item.type]);
			this.chartData.data = data.map(item => {
				return {
					value: item.count,
					name: type[item.type],
					code: item.type,
					radio: item.count == 0 ? '0' : ((item.count / this.pieData.total) * 100).toFixed(2)
				};
			});
			this.chartDataData=this.chartData.data ;
			this.$forceUpdate();
			this.iniPieChart(this.chartData);
		},
		setPieData2() {
			let data = [...this.pieData2.list];
			let type = {
				1: '出租',
				0: '自住',
				2: '闲置',
				3: '未售出'
			};
			this.chartData2.name = data.map(item => type[item.type]);
			this.chartData2.data = data.map(item => {
				return {
					value: item.count,
					name: type[item.type],
					code: item.type,
					radio: item.count == 0 ? '0' : ((item.count / this.pieData2.total) * 100).toFixed(2)
				};
			});
			this.chartData2Data=this.chartData2.data ;
			this.$forceUpdate();
			this.iniPieChart2(this.chartData2);
		},
		// 获取饼状图
		async iniPieChart(chartData) {
			this.$refs.pieChart.clear();
			// 获取pieChart配置
			this.pieOption = {
				tooltip: {
					trigger: 'item',
					formatter: '{b}<br/>总数  :  {c}<br/> 占比  :  {d}%',
					backgroundColor: 'rgb(134,134,134)',
					borderColor: 'rgb(134,134,134)',
					textStyle: {
						color: '#fff'
					}
				},
				color: this.color1,
				title: {
					text: this.pieData.total,
					subtext: '总数',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: 26,
						color: '#333333',
						fontWeight: 'bold'
					},
					subtextStyle: {
						fontSize: 14,
						color: '#333333'
					}
				},

				series: [
					{
						type: 'pie',
						radius: ['65%', '88%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						tooltip: {
							show: true
						},
						itemStyle: {
							// 间隔
							borderWidth: 2,
							borderColor: '#fff'
						},

						data: chartData.data
					},
					{
						type: 'pie',
						radius: ['0%', '70%'],
						center: ['50%', '50%'],
						selectedMode: false,
						hoverAnimation: false,
						data: [{ value: 1, name: '' }],
						itemStyle: {
							color: '#f7f7f7'
						},
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						tooltip: {
							show: false
						},

						animation: false,
						cursor: 'auto',
						emphasis: {
							itemStyle: {
								color: '#f7f7f7'
							}
						}
					},
					{
						type: 'pie',
						radius: ['88%', '100%'],
						center: ['50%', '50%'],
						selectedMode: false,
						hoverAnimation: false,
						data: [{ value: 1, name: '' }],
						itemStyle: {
							color: '#f7f7f7'
						},
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						tooltip: {
							show: false
						},
						animation: false,
						cursor: 'auto',
						emphasis: {
							itemStyle: {
								color: '#f7f7f7'
							}
						}
					}
				]
			};
			this.$refs.pieChart.setOption(this.pieOption);
		},
		async iniPieChart2(chartData) {
			this.$refs.pieChart2.clear();
			// 获取pieChart配置

			this.pieOption2 = {
				tooltip: {
					trigger: 'item',
					formatter: '{b}<br/>总数  :  {c}<br/> 占比  :  {d}%',
					backgroundColor: 'rgb(134,134,134)',
					borderColor: 'rgb(134,134,134)',
					textStyle: {
						color: '#fff'
					}
				},
				color: this.color2,
				title: {
					text: this.pieData2.total,
					subtext: '总数',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: 26,
						color: '#333333',
						fontWeight: 'bold'
					},
					subtextStyle: {
						fontSize: 14,
						color: '#333333'
					}
				},

				series: [
					{
						type: 'pie',
						radius: ['65%', '88%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						tooltip: {
							show: true
						},
						itemStyle: {
							// 间隔
							borderWidth: 2,
							borderColor: '#fff'
						},

						data: chartData.data
					},
					{
						type: 'pie',
						radius: ['0%', '70%'],
						center: ['50%', '50%'],
						selectedMode: false,
						hoverAnimation: false,
						data: [{ value: 1, name: '' }],
						itemStyle: {
							color: '#f7f7f7'
						},
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						tooltip: {
							show: false
						},

						animation: false,
						cursor: 'auto',
						emphasis: {
							itemStyle: {
								color: '#f7f7f7'
							}
						}
					},
					{
						type: 'pie',
						radius: ['88%', '100%'],
						center: ['50%', '50%'],
						selectedMode: false,
						hoverAnimation: false,
						data: [{ value: 1, name: '' }],
						itemStyle: {
							color: '#f7f7f7'
						},
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						tooltip: {
							show: false
						},
						animation: false,
						cursor: 'auto',
						emphasis: {
							itemStyle: {
								color: '#f7f7f7'
							}
						}
					}
				]
			};
			this.$refs.pieChart2.setOption(this.pieOption2);
		},
		handelClickMyPei(param) {
			this.purpose = param.data.code;
			this.rentFlag = '';
			this.getTableData();
		},
		handelClickMyPei2(param) {
			this.purpose = '';
			this.rentFlag = param.data.code;
			this.getTableData();
		},
		handleClickItem(item) {
			this.purpose = item.code;
			this.rentFlag = '';
			this.getTableData();
		},
		handleClickItem2(item) {
			this.purpose = '';
			this.rentFlag = item.code;
			this.getTableData();
		},
		async handleExport() {
			const url = '/gov/org/ichouse/export';
			const { pageSize, pageNo, formData } = this;
			axios({
				url: window.SITE_CONFIG['apiURL'] + url,
				method: 'post',
				data: {
					pageSize,
					pageNo,
					orgIdPath: this.orgIdPath,
					timeStart: this.formData.startDate,
					timeEnd: this.formData.endDate,
					purpose: this.purpose,
					rentFlag: this.rentFlag,
					orgId: this.orgId,
					orgType: this.orgType
				},
				responseType: 'blob'
			})
				.then(res => {
					let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
					console.log('filename', fileName);
					let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
					var url = window.URL.createObjectURL(blob);
					var aLink = document.createElement('a');
					aLink.style.display = 'none';
					aLink.href = url;
					aLink.setAttribute('download', fileName);
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink); //下载完成移除元素
					window.URL.revokeObjectURL(url); //释放掉blob对象
				})
				.catch(err => {
					console.log('获取导出情失败', err);
					return this.$message.error('网络错误');
				});
		},
		getOrgTreeList() {
			const { user } = this.$store.state;
			this.$http
				.post('/gov/org/customeragency/agencygridtree', {})
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg);
					} else {
						let data = res.data;
						console.log('获取组织树成功', data);
						// let { agencyList, subAgencyList } = data;
						// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }];
						// this.orgOptions = this.deepTree(_arr);
						this.orgOptions = [];
						this.optionData = data;
						this.orgOptions.push(data);
						this.orgId = data.agencyId;
						this.orgIdPath = data.orgIdPath;
						this.orgType = data.level;
						this.getTableData();
						this.getsubData();
						this.getsubData2();
					}
				})
				.catch(() => {
					return this.$message.error('网络错误');
				});
		},
		handleSearch(val) {
			this.pageNo = 1;
			this.purpose = '';
			this.rentFlag = '';
			this.getTableData();
			this.getsubData();
			this.getsubData2();
		},
		handleChangeAgency(val) {
			let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
			let tmp = this.formData.orgId;

			if (tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) {
				this.orgId = this.formData.orgId;
				this.orgIdPath = obj.orgIdPath;
				this.orgType = obj.level;
			} else {
				this.orgId = this.orgOptions.agencyId;
				this.orgIdPath = this.orgOptions.orgIdPath;
				this.orgType = this.orgOptions.level;
			}
		},

		deepTree(arr) {
			if (Array.isArray(arr)) {
				return arr.map(item => {
					return {
						...item,
						subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null
					};
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/buttonstyle.scss';
@import '@/assets/scss/modules/management/list-main.scss';
@import '@/assets/scss/modules/shequzhili/event-info.scss';
.legend {
	display: flex;
	flex-flow: row wrap;
	.legend-row {
		cursor: pointer;
		min-width: 100px;
		display: flex;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 25px;
		width: 160px;
		.kuai {
			width: 12px;
			height: 12px;
			margin-right: 10px;
			border-radius: 4px;
		}
		.content {
			.name {
				font-size: 14px;
				color: #999;
				margin-bottom: 10px;
			}
			.num {
				font-size: 16px;
				font-weight: bold;
				display: inline-block;
			}
			.unit {
				font-size: 16px;
				display: inline-block;
				margin-left: 7px;
			}
		}
	}
}
//这个是单独的，带图片
.legend2 {
	// display: flex;
	// flex-flow: row wrap;

	.legend-row {
		cursor: pointer;
		width: 100%;
		display: flex;
		margin-bottom: 16px;
		width: 160px;
		.kuai {
			margin-right: 10px;
			border-radius: 4px;
			img {
				width: 40px;
				height: 40px;
			}
		}
		.content {
			display: flex;
			align-items: center;
			.name {
				font-size: 14px;
				color: #999;
				width: 60px;
			}
			.num {
				font-size: 16px;
				font-weight: bold;
				display: inline-block;
			}
			.unit {
				font-size: 16px;
				display: inline-block;
				margin-left: 7px;
			}
		}
	}
}
.btnSearch {
	width: 100px;
	height: 36px;
	background: #2195fe;
	box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31);
	border-radius: 6px;
	color: #fff;
}

.div_search {
	.item_width_2 {
		width: 200px;
	}
}
// /这里是不一样的,居左，从下对齐
.census_searchcensus2 {
	text-align: center;
	margin: 0 auto;
	display: flex;

	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 0px;
	margin-top: 0px;
	.census_searchcensus_box {
		align-items: flex-end;
		display: flex;
		img {
			width: 64px;
			height: 64px;
			margin-right: 20px;
		}
		h2 {
			font-size: 28px;
			color: #333333;

			text-align: left;
			line-height: 40px;
			margin: 0px;
		}
		h3 {
			font-size: 14px;
			color: #333333;

			text-align: left;

			margin: 0px;
			font-weight: normal;
		}
	}
}
.div_table {
	padding: 30px !important;
	.table {
		margin-top: 16px !important;
	}
}
.div_table_title {
	margin-top: -10px;
	line-height: 30px;
	font-size: 20px;

	font-weight: bold;
	color: #333333;
}
.diy-button--output {
	width: 100px;
	height: 38px;
	z-index: 99;
	background: #feb349;
	box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31);
	border-radius: 6px;
	color: #fff;
}
.flex {
	display: flex;
	.width1 {
		width: 220px;
		margin-right: 50px;
		.box {
			height: 220px;
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
	}
	.flex1 {
		flex: 1;
		.box {
			height: 220px;
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
	}
}
</style>