update Areaone
This commit is contained in:
lb
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="small-box-2">
|
||||
<div class="icon"></div>
|
||||
<div class="icon">
|
||||
<component :is="iconComp" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<h2 class="title">{{ title }}</h2>
|
||||
<span class="value">{{ value }}</span>
|
||||
@@ -9,31 +11,81 @@
|
||||
</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: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '车间温度', // 车间温度 当前火向 换火时间 剩余时间
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '27℃',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
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'),
|
||||
})[this.icon]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.small-box-2 {
|
||||
padding: 28px;
|
||||
border: 1px solid gray;
|
||||
padding: 14px;
|
||||
// border: 1px solid gray;
|
||||
box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
width: w(465px);
|
||||
height: h(200px);
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
width: h(128px);
|
||||
height: h(128px);
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: "微软雅黑", Helvicate, sans-serif;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
// line-height: 12px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 400;
|
||||
color: hsla(0, 0%, 100%, 0.9);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
line-height: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
80
src/components/icons/clockSvg.vue
Normal file
80
src/components/icons/clockSvg.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
viewBox="0 0 95 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>217时间-线性</title>
|
||||
<defs>
|
||||
<filter
|
||||
x="-25.8%"
|
||||
y="-25.7%"
|
||||
width="151.6%"
|
||||
height="151.3%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-1"
|
||||
>
|
||||
<feOffset
|
||||
dx="0"
|
||||
dy="1"
|
||||
in="SourceAlpha"
|
||||
result="shadowOffsetOuter1"
|
||||
></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="4"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#FDB764" offset="0%"></stop>
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="德州" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g
|
||||
id="德州3"
|
||||
transform="translate(-4344.000000, -314.000000)"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="编组-9备份-4" transform="translate(3546.000000, 283.000000)">
|
||||
<g id="编组-34" transform="translate(784.000000, 0.000000)">
|
||||
<g
|
||||
id="217时间-线性"
|
||||
filter="url(#filter-1)"
|
||||
transform="translate(27.872840, 44.857143)"
|
||||
>
|
||||
<path
|
||||
d="M33.9319262,3.40816327 C50.7834641,3.40816327 64.4706597,17.1557464 64.4706597,34.0816327 C64.4706597,51.0075189 50.7834641,64.755102 33.9319262,64.755102 C17.0803883,64.755102 3.39319262,51.0075189 3.39319262,34.0816327 C3.39319262,17.1557464 17.0803883,3.40816327 33.9319262,3.40816327 Z M33.9319262,10.410284 C20.9210568,10.410284 10.364556,21.0133598 10.364556,34.0816327 C10.364556,47.1499055 20.9210568,57.7529813 33.9319262,57.7529813 C46.9427955,57.7529813 57.4992964,47.1499055 57.4992964,34.0816327 C57.4992964,21.0133598 46.9427955,10.410284 33.9319262,10.410284 Z M33.9943323,16.5893931 C36.1014878,16.5893931 37.294554,18.0250541 37.4085928,20.2987273 L37.4176079,20.6646053 L37.4176079,32.6373146 L47.7996741,38.6099304 L48.1371613,38.8810457 C49.2670119,40.1195796 49.4764471,41.6333232 48.7043958,43.1013532 C47.9554526,44.5254441 46.6267694,45.1426923 45.0399954,44.8818614 L44.6961393,44.8125031 L44.3208391,44.6631642 L31.723547,37.3952262 L31.4691351,37.2073286 C31.1913158,36.9490974 30.9752618,36.6336735 30.8199777,36.2739732 C30.7297238,36.064909 30.6469883,35.810393 30.5651985,35.4992832 L30.4834804,35.1688961 L30.4462445,34.8461964 L30.4477968,20.5982938 C30.5631278,18.1363518 31.8076276,16.5893931 33.9943323,16.5893931 Z"
|
||||
id="形状结合"
|
||||
fill="url(#linearGradient-2)"
|
||||
></path>
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="#000000"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="67.8638524"
|
||||
height="68.1632653"
|
||||
></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
80
src/components/icons/fireSvg.vue
Normal file
80
src/components/icons/fireSvg.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
viewBox="0 0 94 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>燃脂</title>
|
||||
<defs>
|
||||
<filter
|
||||
x="-25.8%"
|
||||
y="-25.7%"
|
||||
width="151.6%"
|
||||
height="151.3%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-1"
|
||||
>
|
||||
<feOffset
|
||||
dx="0"
|
||||
dy="1"
|
||||
in="SourceAlpha"
|
||||
result="shadowOffsetOuter1"
|
||||
></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="4"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#FDB764" offset="0%"></stop>
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="德州" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g
|
||||
id="德州3"
|
||||
transform="translate(-3967.000000, -314.000000)"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="编组-9备份-4" transform="translate(3546.000000, 283.000000)">
|
||||
<g id="编组-32" transform="translate(392.000000, 0.000000)">
|
||||
<g
|
||||
id="燃脂"
|
||||
filter="url(#filter-1)"
|
||||
transform="translate(42.092717, 44.857143)"
|
||||
>
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="#000000"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="67.8638524"
|
||||
height="68.1632653"
|
||||
></rect>
|
||||
<path
|
||||
d="M59.3201924,30.3417546 C59.2328643,31.1095585 59.2328643,31.9431657 59.3201924,32.7985365 L59.3201924,39.2693251 C59.3201924,51.0487911 51.2833045,61.0076722 40.4727817,63.9030945 L40.4727817,60.0206946 C40.4727817,56.3793051 37.5463772,53.4399894 33.9428696,53.4399894 L33.9209828,53.4399894 C30.3174022,53.4399894 27.3691839,56.3793051 27.3691839,60.0206946 L27.3691839,63.9030945 C16.5586611,60.9857621 8.54365996,51.0268077 8.54365996,39.2693251 L8.54365996,28.1701695 C11.4483236,30.539238 15.3357024,34.8605714 15.0954588,40.8271361 C17.5195624,29.5960805 22.3242879,27.9069559 26.3863959,23.2785889 C31.6716085,17.2462942 33.2439526,10.6216223 30.2082603,4.26023736 C43.3556315,8.84478431 46.7625232,26.5689049 45.6705932,35.8915889 C50.4097313,27.4462589 56.3719012,25.1869604 59.3201924,24.5946567 L59.3201924,30.3417546 Z"
|
||||
id="路径"
|
||||
fill="url(#linearGradient-2)"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
80
src/components/icons/sandSvg.vue
Normal file
80
src/components/icons/sandSvg.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
viewBox="0 0 95 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>沙漏</title>
|
||||
<defs>
|
||||
<filter
|
||||
x="-25.8%"
|
||||
y="-25.7%"
|
||||
width="151.6%"
|
||||
height="151.3%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-1"
|
||||
>
|
||||
<feOffset
|
||||
dx="0"
|
||||
dy="1"
|
||||
in="SourceAlpha"
|
||||
result="shadowOffsetOuter1"
|
||||
></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="4"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#FDB764" offset="0%"></stop>
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="德州" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g
|
||||
id="德州3"
|
||||
transform="translate(-4737.000000, -314.000000)"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="编组-9备份-4" transform="translate(3546.000000, 283.000000)">
|
||||
<g id="编组-33" transform="translate(1176.000000, 0.000000)">
|
||||
<g
|
||||
id="沙漏"
|
||||
filter="url(#filter-1)"
|
||||
transform="translate(28.752348, 44.857143)"
|
||||
>
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="#000000"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="67.8638524"
|
||||
height="68.1632653"
|
||||
></rect>
|
||||
<path
|
||||
d="M53.1140121,61.7729592 L15.1874544,61.7729592 C13.5828693,61.7729592 12.2700269,60.4543246 12.2700269,58.8426601 L12.2700269,53.1285768 C12.2700269,45.3632842 16.3544254,38.1840514 23.0645087,34.2281476 C16.208554,30.2722438 11.9782841,22.9464961 11.9782841,15.0346885 L11.9782841,9.32060523 C11.9782841,7.70894072 13.2911265,6.39030612 14.8957116,6.39030612 L52.8222693,6.39030612 C54.4268545,6.39030612 55.7396969,7.70894072 55.7396969,9.32060523 L55.7396969,15.0346885 C55.7396969,20.7487717 53.5516262,26.31634 49.4672277,30.4187588 L49.3213563,30.5652737 C48.0085139,31.8839083 46.5498002,33.056028 44.7993437,34.0816327 C46.5498002,35.1072373 48.0085139,36.279357 49.4672277,37.7445065 L49.6130991,37.8910215 C53.5516262,41.9934402 55.8855682,47.5610085 55.8855682,53.2750918 L55.8855682,58.989175 C55.8855682,60.4543246 54.7185972,61.7729592 53.1140121,61.7729592 Z M18.1048819,55.912361 L50.1965846,55.912361 L50.1965846,53.1285768 C50.1965846,48.8796431 48.5919994,44.7772244 45.5287006,41.8469253 L45.3828292,41.7004103 C43.9241154,40.2352608 42.1736589,39.0631411 40.4232024,38.3305664 C39.9855883,38.1840514 39.4021028,37.8910215 38.9644886,37.8910215 C37.7975176,37.4514766 36.9222894,36.4258719 36.9222894,35.1072373 L36.9222894,33.2025429 C36.9222894,31.8839083 37.7975176,30.7117887 38.9644886,30.4187588 C39.4021028,30.2722438 39.8397169,30.1257289 40.1314597,29.9792139 C42.0277875,29.2466391 43.778244,28.0745195 45.2369578,26.6093699 L45.3828292,26.462855 C48.3002567,23.5325559 49.9048418,19.4301371 49.9048418,15.3277184 L49.9048418,12.5439342 L17.8131392,12.5439342 L17.8131392,15.3277184 C17.8131392,21.7743764 21.6057949,27.6349746 27.5865213,30.1257289 C28.0241355,30.2722438 28.607621,30.5652737 29.0452351,30.7117887 C30.2122061,31.1513335 31.0874344,32.3234532 31.0874344,33.4955728 L31.0874344,35.4002672 C31.0874344,36.7189018 30.2122061,37.7445065 29.0452351,38.1840514 C28.607621,38.3305664 28.1700068,38.4770813 27.8782641,38.6235963 C21.8975377,41.1143505 18.1048819,46.9749487 18.1048819,53.4216067 L18.1048819,55.912361 L18.1048819,55.912361 Z M22.4808318,16.4887814 C23.1393478,22.7690213 28.7367339,27.561836 35.1572649,26.9007581 C40.5900219,26.4049497 44.8703759,21.942674 45.5288919,16.4887814 L22.4808318,16.4887814 Z"
|
||||
id="形状"
|
||||
fill="url(#linearGradient-2)"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
80
src/components/icons/tempSvg.vue
Normal file
80
src/components/icons/tempSvg.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
viewBox="0 0 94 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>编组 36</title>
|
||||
<defs>
|
||||
<filter
|
||||
x="-25.8%"
|
||||
y="-25.7%"
|
||||
width="151.6%"
|
||||
height="151.3%"
|
||||
filterUnits="objectBoundingBox"
|
||||
id="filter-1"
|
||||
>
|
||||
<feOffset
|
||||
dx="0"
|
||||
dy="1"
|
||||
in="SourceAlpha"
|
||||
result="shadowOffsetOuter1"
|
||||
></feOffset>
|
||||
<feGaussianBlur
|
||||
stdDeviation="4"
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
></feGaussianBlur>
|
||||
<feColorMatrix
|
||||
values="0 0 0 0 0.976470588 0 0 0 0 0.470588235 0 0 0 0 0.207843137 0 0 0 0.54411604 0"
|
||||
type="matrix"
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#FDB764" offset="0%"></stop>
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="德州" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g
|
||||
id="德州3"
|
||||
transform="translate(-3574.000000, -314.000000)"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<g id="编组-9备份-4" transform="translate(3546.000000, 283.000000)">
|
||||
<g
|
||||
id="温度"
|
||||
filter="url(#filter-1)"
|
||||
transform="translate(41.092717, 44.857143)"
|
||||
>
|
||||
<g id="编组-36">
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="#000000"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="67.8638524"
|
||||
height="68.1632653"
|
||||
></rect>
|
||||
<path
|
||||
d="M35.9928243,41.9589127 L35.9928243,23.6751035 C35.9928243,22.563565 35.0915956,21.6583601 33.9849396,21.6583601 L33.8258992,21.6583601 C32.7457501,21.6583601 31.8776547,22.5369414 31.8776547,23.6152002 L31.8776547,41.9589127 C28.8823944,42.8308381 26.6889626,45.5198293 26.6889626,48.7279822 C26.6889626,52.6483184 29.9294101,55.8231917 33.9385528,55.8231917 C37.9410689,55.8231917 41.1815165,52.6416625 41.1815165,48.7279822 C41.1748898,45.5198293 38.981458,42.837494 35.9928243,41.9589127 L35.9928243,41.9589127 Z M46.655156,33.8586594 C46.2045416,33.4859279 45.9394744,32.9800781 45.9394743,32.4609164 L45.9394743,11.7876324 C45.9394743,5.2847996 40.5519817,0 33.9319262,0 C27.3118707,0 21.9243781,5.2847996 21.9243781,11.7876324 L21.9243781,31.8751955 C21.9243781,32.7471209 21.5665372,33.5524871 20.9502558,34.0783047 C16.6097789,37.7590278 14.1247731,43.1037307 14.1247731,48.7346381 C14.1247731,59.4440116 23.011154,68.1632653 33.9385528,68.1632653 C44.8659517,68.1632653 53.7523326,59.4506675 53.7523326,48.7346381 C53.745706,42.9706123 51.1612999,37.5460384 46.655156,33.8586594 Z M33.9319262,61.9932285 C26.4437753,61.9932285 20.360481,56.0428371 20.360481,48.7279822 C20.360481,44.1686777 22.7328333,39.9754489 26.7022159,37.5194148 L27.6630848,36.927038 C27.9745389,36.7340163 28.1667127,36.3879086 28.1667127,36.021833 L28.1667127,11.7876324 C28.1667127,8.68597414 30.7577454,6.16338089 33.9385528,6.16338089 C37.1193603,6.16338089 39.710393,8.68597414 39.710393,11.7876324 L39.710393,36.021833 C39.710393,36.3879086 39.9025668,36.7340163 40.2140209,36.927038 L41.1748898,37.5194148 C45.1442724,39.9754489 47.509998,44.1620218 47.509998,48.7279822 C47.5033713,56.0428371 41.4134503,61.9932285 33.9319262,61.9932285 L33.9319262,61.9932285 Z"
|
||||
id="形状"
|
||||
fill="url(#linearGradient-2)"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<DragabbleContainer class="isolate-area-1">
|
||||
<SmallBox2></SmallBox2>
|
||||
<SmallBox2></SmallBox2>
|
||||
<SmallBox2></SmallBox2>
|
||||
<SmallBox2></SmallBox2>
|
||||
<SmallBox2
|
||||
v-for="rd in rdata"
|
||||
:key="rd.icon"
|
||||
:icon="rd.icon"
|
||||
:title="rd.title"
|
||||
:value="rd.value"
|
||||
></SmallBox2>
|
||||
</DragabbleContainer>
|
||||
</template>
|
||||
|
||||
@@ -14,17 +17,27 @@ import SmallBox2 from "../common/SmallBox2.vue";
|
||||
export default {
|
||||
name: "IsolateArea--1",
|
||||
components: { DragabbleContainer, SmallBox2 },
|
||||
data() {
|
||||
return {
|
||||
rdata: [
|
||||
{ icon: "temp", title: "车间温度", value: "27℃" },
|
||||
{ icon: "fire", title: "当前火向", value: "东火" },
|
||||
{ icon: "clock", title: "换火时间", value: "12:21:39" },
|
||||
{ icon: "sand", title: "剩余时间", value: "6h" },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.isolate-area-1 {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
> .small-box-2:not(:last-child) {
|
||||
margin: {
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
> .small-box-2:not(:last-child) {
|
||||
margin: {
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,6 +26,6 @@ export default {
|
||||
main {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
background: #eee2;
|
||||
// background: #eee2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user