保存进度！

入门/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 {

入门/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;
 }

入门/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;
 }

入门/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>
+.app_banner > * + * {
+  margin-left: 10px;
+}
+
+.company_name {
+  font-size: 2rem;
+}
+
+.version_div {
+  font-size: 0.5rem;
+}
+
+.buttons_div {
+  margin-left: auto;
+}
 </style>

入门/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';