登录页
This commit is contained in:
parent
1b73811d6e
commit
180448496e
BIN
src/assets/images/login-bg.png
Normal file
BIN
src/assets/images/login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
src/assets/images/login-img.png
Normal file
BIN
src/assets/images/login-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
201
src/views/login/LoginForm2 copy.vue
Normal file
201
src/views/login/LoginForm2 copy.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<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>
|
||||
@ -6,28 +6,28 @@
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
class="login-form"
|
||||
>
|
||||
<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 />
|
||||
<User />
|
||||
</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>
|
||||
@ -41,20 +41,17 @@
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon" size="18" color="#808695">
|
||||
<LockClosedOutline />
|
||||
<SafetyCertificateOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<img style="width: 140px;height:40px;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
|
||||
<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>
|
||||
<el-checkbox v-model:checked="autoLogin">记住密码</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -65,46 +62,22 @@
|
||||
@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 { 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 { SafetyCertificateOutlined } from '@vicons/antd';
|
||||
const captchaImg=ref('')
|
||||
// 动态加载滑块验证码组件
|
||||
|
||||
@ -133,7 +106,6 @@
|
||||
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
code: { required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
};
|
||||
const emit = defineEmits(['goRegister']);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const router = useRouter();
|
||||
@ -183,9 +155,6 @@
|
||||
|
||||
getCaptcha()
|
||||
|
||||
function goRegister() {
|
||||
emit('goRegister');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -193,9 +162,13 @@
|
||||
margin-bottom: 16px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.login-form {
|
||||
.el-input {
|
||||
--el-input-border-radius: 20px !important;
|
||||
}
|
||||
</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>
|
||||
|
||||
41
src/views/login/QrcodeForm.vue
Normal file
41
src/views/login/QrcodeForm.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="qrCode-box">
|
||||
<div class="qr-img">
|
||||
<QrCode :value="qrCodeUrl" :width="160" :options="{ margin: 0}" />
|
||||
</div>
|
||||
<div class="qr-text">
|
||||
<el-icon :size="18"><RefreshRight /></el-icon>刷新二维码
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { QrCode } from '@/components/Qrcode/index';
|
||||
const qrCodeUrl = 'https://www.naiveadmin.com';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qrCode-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
.qr-img {
|
||||
border:1px solid #dcdfe6;
|
||||
padding:10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.qr-text {
|
||||
cursor: pointer;
|
||||
margin-top:16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color:rgba(0, 0, 0, .88);
|
||||
>i {
|
||||
margin-right:6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/views/login/newLogin2 copy.vue
Normal file
155
src/views/login/newLogin2 copy.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<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>
|
||||
@ -3,27 +3,19 @@
|
||||
<div class="account-container">
|
||||
<div class="account-wrap-login">
|
||||
<div class="login-pic">
|
||||
<div>
|
||||
<img src="~@/assets/images/login-pic.png" />
|
||||
</div>
|
||||
<h1 class="login-title">WMS </h1>
|
||||
<h4 class="login-subtitle">界面美观组件丰富的中后台前端解决方案 </h4>
|
||||
</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 class="account-top-desc">用户登录</div>
|
||||
</div>
|
||||
<div class="account-top-desc">Element plus 中后台前端/设计解决方案</div>
|
||||
<div class="account-tab-box">
|
||||
<div :class="activeIndex==index?'active':''" v-for="(item,index) in tabData" @click="handleClick(index)" :key="index">{{item}}</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" />
|
||||
<LoginForm v-if="activeIndex === 0" ref="LoginFormRef" />
|
||||
<QrcodeForm v-else></QrcodeForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,16 +26,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import LoginForm from './LoginForm2.vue';
|
||||
import RegisterForm from './RegisterForm2.vue';
|
||||
import QrcodeForm from './QrcodeForm.vue';
|
||||
|
||||
const tab = ref('login');
|
||||
|
||||
function changeBackLogin() {
|
||||
tab.value = 'login';
|
||||
}
|
||||
|
||||
function changeGoRegister() {
|
||||
tab.value = 'register';
|
||||
const activeIndex = ref(0)
|
||||
const tabData =ref(['密码登录','扫码登录'])
|
||||
const handleClick =(index)=>{
|
||||
activeIndex.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -59,42 +47,61 @@
|
||||
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);
|
||||
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: 960px;
|
||||
height: 554px;
|
||||
width: 920px;
|
||||
height: 462px;
|
||||
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;
|
||||
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: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
&-container {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
padding:32px 48px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-title {
|
||||
padding-bottom: 15px;
|
||||
@ -102,9 +109,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (max-width: 680px) {
|
||||
.login-pic {
|
||||
display: none;
|
||||
padding: 20px 12px 100px;
|
||||
background-size: auto 100px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
@ -112,43 +120,53 @@
|
||||
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;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.account-tab-box {
|
||||
display: flex;
|
||||
width:160px;
|
||||
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: 640px) {
|
||||
@media (max-width: 680px) {
|
||||
&-container {
|
||||
padding: 0;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
&-wrap-login {
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user