update line

src/views/databoard/components/Container.vue

@@ -6,24 +6,44 @@
 -->
 
 <template>
-    <div class="kiln-container">
-        box
-    </div>
+	<div
+		class="kiln-container"
+		:style="{ width: width ? width + 'px' : 'initial' }">
+		<div class="container-hd">
+			<i class="">
+				<img src="" alt="" />
+			</i>
+			<span>{{ name }}</span>
+		</div>
+		<div class="container-body">
+			<slot>
+				<div class="test-body">something test....</div>
+			</slot>
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
-    name: "KilnContainer",
-    components: {},
-    props: {},
-    data() {
-        return {}
-    },
-    computed: {},
-    methods: {},
-}
+	name: 'KilnContainer',
+	components: {},
+	props: ['name', 'width'],
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
 </script>
 
 <style scoped lang="scss">
-.kiln-container {}
+.kiln-container {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	background: #ccc3;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
 </style>

src/views/databoard/components/line.js

@@ -0,0 +1,16 @@
+export default {
+	name: 'KilnLine',
+	props: ['horizontal'],
+	render: function (h) {
+		return (
+			<div
+				class="line"
+				style={{
+					width: this.horizontal ? '100%' : '2px',
+					height: this.horizontal ? '2px' : '100%',
+					background:
+						'radial-gradient(ellipse at center, #3CE7FF 100%, #3CE7FF 50%, #3CE7FF 0%)',
+				}}></div>
+		);
+	},
+};