保存进度！

企业级管理系统/web/admin_system/src/layout/components/Header.vue

@@ -2,22 +2,63 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:39:04
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-04 11:39:05
+ * @LastEditTime: 2023-01-05 16:17:43
  * @FilePath: \admin_system\src\layout\components\Header.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <div>Header</div>
+    <div class="app_banner">
+        <span class="company_name">CPIC</span>
+        <div class="version_div">
+            <div>测试版</div>
+            <div>3.6.7 x64 Build202208301257</div>
+        </div>
+        <div class="buttons_div"></div>
+    </div>
 </template>
 
 <script>
 export default {
-    name: "LayoutHeader"
+    name: "AppBanner",
+    data()
+    {
+        return {};
+    },
+    // created() {
+    //   console.log("banner请求数据！");
+    // },
+    mounted()
+    {
+        console.log("banner请求数据！");
+    },
 };
 </script>
-
 <style scoped>
+.app_banner {
+    background-color: var(--banner-background-color);
+    color: #fff;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0px 15px;
+    height: 100%;
+}
 
+.app_banner>*+* {
+    margin-left: 10px;
+}
+
+.company_name {
+    font-size: 2rem;
+}
+
+.version_div {
+    font-size: 0.5rem;
+}
+
+.buttons_div {
+    margin-left: auto;
+}
 </style>