add pics

src/components/boxes/NumberBox.vue

@@ -0,0 +1,41 @@
+<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>

src/components/common/SmallBox2.vue

@@ -44,7 +44,8 @@ export default {
 				temp: () => import('../icons/tempSvg.vue'),
 				fire: () => import('../icons/fireSvg.vue'),
 				sand: () => import('../icons/sandSvg.vue'),
-				clock: () => import('../icons/clockSvg.vue'),
+				// clock: () => import('../icons/clockSvg.vue'),
+				clock: () => import('../icons/switchSvg.vue'),
 			})[this.icon]
 		}
 	},

src/components/icons/switchSvg.vue

@@ -0,0 +1,99 @@
+<template>
+	<svg
+		width="64px"
+		height="64px"
+		viewBox="0 0 122 122"
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+	>
+		<title>换火时间</title>
+		<defs>
+			<filter
+				x="-23.9%"
+				y="-23.9%"
+				width="147.8%"
+				height="147.8%"
+				filterUnits="objectBoundingBox"
+				id="filter-1"
+			>
+				<feOffset
+					dx="0"
+					dy="1"
+					in="SourceAlpha"
+					result="shadowOffsetOuter1"
+				></feOffset>
+				<feGaussianBlur
+					stdDeviation="5"
+					in="shadowOffsetOuter1"
+					result="shadowBlurOuter1"
+				></feGaussianBlur>
+				<feColorMatrix
+					values="0 0 0 0 0.976470588   0 0 0 0 0.470588235   0 0 0 0 0.207843137  0 0 0 0.54411604 0"
+					type="matrix"
+					in="shadowBlurOuter1"
+					result="shadowMatrixOuter1"
+				></feColorMatrix>
+				<feMerge>
+					<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+					<feMergeNode in="SourceGraphic"></feMergeNode>
+				</feMerge>
+			</filter>
+			<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+				<stop stop-color="#FDB764" offset="0%"></stop>
+				<stop stop-color="#F43D0A" offset="100%"></stop>
+			</linearGradient>
+			<linearGradient
+				x1="50%"
+				y1="-31.2420376%"
+				x2="50%"
+				y2="122.399129%"
+				id="linearGradient-3"
+			>
+				<stop stop-color="#FDB764" offset="0%"></stop>
+				<stop stop-color="#F43D0A" offset="100%"></stop>
+			</linearGradient>
+		</defs>
+		<g id="德州" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+			<g
+				id="德州4"
+				transform="translate(-4270.000000, -415.000000)"
+				fill-rule="nonzero"
+			>
+				<g id="编组-9备份-5" transform="translate(3654.000000, 381.000000)">
+					<g id="编组-34" transform="translate(564.000000, 0.000000)">
+						<g
+							id="换火时间"
+							filter="url(#filter-1)"
+							transform="translate(68.000000, 50.000000)"
+						>
+							<rect
+								id="矩形"
+								fill="#000000"
+								opacity="0"
+								x="0"
+								y="0"
+								width="90"
+								height="90"
+							></rect>
+							<path
+								d="M79.4710591,40.5539568 C80.2437783,40.5539568 80.8827388,41.1375558 80.9868457,41.9165015 L81,42.0647482 L81,66.2071942 C81,70.1841937 77.8342207,73.4350085 73.8951147,73.5660384 L73.6479353,73.5701439 L25.2170935,73.5700144 L25.2172246,79.452518 C25.2172246,80.2034096 24.6751302,80.8339854 23.9629876,80.9719632 L23.818402,80.9928805 L23.6699432,81 C23.3690026,81 23.0791148,80.9153278 22.8328392,80.7553978 L22.7134865,80.6692049 L9.56458815,70.3528547 C8.89550541,69.813731 8.82273763,68.8988102 9.35586403,68.1656976 L9.46292789,68.0305058 L9.57222022,67.9259663 L22.7055905,57.6127928 C23.3717813,57.0759993 24.3373073,57.1960072 24.8727908,57.8609255 C25.061432,58.0967883 25.1730043,58.3773662 25.2010323,58.673798 L25.2080543,58.8232014 L25.2077698,64.7052086 L72.1279424,64.7052086 L72.1281647,42.0647482 C72.1281647,41.3300436 72.6559802,40.7156549 73.3521639,40.5812617 L73.4935391,40.5608896 L73.638765,40.5539568 L79.4710591,40.5539568 Z M66.3117163,9 C66.6126569,9 66.9025447,9.0846722 67.1488202,9.2446022 L67.2681729,9.3307951 L80.4170713,19.6471453 C81.086154,20.186269 81.1589218,21.1011898 80.6257954,21.8343024 L80.5187316,21.9694942 L80.4094392,22.0740337 L67.276069,32.3872072 C66.6098782,32.9240007 65.6443521,32.8039928 65.1088686,32.1390745 C64.9202275,31.9032117 64.8086551,31.6226338 64.7806271,31.326202 L64.7736051,31.1767986 L64.7735827,25.2937554 L17.8534101,25.2937554 L17.8534948,47.9352518 C17.8534948,48.6699564 17.3256793,49.2843451 16.6294956,49.4187383 L16.4881204,49.4391104 L16.3428944,49.4460432 L10.5106003,49.4460432 C9.7269291,49.4460432 9.08029408,48.8453501 9.00693104,48.0804819 L9,47.9352518 L9,23.7928058 C9,19.8158063 12.1657793,16.5649915 16.1048853,16.4339616 L16.3520647,16.4298561 L64.764259,16.4289496 L64.7644348,10.547482 C64.7644348,9.7965904 65.3065293,9.1660146 66.0186719,9.02803679 L66.1632575,9.0071195 L66.3117163,9 Z"
+								id="形状结合"
+								fill="url(#linearGradient-2)"
+							></path>
+							<rect
+								id="矩形"
+								fill="url(#linearGradient-3)"
+								x="28.3448276"
+								y="33"
+								width="33.3103448"
+								height="23"
+								rx="2"
+							></rect>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</svg>
+</template>

src/components/isolate-area-1/Area.vue

@@ -20,8 +20,8 @@ export default {
 	data() {
 		return {
 			rdata: [
-				{ icon: "temp", title: "车间温度", value: "27℃" },
+				// { icon: "temp", title: "车间温度", value: "27℃" },
-				{ icon: "fire", title: "当前火向", value: "东火" },
+				{ icon: "fire", title: "当前火向", value: "南北" },
 				{ icon: "clock", title: "换火时间", value: "12:21:39" },
 				{ icon: "sand", title: "剩余时间", value: "6h" },
 			],

src/components/layout/Header.vue

@@ -1,7 +1,9 @@
 <template>
 	<header class="header relative">
 		<div>
-			<span style="width: 50px; height: 50px; background: red"></span>
+			<span class="header--logo">
+				<!-- <img src="../../assets/logo.png" alt="logo"> -->
+			</span>
 			<h1>凯盛晶华玻璃院公司800t/d特种玻璃生产线大数据指挥中心</h1>
 		</div>
 		<span class="header--wing absolute company"></span>
@@ -31,6 +33,12 @@ header {
 		align-items: center;
 		margin-bottom: 20px;
 
+		.header--logo {
+			width: 64px;
+			height: 64px;
+			background: url(../../assets/logo.png) center/contain no-repeat;
+		}
+
 		h1 {
 			margin-left: 20px;
 			font-size: 40px;

src/components/layout/Main.vue

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