yangjun
/
hldy_yunwei_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

菜单和登录样式

This commit is contained in:
wangweidong 2025-10-27 15:18:41 +08:00
parent 03bf58569e
commit baaad2ee26
3 changed files with 572 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/loginmini/style/home.less
View File

@ -349,13 +349,14 @@
.aui-inputClear { .aui-inputClear {
width: 100%; width: 100%;
// border-bottom: 1px solid #cccccc; border: 1px solid #f4f5f9;
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
background: #f4f5f9; background: #f4f5f9;
margin-bottom: 8px; margin-bottom: 8px;
margin-top: 20px; margin-top: 20px;
border-radius: 8px; border-radius: 8px;
} }
.aui-inputClear .icon { .aui-inputClear .icon {
@ -366,7 +367,7 @@
.aui-inputClear input { .aui-inputClear input {
width: 100%; width: 100%;
padding: 10px; padding: 12px;
border: none; border: none;
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;
@ -394,11 +395,11 @@
} }
.aui-inputClear:focus { .aui-inputClear:focus {
border-bottom: 1px solid #1b90ff; border: 1px solid #1b90ff;
} }
.aui-inputClear:hover { .aui-inputClear:hover {
border-bottom: 1px solid #1b90ff; border: 1px solid #1b90ff;
} }
.aui-choice { .aui-choice {

49
src/components/SimpleMenu/src/SimpleMenu.vue
View File

@ -199,10 +199,12 @@
border-radius: 8px; border-radius: 8px;
// margin: 0px 20px 0 20px; // margin: 0px 20px 0 20px;
} }
.scrollbar__view{
padding: 0 10px;
}
.jeecg-menu-light.jeecg-menu-vertical .jeecg-menu-item-active.jeecg-menu-submenu { .jeecg-menu-light.jeecg-menu-vertical .jeecg-menu-item-active.jeecg-menu-submenu {
color: #606266 !important; color: #606266 !important;
background: #f0f0f0; border-radius: 6px;
padding-bottom: 10px;; padding-bottom: 10px;;
} }
@ -223,7 +225,10 @@
// margin: 10px 20px 0 20px; // margin: 10px 20px 0 20px;
transform: scale(1.02); transform: scale(1.02);
} }
.jeecg-menu-item-active>.jeecg-menu-submenu-title{
background: #f0f0f0;
border-radius: 6px;
}
.ant-drawer-close { .ant-drawer-close {
position: absolute; position: absolute;
right: 0; right: 0;
@ -236,4 +241,42 @@ position: relative;
min-height: 0; min-height: 0;
padding: 3px; padding: 3px;
} }
.jeecg-menu-item-active .jeecg-menu>li>.jeecg-menu-submenu-title{
padding-left:0 !important;
}
.jeecg-menu-item-active>.jeecg-menu{
margin-top:10px;
background: #FBFBFD;
// border-radius: 6px;
}
.jeecg-menu-submenu .jeecg-simple-menu__parent{
width:85% !important;
}
.jeecg-menu-submenu, .jeecg-menu-opened, .jeecg-simple-menu__parent .jeecg-menu>.jeecg-menu-submenu,.jeecg-simple-menu__parent{
margin:5px auto;
padding-left:0 !important;
}
.jeecg-menu-vertical .jeecg-menu-item{
width: 100%;
padding-left: 16px !important;
}
.jeecg-menu-submenu, .jeecg-menu-opened, .jeecg-simple-menu__parent .jeecg-menu-submenu-title{
padding-left: 8px !important;
}
.jeecg-menu-item-active .jeecg-menu>li>.jeecg-menu-submenu-title{
padding-left: 10px !important;
}
.jeecg-menu-light .jeecg-menu{
width: 100%;
margin: 5 auto;
border-radius: 6px;
padding: 2px 0;
>li{
width: 85%;
margin:5px auto;
}
}
</style> </style>

112
src/views/system/loginmini/MiniLogin.vue
View File

