|
|
|
@ -1,6 +1,60 @@ |
|
|
|
<template> |
|
|
|
<div class="stzone"> |
|
|
|
<h1>系统设置</h1> |
|
|
|
<!-- 新增服务器 --> |
|
|
|
<div class="stadd"> |
|
|
|
<div class="stitem"> |
|
|
|
<label>服务器名称：</label> |
|
|
|
<input type="text" placeholder="请输入服务器名称"> |
|
|
|
</div> |
|
|
|
<div class="stitem"> |
|
|
|
<label>服务器IP：</label> |
|
|
|
<input type="text" placeholder="请输入服务器IP"> |
|
|
|
</div> |
|
|
|
<div class="stitem"> |
|
|
|
<label>服务器端口：</label> |
|
|
|
<input type="text" placeholder="请输入服务器端口"> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="stitem"> |
|
|
|
<button>新增</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- 监控的服务器列表 --> |
|
|
|
<div class="msbox"> |
|
|
|
<div class="msdiv"> |
|
|
|
<table class="mstable"> |
|
|
|
<tr> |
|
|
|
<th>服务器名称</th> |
|
|
|
<th>服务器IP</th> |
|
|
|
<th>服务器端口</th> |
|
|
|
<th>操作</th> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>服务器1</td> |
|
|
|
<td>192.168.1.1</td> |
|
|
|
<td>8080</td> |
|
|
|
<td> |
|
|
|
<button>编辑</button> |
|
|
|
<button>删除</button> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td>服务器2</td> |
|
|
|
<td>192.168.1.2</td> |
|
|
|
<td>8080</td> |
|
|
|
<td> |
|
|
|
<button>编辑</button> |
|
|
|
<button>删除</button> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
</table> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
@ -8,8 +62,63 @@ |
|
|
|
.stzone { |
|
|
|
width: 1200px; |
|
|
|
margin: 0 auto; |
|
|
|
background-color: #f5f5f5; |
|
|
|
|
|
|
|
float: left; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.stadd { |
|
|
|
padding: 20px 10px 10px 14px; |
|
|
|
|
|
|
|
margin-top: 20px; |
|
|
|
margin-bottom: 20px; |
|
|
|
background-color: #fff; |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
.stadd .stitem { |
|
|
|
width: 25%; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.msdiv { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 10px; |
|
|
|
background-color: #f5f5f5; |
|
|
|
/* background-color: #eee9e9; */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 表格间隔变色 */ |
|
|
|
.msdiv .mstable { |
|
|
|
width: 100%; |
|
|
|
background-color: #fff; |
|
|
|
border: 1px solid #f8efef; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.msdiv .mstable tr { |
|
|
|
height: 36px; |
|
|
|
line-height: 36px; |
|
|
|
/* background-color: #fff; */ |
|
|
|
} |
|
|
|
|
|
|
|
.msdiv .mstable tr:hover { |
|
|
|
background-color: #f8efef; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.msdiv .mstable tr td { |
|
|
|
padding-left: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 设置偶数行的背景颜色 */ |
|
|
|
tr:nth-child(even) { |
|
|
|
background-color: #f2f2f2; |
|
|
|
} |
|
|
|
|
|
|
|
/* 设置奇数行的背景颜色 */ |
|
|
|
tr:nth-child(odd) { |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
