103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
|
<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>
|