moin_app/pages/sub/batchExecution/executionDetails.vue

<template>
	<view class="main">
		<view class="pad">
			<view class="top_row">
				<view class="flex">
					<view class="icon">
						<image src="@/static/images/icon (9).png" mode=""></image>
					</view>
					<view class="text">192.168.1.44</view>
				</view>
				<view class="flex">
					<view class="text">已完成</view>
					<view class="icon" style="width: 26rpx;height: 24rpx;">
						<image src="@/static/images/icon (5).png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="blackBg">
				<view class="ul">
					<view class="tit">#准备执行命令</view>
					<view class="li">
						<view class="lab">执行用户</view>
						<view class="val">root@123</view>
					</view>
				</view>
				<view class="ul">
					<view class="tit">#执行命令</view>
					<view class="li">
						<view class="lab skyBlue">eho 123</view>
						<view class="lab skyBlue">eho 123</view>
					</view>
				</view>
				<view class="ul">
					<view class="tit">#开始执行</view>
					<view class="li">
						<view class="lab">123</view>
						<view class="lab">12345</view>
					</view>
				</view>
				<view class="ul">
					<view class="tit">#命令执行完毕</view>
					<view class="li">
						<view class="lab">exitcode</view>
						<view class="val">0</view>
					</view>
					<view class="li">
						<view class="lab">结束时间</view>
						<view class="val">0</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Watermark from "@/common/js/waterMark.js";
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
		
			/* 给系统所有页面加水印*/
			// 第一个参数:水印文字  第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色
			Watermark.set("用户名", '', '#8c9093');
		
		
			// /* 给当前页面加水印*/
			// // 第一个参数:水印文字  第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色
			// Watermark.set("cc-innovation.gd", this.$refs.content, 'red');
		
		},
	}
</script>

<style lang="scss" lang="scss">
	.main {
		.pad {
			background-color: #fff;
		}
	  .top_row {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  height: 72rpx;
		  border: 1rpx solid  $themC;
		  background-color: #e8f4ff;
		  padding: 0 30rpx;
	    .flex {
	      .icon {
	        width: 36rpx;
			height: 32rpx;
	      }
		  
	
	      .text {
			font-size: 26rpx;
			color: $themC;
			margin: 0 16rpx;
	      }
	    }
	  }
	
	  .blackBg {
		  background: #000;
		  padding: 16rpx;
		  margin-top: 30rpx;
		  border-radius: 8rpx;
	    .ul {
			margin-bottom: 40rpx;
	      .tit {
			font-size: 28rpx;
			color: #6cb71d;
			margin-bottom: 4rpx;
	      }
	
	      .li {
			  display: flex;
			  font-size: 24rpx;
			  align-items: center;
			  margin-bottom: 4rpx;
	        .lab {
				color: #ffffff;
	        }
	
	        .val {
				color: #4a62c3;
				margin-left: 20rpx;
	        }
			.skyBlue {
				color: #55d7b4;
			}
	      }
	    }
	  }
	}
</style>