删除登录废弃文件
This commit is contained in:
zjl
parent
fec960649e
commit
f8504dab63
@ -128,8 +128,7 @@
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"naive-ui",
|
||||
"naive-ui-admin",
|
||||
"element-plus",
|
||||
"vue3",
|
||||
"ts",
|
||||
"tsx",
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
const cropper = ref<Nullable<Cropper>>();
|
||||
const isReady = ref(false);
|
||||
|
||||
const prefixCls = 'naive-ui-admin';
|
||||
const prefixCls = 'cropper';
|
||||
const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
|
||||
|
||||
const getImageStyle = computed((): CSSProperties => {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<a href="https://www.baidu.com" target="_blank"> 社区 </a>
|
||||
<a href="https://www.baidu.com/issues" target="_blank"> 交流 </a>
|
||||
</div>
|
||||
<div class="copyright"> naive-ui-admin 1.4 · Made by Ah jung </div>
|
||||
<div class="copyright"> 版权说明 </div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -37,9 +37,7 @@ export const RootRoute: RouteRecordRaw = {
|
||||
export const LoginRoute: RouteRecordRaw = {
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
// component: () => import('@/views/login/index.vue'), //v1.x 模板
|
||||
// component: () => import('@/views/login/newLogin.vue'), // 2.x新模板
|
||||
component: () => import('@/views/login/newLogin2.vue'), // 2.x全新模板
|
||||
component: () => import('@/views/login/index.vue'),
|
||||
meta: {
|
||||
title: '登录',
|
||||
},
|
||||
|
||||
@ -8,39 +8,53 @@
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入用户名">
|
||||
<el-input v-model="formInline.username" placeholder="请输入登录账号">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="formInline.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请输入密码"
|
||||
placeholder="请输入登录密码"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="mb-6 default-color">
|
||||
<div class="flex justify-between">
|
||||
<el-form-item prop="code">
|
||||
<div style="display: flex">
|
||||
<el-input
|
||||
@keyup.enter="handleSubmit"
|
||||
v-model.trim="formInline.code"
|
||||
placeholder="验证码"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<SafetyCertificateOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<img style="width: 108px;height:40px;border-radius: 4px;margin-left:8px;border:2px solid var(--el-border-color) ;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex items-center justify-between forget">
|
||||
<div class="flex-initial">
|
||||
<el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
|
||||
</div>
|
||||
<div class="flex-initial order-last">
|
||||
<a href="javascript:">忘记密码</a>
|
||||
</div>
|
||||
<el-checkbox v-model:checked="autoLogin">记住密码</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form-item :show-label="false">
|
||||
<el-button
|
||||
class="w-full"
|
||||
@ -52,31 +66,19 @@
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class="mb-4 default-color">
|
||||
<div class="flex view-account-other">
|
||||
<div class="flex-initial">
|
||||
<span>其它登录方式</span>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<el-icon class="el-input__icon" size="24" color="#2d8cf0">
|
||||
<LogoGithub />
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<el-icon class="el-input__icon" size="24" color="#2d8cf0">
|
||||
<LogoFacebook />
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial" style="margin-left: auto">
|
||||
<a href="javascript:" @click="goRegister">注册账号</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<span>其他登录方式</span>
|
||||
<el-icon class="el-input__icon" size="22" color="#165DFF" style="margin:0 10px 0 10px;cursor: pointer;">
|
||||
<GithubFilled />
|
||||
</el-icon>
|
||||
<el-icon class="el-input__icon" size="22" color="#165DFF" style="cursor: pointer;">
|
||||
<AlipayCircleFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div style="cursor: pointer;" @click="goRegister">注册账号</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -85,15 +87,21 @@
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ResultEnum } from '@/enums/httpEnum';
|
||||
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
|
||||
import {getInfoCaptcha} from '@/api/system/user';
|
||||
import { PageEnum } from '@/enums/pageEnum';
|
||||
import { PersonOutline } from '@vicons/ionicons5';
|
||||
import { SafetyCertificateOutlined,GithubFilled,AlipayCircleFilled } from '@vicons/antd';
|
||||
const captchaImg=ref('')
|
||||
// 动态加载滑块验证码组件
|
||||
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
code:string;
|
||||
key:string;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['backLogin']);
|
||||
const formRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
@ -103,13 +111,15 @@
|
||||
const formInline = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
code:'',
|
||||
key:''
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
username: { required: true, message: '请输入登录账号', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
code: { required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
};
|
||||
const emit = defineEmits(['goRegister']);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const router = useRouter();
|
||||
@ -119,17 +129,17 @@
|
||||
if (!formRef.value) return;
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
const { username, password } = formInline;
|
||||
loading.value = true;
|
||||
|
||||
const params: FormState = {
|
||||
username,
|
||||
password,
|
||||
code:'618'
|
||||
username:formInline.username,
|
||||
password:formInline.password,
|
||||
code:formInline.code,
|
||||
key:formInline.key
|
||||
};
|
||||
|
||||
try {
|
||||
const { code,msg } = await userStore.login(params);
|
||||
const { code, msg } = await userStore.login(params);
|
||||
if (code == ResultEnum.SUCCESS) {
|
||||
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
|
||||
ElMessage.success('登录成功，即将进入系统');
|
||||
@ -137,6 +147,7 @@
|
||||
router.replace('/');
|
||||
} else router.replace(toPath);
|
||||
} else {
|
||||
getCaptcha()
|
||||
ElMessage.error(msg || '登录失败');
|
||||
}
|
||||
} finally {
|
||||
@ -151,7 +162,31 @@
|
||||
});
|
||||
};
|
||||
|
||||
function goRegister() {
|
||||
emit('goRegister');
|
||||
const getCaptcha=async()=>{
|
||||
let {key,captcha}= await getInfoCaptcha();
|
||||
formInline.key=key
|
||||
captchaImg.value=captcha
|
||||
}
|
||||
const goRegister =()=>{
|
||||
emit('backLogin',false);
|
||||
}
|
||||
|
||||
getCaptcha()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.forget {
|
||||
margin-bottom: 16px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,201 +0,0 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:show-label="false"
|
||||
:show-require-mark="false"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
class="login-form"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入用户名">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="formInline.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请输入密码"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<div style="display: flex">
|
||||
<el-input
|
||||
@keyup.enter="handleSubmit"
|
||||
v-model.trim="formInline.code"
|
||||
placeholder="验证码"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<img style="width: 140px;height:40px;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex items-center justify-between forget">
|
||||
<div class="flex-initial">
|
||||
<el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
|
||||
</div>
|
||||
<div class="flex-initial order-last">
|
||||
<a href="javascript:">忘记密码</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form-item :show-label="false">
|
||||
<el-button
|
||||
class="w-full"
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
round
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class="mb-4 default-color">
|
||||
<div class="flex view-account-other">
|
||||
<div class="flex-initial">
|
||||
<span>其它登录方式</span>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<el-icon class="el-input__icon" size="24" color="#2d8cf0">
|
||||
<LogoGithub />
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<el-icon class="el-input__icon" size="24" color="#2d8cf0">
|
||||
<LogoFacebook />
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial" style="margin-left: auto">
|
||||
<a href="javascript:" @click="goRegister">注册账号</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref,defineAsyncComponent } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ResultEnum } from '@/enums/httpEnum';
|
||||
import {getInfoCaptcha} from '@/api/system/user';
|
||||
import { PageEnum } from '@/enums/pageEnum';
|
||||
const captchaImg=ref('')
|
||||
// 动态加载滑块验证码组件
|
||||
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
code:string;
|
||||
key:string;
|
||||
}
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
const autoLogin = ref(true);
|
||||
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
|
||||
|
||||
const formInline = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
code:'',
|
||||
key:''
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
code: { required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
};
|
||||
const emit = defineEmits(['goRegister']);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!formRef.value) return;
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
|
||||
const params: FormState = {
|
||||
username:formInline.username,
|
||||
password:formInline.password,
|
||||
code:formInline.code,
|
||||
key:formInline.key
|
||||
};
|
||||
|
||||
try {
|
||||
const { code, msg } = await userStore.login(params);
|
||||
if (code == ResultEnum.SUCCESS) {
|
||||
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
|
||||
ElMessage.success('登录成功，即将进入系统');
|
||||
if (route.name === LOGIN_NAME) {
|
||||
router.replace('/');
|
||||
} else router.replace(toPath);
|
||||
} else {
|
||||
ElMessage.error(msg || '登录失败');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '请填写完整信息',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getCaptcha=async()=>{
|
||||
let {key,captcha}= await getInfoCaptcha();
|
||||
formInline.key=key
|
||||
captchaImg.value=captcha
|
||||
}
|
||||
|
||||
getCaptcha()
|
||||
|
||||
function goRegister() {
|
||||
emit('goRegister');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.forget {
|
||||
margin-bottom: 16px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.login-form {
|
||||
.el-input {
|
||||
--el-input-border-radius: 20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,192 +0,0 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:show-label="false"
|
||||
:show-require-mark="false"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入登录账号">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="formInline.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请输入登录密码"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<div style="display: flex">
|
||||
<el-input
|
||||
@keyup.enter="handleSubmit"
|
||||
v-model.trim="formInline.code"
|
||||
placeholder="验证码"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<SafetyCertificateOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<img style="width: 108px;height:40px;border-radius: 4px;margin-left:8px;border:2px solid var(--el-border-color) ;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex items-center justify-between forget">
|
||||
<div class="flex-initial">
|
||||
<el-checkbox v-model:checked="autoLogin">记住密码</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form-item :show-label="false">
|
||||
<el-button
|
||||
class="w-full"
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<span>其他登录方式</span>
|
||||
<el-icon class="el-input__icon" size="22" color="#165DFF" style="margin:0 10px 0 10px;cursor: pointer;">
|
||||
<GithubFilled />
|
||||
</el-icon>
|
||||
<el-icon class="el-input__icon" size="22" color="#165DFF" style="cursor: pointer;">
|
||||
<AlipayCircleFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div style="cursor: pointer;" @click="goRegister">注册账号</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ResultEnum } from '@/enums/httpEnum';
|
||||
import {getInfoCaptcha} from '@/api/system/user';
|
||||
import { PageEnum } from '@/enums/pageEnum';
|
||||
import { PersonOutline } from '@vicons/ionicons5';
|
||||
import { SafetyCertificateOutlined,GithubFilled,AlipayCircleFilled } from '@vicons/antd';
|
||||
const captchaImg=ref('')
|
||||
// 动态加载滑块验证码组件
|
||||
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
code:string;
|
||||
key:string;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['backLogin']);
|
||||
const formRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
const autoLogin = ref(true);
|
||||
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
|
||||
|
||||
const formInline = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
code:'',
|
||||
key:''
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: { required: true, message: '请输入登录账号', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
code: { required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
};
|
||||
const userStore = useUserStore();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!formRef.value) return;
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
|
||||
const params: FormState = {
|
||||
username:formInline.username,
|
||||
password:formInline.password,
|
||||
code:formInline.code,
|
||||
key:formInline.key
|
||||
};
|
||||
|
||||
try {
|
||||
const { code, msg } = await userStore.login(params);
|
||||
if (code == ResultEnum.SUCCESS) {
|
||||
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
|
||||
ElMessage.success('登录成功，即将进入系统');
|
||||
if (route.name === LOGIN_NAME) {
|
||||
router.replace('/');
|
||||
} else router.replace(toPath);
|
||||
} else {
|
||||
getCaptcha()
|
||||
ElMessage.error(msg || '登录失败');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '请填写完整信息',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getCaptcha=async()=>{
|
||||
let {key,captcha}= await getInfoCaptcha();
|
||||
formInline.key=key
|
||||
captchaImg.value=captcha
|
||||
}
|
||||
const goRegister =()=>{
|
||||
emit('backLogin',false);
|
||||
}
|
||||
|
||||
getCaptcha()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.forget {
|
||||
margin-bottom: 16px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,6 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:show-label="false"
|
||||
:show-require-mark="false"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form ref="formRef" :show-label="false" :show-require-mark="false" size="large" :model="formInline" :rules="rules"
|
||||
class="register-form">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入用户名">
|
||||
<template #prefix>
|
||||
@ -17,111 +11,90 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="mobile">
|
||||
<div class="flex w-full">
|
||||
<el-input class="order-first" v-model="formInline.mobile" placeholder="请输入手机号码">
|
||||
<el-input v-model="formInline.mobile" placeholder="请输入手机号码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<MobileOutlined />
|
||||
<Iphone />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button class="order-last ml-3" :disabled="isGetCode?true:false" @click="getCode"
|
||||
>{{ codeMsg }}<span v-if="isGetCode">s</span>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="formInline.code" placeholder="请输入验证码">
|
||||
<el-input v-model.trim="formInline.code" placeholder="验证码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<SafetyOutlined />
|
||||
<SafetyCertificateOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<el-button link :disabled="isGetCode?true:false" @click="getCode">
|
||||
{{ codeMsg }}<span v-if="isGetCode">s</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="formInline.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<el-input v-model="formInline.password" type="password" show-password placeholder="请输入密码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="retPassword">
|
||||
<el-input
|
||||
v-model="formInline.retPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请再次输入密码"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<el-input v-model="formInline.retPassword" type="password" show-password placeholder="请再次输入密码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="default-color" prop="agreement">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex-initial">
|
||||
<el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :show-label="false">
|
||||
<el-button
|
||||
class="w-full"
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-form-item :show-label="false" class="mb-0">
|
||||
<el-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
|
||||
注册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :show-label="false">
|
||||
<el-button class="w-full" size="large" block @click="backLogin">返回</el-button>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-initial">
|
||||
<el-form-item prop="agreement">
|
||||
<el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
|
||||
import { MobileOutlined, SafetyOutlined } from '@vicons/antd';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { rule } from '@/utils/validate';
|
||||
import { PersonOutline } from '@vicons/ionicons5';
|
||||
import { SafetyCertificateOutlined } from '@vicons/antd';
|
||||
|
||||
const formRef = ref();
|
||||
const formRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
const codeMsg: any = ref('获取验证码');
|
||||
const isGetCode = ref(false);
|
||||
const loading = ref(false);
|
||||
const codeMsg: any = ref('获取验证码');
|
||||
const isGetCode = ref(false);
|
||||
|
||||
const emit = defineEmits(['backLogin']);
|
||||
const emit = defineEmits(['backLogin']);
|
||||
|
||||
const formInline = reactive({
|
||||
const formInline = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
retPassword: '',
|
||||
mobile: '',
|
||||
code: '',
|
||||
agreement: false,
|
||||
});
|
||||
});
|
||||
|
||||
const rules = {
|
||||
const rules = {
|
||||
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
|
||||
mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.validatePhone, trigger: 'blur' }],
|
||||
code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
|
||||
@ -132,13 +105,13 @@
|
||||
message: '请先勾选协议',
|
||||
validator: (_, value) => value === true,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
const handleSubmit = () => {
|
||||
loading.value = true;
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
ElMessage.success('注册准备就绪');
|
||||
backLogin()
|
||||
loading.value = false;
|
||||
} else {
|
||||
loading.value = false;
|
||||
@ -148,13 +121,17 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const backLogin = () => {
|
||||
emit('backLogin');
|
||||
};
|
||||
const backLogin = () => {
|
||||
emit('backLogin',true);
|
||||
};
|
||||
|
||||
function getCode() {
|
||||
function getCode() {
|
||||
if (!formInline.mobile) {
|
||||
formRef.value.validateField('mobile')
|
||||
return
|
||||
}
|
||||
codeMsg.value = 60;
|
||||
isGetCode.value = true;
|
||||
let time = setInterval(() => {
|
||||
@ -165,5 +142,7 @@
|
||||
isGetCode.value = false;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:show-label="false"
|
||||
:show-require-mark="false"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
class="register-form"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入用户名">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="mobile">
|
||||
<div class="flex w-full">
|
||||
<el-input class="order-first" v-model="formInline.mobile" placeholder="请输入手机号码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<MobileOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button class="order-last ml-3" :disabled="isGetCode?true:false" round @click="getCode"
|
||||
>{{ codeMsg }}<span v-if="isGetCode">s</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="formInline.code" placeholder="请输入验证码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<SafetyOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<div class="flex w-full">
|
||||
<el-input
|
||||
v-model="formInline.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-model="formInline.retPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="请再次输入密码"
|
||||
@keyup.enter="handleSubmit"
|
||||
class="ml-3"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :show-label="false" class="mb-0">
|
||||
<el-button
|
||||
class="w-full"
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
round
|
||||
>
|
||||
注册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-initial">
|
||||
<el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
|
||||
</div>
|
||||
<div class="flex-initial" style="margin-left: auto">
|
||||
<a href="javascript:" @click="backLogin">返回登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
|
||||
import { MobileOutlined, SafetyOutlined } from '@vicons/antd';
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
const codeMsg: any = ref('获取验证码');
|
||||
const isGetCode = ref(false);
|
||||
|
||||
const emit = defineEmits(['backLogin']);
|
||||
|
||||
const formInline = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
retPassword: '',
|
||||
mobile: '',
|
||||
code: '',
|
||||
agreement: false,
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
|
||||
code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
|
||||
agreement: {
|
||||
required: true,
|
||||
type: 'boolean',
|
||||
trigger: 'change',
|
||||
message: '请先勾选协议',
|
||||
validator: (_, value) => value === true,
|
||||
},
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
loading.value = true;
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
ElMessage.success('注册准备就绪');
|
||||
loading.value = false;
|
||||
} else {
|
||||
loading.value = false;
|
||||
ElMessage({
|
||||
message: '请填写完整信息',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const backLogin = () => {
|
||||
emit('backLogin');
|
||||
};
|
||||
|
||||
function getCode() {
|
||||
codeMsg.value = 60;
|
||||
isGetCode.value = true;
|
||||
let time = setInterval(() => {
|
||||
codeMsg.value--;
|
||||
if (codeMsg.value <= 0) {
|
||||
clearInterval(time);
|
||||
codeMsg.value = '获取验证码';
|
||||
isGetCode.value = false;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register-form {
|
||||
.el-input {
|
||||
--el-input-border-radius: 20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<el-form ref="formRef" :show-label="false" :show-require-mark="false" size="large" :model="formInline" :rules="rules"
|
||||
class="register-form">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入用户名">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="mobile">
|
||||
<el-input v-model="formInline.mobile" placeholder="请输入手机号码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<Iphone />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model.trim="formInline.code" placeholder="验证码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<SafetyCertificateOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<el-button link :disabled="isGetCode?true:false" @click="getCode">
|
||||
{{ codeMsg }}<span v-if="isGetCode">s</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="formInline.password" type="password" show-password placeholder="请输入密码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="retPassword">
|
||||
<el-input v-model="formInline.retPassword" type="password" show-password placeholder="请再次输入密码">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :show-label="false" class="mb-0">
|
||||
<el-button class="w-full" type="primary" @click="handleSubmit" size="large" :loading="loading">
|
||||
注册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-initial">
|
||||
<el-form-item prop="agreement">
|
||||
<el-checkbox v-model="formInline.agreement">我同意隐私协议</el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { rule } from '@/utils/validate';
|
||||
import { PersonOutline } from '@vicons/ionicons5';
|
||||
import { SafetyCertificateOutlined } from '@vicons/antd';
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
const codeMsg: any = ref('获取验证码');
|
||||
const isGetCode = ref(false);
|
||||
|
||||
const emit = defineEmits(['backLogin']);
|
||||
|
||||
const formInline = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
retPassword: '',
|
||||
mobile: '',
|
||||
code: '',
|
||||
agreement: false,
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.validatePhone, trigger: 'blur' }],
|
||||
code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
retPassword: { required: true, message: '请输入确认密码', trigger: 'blur' },
|
||||
agreement: {
|
||||
required: true,
|
||||
type: 'boolean',
|
||||
trigger: 'change',
|
||||
message: '请先勾选协议',
|
||||
validator: (_, value) => value === true,
|
||||
},
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
loading.value = true;
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
backLogin()
|
||||
loading.value = false;
|
||||
} else {
|
||||
loading.value = false;
|
||||
ElMessage({
|
||||
message: '请填写完整信息',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const backLogin = () => {
|
||||
emit('backLogin',true);
|
||||
};
|
||||
|
||||
function getCode() {
|
||||
if (!formInline.mobile) {
|
||||
formRef.value.validateField('mobile')
|
||||
return
|
||||
}
|
||||
codeMsg.value = 60;
|
||||
isGetCode.value = true;
|
||||
let time = setInterval(() => {
|
||||
codeMsg.value--;
|
||||
if (codeMsg.value <= 0) {
|
||||
clearInterval(time);
|
||||
codeMsg.value = '获取验证码';
|
||||
isGetCode.value = false;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,226 +1,240 @@
|
||||
<template>
|
||||
<div class="view-account">
|
||||
<div class="view-account-header"></div>
|
||||
<div class="view-account-container">
|
||||
<div class="view-account-top">
|
||||
<div class="view-account-top-logo">
|
||||
<img src="~@/assets/images/account-logo.png" alt="" />
|
||||
<div class="account">
|
||||
<div class="account-container">
|
||||
<div class="account-wrap-login">
|
||||
<div class="login-pic">
|
||||
<h1 class="login-title">数据中台管理系统</h1>
|
||||
<h4 class="login-subtitle">赋能开发者，助力企业发展，全方位提供数据中台解决方案!</h4>
|
||||
</div>
|
||||
<div class="view-account-top-desc">Element plus Admin 中后台前端/设计解决方案</div>
|
||||
<div class="login-form">
|
||||
<div class="login-form-container">
|
||||
<div class="account-top">
|
||||
<div class="account-top-desc">{{loginFlag?'用户登录':'用户注册'}}</div>
|
||||
</div>
|
||||
<div class="view-account-form">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item path="username">
|
||||
<el-input v-model:value="formInline.username" placeholder="请输入用户名">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
</el-icon>
|
||||
<template v-if="loginFlag">
|
||||
<div class="account-tab-box">
|
||||
<div :class="activeIndex==index?'active':''" v-for="(item,index) in tabData" @click="handleClick(index)" :key="index">{{item}}</div>
|
||||
</div>
|
||||
<LoginForm v-if="activeIndex === 0" @backLogin="goLogin"/>
|
||||
<PhoneForm v-else-if="activeIndex === 1"/>
|
||||
<QrcodeForm v-else-if="activeIndex === 2"></QrcodeForm>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item path="password">
|
||||
<el-input
|
||||
v-model:value="formInline.password"
|
||||
type="password"
|
||||
showPasswordOn="click"
|
||||
placeholder="请输入密码"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
</el-icon>
|
||||
<template v-else>
|
||||
<RegisterForm @backLogin="goLogin"></RegisterForm>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item path="isCaptcha">
|
||||
<div class="w-full">
|
||||
<mi-captcha width="384" theme-color="#2d8cf0" :logo="logo" @success="onAuthCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="default-color">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex-initial">
|
||||
<el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
|
||||
</div>
|
||||
<div class="flex-initial order-last">
|
||||
<a href="javascript:">忘记密码</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="w-full"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="default-color">
|
||||
<div class="flex view-account-other">
|
||||
<div class="flex-initial">
|
||||
<span>其它登录方式</span>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<el-icon class="el-input__icon" size="24" color="#2d8cf0">
|
||||
<LogoGithub />
|
||||
<div class="corner-box" @click="handleCornerClick">
|
||||
<el-icon class="el-input__icon" size="34" color="#ffffff" v-if="loginFlag">
|
||||
<UserAddOutlined />
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<el-icon class="el-input__icon" size="24" color="#2d8cf0">
|
||||
<LogoFacebook />
|
||||
<el-icon class="el-input__icon" size="34" color="#ffffff" v-else>
|
||||
<ArrowUndoOutline />
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial" style="margin-left: auto">
|
||||
<a href="javascript:">注册账号</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ResultEnum } from '@/enums/httpEnum';
|
||||
import logo from '@/assets/images/logo.png';
|
||||
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
|
||||
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const loading = ref(false);
|
||||
const autoLogin = ref(true);
|
||||
|
||||
const formInline = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
isCaptcha: false,
|
||||
import { ref ,computed} from 'vue';
|
||||
import LoginForm from './LoginForm.vue';
|
||||
import PhoneForm from './PhoneForm.vue';
|
||||
import QrcodeForm from './QrcodeForm.vue';
|
||||
import RegisterForm from './RegisterForm.vue';
|
||||
import { UserAddOutlined } from '@vicons/antd';
|
||||
import { ArrowUndoOutline } from '@vicons/ionicons5';
|
||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
const designStore = useDesignSettingStore();
|
||||
//获取主题风格色
|
||||
const getAppTheme = computed(() => {
|
||||
return designStore.appTheme;
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
isCaptcha: {
|
||||
required: true,
|
||||
type: 'boolean',
|
||||
trigger: 'change',
|
||||
message: '请点击按钮进行验证码校验',
|
||||
validator: (_, value) => value === true,
|
||||
},
|
||||
};
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
formRef.value.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
const { username, password } = formInline;
|
||||
loading.value = true;
|
||||
const params: FormState = {
|
||||
username,
|
||||
password,
|
||||
};
|
||||
|
||||
const { code, msg } = await userStore.login(params);
|
||||
|
||||
if (code == ResultEnum.SUCCESS) {
|
||||
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
|
||||
ElMessage.success('登录成功！');
|
||||
router.replace(toPath).then((_) => {
|
||||
if (route.name == 'login') {
|
||||
router.replace('/');
|
||||
const loginFlag = ref(true)
|
||||
const activeIndex = ref(0)
|
||||
const tabData =ref(['账号登录','手机号登录','扫码登录'])
|
||||
const handleClick =(index)=>{
|
||||
activeIndex.value = index
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ElMessage.info(msg || '登录失败');
|
||||
const handleCornerClick = ()=>{
|
||||
loginFlag.value = !loginFlag.value
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('请填写完整信息，并且进行验证码校验');
|
||||
const goLogin = (type)=>{
|
||||
loginFlag.value = type
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onAuthCode = () => {
|
||||
formInline.isCaptcha = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.view-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
.account {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
&-container {
|
||||
flex: 1;
|
||||
padding: 32px 0;
|
||||
width: 384px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&-top {
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
|
||||
&-desc {
|
||||
font-size: 14px;
|
||||
color: #808695;
|
||||
}
|
||||
}
|
||||
|
||||
&-other {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.default-color {
|
||||
color: #515a6e;
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
color: #515a6e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.view-account {
|
||||
background-image: url('../../assets/images/login.svg');
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background-image:url('../../assets/images/login-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.page-account-container {
|
||||
padding: 32px 0 24px 0;
|
||||
&-wrap-login {
|
||||
width: 920px;
|
||||
height: 500px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.login-pic {
|
||||
flex: 1;
|
||||
padding: 32px 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: #1681fd;
|
||||
background-image: url('../../assets/images/login-img.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: contain;
|
||||
text-align: center;
|
||||
.login-title {
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
margin: 0 0 6px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
.login-subtitle {
|
||||
color: #fffc;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 4px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
position: relative;
|
||||
&-container {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
padding:32px 48px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-title {
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.corner-box {
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 0 0 0 150%;
|
||||
background: v-bind(getAppTheme);
|
||||
cursor: pointer;
|
||||
>i {
|
||||
margin-right: -20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.login-pic {
|
||||
padding: 20px 12px 100px;
|
||||
background-size: auto 100px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.account-top {
|
||||
&-desc {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.account-tab-box {
|
||||
display: flex;
|
||||
height:34px;
|
||||
margin-bottom: 18px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
padding:3px;
|
||||
>div {
|
||||
flex:1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color:rgba(0, 0, 0, .6);
|
||||
&.active {
|
||||
background-color:#ffffff;
|
||||
color:rgba(0, 0, 0, .92);
|
||||
}
|
||||
&:hover {
|
||||
color:rgba(0, 0, 0, .92);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
&-container {
|
||||
padding: 0;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
&-wrap-login {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.account {
|
||||
.el-button--primary {
|
||||
background-color: v-bind(getAppTheme);
|
||||
}
|
||||
.el-button--text{
|
||||
padding:0;
|
||||
}
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label,.el-button--text {
|
||||
color: v-bind(getAppTheme);
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: v-bind(getAppTheme);
|
||||
color: v-bind(getAppTheme);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,166 +0,0 @@
|
||||
<template>
|
||||
<div class="account-root">
|
||||
<div class="account-root-item">
|
||||
<transition name="fade-bottom" appear mode="out-in">
|
||||
<div class="account-root-item-img">
|
||||
<img src="~@/assets/images/login-bg.svg" alt="" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="account-root-item root-right-item">
|
||||
<transition name="fade-bottom" appear mode="out-in">
|
||||
<div class="account-form">
|
||||
<div class="account-top">
|
||||
<div class="account-top-logo">
|
||||
<img src="~@/assets/images/account-logo.png" alt="" />
|
||||
</div>
|
||||
<div class="account-top-desc">Element plus Admin 中后台前端/设计解决方案</div>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="tab" class="login-tabs" justify-content="space-evenly">
|
||||
<el-tab-pane name="login" label="登录">
|
||||
<transition name="fade-bottom" appear mode="out-in">
|
||||
<LoginForm ref="LoginFormRef" @go-register="changeGoRegister" />
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="register" label="注册">
|
||||
<transition name="fade-bottom" appear mode="out-in">
|
||||
<RegisterForm ref="RegisterFormRef" @back-login="changeBackLogin" />
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import LoginForm from './LoginForm.vue';
|
||||
import RegisterForm from './RegisterForm.vue';
|
||||
|
||||
const tab = ref('login');
|
||||
|
||||
function changeBackLogin() {
|
||||
tab.value = 'login';
|
||||
}
|
||||
|
||||
function changeGoRegister() {
|
||||
tab.value = 'register';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account-root {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
|
||||
&-item {
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
flex-direction: row;
|
||||
flex-basis: 100%;
|
||||
flex-grow: 0;
|
||||
max-width: 100%;
|
||||
background: #2d8cf0;
|
||||
|
||||
&-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 70%;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.root-right-item {
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
flex-flow: row wrap;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.account-form {
|
||||
flex-basis: 45%;
|
||||
flex-grow: 0;
|
||||
max-width: 45%;
|
||||
|
||||
.account-top {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
|
||||
&-logo {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 14px;
|
||||
color: #808695;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
&-item {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 320px) {
|
||||
.root-right-item {
|
||||
.account-form {
|
||||
flex-basis: 60%;
|
||||
flex-grow: 0;
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
&-item {
|
||||
flex-basis: 50%;
|
||||
flex-grow: 0;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.root-right-item {
|
||||
.account-form {
|
||||
flex-basis: 45%;
|
||||
flex-grow: 0;
|
||||
max-width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.login-tabs .el-tabs__nav) {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
:deep(.login-tabs .el-tabs__nav-wrap::after) {
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div class="account">
|
||||
<div class="account-container">
|
||||
<div class="account-wrap-login">
|
||||
<div class="login-pic">
|
||||
<div>
|
||||
<img src="~@/assets/images/login-pic.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<div class="login-form-container">
|
||||
<div class="account-top">
|
||||
<div class="account-top-logo">
|
||||
<img src="~@/assets/images/logo.png" alt="" />
|
||||
<span class="project-title">Naive Admin</span>
|
||||
</div>
|
||||
<div class="account-top-desc">Element plus 中后台前端/设计解决方案</div>
|
||||
</div>
|
||||
<!-- <div class="login-form-title">
|
||||
<el-space>
|
||||
<el-button round>登录</el-button>
|
||||
<el-button type="primary" round>注册</el-button>
|
||||
</el-space>
|
||||
</div> -->
|
||||
<LoginForm v-if="tab === 'login'" ref="LoginFormRef" @go-register="changeGoRegister" />
|
||||
<RegisterForm v-else ref="RegisterFormRef" @back-login="changeBackLogin" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import LoginForm from './LoginForm2.vue';
|
||||
import RegisterForm from './RegisterForm2.vue';
|
||||
|
||||
const tab = ref('login');
|
||||
|
||||
function changeBackLogin() {
|
||||
tab.value = 'login';
|
||||
}
|
||||
|
||||
function changeGoRegister() {
|
||||
tab.value = 'register';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
&-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: #9053c7;
|
||||
background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
|
||||
background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
|
||||
background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
|
||||
background: linear-gradient(-135deg, #c850c0, #4158d0);
|
||||
}
|
||||
|
||||
&-wrap-login {
|
||||
width: 960px;
|
||||
height: 554px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 30px 95px 33px 95px;
|
||||
.login-pic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&-container {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
&-title {
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.login-pic {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.account-top {
|
||||
text-align: center;
|
||||
|
||||
&-logo {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 45px;
|
||||
}
|
||||
.project-title {
|
||||
background: linear-gradient(92.06deg, #33c2ff -17.9%, #1e6fff 43.39%, #1e6fff 99.4%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
font-weight: 500;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 14px;
|
||||
color: #808695;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
&-wrap-login {
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div class="account">
|
||||
<div class="account-container">
|
||||
<div class="account-wrap-login">
|
||||
<div class="login-pic">
|
||||
<h1 class="login-title">数据中台管理系统</h1>
|
||||
<h4 class="login-subtitle">赋能开发者，助力企业发展，全方位提供数据中台解决方案!</h4>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<div class="login-form-container">
|
||||
<div class="account-top">
|
||||
<div class="account-top-desc">{{loginFlag?'用户登录':'用户注册'}}</div>
|
||||
</div>
|
||||
<template v-if="loginFlag">
|
||||
<div class="account-tab-box">
|
||||
<div :class="activeIndex==index?'active':''" v-for="(item,index) in tabData" @click="handleClick(index)" :key="index">{{item}}</div>
|
||||
</div>
|
||||
<LoginForm v-if="activeIndex === 0" @backLogin="goLogin"/>
|
||||
<PhoneForm v-else-if="activeIndex === 1"/>
|
||||
<QrcodeForm v-else-if="activeIndex === 2"></QrcodeForm>
|
||||
</template>
|
||||
<template v-else>
|
||||
<RegisterForm @backLogin="goLogin"></RegisterForm>
|
||||
</template>
|
||||
</div>
|
||||
<div class="corner-box" @click="handleCornerClick">
|
||||
<el-icon class="el-input__icon" size="34" color="#ffffff" v-if="loginFlag">
|
||||
<UserAddOutlined />
|
||||
</el-icon>
|
||||
<el-icon class="el-input__icon" size="34" color="#ffffff" v-else>
|
||||
<ArrowUndoOutline />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref ,computed} from 'vue';
|
||||
import LoginForm from './LoginForm2.vue';
|
||||
import PhoneForm from './PhoneForm.vue';
|
||||
import QrcodeForm from './QrcodeForm.vue';
|
||||
import RegisterForm from './RegisterForm2.vue';
|
||||
import { UserAddOutlined } from '@vicons/antd';
|
||||
import { ArrowUndoOutline } from '@vicons/ionicons5';
|
||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
const designStore = useDesignSettingStore();
|
||||
//获取主题风格色
|
||||
const getAppTheme = computed(() => {
|
||||
return designStore.appTheme;
|
||||
});
|
||||
const loginFlag = ref(true)
|
||||
const activeIndex = ref(0)
|
||||
const tabData =ref(['账号登录','手机号登录','扫码登录'])
|
||||
const handleClick =(index)=>{
|
||||
activeIndex.value = index
|
||||
}
|
||||
const handleCornerClick = ()=>{
|
||||
loginFlag.value = !loginFlag.value
|
||||
}
|
||||
const goLogin = (type)=>{
|
||||
loginFlag.value = type
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
&-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background-image:url('../../assets/images/login-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
&-wrap-login {
|
||||
width: 920px;
|
||||
height: 500px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.login-pic {
|
||||
flex: 1;
|
||||
padding: 32px 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: #1681fd;
|
||||
background-image: url('../../assets/images/login-img.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: contain;
|
||||
text-align: center;
|
||||
.login-title {
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
margin: 0 0 6px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
.login-subtitle {
|
||||
color: #fffc;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 4px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
position: relative;
|
||||
&-container {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
padding:32px 48px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-title {
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.corner-box {
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 0 0 0 150%;
|
||||
background: v-bind(getAppTheme);
|
||||
cursor: pointer;
|
||||
>i {
|
||||
margin-right: -20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.login-pic {
|
||||
padding: 20px 12px 100px;
|
||||
background-size: auto 100px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.account-top {
|
||||
&-desc {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.account-tab-box {
|
||||
display: flex;
|
||||
height:34px;
|
||||
margin-bottom: 18px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
padding:3px;
|
||||
>div {
|
||||
flex:1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color:rgba(0, 0, 0, .6);
|
||||
&.active {
|
||||
background-color:#ffffff;
|
||||
color:rgba(0, 0, 0, .92);
|
||||
}
|
||||
&:hover {
|
||||
color:rgba(0, 0, 0, .92);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
&-container {
|
||||
padding: 0;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
&-wrap-login {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.account {
|
||||
.el-button--primary {
|
||||
background-color: v-bind(getAppTheme);
|
||||
}
|
||||
.el-button--text{
|
||||
padding:0;
|
||||
}
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label,.el-button--text {
|
||||
color: v-bind(getAppTheme);
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: v-bind(getAppTheme);
|
||||
color: v-bind(getAppTheme);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -15,7 +15,7 @@
|
||||
<h4>绑定手机</h4>
|
||||
<div class="description">
|
||||
<el-space>
|
||||
<span class="text-gray-400">已绑定手机号：+86189****4877</span>
|
||||
<span class="text-gray-400">已绑定手机号：+86 18000000001</span>
|
||||
<el-link type="primary" class="ml-4">修改</el-link>
|
||||
</el-space>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
<h4>个性域名</h4>
|
||||
<div class="description">
|
||||
<el-space>
|
||||
<span class="text-gray-400">已绑定域名：https://www.naiveui.com</span>
|
||||
<span class="text-gray-400">已绑定域名：https://www.baidu.com</span>
|
||||
<el-link type="primary" class="ml-4">修改</el-link>
|
||||
</el-space>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user