118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<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>
|