From 0317c4d60700817ab1209c861ff8bb4e4db69242 Mon Sep 17 00:00:00 2001
From: Kane <wangkane@qq.com>
Date: Mon, 5 Dec 2022 01:07:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 入门/cli/hello-cli/src/App.vue              |  9 ++--
 .../cli/hello-cli/src/assets/css/colors.css   |  7 +++-
 .../cli/hello-cli/src/assets/css/global.css   |  6 +--
 .../hello-cli/src/components/AppBanner.vue    | 41 ++++++++++++++++---
 入门/cli/hello-cli/src/main.js              |  3 +-
 5 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/入门/cli/hello-cli/src/App.vue b/入门/cli/hello-cli/src/App.vue
index 389eb91..465b598 100644
--- a/入门/cli/hello-cli/src/App.vue
+++ b/入门/cli/hello-cli/src/App.vue
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-22 17:50:49
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-05 00:21:20
+ * @LastEditTime: 2022-12-05 00:52:17
  * @FilePath: \hello-cli\src\App.vue
  * @Description: 
  * 
@@ -11,7 +11,7 @@
 <template>
   <div class="content">
     <div class="banner">
-      <span>标题</span>
+      <AppBanner>标题</AppBanner>
     </div>
     <div class="container">
       <div class="nav"></div>
@@ -21,9 +21,11 @@
 </template>
 
 <script>
+import AppBanner from "./components/AppBanner.vue";
+
 export default {
   name: "App",
-  components: {},
+  components: { AppBanner },
   methods: {},
 };
 </script>
@@ -44,7 +46,6 @@ export default {
 
 .banner {
   height: 50px;
-  padding: 0px;
 }
 
 .container {
diff --git a/入门/cli/hello-cli/src/assets/css/colors.css b/入门/cli/hello-cli/src/assets/css/colors.css
index 3ca3f30..5e20aef 100644
--- a/入门/cli/hello-cli/src/assets/css/colors.css
+++ b/入门/cli/hello-cli/src/assets/css/colors.css
@@ -2,8 +2,8 @@
  * @Author: Kane
  * @Date: 2022-11-12 23:22:59
  * @LastEditors: Kane
- * @LastEditTime: 2022-11-16 15:26:04
- * @FilePath: \car_dealer\css\colors.css
+ * @LastEditTime: 2022-12-05 01:07:18
+ * @FilePath: \hello-cli\src\assets\css\colors.css
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
@@ -18,4 +18,7 @@ html {
     --btn-font-color: #fff;
 
     --input-focus-color: #e56651;
+
+    /* 标题栏背景色 */
+    --banner-background-color: #1d74b2;
 }
diff --git a/入门/cli/hello-cli/src/assets/css/global.css b/入门/cli/hello-cli/src/assets/css/global.css
index bc7be0d..353298c 100644
--- a/入门/cli/hello-cli/src/assets/css/global.css
+++ b/入门/cli/hello-cli/src/assets/css/global.css
@@ -2,8 +2,8 @@
  * @Author: Kane
  * @Date: 2022-12-05 00:07:49
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-05 00:16:31
- * @FilePath: \hello-cli\src\css\global.css
+ * @LastEditTime: 2022-12-05 00:48:04
+ * @FilePath: \hello-cli\src\assets\css\global.css
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
@@ -11,7 +11,7 @@
 html,
 body,
 #app {
-    padding: 0px;
+    /* padding: 0px; */
     margin: 0px;
     overflow: hidden;
 }
diff --git a/入门/cli/hello-cli/src/components/AppBanner.vue b/入门/cli/hello-cli/src/components/AppBanner.vue
index 6c4d467..fbd576b 100644
--- a/入门/cli/hello-cli/src/components/AppBanner.vue
+++ b/入门/cli/hello-cli/src/components/AppBanner.vue
@@ -2,14 +2,21 @@
  * @Author: Kane
  * @Date: 2022-12-02 22:44:12
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-02 22:47:10
- * @FilePath: \hello-cli\src\components\banner.vue
+ * @LastEditTime: 2022-12-05 01:05:42
+ * @FilePath: \hello-cli\src\components\AppBanner.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-  <h1><slot>AppBanner</slot></h1>
+  <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>
@@ -20,6 +27,30 @@ export default {
   },
 };
 </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%;
+}
 
-<style>
-</style>
\ No newline at end of file
+.app_banner > * + * {
+  margin-left: 10px;
+}
+
+.company_name {
+  font-size: 2rem;
+}
+
+.version_div {
+  font-size: 0.5rem;
+}
+
+.buttons_div {
+  margin-left: auto;
+}
+</style>
diff --git a/入门/cli/hello-cli/src/main.js b/入门/cli/hello-cli/src/main.js
index ba13617..2d3c9d7 100644
--- a/入门/cli/hello-cli/src/main.js
+++ b/入门/cli/hello-cli/src/main.js
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-11-22 17:50:49
  * @LastEditors: Kane
- * @LastEditTime: 2022-12-05 00:19:58
+ * @LastEditTime: 2022-12-05 01:05:43
  * @FilePath: \hello-cli\src\main.js
  * @Description: 
  * 
@@ -15,6 +15,7 @@ import ElementPlus from "element-plus";
 import "./assets/css/root.css";
 import "./assets/css/normalize.css";
 import "./assets/css/global.css";
+import "./assets/css/colors.css";
 import 'element-plus/dist/index.css';