登录叶细胞

src/views/user/login.vue

@@ -1 +1,213 @@
-<template>login</template>
+<template>
+    <div>
+        <div @contextmenu.stop='' id='bubble' class='bubble'>
+            <canvas id='bubble-canvas' class='bubble-canvas'></canvas>
+        </div>
+        <div class='login'>
+            <div class='login-box'>
+                <div class='head'>
+                    <img src='@/assets/login-header.png' alt='' />
+                </div>
+                <div class='form'>
+                    <img class='profile-avatar' src='@/assets/avatar.png' alt='' />
+                    <div class='content'>
+                        <el-form @keyup.enter='onSubmit()' ref='formRef' size='large' :model='form'>
+                            <el-form-item prop='username'>
+                                <el-input
+                                    ref='usernameRef'
+                                    type='text'
+                                    clearable
+                                    v-model='form.username'
+                                    placeholder='请输入账号'
+                                >
+                                    <template #prefix>
+                                        <Icon name='fa fa-user' class='form-item-icon' size='16'
+                                              color='var(--el-input-icon-color)' />
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item prop='password'>
+                                <el-input
+                                    ref='passwordRef'
+                                    v-model='form.password'
+                                    type='password'
+                                    placeholder='请输入密码'
+                                    show-password
+                                >
+                                    <template #prefix>
+                                        <Icon name='fa fa-unlock-alt' class='form-item-icon' size='16'
+                                              color='var(--el-input-icon-color)' />
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button
+                                    :loading='state.submitLoading'
+                                    class='submit-button'
+                                    round
+                                    type='primary'
+                                    size='large'
+                                    @click='onSubmit()'
+                                >
+                                    登录
+                                </el-button>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
+import * as pageBubble from '@/utils/pageBubble'
+import type { FormInstance, InputInstance } from 'element-plus'
+
+let timer: number
+
+const formRef = ref<FormInstance>()
+const usernameRef = ref<InputInstance>()
+const passwordRef = ref<InputInstance>()
+const state = reactive({
+    showCaptcha: false,
+    submitLoading: false
+})
+const form = reactive({
+    username: '',
+    password: '',
+})
+
+
+const focusInput = () => {
+    if (form.username === '') {
+        usernameRef.value!.focus()
+    } else if (form.password === '') {
+        passwordRef.value!.focus()
+    }
+}
+
+onMounted(() => {
+    timer = window.setTimeout(() => {
+        pageBubble.init()
+    }, 1000)
+
+})
+
+onBeforeUnmount(() => {
+    clearTimeout(timer)
+    pageBubble.removeListeners()
+})
+
+const onSubmit = (captchaInfo = '') => {
+    state.submitLoading = true
+    setTimeout(() => {
+        state.submitLoading = false
+    }, 3000)
+}
+</script>
+
+<style scoped lang='scss'>
+.switch-language {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+}
+
+.bubble {
+    overflow: hidden;
+    background: url(@/assets/bg.jpg) repeat;
+}
+
+.form-item-icon {
+    height: auto;
+}
+
+.login {
+    position: absolute;
+    top: 0;
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
+
+    .login-box {
+        overflow: hidden;
+        width: 430px;
+        padding: 0;
+        background: var(--ba-bg-color-overlay);
+        margin-bottom: 80px;
+    }
+
+    .head {
+        background: #ccccff;
+
+        img {
+            display: block;
+            width: 430px;
+            margin: 0 auto;
+            user-select: none;
+        }
+    }
+
+    .form {
+        position: relative;
+
+        .profile-avatar {
+            display: block;
+            position: absolute;
+            height: 100px;
+            width: 100px;
+            border-radius: 50%;
+            border: 4px solid var(--ba-bg-color-overlay);
+            top: -50px;
+            right: calc(50% - 50px);
+            z-index: 2;
+            user-select: none;
+        }
+
+        .content {
+            padding: 100px 40px 40px 40px;
+        }
+
+        .submit-button {
+            width: 100%;
+            letter-spacing: 2px;
+            font-weight: 300;
+            margin-top: 15px;
+            --el-button-bg-color: var(--el-color-primary);
+        }
+    }
+}
+
+@media screen and (max-width: 720px) {
+    .login {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .login-box {
+            width: 340px;
+            margin-top: 0;
+        }
+    }
+}
+
+.chang-lang :deep(.el-dropdown-menu__item) {
+    justify-content: center;
+}
+
+.content :deep(.el-input__prefix) {
+    display: flex;
+    align-items: center;
+}
+
+@media screen and (max-height: 800px) {
+    .login .login-box {
+        margin-bottom: 0;
+    }
+}
+</style>