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>
|
||||
<!-- 带框的 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>
|
@ -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 {};
|
||||
|
Loading…
Reference in New Issue
Block a user