Blame view

src/views/sys/lock/LockPage.vue 6.57 KB
vben authored
1
<template>
vben authored
2
3
4
5
6
7
8
9
10
11
  <div
    :class="prefixCls"
    class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center"
  >
    <div
      :class="`${prefixCls}__unlock`"
      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
      @click="handleShowForm(false)"
      v-show="showDate"
    >
vben authored
12
13
14
15
      <LockOutlined />
      <span>{{ t('sys.lock.unlock') }}</span>
    </div>
vben authored
16
17
18
19
20
21
    <div class="flex w-screen h-screen justify-center items-center">
      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
        <span>{{ hour }}</span>
        <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
          {{ meridiem }}
        </span>
vben authored
22
      </div>
vben authored
23
24
      <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
        <span> {{ minute }}</span>
25
      </div>
vben authored
26
27
28
29
    </div>
    <transition name="fade-slide">
      <div :class="`${prefixCls}-entry`" v-show="!showDate">
        <div :class="`${prefixCls}-entry-content`">
vben authored
30
          <div :class="`${prefixCls}-entry__header enter-x`">
vben authored
31
            <img :src="headerImg" :class="`${prefixCls}-entry__header-img`" />
32
33
34
            <p :class="`${prefixCls}-entry__header-name`">
              {{ realName }}
            </p>
vben authored
35
          </div>
vben authored
36
37
38
39
40
          <InputPassword
            :placeholder="t('sys.lock.placeholder')"
            class="enter-x"
            v-model:value="password"
          />
Vben authored
41
          <span :class="`${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
vben authored
42
43
            {{ t('sys.lock.alert') }}
          </span>
vben authored
44
          <div :class="`${prefixCls}-entry__footer enter-x`">
vben authored
45
46
47
            <a-button
              type="link"
              size="small"
vben authored
48
              class="mt-2 mr-2 enter-x"
Vben authored
49
              :disabled="loading"
vben authored
50
51
              @click="handleShowForm(true)"
            >
vben authored
52
              {{ t('common.back') }}
vben authored
53
54
55
56
            </a-button>
            <a-button
              type="link"
              size="small"
vben authored
57
              class="mt-2 mr-2 enter-x"
Vben authored
58
              :disabled="loading"
vben authored
59
60
61
62
              @click="goLogin"
            >
              {{ t('sys.lock.backToLogin') }}
            </a-button>
Vben authored
63
            <a-button class="mt-2" type="link" size="small" @click="unLock()" :loading="loading">
vben authored
64
65
66
67
68
69
70
              {{ t('sys.lock.entry') }}
            </a-button>
          </div>
        </div>
      </div>
    </transition>
vben authored
71
72
73
    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
      <div class="text-5xl mb-4 enter-x" v-show="!showDate">
        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
vben authored
74
      </div>
vben authored
75
      <div class="text-2xl"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div>
vben authored
76
77
78
79
80
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
81
  import { Input } from 'ant-design-vue';
vben authored
82
Vben authored
83
84
  import { useUserStore } from '/@/store/modules/user';
  import { useLockStore } from '/@/store/modules/lock';
vben authored
85
86
87
88
89
90
  import { useI18n } from '/@/hooks/web/useI18n';

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

  import { LockOutlined } from '@ant-design/icons-vue';
vben authored
91
  import headerImg from '/@/assets/images/header.jpg';
vben authored
92
93
94

  export default defineComponent({
    name: 'LockPage',
95
    components: { LockOutlined, InputPassword: Input.Password },
vben authored
96
97

    setup() {
Vben authored
98
99
100
      const password = ref('');
      const loading = ref(false);
      const errMsg = ref(false);
vben authored
101
102
103
      const showDate = ref(true);

      const { prefixCls } = useDesign('lock-page');
Vben authored
104
105
      const lockStore = useLockStore();
      const userStore = useUserStore();
vben authored
106
107
      const { ...state } = useNow(true);
vben authored
108
109
110
111

      const { t } = useI18n();

      const realName = computed(() => {
Vben authored
112
        const { realName } = userStore.getUserInfo || {};
vben authored
113
114
115
116
117
118
119
        return realName;
      });

      /**
       * @description: unLock
       */
      async function unLock() {
Vben authored
120
        if (!password.value) {
vben authored
121
122
          return;
        }
Vben authored
123
        let pwd = password.value;
vben authored
124
        try {
Vben authored
125
126
127
          loading.value = true;
          const res = await lockStore.unLock(pwd);
          errMsg.value = !res;
vben authored
128
        } finally {
Vben authored
129
          loading.value = false;
vben authored
130
131
132
133
        }
      }

      function goLogin() {
134
        userStore.logout(true);
vben authored
135
136
137
138
139
140
141
142
143
144
145
        lockStore.resetLockInfo();
      }

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

      return {
        goLogin,
        realName,
        unLock,
Vben authored
146
147
        errMsg,
        loading,
vben authored
148
149
150
        t,
        prefixCls,
        showDate,
Vben authored
151
        password,
vben authored
152
        handleShowForm,
vben authored
153
        headerImg,
vben authored
154
155
156
157
158
159
160
161
162
        ...state,
      };
    },
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-lock-page';

  .@{prefix-cls} {
vben authored
163
    z-index: @lock-page-z-index;
vben authored
164
165
166
167
168
169
170
171
172
173

    &__unlock {
      transform: translate(-50%, 0);
    }

    &__hour,
    &__minute {
      display: flex;
      font-weight: 700;
      color: #bababa;
174
      background-color: #141313;
vben authored
175
176
177
178
      border-radius: 30px;
      justify-content: center;
      align-items: center;
vben authored
179
180
181
182
      @media screen and (max-width: @screen-md) {
        span:not(.meridiem) {
          font-size: 160px;
        }
vben authored
183
      }
184
vben authored
185
186
187
      @media screen and (min-width: @screen-md) {
        span:not(.meridiem) {
          font-size: 160px;
188
        }
vben authored
189
      }
190
vben authored
191
192
193
      @media screen and (max-width: @screen-sm) {
        span:not(.meridiem) {
          font-size: 90px;
194
        }
vben authored
195
      }
vben authored
196
197
198
      @media screen and (min-width: @screen-lg) {
        span:not(.meridiem) {
          font-size: 220px;
vben authored
199
200
201
        }
      }
vben authored
202
203
204
205
206
207
208
209
210
      @media screen and (min-width: @screen-xl) {
        span:not(.meridiem) {
          font-size: 260px;
        }
      }
      @media screen and (min-width: @screen-2xl) {
        span:not(.meridiem) {
          font-size: 320px;
        }
vben authored
211
212
213
214
215
216
217
218
219
220
      }
    }

    &-entry {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
221
      background-color: rgba(0, 0, 0, 0.5);
vben authored
222
223
224
225
226
227
228
229
230
231
232
233
234
      backdrop-filter: blur(8px);
      justify-content: center;
      align-items: center;

      &-content {
        width: 260px;
      }

      &__header {
        text-align: center;

        &-img {
          width: 70px;
235
          margin: 0 auto;
vben authored
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
          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>