保存进度！

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