84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="dev-card">
|
||
|
|
<div class="dev-left">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
<div class="dev-right">
|
||
|
|
<div class="dev-box">
|
||
|
|
<div class="dev-content dev-title">
|
||
|
|
<div class="key" v-for="item in dev_title">{{ item }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="dev-content" v-for="(item,index) in dev_value">
|
||
|
|
<div>{{ item.a }}</div>
|
||
|
|
<div>{{ item.b }}</div>
|
||
|
|
<div>{{ item.c }}</div>
|
||
|
|
<div>{{ item.d }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
|
||
|
|
const prop = defineProps({
|
||
|
|
dev_title: {
|
||
|
|
type: Array,
|
||
|
|
default: ['机架号','状态','布料层数','裁片数量']
|
||
|
|
},
|
||
|
|
dev_value: {
|
||
|
|
type: [Object],
|
||
|
|
default: [{a:102014422,b:'待机',c:'40层',d:'1000片'}]
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.dev-card {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
.dev-left,.dev-right {
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.dev-right {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.dev-title {
|
||
|
|
color: #FFF;
|
||
|
|
}
|
||
|
|
.dev-box {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
font-size: 16px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: end;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.dev-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.key {
|
||
|
|
width: 75px;
|
||
|
|
height: 35px;
|
||
|
|
line-height: 35px;
|
||
|
|
text-align: center;
|
||
|
|
background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
|
||
|
|
}
|
||
|
|
</style>
|