121 lines
2.1 KiB
Vue
121 lines
2.1 KiB
Vue
<template>
|
|
<!-- 带标题的 container -->
|
|
<div class="sub-container" :style="{ padding }">
|
|
<div class="title">
|
|
<span class="icon" :class="iconClass[icon]"></span>
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
<div class="content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "SubContainer",
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "Default Title",
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: "default",
|
|
},
|
|
padding: {
|
|
type: String,
|
|
default: "10px",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
iconClass: {
|
|
clock: "icon-clock",
|
|
docs: "icon-docs",
|
|
oil: "icon-oil",
|
|
gas: "icon-gas",
|
|
xicao: "icon-xc",
|
|
inWater: "icon-water-in",
|
|
fan: 'icon-fan',
|
|
ktop: 'icon-kiln-top',
|
|
kbtm: 'icon-kiln-bottom',
|
|
},
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
.sub-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.icon {
|
|
height: adjust(17px);
|
|
width: adjust(17px);
|
|
margin-right: adjust(8px);
|
|
}
|
|
|
|
.icon-clock {
|
|
background: url(../../assets/clock.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.icon-docs {
|
|
background: url(../../assets/docs.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.icon-oil {
|
|
background: url(../../assets/oil.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.icon-gas {
|
|
background: url(../../assets/gas-icon.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.icon-xc {
|
|
background: url(../../assets/xicao-icon.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.icon-fan {
|
|
background: url(../../assets/fan-icon.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.icon-kiln-top {
|
|
background: url(../../assets/kiln-top-icon.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.icon-kiln-bottom {
|
|
background: url(../../assets/kiln-bottom-icon.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.icon-water-in {
|
|
background: url(../../assets/water-temp.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title {
|
|
/* margin: 12px 0; */
|
|
margin-bottom: adjust(12px);
|
|
font-size: adjust(17px);
|
|
color: #72f2ff;
|
|
font-family: sans-serif;
|
|
user-select: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
height: 1px;
|
|
/* background: #eee; */
|
|
flex: 1;
|
|
}
|
|
</style>
|