'注册页面调整'

gst4base
JayChou 2 months ago
parent 6110bd286f
commit fb7e1be9de
  1. 21
      jeecgboot-vue3-master/src/assets/loginmini/style/home.less
  2. 6
      jeecgboot-vue3-master/src/views/system/loginmini/MiniForgotpad.vue
  3. 67
      jeecgboot-vue3-master/src/views/system/loginmini/MiniRegister.vue

@ -30,7 +30,7 @@
} }
.aui-form { .aui-form {
width: 100%; width: 100%;
padding: 40px 30px; padding: 20px 30px;
background-color: transparent !important; background-color: transparent !important;
} }
@ -117,7 +117,7 @@
border: none; border: none;
color: #333333; color: #333333;
font-size: 14px; font-size: 14px;
background: unset; // background: unset;
padding-left: 40px; padding-left: 40px;
} }
@ -343,7 +343,7 @@
.aui-inputClear { .aui-inputClear {
width: 100%; width: 100%;
position: relative; position: relative;
padding-left: 20px; padding-left: 31px;
// background: #fff; // background: #fff;
margin-bottom: 8px; margin-bottom: 8px;
margin-top: 20px; margin-top: 20px;
@ -352,7 +352,7 @@
.aui-inputClear .icon { .aui-inputClear .icon {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 0; left: 9px;
} }
.aui-inputClear input { .aui-inputClear input {
@ -418,17 +418,18 @@
} }
.aui-formButton { .aui-formButton {
padding-top: 10px; // padding-top: 10px;
} }
.aui-formButton a { .aui-formButton a {
height: 42px; height: 42px;
padding: 10px 15px; padding: 10px 15px;
font-size: 14px; font-size: 14px;
border-radius: 8px; border-radius: 8px;
border-color: #67b5ff; border-color: #0bd7c6;
background: #1b90ff; background: #0bd7c6;
width: 100%; width: 218px;
cursor: pointer; cursor: pointer;
border: none; border: none;
color: #fff; color: #fff;
@ -452,8 +453,8 @@
} }
.aui-formButton .aui-linek-code:hover { .aui-formButton .aui-linek-code:hover {
color: #1b90ff; color: #30e3ce;
border: 1px solid #1b90ff; border: 1px solid #30e3ce;
} }
.aui-third-text { .aui-third-text {

@ -2,11 +2,11 @@
<div class="aui-content"> <div class="aui-content">
<div class="aui-container"> <div class="aui-container">
<div class="aui-form"> <div class="aui-form">
<div class="aui-image"> <!-- <div class="aui-image">
<!-- <div class="aui-image-text"> <div class="aui-image-text">
<img :src="adTextImg" alt="" /> <img :src="adTextImg" alt="" />
</div> -->
</div> </div>
</div> -->
<div class="aui-formBox"> <div class="aui-formBox">
<div class="aui-formWell"> <div class="aui-formWell">
<div class="aui-step-box"> <div class="aui-step-box">

@ -4,24 +4,27 @@
<div class="aui-form"> <div class="aui-form">
<div class="aui-formBox"> <div class="aui-formBox">
<div class="aui-formWell"> <div class="aui-formWell">
<div class="login-title">{{ t('sys.login.signUpFormTitle') }}</div>
<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-box activeNav on">{{ t('sys.login.signUpFormTitle') }}</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 style="display: flex;align-items: center;justify-content: space-between;">
<div class="aui-input-line" style="flex: 1;">
<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> <div class="aui-input-line" style="flex: 1;margin-left: 24px;">
<a-form-item>
<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.name')" v-model:value="formData.realname" /> <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.name')" v-model:value="formData.realname" />
</div> </div>
</div>
</a-form-item> </a-form-item>
<!-- <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" />
@ -31,7 +34,7 @@
<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.department')" />--> <!-- <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.department')" />-->
<JStuSelectDept v-model:value="formData.department" :multiple="false" /> <JStuSelectDept v-model:value="formData.department" :multiple="false" />
</div> </div>
</a-form-item> </a-form-item>
@ -90,24 +93,24 @@
<img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" /> <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
</div> </div>
</div> </div>
<!-- <a-form-item name="policy">--> <!-- <a-form-item name="policy">-->
<!-- <div class="aui-flex">--> <!-- <div class="aui-flex">-->
<!-- <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>-->
<!-- </a-form-item>--> <!-- </a-form-item>-->
</div> </div>
</div> </div>
<div class="aui-formButton"> <div class="aui-formButton" style="display: flex;align-items: center;justify-content: center;">
<div class="aui-flex"> <div class="aui-flex">
<a class="aui-link-login aui-flex-box" @click="registerHandleClick"> {{ t('sys.login.registerButton') }}</a> <a class="aui-link-login aui-flex-box" @click="registerHandleClick"> {{ t('sys.login.registerButton') }}</a>
</div> </div>
<div class="aui-flex"> <div class="aui-flex">
<a class="aui-linek-code aui-flex-box" @click="goBackHandleClick">{{ t('sys.login.backSignIn') }}</a> <a class="aui-linek-code aui-flex-box" style="margin-left: 20px;" @click="goBackHandleClick">{{ t('sys.login.backSignIn') }}</a>
</div> </div>
</div> </div>
</a-form> </a-form>
@ -119,9 +122,8 @@
</template> </template>
<script lang="ts" setup name="mini-register"> <script lang="ts" setup name="mini-register">
import { ref, reactive, unref, toRaw, onMounted } from 'vue';
import { ref, reactive, unref, toRaw,onMounted } from 'vue'; import { getCaptcha, registerStu, getCodeInfo } from '/@/api/sys/user';
import { getCaptcha, registerStu,getCodeInfo } from '/@/api/sys/user';
import { SmsEnum } from '/@/views/sys/login/useLogin'; import { SmsEnum } from '/@/views/sys/login/useLogin';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png'; import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
@ -167,8 +169,8 @@
emit('go-back'); emit('go-back');
initForm(); initForm();
} }
// //
const randCodeData = reactive<any>({ const randCodeData = reactive<any>({
randCodeImage: '', randCodeImage: '',
requestCodeSuccess: false, requestCodeSuccess: false,
checkKey: null, checkKey: null,
@ -293,7 +295,16 @@ const randCodeData = reactive<any>({
* 初始化表单 * 初始化表单
*/ */
function initForm() { function initForm() {
Object.assign(formData, { workno: '', username: '', mobile: '', realname: '', department: '', smscode: '', password: '', confirmPassword: ''/*, policy: false*/ }); Object.assign(formData, {
workno: '',
username: '',
mobile: '',
realname: '',
department: '',
smscode: '',
password: '',
confirmPassword: '' /*, policy: false*/,
});
if (!unref(timer)) { if (!unref(timer)) {
showInterval.value = true; showInterval.value = true;
clearInterval(unref(timer)); clearInterval(unref(timer));
@ -335,4 +346,8 @@ const randCodeData = reactive<any>({
left: 10px; left: 10px;
font-size: 20px !important; font-size: 20px !important;
} }
:deep(.ant-btn-primary){
background-color: #0bd7c6;
border: none;
}
</style> </style>

Loading…
Cancel
Save