90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<!--
|
|
filename: Container.vue
|
|
author: liubin
|
|
date: 2023-12-05 14:29:53
|
|
description: 窑炉容器
|
|
-->
|
|
|
|
<template>
|
|
<div class="kiln-container" :class="['kiln-container__' + size]">
|
|
<div class="container-hd" style="display: flex; align-items: center">
|
|
<i
|
|
class=""
|
|
style="display: inline-block; margin-left: 12px; padding-top: 4px">
|
|
<img :src="imgSrc" width="18" height="16" alt="" />
|
|
</i>
|
|
<span
|
|
style="
|
|
color: #fff;
|
|
font-size: 20px;
|
|
line-height: 2;
|
|
margin-left: 6px;
|
|
display: inline-block;
|
|
">
|
|
{{ name }}
|
|
</span>
|
|
</div>
|
|
<div class="container-body">
|
|
<slot>
|
|
<div class="test-body">something test....</div>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'KilnContainer',
|
|
components: {},
|
|
props: ['name', 'width', 'size'],
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
imgSrc() {
|
|
switch (this.name) {
|
|
case '原料用量统计':
|
|
return require('../assets/move.png');
|
|
case '风机运行频率':
|
|
return require('../assets/flow.png');
|
|
case 'ISRA缺陷检测':
|
|
return require('../assets/gas.png');
|
|
case '能耗':
|
|
return require('../assets/gas.png');
|
|
}
|
|
},
|
|
},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.kiln-container {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
&__small {
|
|
background: url(../assets/short.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
&__middle {
|
|
background: url(../assets/middle.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
&__large {
|
|
background: url(../assets/high.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
</style>
|