add Boxes

This commit is contained in:
lb 2023-05-09 11:25:27 +08:00
parent 8fe26fe0b2
commit 67cb463f73
8 changed files with 110 additions and 63 deletions

View File

@ -0,0 +1,19 @@
<template>
<!-- 窑炉压力 -->
<div></div>
</template>
<script>
export default {
name: "KilnPressure",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>

View File

@ -0,0 +1,19 @@
<template>
<!-- 窑炉运行时间 -->
<div></div>
</template>
<script>
export default {
name: "KilnRuntime",
props: {},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>

View File

@ -1,41 +0,0 @@
<template>
<div :class="cls[usage]">number or date</div>
</template>
<script>
export default {
name: "NumberBox",
props: {
usage: {
type: String,
default: 'NumberOrDate', // NumberOrDate | Table | Charts | NumberAndChart
},
},
data() {
return {
cls: {
// 'NumberOrDate': {},
'NumberOrDate': 'number-or-date',
'Table': {},
'Charts': {},
'NumberAndChart': {},
}
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
@import "../../assets/styles/variables";
.number-or-date {
width: w(753px);
height: h(375px);
background: url(../../assets/box-number.png);
}
</style>

View File

@ -1,25 +1,37 @@
<template> <template>
<!-- 带框的 container --> <!-- 带框的 container -->
<div class="outter-container" :style="{ padding, backgroundColor }"> <div :class="cls[usage]" :style="{ padding, backgroundColor }">
<slot /> <slot />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "Container", name: "Container",
props: { props: {
padding: { usage: {
type: String, type: String,
default: '10px 10px 10px 10px' default: "NumberOrDate", // NumberOrDate | Table | Charts | NumberAndChart
}, },
backgroundColor: { padding: {
type: String, type: String,
default: '' default: "10px 10px 10px 10px",
} },
}, backgroundColor: {
type: String,
default: "",
},
},
data() { data() {
return {}; return {
cls: {
// 'NumberOrDate': {},
NumberOrDate: "number-or-date",
Table: 'tables',
Charts: 'charts',
NumberAndChart: 'number-and-chart',
},
};
}, },
created() {}, created() {},
mounted() {}, mounted() {},
@ -27,9 +39,44 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
.outter-container { @import "../../assets/styles/functions";
padding: 0; @import "../../assets/styles/variables";
background: #ccc;
.number-or-date {
display: inline-block;
width: w(753px);
height: h(375px);
background: url(../../assets/box-number.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
} }
.tables {
display: inline-block;
width: w(753px);
height: h(556px);
background: url(../../assets/box-number.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
}
.charts {
display: inline-block;
width: w(1580px);
height: h(520px);
background: url(../../assets/box-chart.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
}
.number-and-chart {
display: inline-block;
width: w(753px);
height: h(931px);
background: url(../../assets/box-right.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
}
</style> </style>

View File

@ -2,17 +2,20 @@
<main> <main>
main content main content
<AreaOne /> <AreaOne />
<NumberBox :usage="NumberOrDate" /> <Container :usage="'NumberOrDate'" />
<Container :usage="'Table'" />
<Container :usage="'Charts'" />
<Container :usage="'NumberAndChart'" />
</main> </main>
</template> </template>
<script> <script>
import AreaOne from '../isolate-area-1/Area.vue' import AreaOne from '../isolate-area-1/Area.vue'
import NumberBox from '../boxes/NumberBox.vue' import Container from './Container.vue'
export default { export default {
name: "Main", name: "Main",
components: { AreaOne, NumberBox }, components: { AreaOne, Container },
props: {}, props: {},
data() { data() {
return {}; return {};