moin_app/pages/sub/logPanel/logPanel.vue

<template>
	<view class="main">
		<view class="searchBox">
			<searchRow placeholder="请输入机器/名称/路径/命令" />
		</view>
		
		<view class="ul">
			<view class="total">共3条</view>
			<view class="card">
				<view class="row">
					<view class="lab">机器</view>
					<view class="val">192.68.1.44主机</view>
				</view>
				<view class="row">
					<view class="lab">名称</view>
					<view class="val ">host</view>
				</view>
				<view class="row">
					<view class="lab">路径</view>
					<view class="val blue">host</view>
				</view>
				<view class="row">
					<view class="lab">命令</view>
					<view class="val ">host</view>
				</view>
				<view class="row">
					<view class="lab">偏移量（行）</view>
					<view class="val ">host</view>
				</view>
				<view class="row">
					<view class="lab">修改时间</view>
					<view class="val ">host</view>
				</view>
				<view class="row">
					<view class="lab">创建时间</view>
					<view class="val ">host</view>
				</view>
				 
				<view class="status_row">
					<view class="blueTxt">
						<view class="icon">
							<image src="../../../static/images/icon (21).png" mode=""></image>
						</view>
						<view class="text">修改</view>
					</view>
					<view class="blueTxt" style="color: #ff2222;">
						<view class="icon">
							<image src="../../../static/images/icon (17).png" mode=""></image>
						</view>
						<view class="text">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="addBtn">
			<view class="btnBg" @click="$goPage('/pages/sub/logPanel/addNewLog')">添 加</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 
			}
		},
		methods: {
			 
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 16rpx 30rpx;
		background-color: #fff;
	}
	.addBtn {
		text-align: center;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		.btnBg {
			line-height: 96rpx;
			height: 96rpx;
		}
	}
	.tabs {
		background-color: #fff;
		margin-top: 8rpx;
		padding: 16rpx 0;
	}
	
	.ul {
		width: 100%;
		padding: 0 30rpx 140rpx 30rpx;
	  .total {
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		color: #999;
		text-align: right;
	  }
	
	  .card {
		  padding: 10rpx 28rpx;
	    .row {
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 16rpx 0;
			font-size: 26rpx;
			color: #333;
	      .lab {
	      }
	
	      .val {
			  &.blue {
				  color: $themC;
			  }
			  &.hui {
				  color: #999;
			  }
			  &.yellow {
				  color: #fc7710;
			  }
	      }
		  .flex {
			  display: flex;
			  justify-content: flex-end;
			  .icon {
				  width: 28rpx;
				  height: 30rpx;
				  margin-right: 20rpx;
			  }
		  }
	    }
		.status_row {
			color: $themC;
			font-size: 28rpx;
			font-weight: 600;
			display: flex;
			padding:  20rpx 0;
			.blueTxt {
				flex: 1;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 14rpx;
				}
			}
		}
	  }
	}
</style>