98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<template>
|
|
<div class="small-box-2">
|
|
<div class="icon">
|
|
<component :is="iconComp" />
|
|
</div>
|
|
<div class="info">
|
|
<h2 class="title">{{ title }}</h2>
|
|
<span class="value">{{ value }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import tempSvg from "../icons/tempSvg.vue";
|
|
// import fireSvg from "../icons/fireSvg.vue";
|
|
// import sandSvg from "../icons/sandSvg.vue";
|
|
// import clockSvg from "../icons/clockSvg.vue";
|
|
|
|
export default {
|
|
name: "SmallBox2",
|
|
components: {},
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: "temp",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "车间温度", // 车间温度 当前火向 换火时间 剩余时间
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: "27℃",
|
|
},
|
|
},
|
|
computed: {
|
|
// imgURL() {
|
|
// return {
|
|
// temp: () => import("../../assets/svgs/orange-tempe.svg"),
|
|
// }[this.icon];
|
|
// },
|
|
iconComp() {
|
|
return ({
|
|
temp: () => import('../icons/tempSvg.vue'),
|
|
fire: () => import('../icons/fireSvg.vue'),
|
|
sand: () => import('../icons/sandSvg.vue'),
|
|
// clock: () => import('../icons/clockSvg.vue'),
|
|
clock: () => import('../icons/switchSvg.vue'),
|
|
})[this.icon]
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
.small-box-2 {
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
width: adjust(w(744px));
|
|
height: adjust(h(350px));
|
|
display: flex;
|
|
background: url(../../assets/top-middle.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: bottom;
|
|
|
|
.icon {
|
|
margin-top: adjust(h(56px));
|
|
margin-left: adjust(w(24px));
|
|
width: adjust(h(172px));
|
|
height: adjust(h(172px));
|
|
}
|
|
|
|
.info {
|
|
margin-top: adjust(h(56px));
|
|
flex: 1 auto;
|
|
font-family: "微软雅黑", sans-serif;
|
|
padding-left: adjust(5px);
|
|
|
|
h2 {
|
|
font-size: adjust(12px);
|
|
opacity: 0.7;
|
|
letter-spacing: adjust(1px);
|
|
font-weight: 400;
|
|
color: hsla(0, 0%, 0%, 0.9);
|
|
}
|
|
|
|
.value {
|
|
color: #030609;
|
|
font-size: adjust(22px);
|
|
line-height: adjust(23px);
|
|
}
|
|
}
|
|
}
|
|
</style>
|