uni-zhihuikuangshan-2/pages/production/zaoquan/control_platform/driving/driving.vue

<template>
	<view>
		<view class="top">
			<image src="../img/top.jpg" mode="widthFix"></image>
		</view>

		<view class="container">
			<view class="info">
				<view class="item" v-for="(item,index) in info" :key="index">
					<view class="label">{{item.label}}</view>
					<view class="value">{{item.value}}</view>
				</view>
			</view>

			<view class="content">
				<view class="section section_2">
					<view class="title">
						<view class="left">掘进机信息</view>
					</view>
					<view class="inner">
						<view class="list">
							<view class="item" v-for="(item,index) in juejinji.data" :key="index">
								<view class="label">{{item.label}}</view>
								<view class="value">{{item.value}}</view>
							</view>
						</view>
						<view class="img">
							<view class="main">
								<image src="../img/juejinji.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="section" v-for="(item,index) in tab_info" :key="index">
					<view class="title">
						<view class="left">{{item.title}}</view>
					</view>
					<view class="inner">
						<view class="table_box">
							<uni-table emptyText="暂无更多数据">
								<uni-tr>
									<uni-th width="100" align="center" v-for="(item,index) in item.table.thead"
										:key="index">{{item}}</uni-th>
								</uni-tr>
								<uni-tr v-for="(item,index) in item.table.tbody" :key="index">
									<uni-td align="center" style="vertical-align: middle;">{{item.label}}</uni-td>
									<uni-td align="center" style="vertical-align: middle;">{{item.value}}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
						label: "工作面名称",
						value: "150201工作面胶带巷"
					},
					{
						label: "施工单位",
						value: "综掘二队"
					},
					{
						label: "生产组织模式",
						value: "二掘一修"
					},
					{
						label: "综掘机型号",
						value: "EBZ200M-2A"
					},
					{
						label: "截割功率",
						value: "200Kw"
					},
					{
						label: "巷道长度",
						value: "2667"
					},
					{
						label: "掘进断面",
						value: "23.31m²"
					},
					{
						label: "永久支护工艺",
						value: "锚、网、索、W钢带桁架联合支护"
					},
					{
						label: "胶带机型号",
						value: "DSJ100/40/160胶带输送机"
					},
					{
						label: "胶带机控制方式",
						value: "集控"
					}
				],

				juejinji: {
					data: [{
							label: "未掘进距离",
							value: "324.8m"
						},
						{
							label: "已掘进距离",
							value: "2344.2m"
						}
					]
				},
				
				tab_info: [
					{
						title: "机身姿态",
						table: {
							thead: ["参数名称", "值"],
							tbody: [{
									label: "倾仰角度(°)",
									value: "-0.09",
								},
								{
									label: "水平角度(°)",
									value: "91.47",
								},
								{
									label: "翻滚角度(°)",
									value: "0.2",
								},
								{
									label: "掘进机行走速度(mm/s)",
									value: "0",
								}
							]
						}
					},
					{
						title: "旋臂姿态",
						table: {
							thead: ["参数名称", "值"],
							tbody: [{
									label: "回旋角度(°)",
									value: "0",
								},
								{
									label: "升降角度(°)",
									value: "0",
								}
							]
						}
					},
					{
						title: "输入电压",
						table: {
							thead: ["参数名称", "值"],
							tbody: [{
									label: "弦线电压(V)",
									value: "0",
								}
							]
						}
					}
				]

			};
		},
		mounted() {
			this.get_data()
		},
		methods: {
			get_data() {
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.top {
		margin-top: -80rpx;

		image {
			width: 750rpx;
		}
	}

	.container {
		margin: -900rpx 0 0 0;
		position: relative;

		.info {
			margin: 40rpx 0;
			box-sizing: border-box;
			padding: 20rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 40rpx 10rpx;

			.item {
				text-align: center;
				padding-right: 10rpx;
				border-right: 1rpx solid #FFFFFF80;

				.label {
					font-size: 22rpx;
					color: #FFF;
					margin-bottom: 10rpx;
				}

				.value {
					flex-wrap: wrap;
					color: #FFF600;
					font-weight: 700;
				}
			}

			.item:nth-child(3n) {
				border: none;
			}
		}

		.content {
			background-color: #F7F7F7;
			border-radius: 35rpx 35rpx 0 0;
			box-sizing: border-box;
			padding: 35rpx;

			.section {
				margin-bottom: 40rpx;
				border-radius: 14rpx;
				overflow: hidden;

				.title {
					background: linear-gradient(-90deg, #FFFFFF, #E6FAFF);

					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					box-sizing: border-box;
					padding: 24rpx;

					.left {
						border-left: 6rpx solid #33C777;
						padding-left: 10rpx;
						font-size: 34rpx;
						font-weight: 700;
						color: #343434;
					}

					.right {
						font-size: 22rpx;
						color: #3394F9;
					}
				}

				.inner {
					min-height: 250rpx;
					background-color: #FFF;
							
					.table_box {
						width: 680rpx;
						border-radius: 20rpx;
						overflow: hidden;
							
						/deep/.uni-table-tr {
							background-color: #FFFFFF;
						}
							
						/deep/.uni-table-th {
							border: none;
							background-color: #FFFFFF;
							padding: 30rpx 20rpx;
							color: #7A7A7A;
							font-size: 34rpx;
							font-weight: 700;
							border-bottom: 1px #EBEEF5 dashed;
						}
							
						/deep/.uni-table-td {
							font-size: 28rpx;
							color: #A1A1A1;
							border-bottom: 1px #EBEEF5 dashed;
							padding: 30rpx 20rpx;
						}
							
						/deep/.uni-table-td:nth-child(2),
						.uni-table-td:nth-child(3) {
							color: #000;
						}
							
						/deep/.table--border {
							border: none;
						}
					}
							
				}
			}

			.section_2 {
				.inner {
					.list {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						gap: 0 40rpx;

						.item {
							height: 90rpx;
							display: flex;
							align-items: center;
							justify-content: space-around;

							.label {
								width: 140rpx;
								color: #8D8D8D;
								font-size: 26rpx;
							}

							.value {
								width: 100rpx;
								font-size: 26rpx;
							}
						}
					}

					.img {
						margin: 20rpx auto;
						padding-bottom: 20rpx;
						position: relative;

						.main {
							text-align: center;

							image {
								width: 546rpx;
							}
						}
					}
				}
			}
			
		}
	}
</style>