longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化登录和菜单

Browse Source
This commit is contained in:
龙运模
2024-06-26 18:53:48 +08:00
parent 084d29a1f2
commit c77310c675
20 changed files with 5164 additions and 5064 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/components/passwordForm.vue
+1 -1
View File
@@ -15,7 +15,7 @@
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn')}}</el-button>
<el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">{{ $t('login.signIn')}}</el-button>
</el-form-item>
<div class="login-reg">
{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
src/views/login/components/phoneForm.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
<el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">{{ $t('login.signIn') }}</el-button>
</el-form-item>
<div class="login-reg">
{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
src/views/login/index.vue
+107 -164
View File
@@ -1,65 +1,45 @@
<template>
<div class="login_bg">
<div class="login_adv" style="background-image: url(img/ren.png);">
<div class="login_adv">
<div class="login_adv__title">
<h3><img class="logo" :alt="$CONFIG.APP_NAME" src="img/logo1.png"> 象纬云科维保系统</h3>
<h4>高效 ｜ 团结 ｜ 友善 ｜ 创新</h4>
<h3><img class="logo" alt="象纬云科" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png"></h3>
</div>
<div class="login_adv__mask"></div>
<div class="login_adv__bottom">
© 象纬云科 {{$CONFIG.APP_VER}}
</div>
</div>
<div class="login_main">
<!-- <div class="login_config">-->
<!-- <el-button :icon="config.dark?'el-icon-sunny':'el-icon-moon'" circle type="info" @click="configDark"></el-button>-->
<!-- <el-dropdown trigger="click" placement="bottom-end" @command="configLang">-->
<!-- <el-button circle>-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"-->
<!-- role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512">-->
<!-- <path-->
<!-- d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"-->
<!-- fill="currentColor"></path>-->
<!-- <path-->
<!-- d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"-->
<!-- fill="currentColor"></path>-->
<!-- </svg>-->
<!-- </el-button>-->
<!-- <template #dropdown>-->
<!-- <el-dropdown-menu>-->
<!-- <el-dropdown-item v-for="item in lang" :key="item.value" :command="item"-->
<!-- :class="{'selected':config.lang==item.value}">{{item.name}}</el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </template>-->
<!-- </el-dropdown>-->
<!-- </div>-->
<div class="login-form">
<div class="login-left">
<div class="login-header">
<div class="logo">
<label>{{$CONFIG.APP_NAME}}</label>
</div>
<div class="loginRightMask">
<div class="handerWelcome">
<div class="title">HELLO</div>
<div class="name">欢迎登录维保系统</div>
</div>
<div class="login-view">
<el-image class="img" src="img/ren2.png" fit="contain"></el-image>
</div>
</div>
<div class="login-right">
<el-tabs>
<el-tab-pane :label="$t('login.accountLogin')" lazy>
<el-tab-pane label="账号登录" lazy>
<password-form></password-form>
</el-tab-pane>
<el-tab-pane :label="$t('login.mobileLogin')" lazy>
<el-tab-pane label="手机号登录" lazy>
<phone-form></phone-form>
</el-tab-pane>
</el-tabs>
<template v-if="$CONFIG.MY_SHOW_LOGIN_OAUTH">
<el-divider class="dividerBox">{{ $t('login.signInOther') }}</el-divider>
<div class="login-oauth">
<div class="btnBox wechat" @click="wechatLogin"><el-icon><sc-icon-wechat /></el-icon></div>
<div class="btnBox dingTalk"><el-icon><sc-icon-DingTalk /></el-icon></div>
<div class="thirdParty">
<el-divider class="dividerBox">{{ $t('login.signInOther') }}</el-divider>
<div class="login-oauth">
<div class="btnBox wechat" @click="wechatLogin">
<el-icon><sc-icon-wechat /></el-icon>
<span class="text">微信登录</span>
</div>
<div class="btnBox dingTalk">
<el-icon><sc-icon-DingTalk /></el-icon>
<span class="text">钉钉登录</span>
</div>
</div>
</div>
</template>
<div class="passKeyLogin" @click="passKeyLogin">指纹登录</div>
</div>
<div class="login_adv__bottom">
xwcloud.com 版权所有 © 2023
</div>
</div>
</div>
@@ -157,15 +137,10 @@
height: 100%;
display: flex;
}
.login_adv {
width: 100%;
background-size: contain;
background-position: 20px 0;
background-repeat: no-repeat;
position: relative;
}
.login_adv__title {
color: #547FDB;
padding: 40px;
@@ -175,119 +150,97 @@
right: 0;
z-index: 2;
.logo{
width: 35px;
height: 35px;
margin-right: 10px;
height: 60px;
}
}
.login_adv__title h3 {
font-size: 30px;
display: flex;
align-items: center;
}
.login_adv__title h4 {
font-size: 16px;
margin-top: 10px;
font-weight: normal;
}
.login_adv__title p {
font-size: 14px;
margin-top: 10px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.6);
}
.login_adv__title div {
margin-top: 10px;
display: flex;
align-items: center;
}
.login_adv__title div span {
margin-right: 15px;
}
.login_adv__title div i {
font-size: 40px;
}
.login_adv__title div i.add {
font-size: 20px;
color: rgba(255, 255, 255, 0.6);
}
.login_adv__bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 40px;
//background-image: linear-gradient(transparent, #000);
z-index: 3;
}
.login_adv__mask {
background-size: cover;
background-position: 0;
background-repeat: no-repeat;
background-image: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_back.png);
width: calc(100% - 460px);
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.92);
z-index: 1;
}
.login_main {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
position: absolute;
left: 0;
top: 0;
z-index: 200;
}
.login-form {
width: 860px;
height: 490px;
margin: auto;
width: 460px;
height: 100%;
position: relative;
box-sizing: border-box;
border-radius: 10px;
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: center;
box-shadow: 2px 10px 20px rgba(0,0,0,0.2);
.login-left{
padding: 40px;
flex: 1;
overflow: hidden;
background: var(--el-color-primary);
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
background: rgba(255,255,255,1);
.dividerBox:deep(.el-divider__text){
font-weight: normal;
color: #888;
font-size: 13px;
}
.passKeyLogin{
position: absolute;
left: 40px;
bottom: 70px;
margin-top: 22px;
font-weight: bold;
width: calc(100% - 80px);
height: 40px;
background: #DAEAFB;
display: flex;
flex-direction: column;
.login-view{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
justify-content: center;
border-radius: 4px;
color: var(--el-color-primary);
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.loginRightMask{
height: 710px;
padding: 0 40px 40px 40px;
width: 100%;
}
.handerWelcome{
.title{
font-size: 42px;
font-weight: 600;
padding-bottom: 10px;
color: var(--el-color-primary);
}
.name{
font-size: 23px;
font-weight: 600;
padding-bottom: 60px;
color: var(--el-color-primary);
}
}
.login-right{
padding: 40px;
flex: 1;
overflow: hidden;
background: rgba(255,255,255,1);
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
.dividerBox:deep(.el-divider__text){
color: var(--el-text-color-placeholder);
font-weight: normal;
}
.login_adv__bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 30px;
text-align: center;
z-index: 3;
color: #888;
}
}
.login-header {
margin-bottom: 40px;
}
@@ -309,18 +262,27 @@
font-size: 26px;
font-weight: bold;
}
.login-oauth {
display: flex;
justify-content: center;
.btnBox{
margin: 0 5px;
.thirdParty{
width: 80%;
margin: 60px auto 0 auto;
.login-oauth {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
.el-icon{
font-size: 26px;
.btnBox{
margin: 2px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
.el-icon{
font-size: 26px;
}
.text{
color: #888;
margin-top: 10px;
font-size: 12px;
}
}
}
}
@@ -328,74 +290,57 @@
.login-form .el-divider {
margin-top: 40px;
}
.login-form {}
.login-form:deep(.el-tabs) .el-tabs__header {
margin-bottom: 25px;
}
.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {
font-size: 14px;
}
.login-form:deep(.login-forgot) {
text-align: right;
}
.login-form:deep(.login-forgot) a {
color: var(--el-color-primary);
}
.login-form:deep(.login-forgot) a:hover {
color: var(--el-color-primary-light-3);
}
.login-form:deep(.login-reg) {
font-size: 14px;
color: var(--el-text-color-primary);
}
.login-form:deep(.login-reg) a {
color: var(--el-color-primary);
}
.login-form:deep(.login-reg) a:hover {
color: var(--el-color-primary-light-3);
}
.login_config {
position: absolute;
top: 20px;
right: 20px;
}
.login-form:deep(.login-msg-yzm) {
display: flex;
width: 100%;
}
.login-form:deep(.login-msg-yzm) .el-button {
margin-left: 10px;
--el-button-size: 42px;
}
.qrCodeLogin {
text-align: center;
position: relative;
padding: 20px 0;
}
.qrCodeLogin img.qrCode {
background: #fff;
padding: 20px;
border-radius: 10px;
}
.qrCodeLogin p.msg {
margin-top: 15px;
}
.qrCodeLogin .qrCodeLogin-result {
position: absolute;
top: 0;
@@ -422,20 +367,18 @@
.login_main {
display: flex;
}
.login_main .login_config {
position: static;
padding: 20px 20px 0 20px;
text-align: right;
}
.login-form {
width: 90%;
width: 100%;
padding: 20px 40px;
}
.login_adv {
//display: none;
display: none;
}
}
@media (max-width: 800px){