更改登录页UI

src/assets/loginmini/style/base.less

@@ -132,8 +132,7 @@ a {
   visibility: hidden;
 }
 
-.clearfix {
-}
+.clearfix {}
 
 .divHeight {
   width: 100%;
@@ -215,6 +214,7 @@ a {
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
+  justify-content: center;
   position: relative;
 }
 
@@ -358,7 +358,7 @@ a {
 }
 
 .login-background-img {
-  background-image: url(../icon/jeecg_bg.png);
+  background-image: url(../icon/jeecg_bg.jpg);
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;

src/assets/loginmini/style/home.less

@@ -4,14 +4,13 @@
 }
 
 .aui-container {
-  max-width: 1000px;
   margin: 0 auto;
-  box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
+  // box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 92%;
-  height: auto;
+  width: 541px;
+  height: 625px;
   -webkit-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -ms-transform: translateX(-50%) translateY(-50%);
@@ -21,7 +20,7 @@
 
 .aui-form {
   width: 100%;
-  background: #eee;
+  background: transparent;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -45,12 +44,12 @@
 }
 
 .aui-formBox {
-  flex-basis: 40%;
-  -webkit-flex-basis: 40%;
+  flex-basis: 100%;
+  -webkit-flex-basis: 100%;
   box-sizing: border-box;
-  padding: 30px 20px;
-  background: #fff;
-  box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
+  padding: 0px;
+  background: transparent;
+  // box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
 }
 
 .aui-logo {
@@ -231,7 +230,7 @@
 
 .aui-form-nav {
   text-align: center;
-  padding-bottom: 20px;
+  padding-bottom: 43px;
 }
 
 .aui-form-nav .aui-flex-box {
@@ -323,31 +322,87 @@
   padding: 50px 40px 55px 40px;
 }
 
+.aui-inputLabel {
+  position: absolute;
+  top: 28px;
+  left: 0;
+  width: 68px;
+  font-family: AdobeHeitiStd-Regular;
+  font-size: 22px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 3px;
+  letter-spacing: 0px;
+  color: #bafffc;
+}
+
+.aui-inputContent {
+  position: relative;
+  margin: 0 10px;
+  height: 60px;
+  background-image: url(../icon/login-input-bg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.aui-codeContent {
+  position: relative;
+  margin: 0 10px;
+  height: 60px;
+  background-image: url(../icon/login-input-bg.png);
+  background-size: 72% 100%;
+  background-repeat: no-repeat;
+}
+
+.aui-code-img {
+  width: 100% !important;
+  height: 60px !important;
+  display: block;
+  border: 0;
+}
+
+.logoTitle {
+  width: 100%;
+  height: 36px;
+  font-family: MicrosoftYaHei-Bold;
+  font-size: 36px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 43px;
+  letter-spacing: 11px;
+  color: #ffffff;
+}
+
 .aui-inputClear {
   width: 100%;
-  border-bottom: 1px solid #cccccc;
+  border-bottom: 0px solid #cccccc;
   position: relative;
-  padding-left: 20px;
-  background: #fff;
+  padding-left: 68px;
+  background: transparent;
   margin-bottom: 8px;
   margin-top: 20px;
 }
 
 .aui-inputClear .icon {
   position: absolute;
-  top: 10px;
-  left: 0;
+  top: 20px;
+  left: 20px;
 }
 
 .aui-inputClear input {
   width: 100%;
-  padding: 10px;
+  height: 60px;
+  padding: 10px 0 10px 60px;
   border: none;
-  color: #333333;
-  font-size: 14px;
+  color: #ffffff;
+  font-size: 16px;
   background: none;
 }
 
+.code-input {
+  width: 60% !important;
+}
+
 .aui-code {
   position: absolute;
   right: 8px;
@@ -356,29 +411,31 @@
   cursor: pointer;
 }
 
-.icon-code {
+.icon-user {
+  height: 24px !important;
   background-image: url(../icon/icon-user.png);
 }
 
 .icon-password {
+  height: 24px !important;
   background-image: url(../icon/icon-password.png);
 }
 
 .icon-code {
+  height: 24px !important;
   background-image: url(../icon/icon-code.png);
 }
 
 .aui-inputClear:focus {
-  border-bottom: 1px solid #1b90ff;
+  border-bottom: 0px solid #1b90ff;
 }
 
 .aui-inputClear:hover {
-  border-bottom: 1px solid #1b90ff;
+  border-bottom: 0px solid #1b90ff;
 }
 
 .aui-choice {
   position: relative; 
-  font-size: 12px;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
@@ -386,12 +443,18 @@
   -webkit-align-items: center;
   align-items: center;
   position: relative;
-  color: #040404;
+  left: 78px; 
+	font-family: AdobeHeitiStd-Regular;
+	font-size: 16px;
+	font-weight: normal;
+	font-stretch: normal;
+	letter-spacing: 0px;
+	color: #6ebad0;
 }
 
 .aui-choice input {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
 }
 
@@ -406,6 +469,7 @@
 
 .aui-formButton {
   padding-top: 10px;
+  padding-left: 78px;
 }
 
 .aui-formButton a {

src/locales/lang/zh-CN/sys.ts

@@ -75,7 +75,7 @@ export default {
 
     loginButton: '登录',
     registerButton: '注册',
-    rememberMe: '记住我',
+    rememberMe: '记住密码',
     forgetPassword: '忘记密码?',
     otherSignIn: '其他登录方式',
 

src/views/system/loginmini/MiniLogin.vue

@@ -1,59 +1,54 @@
 <template>
   <div :class="prefixCls" class="login-background-img">
-    <AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
-    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" />
-    <div class="aui-logo" v-if="!getIsMobile">
-      <div>
-        <h3>
-          <img :src="logoImg" alt="jeecg" />
-        </h3>
-      </div>
-    </div>
-    <div v-else class="aui-phone-logo">
-      <img :src="logoImg" alt="jeecg" />
-    </div>
-    <div v-show="type === 'login'">
+    <!-- <AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false" /> -->
+    <!-- <AppDarkModeToggle class="absolute top-3 right-7 enter-x" /> -->
+
     <div class="aui-content">
       <div class="aui-container">
         <div class="aui-form">
-            <div class="aui-image">
-              <div class="aui-image-text">
-                <img :src="adTextImg" />
-              </div>
-            </div>
           <div class="aui-formBox">
             <div class="aui-formWell">
+
+              <div style="width: 100%;margin-bottom: 25px;">
+                <img :src="logoImg" style="margin: 0 auto;" />
+              </div>
               <div class="aui-flex aui-form-nav investment_title">
-                  <div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
-                    >{{ t('sys.login.signInFormTitle') }}
+                <div class="logoTitle">放射性源项分析系统</div>
               </div>
-                  <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
-                    >{{ t('sys.login.mobileSignInFormTitle') }}
-                  </div>
-                </div>
-                <div class="aui-form-box" style="height: 180px">
-                  <a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick">
+              <div class="aui-form-box" style="height: 252px">
+                <a-form ref="loginRef" :model="formData" @keyup.enter.native="loginHandleClick">
                   <div class="aui-account">
                     <div class="aui-inputClear">
-                        <i class="icon icon-code"></i>
+                      <div class="aui-inputLabel">用户名</div>
+                      <div class="aui-inputContent">
+                        <i class="icon icon-user"></i>
                         <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" v-model:value="formData.username" />
                         </a-form-item>
                       </div>
+                    </div>
                     <div class="aui-inputClear">
+                      <div class="aui-inputLabel" style="text-align: right;">密码</div>
+                      <div class="aui-inputContent">
                         <i class="icon icon-password"></i>
                         <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" v-model:value="formData.password" />
                         </a-form-item>
                       </div>
+                    </div>
                     <div class="aui-inputClear">
+                      <div class="aui-inputLabel">验证码</div>
+                      <div class="aui-codeContent">
                         <i class="icon icon-code"></i>
                         <a-form-item>
-                          <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
+                          <a-input class="fix-auto-fill code-input" type="text" v-model:value="formData.inputCode" />
                         </a-form-item>
+                      </div>
                       <div class="aui-code">
-                          <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
-                          <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
+                        <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage"
+                          class="aui-code-img" @click="handleChangeCheckCode" />
+                        <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" class="aui-code-img"
+                          @click="handleChangeCheckCode" />
                       </div>
                     </div>
                     <div class="aui-flex">
@@ -63,77 +58,20 @@
                           <span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
                         </div>
                       </div> 
-                        <div class="aui-forget">
-                          <a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a>
-                        </div>
-                      </div>
-                    </div>
-                  </a-form>
-                  <a-form v-else ref="phoneFormRef" :model="phoneFormData" @keyup.enter.native="loginHandleClick">
-                    <div class="aui-account phone">
-                      <div class="aui-inputClear phoneClear">
-                        <a-input class="fix-auto-fill" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
-                      </div>
-                      <div class="aui-inputClear">
-                        <a-input class="fix-auto-fill" :maxlength="6" :placeholder="t('sys.login.smsCode')" v-model:value="phoneFormData.smscode" />
-                        <div v-if="showInterval" class="aui-code" @click="getLoginCode">
-                          <a>{{ t('component.countdown.normalText') }}</a>
-                        </div>
-                        <div v-else class="aui-code">
-                          <span class="aui-get-code code-shape">{{ t('component.countdown.sendText', [unref(timeRuning)]) }}</span>
-                        </div>
                     </div>
                   </div>
                 </a-form>
               </div>
               <div class="aui-formButton">
-                  <div class="aui-flex">
                 <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
                   {{ t('sys.login.loginButton') }}</a-button>
               </div>
-                  <div class="aui-flex">
-                    <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
-                  </div>
-                  <div class="aui-flex">
-                    <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
-                  </div>
-                </div>
-              </div>
-              <a-form @keyup.enter.native="loginHandleClick">
-                <div class="aui-flex aui-third-text">
-                  <div class="aui-flex-box aui-third-border">
-                    <span>{{ t('sys.login.otherSignIn') }}</span>
-                  </div>
-                </div>
-                <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
-                    </div>
-                  </div>
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
-                    </div>
-                  </div>
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
-                    </div>
-                  </div>
-                  <div class="aui-flex-box">
-                    <div class="aui-third-login">
-                      <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
-                    </div>
-                  </div>
-                </div>
-              </a-form>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
+    <!-- <div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
       <MiniForgotpad ref="forgotRef" @go-back="goBack" @success="handleSuccess" />
     </div>
     <div v-show="type === 'register'" :class="`${prefixCls}-form`">
@@ -143,7 +81,7 @@
       <MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
     </div>
     <!-- 第三方登录相关弹框 -->
-    <ThirdModal ref="thirdModalRef"></ThirdModal>
+    <ThirdModal ref="thirdModalRef"></ThirdModal> -->
 
     <!-- 图片验证码弹窗 -->
     <CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" />
@@ -162,7 +100,7 @@
 import MiniForgotpad from './MiniForgotpad.vue';
 import MiniRegister from './MiniRegister.vue';
 import MiniCodelogin from './MiniCodelogin.vue';
-  import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
+import logoImg from '/@/assets/loginmini/icon/logo.png';
 import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
 import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
 import { useLocaleStore } from '/@/store/modules/locale';
@@ -189,7 +127,7 @@
 });
 const rememberMe = ref<string>('0');
 //手机号登录还是账号登录
-  const activeIndex = ref<string>('accountLogin');
+// const activeIndex = ref<string>('accountLogin');
 const type = ref<string>('login');
 //账号登录表单字段
 const formData = reactive<any>({
@@ -439,6 +377,7 @@
 :deep(.ant-input:focus) {
   box-shadow: none;
 }
+
 .aui-get-code {
   float: right;
   position: relative;
@@ -465,16 +404,32 @@
   position: absolute;
   margin-right: 10px;
 }
+
 .aui-link-login {
-    height: 42px;
-    padding: 10px 15px;
-    font-size: 14px;
-    border-radius: 8px;
-    margin-top: 15px;
-    margin-bottom: 8px;
-    flex: 1;
-    color: #fff;
+  width: 100%;
+  height: 60px;
+  margin-top: 36px;
+  font-family: MicrosoftYaHei;
+  font-size: 30px;
+  font-weight: bold;
+  font-stretch: normal;
+  line-height: 3px;
+  letter-spacing: 3px;
+  color: #ffffff !important;
+  background-color: transparent;
+  background-image: url(../../../assets/loginmini/icon/login-btn.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
+.aui-link-login:hover{ 
+  color: #ffffff !important;
+  background-color: transparent;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.61);
+  background-image: url(../../../assets/loginmini/icon/login-btnHover.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
 .aui-phone-logo {
   position: absolute;
   margin-left: 10px;
@@ -482,6 +437,7 @@
   top: 2px;
   z-index: 4;
 }
+
 .top-3 {
   top: 0.45rem;
 }
@@ -499,9 +455,11 @@ html[data-theme='dark'] {
     &::before {
       background-image: url(/@/assets/svg/login-bg-dark.svg);
     }
+
     .aui-inputClear {
       background-color: #232a3b !important;
     }
+
     .ant-input,
     .ant-input-password {
       background-color: #232a3b !important;
@@ -518,16 +476,21 @@ html[data-theme='dark'] {
     .app-iconify {
       color: #fff !important;
     }
-    .aui-inputClear input,.aui-input-line input,.aui-choice{
+
+    .aui-inputClear input,
+    .aui-input-line input,
+    .aui-choice {
       color: #c9d1d9 !important;
     }
 
     .aui-formBox {
       background-color: @dark-bg !important;
     }
+
     .aui-third-text span {
       background-color: @dark-bg !important;
     }
+
     .aui-form-nav .aui-flex-box {
       color: #c9d1d9 !important;
     }
@@ -536,12 +499,16 @@ html[data-theme='dark'] {
       background: @dark-bg !important;
       color: white !important;
     }
+
     .aui-code-line {
       border-left: none !important;
     }
-    .ant-checkbox-inner,.aui-success h3{
+
+    .ant-checkbox-inner,
+    .aui-success h3 {
       border-color: #c9d1d9;
     }
+
     //update-begin---author:wangshuai ---date:20230828  for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
     &-sign-in-way {
       .anticon {
@@ -554,6 +521,7 @@ html[data-theme='dark'] {
         }
       }
     }
+
     //update-end---author:wangshuai ---date:20230828  for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
   }
 
@@ -567,6 +535,7 @@ html[data-theme='dark'] {
     font-size: 12px !important;
     color: @text-color-secondary !important;
   }
+
   .aui-third-login a {
     background: transparent;
   }