mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 12:58:55 +08:00
前端优化
This commit is contained in:
lovezhuo
parent
2ec931c1e5
commit
88b9426b92
BIN
src/assets/login/bg.png
Normal file
BIN
src/assets/login/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
1
src/assets/login/illustration.svg
Normal file
1
src/assets/login/illustration.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/assets/login/mini_qr.png
Normal file
BIN
src/assets/login/mini_qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@ -1,29 +1,34 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable style="margin-bottom: 20px" @change="getdeptTree" />
|
||||
<el-dropdown :hide-on-click="false" class="mt10 mr10">
|
||||
<el-icon style="transform: rotate(90deg)">
|
||||
<MoreFilled />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="isExpand ? 'expand' : 'fold'"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
{{ isExpand ? '折叠' : '展开' }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="head-container-header">
|
||||
<div class="head-container-header-input">
|
||||
<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getdeptTree" />
|
||||
</div>
|
||||
<div class="head-container-header-dropdown">
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<el-icon style="transform: rotate(90deg)">
|
||||
<MoreFilled />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="isExpand ? 'expand' : 'fold'"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
{{ isExpand ? '折叠' : '展开' }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<el-tree
|
||||
class="mt20"
|
||||
:data="state.List"
|
||||
:props="props.props"
|
||||
:expand-on-click-node="false"
|
||||
@ -158,3 +163,18 @@ defineExpose({
|
||||
getdeptTree,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.head-container {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-input {
|
||||
width: 90%;
|
||||
}
|
||||
&-dropdown {
|
||||
flex: 1;
|
||||
margin-left: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-tag :color="randomColor()" class="container-tag">
|
||||
<SvgIcon :name="props.icon" />
|
||||
<SvgIcon :name="props.icon" :size="25" color="#ffffff" />
|
||||
</el-tag>
|
||||
<span class="container-span">{{ $t(props.label) }}</span>
|
||||
</div>
|
||||
@ -84,5 +84,6 @@ const randomNum = (minNum, maxNum) => {
|
||||
.container-span {
|
||||
max-width: 60%;
|
||||
font-weight: 500;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -166,7 +166,7 @@ const sendMsg = () => {
|
||||
tableData.value = [];
|
||||
getData().then(() => {
|
||||
//box-container是添加overflow的父div，也就是出现滚动条的div
|
||||
var scrollTarget = document.getElementById('msgTable');
|
||||
var scrollTarget = document.getElementById('msg-div');
|
||||
//scrollTarget.scrollHeight是获取dom元素的高度，然后设置scrollTop
|
||||
scrollTarget.scrollTop = scrollTarget.scrollHeight;
|
||||
});
|
||||
|
||||
@ -17,6 +17,8 @@ export default {
|
||||
phonePlaceholder4: 'Please enter Phone',
|
||||
accountBtnText: 'Sign in',
|
||||
registerBtnText: 'Register',
|
||||
readAccept: 'I have read it carefully and accept',
|
||||
privacyPolicy: 'Privacy Policy',
|
||||
},
|
||||
mobile: {
|
||||
placeholder1: 'Please input mobile phone number',
|
||||
@ -26,6 +28,7 @@ export default {
|
||||
},
|
||||
scan: {
|
||||
text: 'Open the mobile phone to scan and quickly log in / register',
|
||||
wechatApp: 'WeChat sweep code experience mobile',
|
||||
},
|
||||
signInText: 'welcome back!',
|
||||
browserMsgText:
|
||||
|
||||
@ -17,6 +17,8 @@ export default {
|
||||
phonePlaceholder4: '请输入手机号',
|
||||
accountBtnText: '登 录',
|
||||
registerBtnText: '注 册',
|
||||
readAccept: '我已仔细阅读并接受',
|
||||
privacyPolicy: '《隐私政策》',
|
||||
},
|
||||
mobile: {
|
||||
placeholder1: '请输入手机号',
|
||||
@ -26,6 +28,7 @@ export default {
|
||||
},
|
||||
scan: {
|
||||
text: '打开手机扫一扫，快速登录/注册',
|
||||
wechatApp: '微信扫码体验移动端',
|
||||
},
|
||||
signInText: '欢迎回来！',
|
||||
browserMsgText: '* 温馨提示：建议使用谷歌、Microsoft Edge，版本 79.0.1072.62 及以上浏览器，360浏览器请使用极速模式',
|
||||
|
||||
@ -9,15 +9,20 @@
|
||||
.el-button--default i.iconfont,
|
||||
.el-button--default i.fa {
|
||||
font-size: 14px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.el-button--small i.iconfont,
|
||||
.el-button--small i.fa {
|
||||
font-size: 12px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.el-button [class*='el-icon'] + span {
|
||||
margin-left: 6px;
|
||||
}
|
||||
// 面包屑修改默认颜色和字体粗细
|
||||
.layout-navbars-tagsview-ul {
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
}
|
||||
/* Input 输入框、InputNumber 计数器
|
||||
------------------------------- */
|
||||
// 菜单搜索
|
||||
@ -43,6 +48,10 @@
|
||||
.el-form-item--small.el-form-item:last-of-type {
|
||||
margin-bottom: 18px !important;
|
||||
}
|
||||
// 修改表单项默认右边距
|
||||
.el-form-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item .el-form-item__label .el-icon {
|
||||
@ -50,6 +59,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 修改数字输入框默认宽度为100%
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Alert 警告
|
||||
------------------------------- */
|
||||
.el-alert {
|
||||
@ -274,7 +288,7 @@
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: calc(90vh - 111px) !important;
|
||||
max-height: calc(90vh - 80px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@ -287,7 +301,9 @@
|
||||
|
||||
/* Table 表格 element plus 2.2.0 版本
|
||||
------------------------------- */
|
||||
// 表格修改默认颜色
|
||||
.el-table {
|
||||
color: #000000;
|
||||
.el-button.is-text {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -6,3 +6,4 @@
|
||||
@import './waves.scss';
|
||||
@import './dark.scss';
|
||||
@import './pigx.scss';
|
||||
@import './login.scss';
|
||||
|
||||
121
src/theme/login.scss
Normal file
121
src/theme/login.scss
Normal file
@ -0,0 +1,121 @@
|
||||
.select-none {
|
||||
user-select: none;
|
||||
}
|
||||
.tenant {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 1.25rem;
|
||||
z-index: 9;
|
||||
}
|
||||
.mini_qr {
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
bottom: 1rem;
|
||||
padding: 36px;
|
||||
z-index: 1000;
|
||||
img {
|
||||
width: 120px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-placeholder);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.wave {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.login-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 18rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img img {
|
||||
z-index: 0;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.login-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 350px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.login-form h2 {
|
||||
text-transform: uppercase;
|
||||
margin: 15px 0;
|
||||
color: #999;
|
||||
font: bold 200% Consolas, Monaco, monospace;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1180px) {
|
||||
.login-container {
|
||||
grid-gap: 4rem;
|
||||
}
|
||||
.login-form {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.login-form h2 {
|
||||
font-size: 2.4rem;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.img img {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 280px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 968px) {
|
||||
.wave {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
</el-row>
|
||||
<el-scrollbar>
|
||||
<query-tree ref="dictTreeRef" class="mt10" :query="state.queryList" @node-click="handleNodeClick" placeholder="请输入字典项或名称">
|
||||
<query-tree ref="dictTreeRef" :query="state.queryList" @node-click="handleNodeClick" placeholder="请输入字典项或名称">
|
||||
<template #default="{ data }">
|
||||
<span class="custom-tree-node">
|
||||
<span class="label">{{ data.description }}</span>
|
||||
@ -40,7 +40,7 @@
|
||||
</template>
|
||||
</query-tree>
|
||||
</el-scrollbar>
|
||||
<el-footer style="height: 50px">
|
||||
<el-footer style="height: 40px; line-height: 40px">
|
||||
<el-button type="primary" size="small" icon="Download" style="width: 100%" @click="exportExcel">{{
|
||||
$t('common.exportBtn')
|
||||
}}</el-button>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation3">
|
||||
<el-button round type="primary" v-waves class="login-content-submit" @click="handleLogin" :loading="loading">
|
||||
<el-button type="primary" v-waves class="login-content-submit" @click="handleLogin" :loading="loading">
|
||||
<span>{{ $t('mobile.btnText') }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<Verify @success="verifySuccess" :mode="'pop'" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }" ref="verifyref" />
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation4">
|
||||
<el-button type="primary" class="login-content-submit" round v-waves @click="handleVerify" :loading="loading">
|
||||
<el-button type="primary" class="login-content-submit" v-waves @click="handleVerify" :loading="loading">
|
||||
<span>{{ $t('password.accountBtnText') }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
@ -33,8 +33,16 @@
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="state.ruleForm.checked">
|
||||
{{ $t('password.readAccept') }}
|
||||
</el-checkbox>
|
||||
<el-button link type="primary">
|
||||
{{ $t('password.privacyPolicy') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation4">
|
||||
<el-button type="primary" class="login-content-submit" round v-waves @click="handleRegister" :loading="loading">
|
||||
<el-button type="primary" class="login-content-submit" v-waves @click="handleRegister" :loading="loading">
|
||||
<span>{{ $t('password.registerBtnText') }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@ -74,6 +82,7 @@ const state = reactive({
|
||||
username: '', // 用户名
|
||||
password: '', // 密码
|
||||
phone: '', // 手机号
|
||||
checked: '', // 是否同意条款
|
||||
},
|
||||
});
|
||||
|
||||
@ -130,6 +139,7 @@ const dataRules = reactive({
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
checked: [{ required: true, message: '请阅读并同意条款', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
// 处理密码强度得分变化事件
|
||||
|
||||
@ -90,14 +90,17 @@ onMounted(() => {
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
svg:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.social-container {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.box {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,46 +1,41 @@
|
||||
<template>
|
||||
<div class="login-container flex">
|
||||
<div class="login-left">
|
||||
<div class="login-left-logo">
|
||||
<img :src="logoMini" />
|
||||
<div class="login-left-logo-text">
|
||||
<span>{{ getThemeConfig.globalViceTitle }}</span>
|
||||
<span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-left-img">
|
||||
<img :src="loginMain" />
|
||||
</div>
|
||||
<img :src="loginBg" class="login-left-waves" />
|
||||
<div class="select-none">
|
||||
<div class="tenant">
|
||||
<!-- 租户选择 -->
|
||||
<tenant />
|
||||
</div>
|
||||
<div class="login-right flex">
|
||||
<div class="login-right-warp flex-margin">
|
||||
<div class="login-right-warp-mian">
|
||||
<div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您！</div>
|
||||
<div class="login-right-warp-main-form">
|
||||
<div>
|
||||
<!-- 租户选择 -->
|
||||
<tenant />
|
||||
<el-tabs v-model="tabsActiveName">
|
||||
<!-- 用户名密码登录 -->
|
||||
<el-tab-pane :label="$t('label.one1')" name="account">
|
||||
<Password @signInSuccess="signInSuccess" />
|
||||
</el-tab-pane>
|
||||
<!-- 手机号登录 -->
|
||||
<el-tab-pane :label="$t('label.two2')" name="mobile">
|
||||
<Mobile @signInSuccess="signInSuccess" />
|
||||
</el-tab-pane>
|
||||
<!-- 社交登录 -->
|
||||
<el-tab-pane :label="$t('label.three3')" name="social">
|
||||
<Social @signInSuccess="signInSuccess" />
|
||||
</el-tab-pane>
|
||||
<!-- 注册 -->
|
||||
<el-tab-pane :label="$t('label.register')" name="register" v-if="registerEnable">
|
||||
<Register @afterSuccess="tabsActiveName = 'account'" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini_qr">
|
||||
<!-- 扫码体验移动端 -->
|
||||
<img :src="miniQr" />
|
||||
<p>{{ t('scan.wechatApp') }}</p>
|
||||
</div>
|
||||
<img :src="bg" class="wave" />
|
||||
<div class="flex-c absolute right-5 top-3"></div>
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<img :src="illustration" />
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<div class="login-form">
|
||||
<div class="login-title">{{ getThemeConfig.globalTitle }} 欢迎您！</div>
|
||||
<el-tabs v-model="tabsActiveName">
|
||||
<!-- 用户名密码登录 -->
|
||||
<el-tab-pane :label="$t('label.one1')" name="account">
|
||||
<Password @signInSuccess="signInSuccess" />
|
||||
</el-tab-pane>
|
||||
<!-- 手机号登录 -->
|
||||
<el-tab-pane :label="$t('label.two2')" name="mobile">
|
||||
<Mobile @signInSuccess="signInSuccess" />
|
||||
</el-tab-pane>
|
||||
<!-- 社交登录 -->
|
||||
<el-tab-pane :label="$t('label.three3')" name="social">
|
||||
<Social @signInSuccess="signInSuccess" />
|
||||
</el-tab-pane>
|
||||
<!-- 注册 -->
|
||||
<el-tab-pane :label="$t('label.register')" name="register" v-if="registerEnable">
|
||||
<Register @afterSuccess="tabsActiveName = 'account'" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,9 +46,9 @@
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { NextLoading } from '/@/utils/loading';
|
||||
import logoMini from '/@/assets/logo-mini.svg';
|
||||
import loginMain from '/@/assets/login-main.svg';
|
||||
import loginBg from '/@/assets/login-bg.svg';
|
||||
import illustration from '/@/assets/login/illustration.svg';
|
||||
import bg from '/@/assets/login/bg.png';
|
||||
import miniQr from '/@/assets/login/mini_qr.png';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
@ -117,165 +112,23 @@ const signInSuccess = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-container {
|
||||
height: 100%;
|
||||
background: var(--el-color-white);
|
||||
:deep(.el-input-group__append, .el-input-group__prepend) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-left {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: rgba(211, 239, 255, 1);
|
||||
margin-right: 100px;
|
||||
|
||||
.login-left-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 80px;
|
||||
z-index: 1;
|
||||
animation: logoAnimation 0.3s ease;
|
||||
|
||||
img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.login-left-logo-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
font-size: 28px;
|
||||
color: #26a59a;
|
||||
}
|
||||
|
||||
.login-left-logo-text-msg {
|
||||
font-size: 12px;
|
||||
color: #32a99e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-left-img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 52%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: error-num 0.6s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.login-left-waves {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100px;
|
||||
}
|
||||
.translation {
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
padding: 5px 40px;
|
||||
}
|
||||
|
||||
.login-right {
|
||||
width: 700px;
|
||||
.check-zh {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.login-right-warp {
|
||||
border: 1px solid var(--el-color-primary-light-3);
|
||||
border-radius: 3px;
|
||||
width: 500px;
|
||||
height: 560px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--el-color-white);
|
||||
|
||||
.login-right-warp-one,
|
||||
.login-right-warp-two {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right-warp-one {
|
||||
&::before {
|
||||
filter: hue-rotate(0deg);
|
||||
top: 0px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, var(--el-color-primary));
|
||||
animation: loginLeft 3s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
filter: hue-rotate(60deg);
|
||||
top: -100%;
|
||||
right: 2px;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, var(--el-color-primary));
|
||||
animation: loginTop 3s linear infinite;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right-warp-two {
|
||||
&::before {
|
||||
filter: hue-rotate(120deg);
|
||||
bottom: 2px;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(270deg, transparent, var(--el-color-primary));
|
||||
animation: loginRight 3s linear infinite;
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
filter: hue-rotate(300deg);
|
||||
bottom: -100%;
|
||||
left: 0px;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, var(--el-color-primary));
|
||||
animation: loginBottom 3s linear infinite;
|
||||
animation-delay: 2.1s;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right-warp-mian {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.login-right-warp-main-title {
|
||||
height: 130px;
|
||||
line-height: 130px;
|
||||
font-size: 27px;
|
||||
text-align: center;
|
||||
letter-spacing: 3px;
|
||||
animation: logoAnimation 0.3s ease;
|
||||
animation-delay: 0.3s;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.login-right-warp-main-form {
|
||||
flex: 1;
|
||||
padding: 0 50px 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.check-en {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -138,3 +138,8 @@ defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-form-item__content div p img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user