登录叶细胞
This commit is contained in:
仲么了
@@ -1,78 +1,8 @@
|
||||
<template>
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker
|
||||
v-model="form.date1"
|
||||
type="date"
|
||||
placeholder="Pick a date"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="2" class="text-center">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker
|
||||
v-model="form.date2"
|
||||
placeholder="Pick a time"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery">
|
||||
<el-switch v-model="form.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="Online activities" name="type" />
|
||||
<el-checkbox label="Promotion activities" name="type" />
|
||||
<el-checkbox label="Offline activities" name="type" />
|
||||
<el-checkbox label="Simple brand exposure" name="type" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="Sponsor" />
|
||||
<el-radio label="Venue" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="form.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
</script>
|
||||
123123
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user