<script>
export default {
    data() {
        return {
            isRouterAlive: true
        };
    },
    methods: {
        //   inject: ['reload'],   在页面中注入此方法，  使用this.reload() 达到F5的效果
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        }
    },
    provide() {
        return {
            reload: this.reload
        };
    },
    mounted() {
        const screenWidth = window.innerWidth
        let bodyStyle = document.body.style
        let appStyle = document.getElementById('app').style;
        if (document.documentElement.clientWidth / document.documentElement.clientHeight < 4224 / 1152) {
            appStyle.width = `2048px`
            bodyStyle.transform = `scale(${screenWidth / 2048})`
        } else {
            appStyle.width = `4224px`
            bodyStyle.transform = `scale(${screenWidth / 4224})`
        }
        window.addEventListener('resize', () => {
            const screenWidth = window.innerWidth
            let bodyStyle = document.body.style
            let appStyle = document.getElementById('app').style;
            if (document.documentElement.clientWidth / document.documentElement.clientHeight < 4224 / 1152) {
                appStyle.width = `2048px`
                bodyStyle.transform = `scale(${screenWidth / 2048})`
            } else {
                appStyle.width = `4224px`
                bodyStyle.transform = `scale(${screenWidth / 4224})`
            }
        })

    },
    beforeMount() {

    }
};
</script>

<template>
    <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
    </div>
</template>

<style lang="less">
.amap-logo {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
}

body {
    // width: 4224px;
    height: 1152px;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    background-color: rgb(27, 28, 30);
    transform-origin: left top;
}

#app {
    width: 100%;
    height: 100%;
}

.wrapClassName {
    .table-striped1 {
        background: #2E3C4C;
        color: #fff;
    }

    .ant-table-wrapper .ant-table {
        background: inherit;
    }

    .ant-pagination .ant-pagination-disabled .ant-pagination-item-link {
        background: #2E3C4C;
        color: #FFFFFF;
    }

    .ant-pagination .ant-pagination-item-active {
        background: #4680FF;

        a {
            color: #FFFFFF;
        }
    }

    .ant-table-thead {
        .ant-table-cell {
            background: #2E3C4C;
            color: #fff;
            border: none;

            &::before {
                display: none;
            }
        }
    }

    .ant-modal {
        top: 200px;
    }

    .ant-table-tbody>tr>td {
        border: none !important;
    }

    .table-striped2 {
        background: #020c2a;
        color: #fff;
    }

    .ant-modal-header {
        background: rgba(0, 0, 0, 0);
    }

    .ant-modal-close {
        right: 28px;
    }

    .ant-modal-close-icon {
        color: #fff;

        svg {
            width: 24px;
            height: 24px;
        }
    }

    .ant-modal-content {
        padding: 0 45px;
        padding-top: 45px;
        width: 1197px;
        height: 735px;
        background: url(@/assets/img/popup_bg.png) no-repeat !important;
        background-size: 100% 100% !important;
    }

    .ant-table-container {
        ::-webkit-scrollbar {
            width: 11px;
            height: 11px;
        }

        ::-webkit-scrollbar-track {
            background: #273957;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #3A93FF;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    }
    .ant-table-wrapper .ant-table-tbody >tr.ant-table-row:hover>td{
        background: inherit;
    }
    .ant-table-wrapper .ant-table-tbody >tr.ant-table-row:hover>td, .ant-table-wrapper .ant-table-tbody >tr >td.ant-table-cell-row-hover{
        background: #3A93FF;

    }
    .ant-table-wrapper .ant-table-tbody>tr.ant-table-row:hover>td {
        background: #3A93FF;
    }

    .ant-pagination .ant-pagination-item {
        background: #2E3C4C;

        a {
            color: #fff;
        }
    }
    .ant-pagination-item-ellipsis,.ant-pagination-total-text{
        color: #fff;
    }
    .ant-pagination-item-link{
        span{
            color: #fff !important;
        }
    }
    .ant-table-wrapper .ant-table-pagination.ant-pagination {
        li {
            margin: 0 6px
        }
    }
}
</style>