@ -10,7 +10,7 @@
<div v-else class="aui-phone-logo"> <div v-else class="aui-phone-logo">
<img :src="logoImg" alt="jeecg" /> <img :src="logoImg" alt="jeecg" />
</div> </div>
<div > <div>
<div class="aui-content"> <div class="aui-content">
<div class="aui-container"> <div class="aui-container">
<div class="aui-form"> <div class="aui-form">
@ -27,16 +27,20 @@
</div> </div>
<a-divider /> <a-divider />
<div class="aui-form-box" style="height: 180px"> <div class="aui-form-box" style="height: 180px">
<a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick"> <a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'"
@keyup.enter.native="loginHandleClick">
<div class="aui-account"> <div class="aui-account">
<div class="aui-inputClear"> <div class="aui-inputClear">
<a-row> <a-row>
<a-col :span="2"> <a-col :span="2">
<span style="margin-top: 10px;display: block;"><img :src="icon1Img" alt="账号" style="width: 20px;" /></span> <span style="margin-top: 17px;display: block;"><img
:src="icon1Img" alt="账号" style="width: 20px;" /></span>
</a-col> </a-col>
<a-col :span="20"> <a-col :span="20">
<a-form-item> <a-form-item>
<a-input class="fix-auto-fill" :placeholder="`请输入`+t('sys.login.userName')" v-model:value="formData.username" /> <a-input class="fix-auto-fill"
:placeholder="`请输入`+t('sys.login.userName')"
v-model:value="formData.username" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@ -44,17 +48,20 @@
<div class="aui-inputClear"> <div class="aui-inputClear">
<a-row> <a-row>
<a-col :span="2"> <a-col :span="2">
<span style="margin-top: 10px;display: block;"><img :src="icon2Img" alt="密码" style="width: 20px;" /></span> <span style="margin-top: 17px;display: block;"><img
:src="icon2Img" alt="密码" style="width: 20px;" /></span>
</a-col> </a-col>
<a-col :span="20"> <a-col :span="20">
<a-form-item> <a-form-item>
<a-input class="fix-auto-fill" type="password" :placeholder="`请输入`+t('sys.login.password')" v-model:value="formData.password" /> <a-input class="fix-auto-fill" type="password"
:placeholder="`请输入`+t('sys.login.password')"
v-model:value="formData.password" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
<div > <div>
<huakuai @verifySuccess="checkInputCode"/> <huakuai @verifySuccess="checkInputCode" />
</div> </div>
<!-- <div class="aui-inputClear"> <!-- <div class="aui-inputClear">
<a-row> <a-row>
@ -79,7 +86,8 @@
</div> </div>
<div class="aui-formButton"> <div class="aui-formButton">
<div class="aui-flex"> <div class="aui-flex">
<a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick"> <a-button :loading="loginLoading" class="aui-link-login" type="primary"
@click="loginHandleClick">
{{ t('sys.login.loginButton') }}</a-button> {{ t('sys.login.loginButton') }}</a-button>
</div> </div>
</div> </div>
@ -95,7 +103,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup name="login-mini"> <script lang="ts" setup name="login-mini">
import { getCaptcha, getCodeInfo,randomCode } from '/@/api/sys/user'; import { getCaptcha, getCodeInfo, randomCode } from '/@/api/sys/user';
import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue'; import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
import codeImg from '/@/assets/images/checkcode.png'; import codeImg from '/@/assets/images/checkcode.png';
import { Rule } from '/@/components/Form'; import { Rule } from '/@/components/Form';
@ -190,8 +198,8 @@
}); });
} }
function checkInputCode(type){ function checkInputCode(type) {
console.log("🚀 ~ checkCode ~ checkCode:",type) console.log("🚀 ~ checkCode ~ checkCode:", type)
handleChangeCheckCode(); handleChangeCheckCode();
} }
@ -267,7 +275,7 @@
} }
try { try {
loginLoading.value = true; loginLoading.value = true;
const { userInfo }: any = await userStore.phoneLogin({ const { userInfo } : any = await userStore.phoneLogin({
mobile: phoneFormData.mobile, mobile: phoneFormData.mobile,
captcha: phoneFormData.smscode, captcha: phoneFormData.smscode,
mode: 'none', //不要默认的错误提示 mode: 'none', //不要默认的错误提示
@ -299,8 +307,8 @@
return; return;
} }
//update-begin---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码--- //update-begin---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD }).catch((res) =>{ const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD }).catch((res) => {
if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){ if (res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE) {
openCaptchaModal(true, {}); openCaptchaModal(true, {});
} }
}); });
@ -394,6 +402,7 @@
:deep(.ant-input:focus) { :deep(.ant-input:focus) {
box-shadow: none; box-shadow: none;
} }
.aui-get-code { .aui-get-code {
float: right; float: right;
position: relative; position: relative;
@ -416,11 +425,12 @@
color: #aaa !important; color: #aaa !important;
} }
:deep(.jeecg-dark-switch){ :deep(.jeecg-dark-switch) {
position:absolute; position: absolute;
margin-right: 10px; margin-right: 10px;
} }
.aui-link-login{
.aui-link-login {
height: 42px; height: 42px;
padding: 10px 15px; padding: 10px 15px;
font-size: 14px; font-size: 14px;
@ -430,23 +440,28 @@
flex: 1; flex: 1;
color: #fff; color: #fff;
} }
.aui-phone-logo{
.aui-phone-logo {
position: absolute; position: absolute;
margin-left: 10px; margin-left: 10px;
width: 40%; width: 40%;
top: 4%; top: 4%;
z-index: 4; z-index: 4;
} }
.top-3{
.top-3 {
top: 0.45rem; top: 0.45rem;
} }
.ant-form-item {
margin-bottom: 0px !important;
}
</style> </style>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-mini-login'; @prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146; @dark-bg: #293146;
html[data-theme='dark'] { html[data-theme='dark'] {
.@{prefix-cls} { .@{prefix-cls} {
background-color: @dark-bg !important; background-color: @dark-bg !important;
background-image: none; background-image: none;
@ -454,9 +469,11 @@ html[data-theme='dark'] {
&::before { &::before {
background-image: url(/@/assets/svg/login-bg-dark.svg); background-image: url(/@/assets/svg/login-bg-dark.svg);
} }
.aui-inputClear{
.aui-inputClear {
background-color: #232a3b !important; background-color: #232a3b !important;
} }
.ant-input, .ant-input,
.ant-input-password { .ant-input-password {
background-color: #232a3b !important; background-color: #232a3b !important;
@ -473,30 +490,39 @@ html[data-theme='dark'] {
.app-iconify { .app-iconify {
color: #fff !important; color: #fff !important;
} }
.aui-inputClear input,.aui-input-line input,.aui-choice{
.aui-inputClear input,
.aui-input-line input,
.aui-choice {
color: #c9d1d9 !important; color: #c9d1d9 !important;
} }
.aui-formBox{ .aui-formBox {
background-color: @dark-bg !important; background-color: @dark-bg !important;
} }
.aui-third-text span{
.aui-third-text span {
background-color: @dark-bg !important; background-color: @dark-bg !important;
} }
.aui-form-nav .aui-flex-box{
.aui-form-nav .aui-flex-box {
color: #c9d1d9 !important; color: #c9d1d9 !important;
} }
.aui-formButton .aui-linek-code{ .aui-formButton .aui-linek-code {
background: @dark-bg !important; background: @dark-bg !important;
color: white !important; color: white !important;
} }
.aui-code-line{
.aui-code-line {
border-left: none !important; border-left: none !important;
} }
.ant-checkbox-inner,.aui-success h3{
.ant-checkbox-inner,
.aui-success h3 {
border-color: #c9d1d9; border-color: #c9d1d9;
} }
//update-begin---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------ //update-begin---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
&-sign-in-way { &-sign-in-way {
.anticon { .anticon {
@ -509,6 +535,7 @@ html[data-theme='dark'] {
} }
} }
} }
//update-end---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------ //update-end---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
} }
@ -516,20 +543,23 @@ html[data-theme='dark'] {
.fix-auto-fill input { .fix-auto-fill input {
-webkit-text-fill-color: #c9d1d9 !important; -webkit-text-fill-color: #c9d1d9 !important;
box-shadow: inherit !important; box-shadow: inherit !important;
margin-top:-1px;
} }
.ant-divider-inner-text { .ant-divider-inner-text {
font-size: 12px !important; font-size: 12px !important;
color: @text-color-secondary !important; color: @text-color-secondary !important;
} }
.aui-third-login a{
.aui-third-login a {
background: transparent; background: transparent;
} }
} }
/* Chrome/Edge/Safari */
input:-webkit-autofill, /* Chrome/Edge/Safari */
input:-webkit-autofill:hover, input:-webkit-autofill,
input:-webkit-autofill:focus { input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
/* 重新设置背景色、文字色、边框等 */ /* 重新设置背景色、文字色、边框等 */
background-color: #f5f5f5 !important; background-color: #f5f5f5 !important;
color: #333333 !important; color: #333333 !important;
@ -537,11 +567,11 @@ input:-webkit-autofill:focus {
box-shadow: 0 0 0px 1000px #f5f5f5 inset !important; box-shadow: 0 0 0px 1000px #f5f5f5 inset !important;
/* 如果需要边框高亮，也可以一起重置 */ /* 如果需要边框高亮，也可以一起重置 */
// border: 1px solid #ccc !important; // border: 1px solid #ccc !important;
} }
/* Firefox */ /* Firefox */
input:-moz-autofill { input:-moz-autofill {
background-color: #f5f5f5 !important; background-color: #f5f5f5 !important;
color: #333333 !important; color: #333333 !important;
} }
</style> </style>