v3-lab-xcx/pages_manage/views/gradingControl/infoPage.vue

<template>
	<view class="gradingControl-infoPage">
		<view class="text-box">
			<view>管控名称:</view>
			<view>{{newData.data1}}</view>
		</view>
		<view class="text-box">
			<view>二级单位:</view>
			<view>{{newData.data3}}</view>
		</view>
		<view class="text-box">
			<view>安全分类:</view>
			<view>{{newData.data4}}</view>
		</view>
		<view class="text-box">
			<view>安全分级:</view>
			<view>{{newData.data5}}</view>
		</view>
		<view class="text-box">
			<view>管控描述:</view>
			<view>{{newData.data2}}</view>
		</view>
		<view class="text-box">
			<view>执行状态:</view>
			<view :class="newData.data6?'colorA':'colorB'">{{newData.data6?'已执行':'未执行'}}</view>
		</view>
		<view class="text-box" v-if="newData.data6">
			<view>执行人:</view>
			<view>{{newData.data7}}</view>
		</view>
		<view class="text-box" v-if="newData.data6">
			<view>执行时间:</view>
			<view>{{newData.data8}}</view>
		</view>
		<view class="text-box" v-if="newData.data6">
			<view>执行备注:</view>
			<view>{{newData.data9}}</view>
		</view>
		<view class="text-box" v-if="!newData.data6">
			<view>执行备注:</view>
			<textarea v-model="newData.inputData" class="input-box"
			placeholder="请输入执行备注" maxlength="50"></textarea>
		</view>
		<view class="null-p"></view>
		<view class="button-p" v-if="!newData.data6">完成</view>
	</view>
</template>

<script>
	export default {
		name: "gradingControl-infoPage",
		data() {
			return {
				//列表数据
				newData: {
					data1: '管控名称管控名称管控名称管控名称管控名称管控名称管控名称管控名称管控名称管控名称管控名称管控名称',
					data2: '管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述管控描述',
					data3: '二级单位',
					data4: '安全分类',
					data5: '安全分级',
					data6: false,
					data7: '执行人',
					data8: '执行时间',
					data9: '执行备注',
				},
				inputData:"",
			}
		},

		onLoad(option) {

		},
		onShow() {

		},
		methods: {

		}
	}
</script>

<style lang="stylus" scoped>
	.gradingControl-infoPage {
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 0 20rpx;
		
		.text-box:nth-child(1){
			margin-top:30rpx;
		}
		.text-box {
			display: flex;
			font-size: 32rpx;
			color: #333;

			view:nth-child(1) {
				width: 160rpx;
				line-height: 60rpx;
			}

			view:nth-child(2) {
				flex: 1;
				line-height: 40rpx;
				padding: 10rpx 0;
			}

			.colorA {
				color: #0183FA;
			}

			.colorB {
				color: #666;
			}
			.input-box{
				margin-top:20rpx;
				height:200rpx;
				width:500rpx;
				padding:10rpx;
				border:1px solid #dedede;
				border-radius:12rpx;
			}
		}
		.null-p{
			flex:1;
		}
		.button-p{
			font-size: 32rpx;
			text-align: center;
			line-height:60rpx;
			width:200rpx;
			border-radius:8rpx;
			margin:40rpx auto;
			background-color: #0183FA;
			color:#fff;
		}
	}
</style>