update header

src/components/layout/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="header relative">
+  <header class="header">
     <div>
       <span class="header--logo">
         <!-- <img src="../../assets/logo.png" alt="logo"> -->
@@ -8,20 +8,20 @@
     </div>
     <span class="header--wing absolute company"></span>
     <span class="header--wing absolute datetime">
-      {{ moment(today).format('YYYY.M.D dddd HH:mm:ss') }}
+      {{ moment(today).format("YYYY.M.D dddd HH:mm:ss") }}
     </span>
   </header>
 </template>
 
 <script>
-import moment from 'moment'
+import moment from "moment";
 export default {
   name: "Header",
   data() {
     return {
       today: new Date(),
       time: "00:00:00",
-      moment
+      moment,
     };
   },
   computed: {
@@ -41,10 +41,10 @@ export default {
     },
   },
   mounted() {
-    moment.locale('zh-cn')
+    moment.locale("zh-cn");
     // this.time = this.getTime().join(":");
     setInterval(() => {
-      this.today = new Date()
+      this.today = new Date();
       // this.time = this.getTime().join(":");
     }, 1000);
   },
@@ -66,19 +66,26 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
-  background: url(../../assets/header.png) center/contain no-repeat;
-  background-size: 100%;
-  height: 141px;
-  width: 2672px;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  background: url(../../assets/header.png) no-repeat;
+  background-position: center;
+  background-size: contain;
+  // background-size: 100%;
+  height: 146px;
   display: grid;
-  place-items: center;
+  place-content: center;
 
   > div {
     display: flex;
     align-items: center;
-    margin-bottom: adjust(10px);
+    margin-bottom: 0;
 
     .header--logo {
+      margin-top: 12px;
       width: 64px;
       height: 94px;
       background: url(../../assets/logo.png) center/contain no-repeat;
@@ -87,12 +94,9 @@ header {
     h1 {
       margin-left: 36px;
       font-size: 72px;
-      // line-height: adjust(100px);
-      // background: #eee;
       user-select: none;
-      letter-spacing: 12px;
+      letter-spacing: 14px;
       font-weight: 400;
-      // color: #6bf2ff;
       color: $main-color;
       font-family: "微软雅黑", sans-serif;
     }
@@ -101,25 +105,26 @@ header {
 
 .header--wing {
   left: 0;
-  bottom: adjust(10px);
-  height: adjust(h(78px));
+  bottom: -20px;
+  height: 72px;
 }
 
 .company {
-  margin-left: adjust(w(1460px));
-  width: adjust(w(1320px));
-  height: adjust(h(48px));
+  margin-left: 1458px;
+  width: 768px;
+  height: 67px;
   background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
   color: $main-color;
-  font-size: adjust(26px);
+  font-size: 48px;
   text-align: center;
   // display: inline-block;
-  margin-left: adjust(w(6150px));
-  width: adjust(w(1320px));
-  height: adjust(h(48px));
+  left: unset;
+  right: 1573px;
+  width: 646px;
+  height: 67px;
   background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>

src/views/HomeView.vue

@@ -8,9 +8,8 @@
     <!-- <div class="bg-layer"></div> -->
     <LeftSide />
     <section class="center">
-      <header style="height: 1px"></header>
-      <!-- <BigHeader /> -->
-      <MainPanel style="height: 1px; flex: 1;" />
+      <BigHeader />
+      <MainPanel style="height: 1px; flex: 1" />
       <!-- <Main /> -->
     </section>
     <RightSide />
@@ -103,6 +102,7 @@ export default {
 }
 
 .center {
+  position: relative;
   width: 6592px;
   //   flex: 1;
   display: flex;
@@ -120,7 +120,7 @@ export default {
   background: #fff;
   position: fixed;
   // bottom: 64px;
-  bottom: 0;
+  top: 0;
   opacity: 0;
   left: 50%;
   transform: translateX(-50%);