zhgkpt-datav/app/src/views/PoliceSituation/components/MobilizeStrength.vue

<template>
	<div class="maintenance-supervision">
		<div class="plate">
			出动3个支队（渝中、北碚、大渡口），带队领导章三（渝中支队，185232323233，副支
			队长）李四（九龙坡支队，1852323223，副支队长），王五（大渡口支队，1852323223，副
			支队长）出动20位作战人员，4辆【泡沫车、3辆水罐车、2辆登高作业车。
		</div>
		<div>
			<div class="row header">
				<span class="time">车牌号</span>
				<span class="person">车辆类型</span>
				<span class="result">车速</span>
				<span class="result1">状态</span>
				<span class="result2">预计到场时间</span>
				<span class="result3">实际到时间</span>
			</div>
			<VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
				<ul class="item">
					<li class="row" v-for="(item, index) in list" :key="index">
						<span class="time">{{ item[0] }}</span>
						<span class="person">{{ item[1] }}</span>
						<span class="result">{{ item[2] }}</span>
						<span class="result1">{{ item[3] }}</span>
						<span class="result2">{{ item[4] }}</span>
						<span class="result3">{{ item[5] }}</span>
					</li>
				</ul>
			</VueSeamlessScroll>
		</div>
		<div class="btn">火场文书</div>
		<div class="writ">
			<div class="writTab">
				<div class="wenshuTxt">最新文书</div>
				<div class="wenshuImg">图标</div>
			</div>
			<div class="content">
				<black v-for="(item,index) in 1" :key="index">
					<div style="">
						<div class="contFlex">
							<div class="contType">警情状态</div>
							<div class="conTime">2023 5/13 15:21:01</a></div>
						</div>
						<div class="contTxt">归档</div>
						<div class="contBox" style="margin: 6px 0;">15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119</div>
						<div class="contText">秀山土家族苗族自治县消防救援大队</div>
					</div>
				</black>
			</div>
		</div>
	</div>
</template>
<script>
	import VueSeamlessScroll from "vue-seamless-scroll";

	export default {
		name: 'MaintenanceSupervision',
		data() {
			return {
				list: [
					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
				],
				checked: 0,
			}
		},
		components: {
			VueSeamlessScroll
		},
		computed: {
			classOption() {
				return {
					singleHeight: 43,
				};
			},
		},
		methods: {
			change(idx) {
				this.checked = idx
				console.log("切换索引", idx)
			},
			resultType(text) {
				return {
					"合格": "#23f59d",
					"不合格": "#df575b",
					"是": "#23f59d",
					"否": "#df575b"
				} [text]
			}
		}
	}
</script>

<style scoped lang='less'>
	.writ {
		width: 521px;
	}

	.writTab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(14, 90, 105, 0.6);
		padding: 10px 12px;
		box-sizing: border-box;
	}
	.wenshuTxt{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 12px;
	}

	.content {
		padding: 6px 12px;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(49, 121, 173, 0.5) 0%, rgba(43, 101, 142, 0.245) 100%);
		height: 200px;
	}

	.contFlex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;
	}

	.contType {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 12px;
	}

	.conTime {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 12px;
	}

	.contTxt {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		margin-top: 4px;
	}
	.contBox{
		height: 100px;
		overflow: auto;
		line-height: 20px;
	}

	.contText {
		text-align: right;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 12px;
		line-height: 20px;
	}

	.btn {
		margin-bottom: 3px;
		text-align: center;
		line-height: 28px;
		width: 101px;
		height: 28px;
		border-radius: 4px;
		background: linear-gradient(180deg, rgba(0, 148, 255, 0.5) 0%, rgba(0, 148, 255, 0) 100%);
	}

	.plate {
		line-height: 18px;
		font-size: 12px;
		height: 79px;
		padding: 12px 15px;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(49, 121, 173, 0.5) 0%, rgba(43, 101, 142, 0.245) 100%);
	}

	.tab {}

	.maintenance-supervision {
		padding: 10px 10px 0px 10px;

		.maintenance-supervision_header {
			border-bottom: 1px solid #154956;
			padding-bottom: 2px;
		}

		.warp {
			height: 140px;
			margin: 0 auto;
			overflow: hidden;

			.item {
				list-style: none;
				padding: 0;
				margin: 0 auto;
				cursor: pointer;
			}
		}

		.header {
			color: #fff;
			height: 33px !important;
			line-height: 33px !important;
			background-color: rgba(0, 163, 255, 0.3) !important;
			color: #61DBFF;
			margin-top: 15px;
			margin-bottom: 6px;
		}

		.row,
		li,
		a {
			display: block;
			height: 39px;
			line-height: 39px;
			margin-bottom: 4px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			background-color: rgba(0, 0, 0, 0.2);

			.time,
			.person,
			.result {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.result1 {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.result2 {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.result3 {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>