<template>
    <div class="Cn-page">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'Page',
    data() {
        return {
            timer: null
        }
    },
    methods: {

    }
}
</script>

<style lang="scss">
// mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
@for $i from 0 through 100 {
    .mt#{$i} {
        margin-top: #{$i}px !important;
    }

    .mr#{$i} {
        margin-right: #{$i}px !important;
    }

    .mb#{$i} {
        margin-bottom: #{$i}px !important;
    }

    .ml#{$i} {
        margin-left: #{$i}px !important;
    }

    .pt#{$i} {
        padding-top: #{$i}px !important;
    }

    .pr#{$i} {
        padding-right: #{$i}px !important;
    }

    .pb#{$i} {
        padding-bottom: #{$i}px !important;
    }

    .pl#{$i} {
        padding-left: #{$i}px !important;
    }
}

.Cn-page {
    margin: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .el-descriptions__header {
        margin-bottom: 10px;
    }
}
</style>
