zhc077
/
hnjd_comp
forked from wangjiadong/comp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改登录样式

Browse Source
main
JayChou 4 months ago
parent 2f2e9e3fc8
commit a5e604cf7c
4 changed files with 65 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      jeecgboot-vue3-master/src/assets/loginmini/style/home.less
  2. 3
      jeecgboot-vue3-master/src/locales/lang/zh-CN/sys.ts
  3. 4
      jeecgboot-vue3-master/src/views/system/loginmini/MiniLogin.vue
  4. 76
      jeecgboot-vue3-master/src/views/system/loginmini/MiniRegister.vue

4
jeecgboot-vue3-master/src/assets/loginmini/style/home.less
Unescape View File

@ -30,13 +30,15 @@
} }
.aui-image { .aui-image {
padding: 180px 80px; padding: 180px 80px;
flex-basis: 60%; flex-basis: 60%;
-webkit-flex-basis: 60%; -webkit-flex-basis: 60%;
background-color: #0198cd; background-color: #0198cd;
//background-image: url(../icon/jeecg_ad.png); //background-image: url(../icon/jeecg_ad.png);
background-image: url(/resource/img/comp/comp_ad.png); background-image: url(/resource/img/comp/comp_ad.png);
background-size: cover; background-size: contain;
background-position: center;
} }
.aui-image-text { .aui-image-text {

3
jeecgboot-vue3-master/src/locales/lang/zh-CN/sys.ts
Unescape View File

@ -91,7 +91,8 @@ export default {
mobilePlaceholder: '请输入手机号码', mobilePlaceholder: '请输入手机号码',
policyPlaceholder: '勾选后才能注册', policyPlaceholder: '勾选后才能注册',
diffPwd: '两次输入密码不一致', diffPwd: '两次输入密码不一致',
name:'姓名',
department:'部门',
userName: '账号', userName: '账号',
password: '密码', password: '密码',
inputCode: '验证码', inputCode: '验证码',

4
jeecgboot-vue3-master/src/views/system/loginmini/MiniLogin.vue
Unescape View File

@ -39,9 +39,9 @@
<div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')" <div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
>{{ t('sys.login.signInFormTitle') }} >{{ t('sys.login.signInFormTitle') }}
</div> </div>
<div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')" <!-- <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
>{{ t('sys.login.mobileSignInFormTitle') }} >{{ t('sys.login.mobileSignInFormTitle') }}
</div> </div> -->
</div> </div>
<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">

76
jeecgboot-vue3-master/src/views/system/loginmini/MiniRegister.vue
Unescape View File

@ -11,47 +11,71 @@
<div class="aui-formWell"> <div class="aui-formWell">
<a-form ref="formRef" :model="formData"> <a-form ref="formRef" :model="formData">
<div class="aui-flex aui-form-nav aui-clear-left" style="padding-bottom: 21px"> <div class="aui-flex aui-form-nav aui-clear-left" style="padding-bottom: 21px">
<div class="aui-flex-box activeNav on">{{t('sys.login.signUpFormTitle')}}</div> <div class="aui-flex-box activeNav on">{{ t('sys.login.signUpFormTitle') }}</div>
</div> </div>
<div class="aui-form-box"> <div class="aui-form-box">
<div class="aui-account aui-account-line"> <div class="aui-account aui-account-line">
<a-form-item> <a-form-item>
<div class="aui-input-line"> <div class="aui-input-line">
<Icon class="aui-icon" icon="ant-design:user-outlined"/> <Icon class="aui-icon" icon="ant-design:user-outlined" />
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.userName')" v-model:value="formData.username" /> <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
</div> </div>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<div class="aui-input-line"> <div class="aui-input-line">
<Icon class="aui-icon" icon="ant-design:mobile-outlined"/> <Icon class="aui-icon" icon="ant-design:mobile-outlined" />
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.mobile')" v-model:value="formData.mobile" /> <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.name')" v-model:value="formData.name" />
</div> </div>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<div class="aui-input-line">
<Icon class="aui-icon" icon="ant-design:mobile-outlined" />
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.department')" v-model:value="formData.department" />
<!-- <DeptSelectModal rowKey="id" @register="registerSelModal" @getSelectResult="onSelectOk"/> -->
</div>
</a-form-item>
<a-form-item>
<div class="aui-input-line">
<Icon class="aui-icon" icon="ant-design:mobile-outlined" />
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.name')" v-model:value="formData.name" />
</div>
</a-form-item>
<!-- <a-form-item>
<div class="aui-input-line"> <div class="aui-input-line">
<Icon class="aui-icon" icon="ant-design:mail-outlined"/> <Icon class="aui-icon" icon="ant-design:mail-outlined"/>
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.smsCode')" v-model:value="formData.smscode" /> <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.smsCode')" v-model:value="formData.smscode" />
<div v-if="showInterval" class="aui-code-line" @click="getLoginCode">{{t('component.countdown.normalText')}}</div> <div v-if="showInterval" class="aui-code-line" @click="getLoginCode">{{t('component.countdown.normalText')}}</div>
<div v-else class="aui-code-line">{{t('component.countdown.sendText',[unref(timeRuning)])}}</div> <div v-else class="aui-code-line">{{t('component.countdown.sendText',[unref(timeRuning)])}}</div>
</div> </div>
</a-form-item> </a-form-item> -->
<a-form-item> <a-form-item>
<div class="aui-input-line"> <div class="aui-input-line">
<Icon class="aui-icon" icon="ant-design:lock-outlined"/> <Icon class="aui-icon" icon="ant-design:lock-outlined" />
<a-input class="fix-auto-fill" :type="pwdIndex==='close'?'password':'text'" :placeholder="t('sys.login.password')" v-model:value="formData.password" /> <a-input
class="fix-auto-fill"
:type="pwdIndex === 'close' ? 'password' : 'text'"
:placeholder="t('sys.login.password')"
v-model:value="formData.password"
/>
<div class="aui-eye"> <div class="aui-eye">
<img :src="eyeKImg" alt="开启" v-if="pwdIndex==='open'" @click="pwdClick('close')" /> <img :src="eyeKImg" alt="开启" v-if="pwdIndex === 'open'" @click="pwdClick('close')" />
<img :src="eyeGImg" alt="关闭" v-else-if="pwdIndex==='close'" @click="pwdClick('open')" /> <img :src="eyeGImg" alt="关闭" v-else-if="pwdIndex === 'close'" @click="pwdClick('open')" />
</div> </div>
</div> </div>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<div class="aui-input-line"> <div class="aui-input-line">
<Icon class="aui-icon" icon="ant-design:lock-outlined"/> <Icon class="aui-icon" icon="ant-design:lock-outlined" />
<a-input class="fix-auto-fill" :type="confirmPwdIndex==='close'?'password':'text'" :placeholder="t('sys.login.confirmPassword')" v-model:value="formData.confirmPassword" /> <a-input
class="fix-auto-fill"
:type="confirmPwdIndex === 'close' ? 'password' : 'text'"
:placeholder="t('sys.login.confirmPassword')"
v-model:value="formData.confirmPassword"
/>
<div class="aui-eye"> <div class="aui-eye">
<img :src="eyeKImg" alt="开启" v-if="confirmPwdIndex==='open'" @click="confirmPwdClick('close')" /> <img :src="eyeKImg" alt="开启" v-if="confirmPwdIndex === 'open'" @click="confirmPwdClick('close')" />
<img :src="eyeGImg" alt="关闭" v-else-if="confirmPwdIndex==='close'" @click="confirmPwdClick('open')" /> <img :src="eyeGImg" alt="关闭" v-else-if="confirmPwdIndex === 'close'" @click="confirmPwdClick('open')" />
</div> </div>
</div> </div>
</a-form-item> </a-form-item>
@ -60,7 +84,7 @@
<div class="aui-flex-box"> <div class="aui-flex-box">
<div class="aui-choice"> <div class="aui-choice">
<a-checkbox v-model:checked="formData.policy" /> <a-checkbox v-model:checked="formData.policy" />
<span style="color: #1b90ff;margin-left: 4px">{{ t('sys.login.policy') }}</span> <span style="color: #1b90ff; margin-left: 4px">{{ t('sys.login.policy') }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -92,7 +116,7 @@
import jeecgAdTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png'; import jeecgAdTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
import eyeKImg from '/@/assets/loginmini/icon/icon-eye-k.png'; import eyeKImg from '/@/assets/loginmini/icon/icon-eye-k.png';
import eyeGImg from '/@/assets/loginmini/icon/icon-eye-g.png'; import eyeGImg from '/@/assets/loginmini/icon/icon-eye-g.png';
import { useI18n } from "/@/hooks/web/useI18n"; import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n(); const { t } = useI18n();
const { notification, createErrorModal, createMessage } = useMessage(); const { notification, createErrorModal, createMessage } = useMessage();
@ -105,7 +129,11 @@
password: '', password: '',
confirmPassword: '', confirmPassword: '',
policy: false, policy: false,
name: '',
department: '',
}); });
// 选择部门
//是否显示获取验证码 //是否显示获取验证码
const showInterval = ref<boolean>(true); const showInterval = ref<boolean>(true);
//60s //60s
@ -177,7 +205,7 @@
createMessage.warn(t('sys.login.diffPwd')); createMessage.warn(t('sys.login.diffPwd'));
return; return;
} }
if(!formData.policy){ if (!formData.policy) {
createMessage.warn(t('sys.login.policyPlaceholder')); createMessage.warn(t('sys.login.policyPlaceholder'));
return; return;
} }
@ -224,8 +252,8 @@
* 初始化表单 * 初始化表单
*/ */
function initForm() { function initForm() {
Object.assign(formData,{username:'',mobile: '', smscode: '', password: '', confirmPassword: '', policy: false}) Object.assign(formData, { username: '', mobile: '', smscode: '', password: '', confirmPassword: '', policy: false });
if(!unref(timer)){ if (!unref(timer)) {
showInterval.value = true; showInterval.value = true;
clearInterval(unref(timer)); clearInterval(unref(timer));
timer.value = null; timer.value = null;
@ -250,17 +278,17 @@
} }
defineExpose({ defineExpose({
initForm initForm,
}) });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '/@/assets/loginmini/style/home.less'; @import '/@/assets/loginmini/style/home.less';
@import '/@/assets/loginmini/style/base.less'; @import '/@/assets/loginmini/style/base.less';
.aui-input-line .aui-icon{ .aui-input-line .aui-icon {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 10px; top: 10px;
left: 10px; left: 10px;
font-size: 20px !important; font-size: 20px !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save