<template>
    <div class="n_container">
        <div class="n_header">
            <div class="n_header_h1">
                <h1>晟华生产数</h1>
            </div>
        </div>
        <div class="n_body_container">
            <div class="n_body_container_wraper">
                <div class="status_wrap">
                    <div class="status_item">
                        <div class="status_tip green"></div>
                        <div class="status_name">运行中/困料中</div>
                    </div>
                    <div class="status_item">
                        <div class="status_tip yellow"></div>
                        <div class="status_name">待机/困料完成</div>
                    </div>
                    <div class="status_item">
                        <div class="status_tip gray"></div>
                        <div class="status_name">关机</div>
                    </div>
                    <div class="status_item">
                        <div class="status_tip red"></div>
                        <div class="status_name">故障/困料超时</div>
                    </div>
                </div>
                <div class="center_content">
                    <div class="machine_wrap yyj_wrap_1">
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_2.png" alt="">
                        </div>
                        <div class="sh_machine jzjcss">
                          <img src="../../../images/workshop/jzjcss_yellow.png" alt="">
                        </div>
                        <div class="sh_machine yyj">
                          <img src="../../../images/workshop/yyj_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_1.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap yyj_wrap_2">
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_1.png" alt="">
                        </div>
                        <div class="sh_machine jzjcss">
                          <img src="../../../images/workshop/jzjcss_yellow.png" alt="">
                        </div>
                        <div class="sh_machine yyj">
                          <img src="../../../images/workshop/yyj_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_1.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_3.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_2.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_2">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_3">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_2_gray.png" alt="">
                        </div>
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_4.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_3.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_2 cyj_wrap_4">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap yyj_wrap_3">
                        <div class="sh_machine yyj">
                          <img src="../../../images/workshop/yyj_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1 cyj_wrap_5">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                    </div>
                    <div class="machine_wrap cyj_wrap_1 cyj_wrap_6">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_2">
                          <img src="../../../images/workshop/cyj_1_gray.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    _wh(100%, 100%)
.n_header
    _wh(100%, 8%)
    _bis('../../../images/bg_header.jpg')
.n_header_h1
    _wh(100%, 100%)
    _fj(row, flex-end)
    _bis('../../../images/top_left.png',auto,,right)
    h1
        _font(32px, 1, #fff,,right)
        padding-bottom 2%
        letter-spacing 6px
        font-family "阿里妈妈数黑体" !important
        margin-right -3px
.n_body_container
    _wh(100%, 92%)
    padding 40px 0 20px 20px
    _bis('../../../images/bg_content_l.jpg')
.n_body_container_wraper
    _wh(100%, 100%)
    position relative
    z-index 0
.center_content
    _wh(100%, 100%)
    position relative
    z-index 0
.status_wrap
    position absolute
    top -26px
    right 40px
    z-index 1
    _fj(row)
.status_item
    _fj(row)
    +.status_item
        margin-left 20px
.status_tip
    _wh(15px, 15px)
    border-radius 50%
    margin-right 10px
    box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
.status_name
    _font(16px, 1, #fff)
.green
  background-color $green2
.yellow
  background-color $yellow
.gray
  background-color $gray1
.red
  background-color $orange
.machine_wrap
    position absolute
    z-index 2
.sh_machine
  position absolute
  top 0
  left 0
  z-index 3
  width 100%
  img
    position absolute
    top 0
    left 0
    z-index 4
    _wh(100%, auto)
.yyj_wrap_1
  width 16%
  height 14%
  top 20%
  right -1%
  transform rotate(90deg)
  .yyj
    width 28.22%
    height 42%
    left 30.5%
    img
      _wh(100%, 100%)
  .wzm
    _wh(50.9%, 46.95%)
    background-color #d9d9d9
    top auto
    bottom 0
  .jzjcss
    width 22%
    left 51%
    top 11%
  .weilan
    width 49.1%
    height 73%
    left auto
    right 0
    top auto
    bottom 0
  .robot
    width: 26%;
    left: 53%;
    top: 62%;
  .kongtuopan_1
    width: 10%;
    top: 113%;
    left: 60%;
  .kongtuopan_2
    width 10%
    top: 113%;
    left: 72%;
.yyj_wrap_2
  width 16%
  height 14%
  top 20%
  right 12%
  transform rotate(90deg)
  .yyj
    width 28.22%
    height 42%
    left 30.5%
    img
      _wh(100%, 100%)
  .wzm
    _wh(50.9%, 46.95%)
    background-color #d9d9d9
    top auto
    bottom 0
  .jzjcss
    width 22%
    left 51%
    top 11%
  .weilan
    width: 34%;
    height: 73%;
    left: 53%;
    top 27%
  .robot
    width 24%
    left 72%
    top 65%
    transform rotate(90deg)
  .kongtuopan_1
    width 10%
    top: 53%;
    left: 76%;
    transform rotate(90deg)
  .kongtuopan_2
    width 10%
    top: 113%;
    left: 69%;
    transform rotate(-90deg)
.cyj_wrap_1
  width 11%
  height 20%
  top 25%
  right 30%
  transform rotate(90deg)
  .cyj_1
    width 25%
    top 0
  .cyj_2
    width 25%
    top 100%
  .weilan
    width 70%
    left auto
    right 0
    top 55%
  .robot
    width: 18%;
    top: 77%;
    left: auto;
    right: 19%;
  .kongtuopan_1
    width 14.5%
    top 60%
    left auto
    right 35%
  .kongtuopan_2
    width 14.5%
    top 60%
    left auto
    right 12%
  .kongtuopan_3
    width 14.5%
    top 96%
    left auto
    right 35%
  .kongtuopan_4
    width 14.5%
    top 96%
    left auto
    right 12%
.cyj_wrap_2
  width 11%
  height 20%
  top 25%
  left 40%
  transform rotate(90deg)
  .cyj_1
    width 25%
    top 0
  .cyj_2
    width 25%
    top 100%
  .kongtuopan_1
    width 14.5%
    top: 20%;
    left: 54%;
    transform rotate(90deg)
  .kongtuopan_2
    width 14.5%
    top: 50%;
    left: 54%;
    transform rotate(90deg)
  .kongtuopan_3
    width 14.5%
    top 120%
    left: 54%;
    transform rotate(90deg)
  .kongtuopan_4
    width 14.5%
    top 150%
    left: 54%;
    transform rotate(90deg)
.cyj_wrap_3
  width 11%
  height 9%
  top: 28%;
  left: 22%;
  transform rotate(90deg)
  .cyj_1
    width 37%
  .weilan
    width 60%
    left auto
    right 0
    top 2%
  .robot
    width 21%
    top 36%
    left 46%
  .kongtuopan_1
    width 14.5%
    top: 41%;
    left: auto;
    right: 8%;
    transform rotate(90deg)
  .kongtuopan_2
    width 14.5%
    top auto
    bottom: -7%;
    left: auto;
    right: 8%;
    transform rotate(90deg)
.cyj_wrap_4
  left 8%
.yyj_wrap_3
  width 16%
  height 14%
  top: 62%;
  right: 12%;
  transform rotate(90deg)
  .yyj
    width 28.22%
    left -7.5%
    transform rotate(180deg)
    height 42%
    img
      _wh(100%, 100%)
  .wzm
    _wh(50.9%, 46.95%)
    background-color #d9d9d9
    top auto
    bottom 0
.cyj_wrap_5
  left auto
  right 30%
  top 53.6%
.cyj_wrap_6
  left auto
  right 49%
  top 53.6%
</style>
