su_nan-mobile_h5/src/pages/economicData/detial.vue

<template>
	<div class="settleIn">
		<div class="tabs-box">
			<div class="form-part">
				<van-form>
					<van-field
					 class="input-item"
					 label="年份"
					 disabled
					 v-model="reportFrom.year"
					 placeholder="请填写"
					 input-align="right"
					/>
					<van-field
					 class="input-item"
					 label="月份"
					 disabled
					 v-model="reportFrom.month"
					 placeholder="请填写"
					 input-align="right"
					/>

					<van-field
					 class="input-item"
					 label="*营业收入（万元）"
					 disabled
					 v-model="reportFrom.businessIncome"
					 placeholder="请填写"
					 input-align="right"
					/>
					<van-field
					 class="input-item"
					 disabled
					 label="*税收收入（万元）："
					 v-model="reportFrom.taxRevenue"
					 input-align="right"
					 placeholder="请填写"
					/>
					<van-field
					 class="input-item"
					 disabled
					 label="*投融资金额（万元）"
					 v-model="reportFrom.investment"
					 input-align="right"
					 placeholder="请填写"
					/>

					<van-field
					 class="input-item"
					 disabled
					 label="*员工总人数（人）"
					 v-model="reportFrom.staffNumber"
					 input-align="right"
					 placeholder="请填写"
					/>
					<van-field
					 disabled
					 class="input-item item-width"
					 input-align="right"
					 v-model="reportFrom.undergraduateNumber"
					 label="*本科以上（含本科）员工的人数"
					 placeholder="请填写"
					/>
				</van-form>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getEconomyReportDetail
} from '@/service/api_economyReport';
export default {
	data() {
		return {
			reportFrom: {}
		};
	},
	mounted() {
		this.getDetial();
	},

	methods: {

		// 获取详情
		getDetial(){
			let reqData = {
				id: this.getQueryString('id')
			}
			getEconomyReportDetail(reqData).then((res) => {
				this.reportFrom = res.data;
			})
		},

		// 获取页面携带数据
		getQueryString(name) {
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		}

	}
};
</script>

<style lang="scss" type="text/scss" scoped>
.settleIn {
	padding: 0 0 140px;
	overflow-y: auto;
	/deep/.van-tabs__wrap {
		height: 100px;
		background: #ffffff;
		box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
		margin-bottom: 10px;
	}

	.tabs-box {
		margin: 20px 0;
		.form-part {
			padding: 4px 0 10px;
			overflow-y: auto;
			height: calc(100vh -280px);
			background: #fff;
			.input-item {
				/deep/.van-field__label {
					width: 320px;
					margin: 0;
				}
			}
			.item-width {
				/deep/.van-field__label {
					width: 450px;
				}
			}
		}
		.part-2 {
			overflow-y: auto;
			height: calc(100vh -160px);
			box-sizing: border-box;
			.card-item {
				margin: 0 30px 30px;
				.card-top {
					@include flex;
					.card-left {
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						height: 100px;
						.tit {
							width: 400px;
							font-size: 32px;
							color: #333;
							@include line-over;
						}

						.date {
							font-size: 28px;
							color: #999;
						}
					}
					.card-right {
						align-self: flex-start;
					}
				}

				.card-bottom {
					height: 80px;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
		}
	}
}
</style>