add Boxes
This commit is contained in:
parent
8fe26fe0b2
commit
67cb463f73
19
src/components/boxes/KilnPressure.vue
Normal file
19
src/components/boxes/KilnPressure.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 窑炉压力 -->
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "KilnPressure",
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
19
src/components/boxes/KilnRuntime.vue
Normal file
19
src/components/boxes/KilnRuntime.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 窑炉运行时间 -->
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "KilnRuntime",
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
@ -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>
|
|
@ -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>
|
@ -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 {};
|
||||||
|
Loading…
Reference in New Issue
Block a user