新增 版本号及版本日志

src/components/Header.vue

@@ -4,10 +4,34 @@
       <img class="first" src="../assets/three.png" alt="" />
       <div class="shu"></div>
       <img class="logo" src="../assets/white-logo.png" alt="" />
+      <div
+        class="ml20"
+        style="color: #fff; font-size: 12px; height: 60px; padding-top: 50px"
+      >
+        version：{{ timelineData[0].version }}
+      </div>
     </div>
     <div class="right">
       <img class="user-icon" src="../assets/user.png" alt="" />
       <div class="user">{{ userName }}</div>
+      <el-popover placement="bottom" trigger="hover" :width="160">
+        <el-timeline>
+          <el-timeline-item
+            v-for="item in timelineData"
+            center
+            :timestamp="item.timer"
+            placement="top"
+          >
+            <div class="log-card">
+              <p style="margin-bottom: 5px">Version: {{ item.version }}</p>
+              <p>{{ item.remark }}</p>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+        <template #reference>
+          <div class="log">版本日志</div>
+        </template>
+      </el-popover>
       <div class="quit" @click="quit">[退出]</div>
     </div>
   </div>
@@ -15,6 +39,7 @@
 <script>
 import store from "../store";
 import router from "../router";
+import { ref } from "vue";
 
 export default {
   setup() {
@@ -24,9 +49,18 @@ export default {
       store.commit("changeLogin", false);
       router.push({ path: "/login" });
     }
+    let timelineData = ref([
+      { timer: "2022/02/7", version: "1.2.13.1", remark: "版本日志功能更新" },
+      {
+        timer: "2022/01/24",
+        version: "1.2.13.0",
+        remark: "磅单上传;下载卸货记录",
+      },
+    ]);
     return {
       quit,
       userName,
+      timelineData,
     };
   },
 };
@@ -73,14 +107,9 @@ export default {
   margin-left: 26px;
 }
 
-.user-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: 16px;
-}
-
 .user,
-.quit {
+.quit,
+.log {
   font-size: 14px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
@@ -88,4 +117,8 @@ export default {
   cursor: pointer;
   margin-right: 16px;
 }
+
+.log-card p {
+  font-size: 10px;
+}
 </style>

src/main.js

@@ -5,6 +5,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import md5 from "md5";
+import "./styles/index.css";
 
 const app = createApp(App);
 

src/styles/index.css

@@ -0,0 +1,191 @@
+
+.df {
+  display: flex;
+}
+
+.ffw {
+  flex-flow: wrap;
+}
+
+.jcsa {
+  justify-content: space-around;
+}
+.jcsb {
+  justify-content: space-between;
+}
+
+.jcfe {
+  justify-content: flex-end;
+}
+
+.jcc {
+  justify-content: center;
+}
+
+.aic {
+  align-items: center;
+}
+
+
+.aifs {
+  align-items: flex-start;
+}
+
+.dib {
+  display: inline-block;
+}
+
+
+.pointer {
+  cursor: pointer;
+}
+
+.m0a{
+  margin: 0 auto;
+}
+
+.mt5{
+  margin-top: 5px;
+}
+
+.mt10{
+  margin-top: 10px;
+}
+
+.mt20{
+  margin-top: 20px;
+}
+
+.mt30{
+  margin-top: 30px;
+}
+
+.mr5{
+  margin-right: 5px;
+}
+
+.mr10{
+  margin-right: 10px;
+}
+
+.mr20{
+  margin-right: 20px;
+}
+
+.mr30{
+  margin-right: 30px;
+}
+
+.mb5{
+  margin-bottom: 5px;
+}
+
+.mb10{
+  margin-bottom: 10px;
+}
+
+.mb20{
+  margin-bottom: 20px;
+}
+
+.mb30{
+  margin-bottom: 30px;
+}
+
+.ml5{
+  margin-left: 5px;
+}
+
+.ml10{
+  margin-left: 10px;
+}
+
+.ml20{
+  margin-left: 20px;
+}
+
+.ml30{
+  margin-left: 30px;
+}
+
+.p5{
+  padding: 5px;
+}
+
+.p10{
+  padding: 10px;
+}
+
+.p20{
+  padding: 20px;
+}
+
+.p30{
+  padding: 30px;
+}
+
+.pt5{
+  padding-top: 5px;
+}
+
+.pt10{
+  padding-top: 10px;
+}
+
+.pt20{
+  padding-top: 20px;
+}
+
+.pt30{
+  padding-top: 30px;
+}
+
+.pr5{
+  padding-right: 5px;
+}
+
+.pr10{
+  padding-right: 10px;
+}
+
+.pr20{
+  padding-right: 20px;
+}
+
+.pr30{
+  padding-right: 30px;
+}
+
+.pb5{
+  padding-bottom: 5px;
+}
+
+.pb10{
+  padding-bottom: 10px;
+}
+
+.pb20{
+  padding-bottom: 20px;
+}
+
+.pb30{
+  padding-bottom: 30px;
+}
+
+.pl5{
+  padding-left: 5px;
+}
+
+.pl10{
+  padding-left: 10px;
+}
+
+.pl20{
+  padding-left: 20px;
+}
+
+.pl30{
+  padding-left: 30px;
+}
+
+