update Header

src/components/common/SmallBox2.vue

@@ -56,10 +56,11 @@ export default {
 @import "../../assets/styles/functions";
 
 .small-box-2 {
+	flex-shrink: 0;
 	padding: adjust(7px);
 	user-select: none;
 	width: adjust(w(744px));
-	height: adjust(h(320px));
+	height: adjust(h(366px));
 	display: flex;
 	background: url(../../assets/top-middle.png) no-repeat;
 	background-size: 100% 100%;

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

@@ -12,7 +12,7 @@
     <div class="data runtime">
       <span>运</span>
       <span>行</span>
-      <span v-for="val, index in runtime" :key="index" class="digit">{{ val }}</span>
+      <span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
       <span>天</span>
     </div>
   </DragabbleContainer>
@@ -76,7 +76,8 @@ export default {
 .isolate-area-1 {
   display: flex;
   color: $main-color; 
-  background: lightyellow;
+  min-width: 300px;
+  align-items: center;
 
   > *:not(:last-child) {
     margin: {
@@ -85,13 +86,31 @@ export default {
   }
 
   > .data {
-    background: lightgreen;
+    flex-shrink: 0;
+    font-family: zcoolqingkehuangyouti-Regular, sans-serif;
+    display: flex;
+    align-items: flex-end;
   }
 
-  // > .data-center + .data-center {
+  > .data > span:not(.dot) {
-  //   margin: {
+    /** 边框 */
-  //     left: adjust(15px);
+    background: url('../../assets/digitbox1.png') no-repeat;
-  //   }
+    background-size: 100% 100%; 
-  // }
+    display: inline-block;
+    width: adjust(w(220px));
+    height: adjust(h(260px));
+    color: #0068ffaa;
+    font-size: h(200px);
+    line-height: h(600px);
+    text-align: center;
+    vertical-align: bottom;
+  }
+  
+  > .data > span.digit {
+    /** 数字字体大小 */
+    color: #0071ff;
+    font-size: h(360px);
+    line-height: h(540px);
+  }
 }
 </style>

src/components/layout/Header.vue

@@ -6,7 +6,9 @@
       </span>
       <h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
     </div>
-    <span class="header--wing absolute company"></span>
+    <span class="header--wing absolute company">
+      设计单位: 中建材智能自动化研究院
+    </span>
     <span class="header--wing absolute datetime">
       {{ moment(today).format('YYYY.M.D dddd HH:mm:ss') }}
     </span>
@@ -66,11 +68,11 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
-  background: url(../../assets/header.png) no-repeat, #f003;
+  background: url(../../assets/header-wings.png) left 12% top 72px / 95% no-repeat, url(../../assets/header.png) center / 100% 100% no-repeat, #f003;
-  background-size: 100% 100%;
+  // background-size: 100% 100%;
   // background-size: cover;
-  background-position: bottom;
+  // background-position: bottom;
-  height: adjust(h(630px));
+  height: adjust(h(580px));
   width: adjust(w(21120px));
   display: grid;
   place-items: center;
@@ -100,26 +102,31 @@ header {
 }
 
 .header--wing {
+  top: adjust(h(128px));
   left: 0;
   bottom: adjust(10px);
-  height: adjust(h(78px));
+  height: adjust(h(130px));
 }
 
 .company {
-  margin-left: adjust(w(1460px));
+  margin-left: adjust(w(3800px));
-  width: adjust(w(1320px));
+  height: adjust(h(130px));
-  height: adjust(h(48px));
+  font-size: adjust(h(100px));
-  background: url("../../assets/company.png") center/cover no-repeat;
+  text-align: center;
+  color: lighten($main-color, 8);
+  letter-spacing: 2px;
+  // background: red;
+  // width: adjust(w(1320px));
+  // background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
   color: $main-color;
-  font-size: adjust(26px);
+  font-size: adjust(h(100px));
   text-align: center;
-  // display: inline-block;
+  margin-left: adjust(w(15520px));
-  margin-left: adjust(w(6150px));
+  height: adjust(h(130px));
-  width: adjust(w(1320px));
+  // width: adjust(w(1764px));
-  height: adjust(h(48px));
+  // background: url("../../assets/date.png") center/cover no-repeat;
-  background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>

src/components/layout/Main.vue

@@ -179,14 +179,14 @@ main {
 
 .area-one {
 	position: absolute;
-	top: adjust(170px);
+	top: adjust(150px);
-	left: adjust(1588px);
+	left: adjust(1340px);
 }
 
 .video-crash {
 	height: adjust(h(424px));
 	width: adjust(w(800px));
-	background: url(../../assets/tv.png) no-repeat;
+	// background: url(../../assets/tv.png) no-repeat;
 	background-size: 100%;
 	display: inline-block;
 	position: absolute;
@@ -263,7 +263,7 @@ main {
 }
 
 .onekb, .onesp{
-	background: url(../../assets/tem-bottom.png) no-repeat;
+	// background: url(../../assets/tem-bottom.png) no-repeat;
 }
 .onekb {
 	top: adjust(300px);
@@ -274,7 +274,7 @@ main {
 	left: adjust(520px)
 }
 .twokb, .twosp{
-	background: url(../../assets/tem-top.png) no-repeat;
+	// background: url(../../assets/tem-top.png) no-repeat;
 }
 .twokb {
 	top: adjust(-20px);

src/views/HomeView.vue

@@ -29,7 +29,8 @@ export default {
 	height: adjust($actual_height);
 	width: adjust($actual_width);
 	overflow: hidden;
-	background: url(../assets/bg.png) center/cover no-repeat ;
+	// background: url(../assets/bg.png) center/cover no-repeat ;
+	background: #cccc;
 	color: white;
 	display: flex;
 	flex-direction: column;