<template>
    <div class="stzone">
        <!-- 新增服务器 -->
        <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 v-for="val in serverlist" :id="val.id">
                        <td>{{val.scname}}</td>
                        <td>{{val.addr}}</td>
                        <td>{{ val.port }}</td>
                        <td>
                            <router-link :to="'/sce?id='+val.id">编辑</router-link>
                        </td>
                    </tr>
 
                </table>

            </div>
        </div>
    </div>
</template>
<style scoped>
/* 系统设置 */
.stzone {
    width: 1200px;
    margin: 0 auto;

    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>
<script>
import { Sclist } from '@/api/scinfo'
export default {
    data() {
        return {
            serverlist: []
        }
    },
    mounted() {
        this.getscdb()
    },
    methods: {
        getscdb() {
            Sclist().then(res => {
                this.serverlist = res.data
            })
        }
    }
}
</script>