系统设置

vue/afvue/src/views/Setting.vue

@@ -1,15 +1,124 @@
 <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>
+</template>
 <style scoped>
 /* 系统设置 */
 .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>