xytSk-App/pages/orderFeedback/orderInformation.vue

<template>
	<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
		<u-status-bar></u-status-bar>
		<u-navbar
			:title="record.year+'年度调令第'+record.serial+'号'" 
			:autoBack="true" 
			:titleStyle="{
				fontSize:'18px'
			}" 
			:height='44'
			:safeAreaInsetTop=true
			leftIconSize='20'
			leftIconColor='rgb(153, 153, 153)'
		>
		</u-navbar>
		<u-tabs 
			:list="tabsOptions" 
			@click="tabsChange" 
			:scrollable=false
			class="tabsClass"
			:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
			:inactiveStyle="{color: '#606266',fontSize: '16px'}"
			lineColor="transparent"
			itemStyle="height: 44px"
		>
		</u-tabs>
		<div class="mybody">
			<uniZl v-if="tabsVal==='uniZl'" :record="record"></uniZl>
			<uniFk v-if="tabsVal==='uniFk'" :record="record"></uniFk>
		</div>
	</view>
</template>

<script>	
	import moment from 'moment'
	import uniZl from './zl.vue';
	import uniFk from './fk.vue'
	const tabsOptions = [
					{
						name:'调度指令',
						components:'uniZl'
					},
					{
						name:'执行反馈',
						components:'uniFk'
					},
				]

	export default {
		components: { uniZl, uniFk },
		data() {
			return {
				tabsOptions:tabsOptions,
				tabsVal:'uniZl',
				record:{}
			};
		},
		onLoad(props){
			const myRecord = JSON.parse(props.obj)
			this.record = myRecord
		},
		methods: {
			tabsChange(item) {
				this.tabsVal = item.components
			}
		},
	}
</script>

<style lang="scss" scoped>
.myTitleStyle{
	font-size: 30px;
	background-color: red;
	height: 200px;
}
.tabsClass{
	background-color: #ffffff;
	margin-top: 44px;
	height: 44px;
	padding: 0 40px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.searchBox_right_btn{
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.is-hover{
	background-color: #eee;
}
.checkItem{
	margin-right: 10px;
}
.tmPicker{
	width: 100%;
	height: 30px;
	border: 1px solid rgba(240, 240, 240, 1);
	border-radius: 4px;
	margin-right: 10px;
	font-size: 14px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	// padding-left: 10px;
}
.mybody{
	background-color: #ffffff;
	margin: 5px 5px;
	// padding: 5px 20px;
	height: calc( 100vh - 100px );
	overflow: scroll;
}
.countNum{
	width: 100%;
	text-align: right;
	font-size: 13px;
}
.listItem{
	width: 100%;
	border-bottom: 1px solid #eee;
	padding: 10px 0;
	display: flex;
	flex-direction: column;
}
.row1{
	font-size: 14px;
	font-weight: 700;
	color: #333333;
	width: 100%;
	height: 30px;
	line-height: 30px;
}
.row2{
	font-size: 12px;
	color: #999999;
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>