theme

src/components/Header/Date.vue

@@ -16,39 +16,40 @@ import Clock from '@/assets/img/clock.png'
 .date_container {
   display: flex;
   align-items: center;
-  padding: 13px 35px;
-  box-sizing: border-box;
-  background: #ffffff;
+  padding: 13px 29px;
+  background: #393f46;
   border-radius: 34px;
-  width: 528px;
+  width: 392px;
+  height: 68px;
+  border-radius: 433px;
   box-sizing: border-box;
   .cala_img {
-    width: 32px;
-    height: 30px;
-    margin-right: 19px;
+    width: 28px;
+    height: 26px;
+    margin-right: 8px;
   }
   .cala_text {
     font-family: Poppins;
-    font-size: 28px;
+    font-size: 22px;
     font-weight: 500;
     line-height: normal;
-    letter-spacing: 0.1em;
-    color: #393f46;
+    letter-spacing: 0.06em;
+    color: #ffffff;
     white-space: nowrap;
   }
   .clock_img {
     width: 26px;
     height: 26px;
-    margin-right: 17px;
-    margin-left: 36px;
+    margin-right: 7px;
+    margin-left: 22px;
   }
   .clock_text {
     font-family: Poppins;
-    font-size: 28px;
+    font-size: 22px;
     font-weight: 500;
     line-height: normal;
-    letter-spacing: 0.1em;
-    color: #393f46;
+    letter-spacing: 0.06em;
+    color: #ffffff;
     white-space: nowrap;
   }
 }

src/components/Header/User.vue

@@ -1,7 +1,45 @@
 <template>
-  <div class="user_info_container">123</div>
+  <div class="user_info_container">
+    <p class="user_name">毛超颖</p>
+    <div class="avator_wrap">毛</div>
+  </div>
 </template>
 
 <script setup></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.user_info_container {
+  width: 234px;
+  height: 68px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 20px;
+  .user_name {
+    font-family: Poppins;
+    font-size: 26px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0.1em;
+    color: #d6d9f1;
+    margin-right: 11px;
+  }
+  .avator_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 60px;
+    background: #26d574;
+    box-sizing: border-box;
+    border: 3px solid #22c56b;
+    font-family: Poppins;
+    font-size: 28px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0.1em;
+    border-radius: 50%;
+    color: #ffffff;
+  }
+}
+</style>

src/components/Header/index.vue

@@ -5,12 +5,14 @@
       <img :src="Status" class="status_img" alt="" />
       <p class="status_text">机器运行状态</p>
     </div>
+    <User />
   </div>
 </template>
 
 <script setup>
 import Date from './Date'
 import Status from '@/assets/img/status.png'
+import User from './User'
 </script>
 
 <style lang="scss" scoped>
@@ -19,10 +21,10 @@ import Status from '@/assets/img/status.png'
   display: flex;
   align-items: center;
   .status_container {
-    width: 1362px;
+    width: 1490px;
     height: 68px;
     border-radius: 34px;
-    background: #ffffff;
+    background: #393f46;
     margin-left: 20px;
     padding: 0 18px;
     box-sizing: border-box;
@@ -40,7 +42,7 @@ import Status from '@/assets/img/status.png'
       line-height: normal;
       letter-spacing: 0.06em;
       font-feature-settings: 'kern' on;
-      color: #1c1c1c;
+      color: #b0b0b0;
     }
   }
 }