ioc-admin-ui/src/views/userManagement/personManagement/index.vue

<template>
    <div class="container">
        <div class="header">
            <el-button class="onlineUser" @click="activeShow()">
                <i class="el-icon-user-solid"></i>在用账户
            </el-button>
            <el-button class="disableUser" @click="deactiveShow()">
                <i class="el-icon-user"></i>停用账户
            </el-button>
            <div class="searchBox">
                <el-input v-model="input" placeholder="用户名；手机；单位" suffix-icon="el-icon-search"></el-input>
            </div>
            <el-button class="addUser">
                <i class="el-icon-user"></i>添加用户
            </el-button>
        </div>
        <div class="showTable">
            <activeuser v-show="show"></activeuser>
            <deactiveuser v-show="show1"></deactiveuser>
        </div>
    </div>
</template>

<script>
import activeuser from './tables/activeUser'
import deactiveuser from './tables/deactiveUser'
import table3 from './tables/table3'
import userinfo from './messageDialog/userInfo'


export default {
    name: "personManagement",
    components: { activeuser, deactiveuser, table3, userinfo, },
    data() {
        return {
            input: '',
            tabledata: [],
            show: true,
            show1: false,
            total: 0,
            currentPage: 1
        };
    },
    methods: {
        activeShow() {
            this.show = true;
            this.show1 = false;
        },
        deactiveShow() {
            this.show = false;
            this.show1 = true;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    position: fixed;
    left: 218px;
    top: 140px;
    right: 16px;
    height: -webkit-fill-available;
    margin-bottom: 20px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    .header {
        height: 59px;
        left: 218px;
        top: 125px;
        right: 16px;

        .onlineUser {
            position: absolute;
            top: 15px;
            left: 20px;
            bottom: 4px;
            width: 116px;
            height: 40px;
            line-height: 20px;
            border-radius: 3px 3px 0px 0px;
            //background-color: rgba(255, 255, 255, 1);
            color: rgba(0, 0, 0, 0.973);
            font-size: 14px;
            text-align: center;
            //border: 1px solid rgba(187, 187, 187, 1);
        }

        .disableUser {
            position: absolute;
            top: 15px;
            left: 135px;
            bottom: 4px;
            width: 116px;
            height: 40px;
            line-height: 20px;
            border-radius: 3px 3px 0px 0px;
            //background-color: rgba(255, 255, 255, 1);
            color: rgba(0, 0, 0, 0.973);
            font-size: 14px;
            text-align: center;
            //border: 1px solid rgba(187, 187, 187, 1);
        }

        .searchBox {
            position: absolute;
            top: 16px;
            right: 141px;
            bottom: 11px;
            width: 224px;
            height: 30px;
            line-height: 20px;
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: center;
            border: 1px solid rgba(217, 217, 217, 1);
        }

        .addUser {
            position: absolute;
            right: 16px;
            top: 17px;
            width: 113px;
            height: 40px;
            border-radius: 4px;
            background-color: rgba(64, 149, 229, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            text-align: center;
        }
    }

    .showTable {
        padding: 10px 16px 0 20px;
        //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    }
}
</style>