<template>
    <div id="app">
        <router-view></router-view>
        <y-toast></y-toast>
        <y-dialog :dis-global="false"></y-dialog>
    </div>
</template>

<script>
    import Vue from 'vue';
    import yToast from "./components/yToast";
    import yDialog from "./components/v2/yDialog";

    var zindex = 100000;
    Vue.use(yToast,{
        getZIndex(){
            return zindex++;
        }
    });
    Vue.use(yDialog,{
        getZIndex(){
            return zindex++;
        }
    });

    export default {
        name: 'app',
    }
</script>

<style lang="scss">
    @import "./css/topic.scss";

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    .page {
        padding: 10px;

        .section {
            margin-bottom: 10px;
        }

        .eg_view {
            padding: 10px 0;
            text-align: left;
        }

        h2 {
            font-size: 24px;
            text-align: left;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }

        h3 {
            font-size: 16px;
            text-align: left;
        }

        .eg_useage {
            textarea {
                background: #eee;
                resize: none;
                width: 100%;
                padding: 5px;
                box-sizing: border-box;
            }
        }
    }
</style>
