'admin-21.01.11:增加自动锁屏界面（未完成）'

vue-admin-wonderful-next/src/App.vue

@@ -1,13 +1,19 @@
 <template>
   <router-view />
+  <LockScreen />
 </template>
 
 <script lang="ts">
 import { onBeforeMount } from "vue";
+import { useStore } from "/@/store/index.ts";
 import { setIconfont } from "/@/utils/setIconfont.ts";
+import LockScreen from "/@/views/layout/lockScreen/index.vue";
 export default {
   name: "app",
+  components: { LockScreen },
   setup() {
+    const store = useStore();
+    console.log(store);
     // 设置批量第三方 icon 图标
     onBeforeMount(() => {
       setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);

vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="layout-lock-screen layout-lock-screen-mask">
+    <div class="layout-lock-screen-date">
+      <div class="layout-lock-screen-date-box">
+        <div class="layout-lock-screen-date-box-time">22:14</div>
+        <div class="layout-lock-screen-date-box-info">1月11日，星期一</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "layoutLockScreen",
+  setup() {},
+};
+</script>
+
+<style scoped lang="scss">
+.layout-lock-screen-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.layout-lock-screen-mask {
+  background: rgba(255, 255, 255, 1);
+  @extend .layout-lock-screen-fixed;
+}
+.layout-lock-screen {
+  @extend .layout-lock-screen-fixed;
+  background-image: url("https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG");
+  background-size: 100% 100%;
+  z-index: 9999999;
+  &-date {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    right: 0;
+    color: #ffffff;
+    border: 1px solid red;
+    &-box {
+      position: absolute;
+      left: 30px;
+      bottom: 50px;
+      &-time {
+        font-size: 100px;
+      }
+      &-info {
+        font-size: 40px;
+      }
+    }
+  }
+}
+</style>