<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 lz_wrap_3">
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div v-for="(e,i) in [1,2,3]" :key="i" class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div v-for="(e,i) in [1,2,3]" :key="i" class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="lz_boxs">
                        <div class="lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="yaji_wrap">
                      <div class="machine_wrap yj_wrap_1">
                        <div class="sh_machine yj_info_wrap">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <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 v-if="PressMachineList.length > 0" class="sh_machine yyj">
                          <img v-show="PressMachineList[0].device_status === 0" src="../../../images/workshop/yj_2500_gray.png" alt="">
                          <img v-show="PressMachineList[0].device_status === 1" src="../../../images/workshop/yj_2500_yellow.png" alt="">
                          <img v-show="PressMachineList[0].device_status === 2" src="../../../images/workshop/yj_2500_green.png" alt="">
                          <img v-show="PressMachineList[0].device_status === 3" src="../../../images/workshop/yj_2500_red.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_1 kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_2500_green.png" alt="">
                        </div>
                        <div class="sh_machine block_1">
                        </div>
                        <div class="sh_machine block_1 block_2">
                        </div>

                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_2">
                        <div class="sh_machine yj_info_wrap">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <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 v-if="PressMachineList.length > 0" class="sh_machine yyj">
                          <img v-show="PressMachineList[1].device_status === 0" src="../../../images/workshop/yj_2500_gray.png" alt="">
                          <img v-show="PressMachineList[1].device_status === 1" src="../../../images/workshop/yj_2500_yellow.png" alt="">
                          <img v-show="PressMachineList[1].device_status === 2" src="../../../images/workshop/yj_2500_green.png" alt="">
                          <img v-show="PressMachineList[1].device_status === 3" src="../../../images/workshop/yj_2500_red.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_1 kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_2500_green.png" alt="">
                        </div>
                        <div class="sh_machine block_1 block_2">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3">
                        <div class="sh_machine yj_info_wrap">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine yj_info_wrap yj_info_wrap_1">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine blj_1">
                          <img src="../../../images/workshop/blj.png" alt="">
                        </div>
                        <div class="sh_machine blj_1 blj_2">
                          <img src="../../../images/workshop/blj.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1">
                          <img v-show="PressMachineList[2].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[2].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[2].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[2].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                          <img v-show="PressMachineList[3].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[3].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[3].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[3].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_3.png" alt="">
                        </div>
                        <div class="sh_machine jzjcj_1">
                          <img src="../../../images/workshop/jzjcj_630.png" alt="">
                        </div>
                        <div class="sh_machine jzjcj_1 jzjcj_2">
                          <img src="../../../images/workshop/jzjcj_630.png" alt="">
                        </div>
                        <div class="sh_machine lmyzj">
                          <img src="../../../images/workshop/lmyzj_630.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_2500_green.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5">
                        <div class="sh_machine yj_info_wrap">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine yj_info_wrap yj_info_wrap_1">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine blj_1">
                          <img src="../../../images/workshop/blj.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1">
                          <img v-show="PressMachineList[4].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[4].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[4].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[4].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                          <img v-show="PressMachineList[5].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[5].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[5].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[5].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_7">
                        <div class="sh_machine yj_info_wrap">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine blj_1">
                          <img src="../../../images/workshop/blj.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1">
                          <img v-show="PressMachineList[6].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[6].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[6].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[6].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div class="sh_machine weilan">
                          <img src="../../../images/workshop/weilan_6.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine jcpmj">
                          <img src="../../../images/workshop/jcpmj.png" alt="">
                        </div>
                        <div class="sh_machine robot">
                          <img src="../../../images/workshop/robot_2500_green.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5 yj_wrap_8">
                        <div class="sh_machine yj_info_wrap">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine yj_info_wrap yj_info_wrap_1">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine blj_1 blj_2">
                          <img src="../../../images/workshop/blj.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1">
                          <img v-show="PressMachineList[7].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[7].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[7].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[7].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                          <img v-show="PressMachineList[8].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[8].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[8].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[8].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_2">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_17">
                        <div class="sh_machine yyj">
                          <img src="../../../images/workshop/yj_2500_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_2 yj_wrap_17">
                        <div class="sh_machine yyj">
                          <img src="../../../images/workshop/yj_2500_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_15">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_1 cyj_2">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5 yj_wrap_13">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                        <div class="sh_machine cyj_1 cyj_2">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_7 yj_wrap_12">
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yj_wrap_1 yj_wrap_3 yj_wrap_5 yj_wrap_8 yj_wrap_10">
                        <div class="sh_machine yj_info_wrap yj_info_wrap_1">
                          <p>2023-6-10</p>
                          <p>成品1</p>
                          <p>367</p>
                          <div class="bg_line"></div>
                        </div>
                        <div class="sh_machine cyj_1">
                          <img src="../../../images/workshop/yj_630_gray.png" alt="">
                        </div>
                        <div v-if="PressMachineList.length > 0" class="sh_machine cyj_1 cyj_2">
                          <img v-show="PressMachineList[9].device_status === 0" src="../../../images/workshop/yj_630_gray.png" alt="">
                          <img v-show="PressMachineList[9].device_status === 1" src="../../../images/workshop/yj_630_yellow.png" alt="">
                          <img v-show="PressMachineList[9].device_status === 2" src="../../../images/workshop/yj_630_green.png" alt="">
                          <img v-show="PressMachineList[9].device_status === 3" src="../../../images/workshop/yj_630_red.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_3">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                        <div class="sh_machine kongtuopan_1 kongtuopan_4">
                          <img src="../../../images/workshop/ktp.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/yj_630_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_2">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/yj_630_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_3">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/yj_630_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_4">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6]" :key="i">
                        <img src="../../../images/workshop/yj_630_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_5">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" :key="i">
                        <img src="../../../images/workshop/yj_630_gray.png" alt="">
                      </div>
                    </div>
                    <div class="machine_wrap mtp_wrap_1 mtp_wrap_6">
                      <div class="mtp" v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" :key="i">
                        <img src="../../../images/workshop/yj_630_gray.png" alt="">
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { workshopCondition } from '@js/getData2'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      myCharts1: '',
      myCharts2: '',
      myCharts3: '',
      PressMachineList: [], // 压机数据
      MixMachineList: [], // 混料机数据
      MixBlankingList: [], // 混料机下料位
      TrappedShelfList: [] // 困料位料盅
    }
  },
  mounted () {
    this._workshopCondition()
    // this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._workshopCondition()
      }, this.interTime)
    },
    async _workshopCondition () {
      let res = await workshopCondition()
      if (res.code === 200) {
        this.PressMachineList = [...res.result.PressMachineList]
        this.MixMachineList = [...res.result.MixMachineList]
        this.MixBlankingList = [...res.result.MixBlankingList]
        this.TrappedShelfList = [...res.result.TrappedShelfList]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    _wh(100%, 100%)
    overflow hidden
.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)
.mtp_wrap_1
  width 1.5%
  height 7.4%
  top: 72%;
  right: 3.6%;
  transform rotate(90deg)
  .mtp
    width 100%
    img
      _wh(100%, auto)
.mtp_wrap_2
  top 76%
.mtp_wrap_3
  top 86%
.mtp_wrap_4
  top 90%
.mtp_wrap_5
  right 27%
  top 86%
.mtp_wrap_6
  right 27%
  top 90%
.lz_wrap_3
  width 2%
  height 100%
  top: -46%;
  right: 26%;
  transform rotate(90deg)
  .lz_boxs
    position relative
    top 0
    left 0
    _wh(100%, 100%)
    .lz
      width 100%
      img
        _wh(100%, auto)
    &:nth-child(1)
      height: 8%;
    &:nth-child(2)
      height: 17%;
    &:nth-child(3)
      height: 8%;
    &:nth-child(4)
      height: 30%;
    &:nth-child(5)
      height: 13%;
      left: 200%
    &:nth-child(6)
      height: 26%;
      left: 100%
    &:nth-child(7)
      height: 53%;
      left: 200%
    &:nth-child(8)
      height: 26%;
      left: 200%
    &:nth-child(9)
      height: 8%;
      left: 200%
.yaji_wrap
  position: absolute;
  left: 0;
  top: 15%;
  width: 98%;
  height: 55%;
// 压机
.yyj_wrap_1
  width 10.801%
  height 29.895%
  transform rotate(90deg)
  top: 4.4%;
  left: 90.5%;
.yyj_wrap_2
  left: 80%;
.cyj_wrap_1
  left 70%
.cyj_wrap_2
  left 60%
.cyj_wrap_3
  left 50%
.yj_wrap_1
  // width 10.801%
  // height 29.895%
  width: 15%;
  height: 41.5%;
  transform rotate(90deg)
  top: 4.4%;
  // left: 90.5%;
  left 87%
  .yj_info_wrap
    display none
    width 60%
    top: 0
    left: -77%
    padding: 5px
    _bis('../../../images/workshop/txtbg.png')
    p
      _font(14px, 16px, #fff,,right)
    .bg_line
      position absolute
      _wh(67%, 2px)
      background-color #03fcfd
      right -100%
      top 50%
      transform translate(-50%)
  .yyj
    width 50%
    img
      width: 83%;
      left: 37%;
  .wzm
    _wh(50%, 41%)
    background-color #d9d9d9
    top auto
    bottom 0
  .jzjcss
    width: 24%;
    left: 51%;
    top: 25%;
  .weilan
    width: 46%;
    left: 54%;
    top 37%
  .robot
    width 1%
    height 1%
    left: 75%;
    top: 55%;
    transform: rotate(-46deg)
    animation rotate_2500_1 1.5s linear 1.5s infinite alternate-reverse
    img
      width 2400%
      top: -800%;
      left: -2000%;
  .kongtuopan_1
    width: 12%;
    top: 81%;
    left: 61%;
  .kongtuopan_2
    left: 74%;
  .block_1
    width: 10%;
    height: 9%;
    left: 74%;
    top: 27%;
    background-color #fff
  .block_2
    left:86%
.yj_wrap_2
  left: 71%
  .robot
    animation rotate_630_1 1.5s linear 1.5s infinite alternate-reverse
  .kongtuopan_1
    top 37%
    left 85%
    transform rotate(90deg)
  .kongtuopan_2
    top 76%
  .weilan
    top 16%
  .block_2
    top 9%
    left: 89%;
.yj_wrap_3
  left: 54%
  .yj_info_wrap
    top -10%
    .bg_line
      width: 100%;
      right: -150%;
  .yj_info_wrap_1
    top 46%
  .blj_1
    width: 18%;
    top: 14%;
    left: 16%;
  .blj_2
    top 70%
  .cyj_1
    width 50%
    height 50%
    img
      width 28%
      left auto
      right 0
  .cyj_2
    top 50%
    img
      top auto
      bottom 0
  .jzjcj_1
    width 7%
    height 50%
    left 51%
    img
      top auto
      bottom 5%
  .jzjcj_2
    top 50%
    img
      top 5%
  .lmyzj
    width: 13%;
    left: 54%;
    top: 33%;
  .weilan
    top 6%
  .robot
    left: 79%;
    top: 49%;
  .kongtuopan_1
    top: 21%
    left: 64%;
  .kongtuopan_2
    left: 80%;
  .kongtuopan_3
    top: 64%
  .kongtuopan_4
    top: 64%
    left: 80%;
.yj_wrap_5
  left: 37%
  .kongtuopan_1
    top: 14%;
    left: 64%;
    transform rotate(90deg)
  .kongtuopan_2
    top 30%
  .kongtuopan_3
    top 70%
  .kongtuopan_4
    top 86%
.yj_wrap_7
  left 22%
  .yj_info_wrap
    top 19%
  .blj_1
    top 42%
  .cyj_1
    top 25%
    img
      top 50%
      transform translateY(-50%)
  .weilan
    top 15%
  .robot
    left: 75%
    transform: rotate(15deg);
    animation rotate_630_2 3s linear 1.5s infinite alternate-reverse
  .kongtuopan_1
    top 43%
    left 90%
    transform rotate(90deg)
  .kongtuopan_2
    top: 63%
  .jcpmj
    width: 18%;
    top: 12%;
    left: 57%;
.yj_wrap_8
  left 8%
.yj_wrap_17
  top 54%
  .yyj
    left auto
    right 0
    img
      left auto
      right 37%
      transform rotate(180deg)
  .wzm
    left auto
    right 0
.yj_wrap_15
  top 54%
  .cyj_1
    left auto
    right 0
    img
      left 0
      right auto
.yj_wrap_13
  top 54%
  .cyj_1
    left auto
    right 0
    img
      left 0
      right auto
.yj_wrap_12
  top 54%
  .cyj_1
    left auto
    right 0
    img
      left 0
      right auto
.yj_wrap_10
  top 54%
  .yj_info_wrap_1
    left auto
    right -81%
    _bis('../../../images/workshop/txtbg1.png')
    p
      text-align left
    .bg_line
      left -50%
  .cyj_1
    left auto
    right 0
    img
      left 0
      right auto
  .kongtuopan_1
    left auto
    right 64%
    transform rotate(-90deg)
@keyframes rotate_2500_1 {
    0% {
      transform: rotateZ(-46deg)
    }
    10% {
        transform: rotateZ(-46deg)
    }
    20% {
        transform: rotateZ(-46deg)
    }
    90% {
        transform: rotateZ(-120deg) rotateY(-30deg)
    }
    100% {
        transform: rotateZ(-120deg) rotateY(0deg)
    }
}
@keyframes rotate_630_1 {
    0% {
      transform: rotateZ(-46deg)
    }
    10% {
        transform: rotateZ(-46deg)
    }
    20% {
        transform: rotateZ(-46deg)
    }
    90% {
        transform: rotateZ(-90deg)
    }
    100% {
        transform: rotateZ(-90deg)
    }
}
@keyframes rotate_630_2 {
    0% {
      transform: rotateZ(150deg) rotateY(-30deg)
    }
    10% {
        transform: rotateZ(150deg) rotateY(0deg)
    }
    50% {
        transform: rotateZ(70deg) rotateY(-30deg)
    }
    60% {
        transform: rotateZ(70deg) rotateY(0deg)
    }
    90% {
        transform: rotateZ(15deg)
    }
    100% {
        transform: rotateZ(15deg)
    }
}
</style>
