<template>
    <div class="n_container">
        <!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
        <div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
        <div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
        <div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
        <div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
        <div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
        <div class="style_block" style="background: yellow;top: calc(100% / 3);bottom: 0"></div> -->
        <div class="n_header">
            <div class="n_header_h1">
                <h1>生产数据</h1>
            </div>
            <div class="n_header_h2">
                <h2>辽宁晟华耐火材料有限公司</h2>
            </div>
        </div>
        <div class="left_bg"></div>
        <div class="button_bg"></div>
        <div class="n_body_container">
            <div class="n_left_wraper">
                <left-page></left-page>
            </div>
            <div class="n_right_wraper">
                <right-page></right-page>
            </div>
        </div>
    </div>
</template>

<script>
import leftPage from './left.vue'
import rightPage from './right.vue'
export default {
  components: {
    leftPage,
    rightPage
  }
}
</script>

<style lang="stylus" scoped>
.n_container
    position relative
    width 100%
    height 100%
    background center / 100% url('../../../../images/bg-home_left.jpg') no-repeat
    overflow hidden
.n_header
    position absolute
    left 0
    top 0
    width 100%
    height 181px
    background center / 100% url('../../../../images/bg-top_left.png') no-repeat
.n_header_h1
    width: 100%;
    height: 100%;
    padding-top 26px
    h1
        font-size: 60px;
        font-family: 'YouSheBiaoTiHei';
        font-weight: 400;
        color: transparent;
        line-height: 44px;
        opacity: 0.89;
        letter-spacing 18px
        background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
        filter: drop-shadow(#092F6D 1px 4px 1px);
        -webkit-background-clip: text;
        background-clip: text;
        text-align right
        margin-right -9px
.n_header_h2
    position absolute
    top 18px
    left 29px
    width 562px
    height 31px
    h2
        font-size: 42px;
        font-family: 'YouSheBiaoTiHei';
        font-weight: 400;
        color: transparent;
        line-height: 29px;
        background: linear-gradient(0deg, #B6C3D3 0%, #E3E9F2 53.3154296875%, #FEFEFE 100%);
        -webkit-background-clip: text;
        background-clip: text;
.left_bg
    position absolute
    left 0
    top 111px
    width 34px
    height 839px
    background center / 100% url('../../../../images/bg-left.png') no-repeat
.button_bg
    position absolute
    left 0
    bottom 0
    width 100%
    height 46px
    background center / 100% url('../../../../images/bg-button_left.png') no-repeat
.n_body_container
    width 100%
    height 100%
    padding 125px 0 50px 50px
    display: flex;
    justify-content: space-between;
    align-items: center;
.n_left_wraper
    width 935px
    height 100%
.n_right_wraper
    width calc(100% - 965px)
    height 100%
    padding-top 5px
</style>
