<template>
  <section class="container">
    <t-header  title="压制生产看板"></t-header>
    <div class="content">
      <div class="yj_wraper">
        <div class="yj_item" v-for="(e, i) in dataList1" :key="'yj' + i">
          <div class="fontV yj_name">{{ e.device_code }}</div>
          <div class="yj_info_wraper">
            <div class="yj_info">
              <div class="yj_info_p2">压机状态:</div>
              <div class="yj_info_p1">{{ e.status }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer></footer>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
export default {
  components: {
    THeader
  },
  data () {
    return {
      dataList1: []
    }
  },
  created () {
    for (let i = 0; i < 8; i++) {
      this.dataList1.push({device_code: `${i + 1}号压机`, status: '开机'})
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
.content
  width 100%
  height calc(100% - 1rem)
  padding .3rem .33rem
footer
  position absolute
  left 0
  bottom 0
  width 100%
  height .38rem
  background center bottom / auto 100% url(../assets/images/screen1/bottom.png) no-repeat
.yj_wraper
  width 100%
  height calc(50% - .16rem)
  margin-bottom .32rem
  padding .31rem .16rem .31rem .16rem
  background center / 100% 100% url(../assets/images/screen1/item_8.png) no-repeat
  display flex
  justify-content space-between
.fontV
  display flex
  justify-content center
  align-items center
.yj_item
  width 11.6%
  background-color #001536
.yj_name
  height .5rem
  font-size .18rem
  line-height .18rem
  color #78B1DE
  letter-spacing .02rem
  text-align center
  font-weight 700
  background center / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
.yj_info_wraper
  height calc(100% - .5rem)
  padding .1rem
.yj_info
  height calc(100% / 7)
  background center bottom / 100% 3px url(../assets/images/screen1/line_1.png) no-repeat
  display flex
  justify-content space-between
  align-items center
.yj_info_p1
  font-size: .18rem;
  line-height: .18rem;
  color: #FFFFFF;
  letter-spacing: 1.88px;
  text-align: center;
  font-weight: 700;
.yj_info_p2
  font-size: .14rem
  line-height: .14rem
  color: #84B0DA;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 700;
</style>
