fix: 固定底部行条

src/layouts/BasicLayout.vue

@@ -122,52 +122,52 @@ tabsStore.clear();
 
 //
 onMounted(() => {
-  fnGetServerTime();
+  // fnGetServerTime();
   useAlarmStore().fnGetActiveAlarmInfo();
 });
 
 // ==== 服务器时间显示 start
-let serverTime = reactive({
-  timestamp: 0,
-  zone: '', // 时区 UTC
-  str: '', // 年月日时分秒
-  interval: 0 as any, // 定时器
-});
+// let serverTime = reactive({
+//   timestamp: 0,
+//   zone: '', // 时区 UTC
+//   str: '', // 年月日时分秒
+//   interval: 0 as any, // 定时器
+// });
 
-// 获取服务器时间
-function fnGetServerTime() {
-  getServerTime().then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && res.data) {
-      // 时间戳
-      serverTime.timestamp = parseInt(res.data.timestamp);
-      serverTime.interval = setInterval(() => {
-        serverTime.timestamp += 1000;
-        serverTime.str = parseDateToStr(serverTime.timestamp);
-      }, 1000);
+// // 获取服务器时间
+// function fnGetServerTime() {
+//   getServerTime().then(res => {
+//     if (res.code === RESULT_CODE_SUCCESS && res.data) {
+//       // 时间戳
+//       serverTime.timestamp = parseInt(res.data.timestamp);
+//       serverTime.interval = setInterval(() => {
+//         serverTime.timestamp += 1000;
+//         serverTime.str = parseDateToStr(serverTime.timestamp);
+//       }, 1000);
 
-      // 时区
-      const offsetHours = res.data.timeZone / 3600;
-      if (offsetHours === 0) {
-        serverTime.zone = 'UTC';
-      } else if (offsetHours > 0) {
-        serverTime.zone = `UTC +${offsetHours}`;
-      } else {
-        serverTime.zone = `UTC ${offsetHours}`;
-      }
-    }
-  });
-}
+//       // 时区
+//       const offsetHours = res.data.timeZone / 3600;
+//       if (offsetHours === 0) {
+//         serverTime.zone = 'UTC';
+//       } else if (offsetHours > 0) {
+//         serverTime.zone = `UTC +${offsetHours}`;
+//       } else {
+//         serverTime.zone = `UTC ${offsetHours}`;
+//       }
+//     }
+//   });
+// }
 
 // 监听可视改变
 document.addEventListener('visibilitychange', function () {
   if (document.visibilityState == 'hidden') {
     //切离该页面时执行
-    clearInterval(serverTime.interval);
+    // clearInterval(serverTime.interval);
   }
   if (document.visibilityState == 'visible') {
     //切换到该页面时执行
-    clearInterval(serverTime.interval);
-    fnGetServerTime();
+    // clearInterval(serverTime.interval);
+    // fnGetServerTime();
     useAlarmStore().fnGetActiveAlarmInfo();
   }
 });
@@ -237,15 +237,18 @@ document.addEventListener('visibilitychange', function () {
       </RouterView>
 
       <!--插槽-内容底部-->
-      <template #footerRender>
+      <template #footerRender="{ width }">
         <footer class="footer">
-          <div>
-            <span>{{ appStore.copyright }}</span>
-          </div>
-          <div>
-            <span class="footer-time">
-              {{ serverTime.str }} {{ serverTime.zone }}
-            </span>
+          &nbsp;
+          <div class="footer-fixed" :style="{ width }">
+            <div>
+              <span>{{ appStore.copyright }}</span>
+            </div>
+            <div>
+              <span class="footer-time">
+                <!-- {{ serverTime.str }} {{ serverTime.zone }} -->
+              </span>
+            </div>
           </div>
         </footer>
       </template>
@@ -269,18 +272,25 @@ document.addEventListener('visibilitychange', function () {
 }
 
 .footer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
   z-index: 16;
   margin: 0px;
-  padding: 4px 16px;
   width: auto;
-  background: #fff;
-  box-shadow: 0 1px 4px #0015291f;
-  transition: background 0.3s, width 0.2s;
   margin-top: 48px;
+  padding: 4px 16px;
+  &-fixed {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding: 4px 16px;
+    background: #fff;
+    box-shadow: 0 1px 4px #0015291f;
+    transition: background 0.3s, width 0.2s;
+  }
 
   &-time {
     color: #00000085;