新增 版本日志功能

src/components/Header.vue

@@ -29,6 +29,24 @@
       </div>
       <img class="user-icon" src="../assets/user.png" alt="" />
       <div class="user">{{ userName }}</div>
+      <el-popover placement="bottom" trigger="hover">
+        <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>
     <el-dialog v-model="dialogVisible" title="拍照通知" width="30%">
@@ -132,6 +150,10 @@ export default {
       }, 2 * 60 * 1000);
     });
 
+    let timelineData = ref([
+      { timer: "2022/01/24", version: "1.2.13.1", remark: "版本日志功能更新" },
+    ]);
+
     const size = 20;
     return {
       size,
@@ -143,6 +165,7 @@ export default {
       currentTableIndex,
       total,
       pageChange,
+      timelineData,
     };
   },
 };
@@ -196,7 +219,8 @@ export default {
 }
 
 .user,
-.quit {
+.quit,
+.log {
   font-size: 14px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
@@ -204,4 +228,8 @@ export default {
   cursor: pointer;
   margin-right: 16px;
 }
+
+.log-card p {
+  font-size: 10px;
+}
 </style>