vue-vben-admin/src/views/sys/lock/LockPage.vue

<template>
  <div :class="prefixCls">
    <div :class="`${prefixCls}__unlock`" @click="handleShowForm(false)" v-show="showDate">
      <LockOutlined />
      <span>{{ t('sys.lock.unlock') }}</span>
    </div>

    <div :class="`${prefixCls}__date`">
      <div :class="`${prefixCls}__hour`">
        {{ hour }}
        <span class="meridiem" v-show="showDate">{{ meridiem }}</span>
      </div>
      <div :class="`${prefixCls}__minute`">{{ minute }} </div>
    </div>
    <transition name="fade-slide">
      <div :class="`${prefixCls}-entry`" v-show="!showDate">
        <div :class="`${prefixCls}-entry-content`">
          <div :class="`${prefixCls}-entry__header`">
            <img :src="headerImg" :class="`${prefixCls}-entry__header-img`" />
            <p :class="`${prefixCls}-entry__header-name`">{{ realName }}</p>
          </div>
          <InputPassword :placeholder="t('sys.lock.placeholder')" v-model:value="password" />
          <span :class="`${prefixCls}-entry__err-msg`" v-if="errMsgRef">
            {{ t('sys.lock.alert') }}
          </span>
          <div :class="`${prefixCls}-entry__footer`">
            <a-button
              type="link"
              size="small"
              class="mt-2 mr-2"
              :disabled="loadingRef"
              @click="handleShowForm(true)"
            >
              {{ t('common.back') }}
            </a-button>
            <a-button
              type="link"
              size="small"
              class="mt-2 mr-2"
              :disabled="loadingRef"
              @click="goLogin"
            >
              {{ t('sys.lock.backToLogin') }}
            </a-button>
            <a-button class="mt-2" type="link" size="small" @click="unLock()" :loading="loadingRef">
              {{ t('sys.lock.entry') }}
            </a-button>
          </div>
        </div>
      </div>
    </transition>

    <div :class="`${prefixCls}__footer-date`">
      <div class="time" v-show="!showDate">
        {{ hour }}:{{ minute }} <span class="meridiem">{{ meridiem }}</span>
      </div>
      <div class="date"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { Alert, Input } from 'ant-design-vue';

  import { userStore } from '/@/store/modules/user';
  import { lockStore } from '/@/store/modules/lock';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { useNow } from './useNow';
  import { useDesign } from '/@/hooks/web/useDesign';

  import { LockOutlined } from '@ant-design/icons-vue';
  import headerImg from '/@/assets/images/header.jpg';

  export default defineComponent({
    name: 'LockPage',
    components: { Alert, LockOutlined, InputPassword: Input.Password },

    setup() {
      const passwordRef = ref('');
      const loadingRef = ref(false);
      const errMsgRef = ref(false);
      const showDate = ref(true);

      const { prefixCls } = useDesign('lock-page');

      const { start, stop, ...state } = useNow(true);

      const { t } = useI18n();

      const realName = computed(() => {
        const { realName } = userStore.getUserInfoState || {};
        return realName;
      });

      /**
       * @description: unLock
       */
      async function unLock() {
        if (!passwordRef.value) {
          return;
        }
        let password = passwordRef.value;
        try {
          loadingRef.value = true;
          const res = await lockStore.unLockAction({ password });
          errMsgRef.value = !res;
        } finally {
          loadingRef.value = false;
        }
      }

      function goLogin() {
        userStore.loginOut(true);
        lockStore.resetLockInfo();
      }

      function handleShowForm(show = false) {
        showDate.value = show;
      }

      return {
        goLogin,
        realName,
        unLock,
        errMsgRef,
        loadingRef,
        t,
        prefixCls,
        showDate,
        password: passwordRef,
        handleShowForm,
        headerImg,
        ...state,
      };
    },
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-lock-page';

  .@{prefix-cls} {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @lock-page-z-index;
    display: flex;
    width: 100vw;
    height: 100vh;
    // background: rgba(23, 27, 41);
    background: #000;
    align-items: center;
    justify-content: center;

    &__unlock {
      position: absolute;
      top: 0;
      left: 50%;
      display: flex;
      height: 50px;
      padding-top: 20px;
      font-size: 18px;
      color: #fff;
      cursor: pointer;
      transform: translate(-50%, 0);
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s;
    }

    &__date {
      display: flex;
      width: 100vw;
      height: 100vh;
      align-items: center;
      justify-content: center;
    }

    &__hour {
      position: relative;
      margin-right: 80px;

      .meridiem {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 26px;
      }
      @media (max-width: @screen-xs) {
        margin-right: 20px;
      }
    }

    &__hour,
    &__minute {
      display: flex;
      width: 40%;
      height: 74%;
      // font-size: 50em;
      font-weight: 700;
      color: #bababa;
      background: #141313;
      border-radius: 30px;
      justify-content: center;
      align-items: center;
      // .respond-to(large-only, { font-size: 25em;});
      // .respond-to(large-only, { font-size: 30em;});
      @media (min-width: @screen-xxxl-min) {
        font-size: 46em;
      }
      @media (min-width: @screen-xl-max) and (max-width: @screen-xxl-max) {
        font-size: 38em;
      }

      @media (min-width: @screen-lg-max) and (max-width: @screen-xl-max) {
        font-size: 30em;
      }
      @media (min-width: @screen-md-max) and (max-width: @screen-lg-max) {
        font-size: 23em;
      }
      @media (min-width: @screen-sm-max) and (max-width: @screen-md-max) {
        height: 50%;
        font-size: 12em;
        border-radius: 10px;

        .meridiem {
          font-size: 20px;
        }
      }
      @media (min-width: @screen-xs-max) and (max-width: @screen-sm-max) {
        font-size: 13em;
      }
      @media (max-width: @screen-xs) {
        height: 30%;
        font-size: 5em;
        border-radius: 10px;

        .meridiem {
          font-size: 14px;
        }
      }
    }

    &__footer-date {
      position: absolute;
      bottom: 20px;
      width: 100%;
      font-family: helvetica;
      color: #bababa;
      text-align: center;

      .time {
        font-size: 50px;

        .meridiem {
          font-size: 32px;
        }
      }

      .date {
        font-size: 26px;
      }
    }

    &-entry {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      justify-content: center;
      align-items: center;

      &-content {
        width: 260px;
      }

      &__header {
        text-align: center;

        &-img {
          width: 70px;
          border-radius: 50%;
        }

        &-name {
          margin-top: 5px;
          font-weight: 500;
          color: #bababa;
        }
      }

      &__err-msg {
        display: inline-block;
        margin-top: 10px;
        color: @error-color;
      }

      &__footer {
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>