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>
<!-- 带框的 container -->
<div class="outter-container" :style="{ padding, backgroundColor }">
<slot />
</div>
<!-- 带框的 container -->
<div :class="cls[usage]" :style="{ padding, backgroundColor }">
<slot />
</div>
</template>
<script>
export default {
name: "Container",
props: {
padding: {
type: String,
default: '10px 10px 10px 10px'
},
backgroundColor: {
type: String,
default: ''
}
},
usage: {
type: String,
default: "NumberOrDate", // NumberOrDate | Table | Charts | NumberAndChart
},
padding: {
type: String,
default: "10px 10px 10px 10px",
},
backgroundColor: {
type: String,
default: "",
},
},
data() {
return {};
return {
cls: {
// 'NumberOrDate': {},
NumberOrDate: "number-or-date",
Table: 'tables',
Charts: 'charts',
NumberAndChart: 'number-and-chart',
},
};
},
created() {},
mounted() {},
@ -27,9 +39,44 @@ export default {
};
</script>
<style scoped>
.outter-container {
padding: 0;
background: #ccc;
<style scoped lang="scss">
@import "../../assets/styles/functions";
@import "../../assets/styles/variables";
.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%;
}
</style>
.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>

View File

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