<template>
    <div class="desktop-container">
        <div class="container-left">
            <user-center @company-name="onCompanyName"></user-center>
        </div>
        <div class="container-right">
            <div class="shcool-name">欢迎登录{{ companyName }}校园办公平台</div>
            <div class="content-wrapper">
                <message-center></message-center>
                <div class="placeholder"></div>
                <my-app></my-app>
            </div>
        </div>
    </div>
</template>

<script>
import VHeader from '@/common/header/VHeader'
export default {
    name: 'Desktop',
    components: {
        VHeader,
        UserCenter: () => import('./components/UserCenter'),
        MessageCenter: () => import('./components/MessageCenter'),
        MyApp: () => import('./components/MyApp')
    },
    data () {
        return {
            companyName: ''
        }
    },
    methods: {
        onCompanyName (val) {
            this.companyName = val
        }
    }
}
</script>

<style lang="stylus" scoped>
boderColor = #DCDFE6
.desktop-container
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    padding 15px
    display flex
    .container-left
        flex 0 0 420px
        height 100%
        // border 1px solid boderColor
        margin-right 15px
        overflow hidden
    .container-right
        flex 1
        height 100%
        // border 1px solid boderColor
        overflow hidden
        display flex
        flex-direction column
.content-wrapper
    flex 1
    padding-top 15px
    display flex
    flex-direction column
    overflow hidden
.shcool-name
    flex-shrink 0
    position relative
    height 110px
    background-image url('./../../../assets/images/desktop_school.jpg')
    background-repeat no-repeat
    background-size cover
    line-height 110px
    text-align center
    font-size 28px
    font-weight 600
    color #027DB4
.placeholder
    flex-shrink 0
    height 15px
</style>
