登录页

src/views/login/LoginForm2 copy.vue

@@ -0,0 +1,201 @@
+<template>
+  <el-form
+    ref="formRef"
+    :show-label="false"
+    :show-require-mark="false"
+    size="large"
+    :model="formInline"
+    :rules="rules"
+    class="login-form"
+  >
+    <el-form-item prop="username">
+      <el-input v-model="formInline.username" placeholder="请输入用户名">
+        <template #prefix>
+          <el-icon class="el-input__icon" size="18" color="#808695">
+            <PersonOutline />
+          </el-icon>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="password">
+      <el-input
+        v-model="formInline.password"
+        type="password"
+        show-password
+        placeholder="请输入密码"
+        @keyup.enter="handleSubmit"
+      >
+        <template #prefix>
+          <el-icon class="el-input__icon" size="18" color="#808695">
+            <LockClosedOutline />
+          </el-icon>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="code">
+      <div style="display: flex">
+        <el-input
+          @keyup.enter="handleSubmit"
+          v-model.trim="formInline.code"
+          placeholder="验证码"
+        >
+          <template #prefix>
+            <el-icon class="el-input__icon" size="18" color="#808695">
+              <LockClosedOutline />
+            </el-icon>
+          </template>
+        </el-input>
+        <img style="width: 140px;height:40px;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
+      </div>
+    </el-form-item>
+
+    <div class="flex items-center justify-between forget">
+      <div class="flex-initial">
+        <el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
+      </div>
+      <div class="flex-initial order-last">
+        <a href="javascript:">忘记密码</a>
+      </div>
+    </div>
+
+    <el-form-item :show-label="false">
+      <el-button
+        class="w-full"
+        type="primary"
+        @click="handleSubmit"
+        size="large"
+        :loading="loading"
+        round
+      >
+        登录
+      </el-button>
+    </el-form-item>
+    <div class="mb-4 default-color">
+      <div class="flex view-account-other">
+        <div class="flex-initial">
+          <span>其它登录方式</span>
+        </div>
+        <div class="flex-initial mx-2">
+          <a href="javascript:">
+            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
+              <LogoGithub />
+            </el-icon>
+          </a>
+        </div>
+        <div class="flex-initial mx-2">
+          <a href="javascript:">
+            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
+              <LogoFacebook />
+            </el-icon>
+          </a>
+        </div>
+        <div class="flex-initial" style="margin-left: auto">
+          <a href="javascript:" @click="goRegister">注册账号</a>
+        </div>
+      </div>
+    </div>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref,defineAsyncComponent } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useUserStore } from '@/store/modules/user';
+  import { ElMessage } from 'element-plus';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import {getInfoCaptcha} from '@/api/system/user';
+  import { PageEnum } from '@/enums/pageEnum';
+  const captchaImg=ref('')
+  // 动态加载滑块验证码组件
+
+  interface FormState {
+    username: string;
+    password: string;
+    code:string;
+    key:string;
+  }
+
+  const formRef = ref();
+
+  const loading = ref(false);
+  const autoLogin = ref(true);
+  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
+
+  const formInline = reactive({
+    username: '',
+    password: '',
+    code:'',
+    key:''
+  });
+
+  const rules = {
+    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+    password: { required: true, message: '请输入密码', trigger: 'blur' },
+    code: { required: true, message: '请输入验证码', trigger: 'blur' }
+  };
+  const emit = defineEmits(['goRegister']);
+  const userStore = useUserStore();
+
+  const router = useRouter();
+  const route = useRoute();
+
+  const handleSubmit = () => {
+    if (!formRef.value) return;
+    formRef.value.validate(async (valid) => {
+      if (valid) {
+        loading.value = true;
+
+        const params: FormState = {
+          username:formInline.username,
+          password:formInline.password,
+          code:formInline.code,
+          key:formInline.key
+        };
+
+        try {
+          const { code, msg } = await userStore.login(params);
+          if (code == ResultEnum.SUCCESS) {
+            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
+            ElMessage.success('登录成功，即将进入系统');
+            if (route.name === LOGIN_NAME) {
+              router.replace('/');
+            } else router.replace(toPath);
+          } else {
+            ElMessage.error(msg || '登录失败');
+          }
+        } finally {
+          loading.value = false;
+        }
+      } else {
+        ElMessage({
+          message: '请填写完整信息',
+          type: 'error',
+        });
+      }
+    });
+  };
+
+  const getCaptcha=async()=>{
+    let {key,captcha}= await getInfoCaptcha();
+    formInline.key=key
+    captchaImg.value=captcha
+  }
+
+  getCaptcha()
+
+  function goRegister() {
+    emit('goRegister');
+  }
+</script>
+
+<style lang="scss" scoped>
+  .forget {
+    margin-bottom: 16px;
+    margin-top: -10px;
+  }
+  .login-form {
+    .el-input {
+      --el-input-border-radius: 20px !important;
+    }
+  }
+</style>

src/views/login/LoginForm2.vue

@@ -6,28 +6,28 @@
     size="large"
     :model="formInline"
     :rules="rules"
-    class="login-form"
   >
     <el-form-item prop="username">
-      <el-input v-model="formInline.username" placeholder="请输入用户名">
+      <el-input v-model="formInline.username" placeholder="请输入登录账号">
         <template #prefix>
           <el-icon class="el-input__icon" size="18" color="#808695">
-            <PersonOutline />
+            <User />
           </el-icon>
         </template>
       </el-input>
+
     </el-form-item>
     <el-form-item prop="password">
       <el-input
         v-model="formInline.password"
         type="password"
         show-password
-        placeholder="请输入密码"
+        placeholder="请输入登录密码"
         @keyup.enter="handleSubmit"
       >
         <template #prefix>
           <el-icon class="el-input__icon" size="18" color="#808695">
-            <LockClosedOutline />
+            <Lock />
           </el-icon>
         </template>
       </el-input>
@@ -41,20 +41,17 @@
         >
           <template #prefix>
             <el-icon class="el-input__icon" size="18" color="#808695">
-              <LockClosedOutline />
+              <SafetyCertificateOutlined />
             </el-icon>
           </template>
         </el-input>
-        <img style="width: 140px;height:40px;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
+        <img style="width: 108px;height:40px;border-radius: 4px;margin-left:8px;border:2px solid var(--el-border-color) ;cursor: pointer" @click="getCaptcha" v-if="captchaImg" :src="captchaImg">
       </div>
     </el-form-item>
 
     <div class="flex items-center justify-between forget">
       <div class="flex-initial">
-        <el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
+        <el-checkbox v-model:checked="autoLogin">记住密码</el-checkbox>
-      </div>
-      <div class="flex-initial order-last">
-        <a href="javascript:">忘记密码</a>
       </div>
     </div>
 
@@ -65,46 +62,22 @@
         @click="handleSubmit"
         size="large"
         :loading="loading"
-        round
       >
         登录
       </el-button>
     </el-form-item>
-    <div class="mb-4 default-color">
-      <div class="flex view-account-other">
-        <div class="flex-initial">
-          <span>其它登录方式</span>
-        </div>
-        <div class="flex-initial mx-2">
-          <a href="javascript:">
-            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-              <LogoGithub />
-            </el-icon>
-          </a>
-        </div>
-        <div class="flex-initial mx-2">
-          <a href="javascript:">
-            <el-icon class="el-input__icon" size="24" color="#2d8cf0">
-              <LogoFacebook />
-            </el-icon>
-          </a>
-        </div>
-        <div class="flex-initial" style="margin-left: auto">
-          <a href="javascript:" @click="goRegister">注册账号</a>
-        </div>
-      </div>
-    </div>
   </el-form>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref,defineAsyncComponent } from 'vue';
+  import { reactive, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useUserStore } from '@/store/modules/user';
   import { ElMessage } from 'element-plus';
   import { ResultEnum } from '@/enums/httpEnum';
   import {getInfoCaptcha} from '@/api/system/user';
   import { PageEnum } from '@/enums/pageEnum';
+  import { SafetyCertificateOutlined } from '@vicons/antd';
   const captchaImg=ref('')
   // 动态加载滑块验证码组件
 
@@ -133,7 +106,6 @@
     password: { required: true, message: '请输入密码', trigger: 'blur' },
     code: { required: true, message: '请输入验证码', trigger: 'blur' }
   };
-  const emit = defineEmits(['goRegister']);
   const userStore = useUserStore();
 
   const router = useRouter();
@@ -183,9 +155,6 @@
 
   getCaptcha()
 
-  function goRegister() {
-    emit('goRegister');
-  }
 </script>
 
 <style lang="scss" scoped>
@@ -193,9 +162,13 @@
     margin-bottom: 16px;
     margin-top: -10px;
   }
-  .login-form {
+</style>
-    .el-input {
+<style lang="scss">
-      --el-input-border-radius: 20px !important;
+input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
-    }
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+    background-color: transparent !important;
+    background-image: none;
+    transition: background-color 50000s ease-in-out 0s;
+    
     }
 </style>

src/views/login/QrcodeForm.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="qrCode-box">
+        <div class="qr-img">
+            <QrCode :value="qrCodeUrl" :width="160" :options="{ margin: 0}" />
+        </div>
+        <div class="qr-text">
+            <el-icon :size="18"><RefreshRight /></el-icon>刷新二维码
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { QrCode } from '@/components/Qrcode/index';
+const qrCodeUrl = 'https://www.naiveadmin.com';
+</script>
+
+<style lang="scss" scoped>
+.qrCode-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 24px;
+    .qr-img {
+        border:1px solid #dcdfe6;
+        padding:10px;
+        border-radius: 4px;
+    }
+    .qr-text {
+        cursor: pointer;
+        margin-top:16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color:rgba(0, 0, 0, .88);
+        >i {
+            margin-right:6px;
+        }
+    }
+}
+</style>

src/views/login/newLogin2 copy.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="account">
+    <div class="account-container">
+      <div class="account-wrap-login">
+        <div class="login-pic">
+          <div>
+            <img src="~@/assets/images/login-pic.png" />
+          </div>
+        </div>
+        <div class="login-form">
+          <div class="login-form-container">
+            <div class="account-top">
+              <div class="account-top-logo">
+                <img src="~@/assets/images/logo.png" alt="" />
+                <span class="project-title">Naive Admin</span>
+              </div>
+              <div class="account-top-desc">Element plus 中后台前端/设计解决方案</div>
+            </div>
+            <!-- <div class="login-form-title">
+            <el-space>
+              <el-button round>登录</el-button>
+              <el-button type="primary" round>注册</el-button>
+            </el-space>
+          </div> -->
+            <LoginForm v-if="tab === 'login'" ref="LoginFormRef" @go-register="changeGoRegister" />
+            <RegisterForm v-else ref="RegisterFormRef" @back-login="changeBackLogin" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import LoginForm from './LoginForm2.vue';
+  import RegisterForm from './RegisterForm2.vue';
+
+  const tab = ref('login');
+
+  function changeBackLogin() {
+    tab.value = 'login';
+  }
+
+  function changeGoRegister() {
+    tab.value = 'register';
+  }
+</script>
+
+<style lang="scss" scoped>
+  .account {
+    width: 100%;
+    margin: 0 auto;
+
+    &-container {
+      width: 100%;
+      min-height: 100vh;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      padding: 15px;
+      background: #9053c7;
+      background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
+      background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
+      background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
+      background: linear-gradient(-135deg, #c850c0, #4158d0);
+    }
+
+    &-wrap-login {
+      width: 960px;
+      height: 554px;
+      background: #fff;
+      border-radius: 10px;
+      overflow: hidden;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding: 30px 95px 33px 95px;
+      .login-pic {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+
+        img {
+          max-width: 100%;
+        }
+      }
+
+      .login-form {
+        width: 350px;
+        display: flex;
+        flex-direction: column;
+        &-container {
+          margin: auto;
+          width: 100%;
+        }
+        &-title {
+          padding-bottom: 15px;
+          text-align: center;
+        }
+      }
+
+      @media (max-width: 991px) {
+        .login-pic {
+          display: none;
+        }
+
+        .login-form {
+          width: 100%;
+          margin: auto;
+        }
+      }
+
+      .account-top {
+        text-align: center;
+
+        &-logo {
+          text-align: center;
+          margin-bottom: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          img {
+            width: 45px;
+          }
+          .project-title {
+            background: linear-gradient(92.06deg, #33c2ff -17.9%, #1e6fff 43.39%, #1e6fff 99.4%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-size: 24px;
+            line-height: 1.25;
+            font-weight: 500;
+            margin-left: 10px;
+          }
+        }
+
+        &-desc {
+          font-size: 14px;
+          color: #808695;
+          margin-bottom: 20px;
+        }
+      }
+    }
+
+    @media (max-width: 640px) {
+      &-wrap-login {
+        width: 100%;
+        padding: 30px;
+        height: auto;
+      }
+    }
+  }
+</style>

src/views/login/newLogin2.vue

@@ -3,27 +3,19 @@
     <div class="account-container">
       <div class="account-wrap-login">
         <div class="login-pic">
-          <div>
+          <h1 class="login-title">WMS </h1>
-            <img src="~@/assets/images/login-pic.png" />
+          <h4 class="login-subtitle">界面美观组件丰富的中后台前端解决方案 </h4>
-          </div>
         </div>
         <div class="login-form">
           <div class="login-form-container">
             <div class="account-top">
-              <div class="account-top-logo">
+              <div class="account-top-desc">用户登录</div>
-                <img src="~@/assets/images/logo.png" alt="" />
-                <span class="project-title">Naive Admin</span>
             </div>
-              <div class="account-top-desc">Element plus 中后台前端/设计解决方案</div>
+            <div class="account-tab-box">
+              <div :class="activeIndex==index?'active':''" v-for="(item,index) in tabData" @click="handleClick(index)" :key="index">{{item}}</div>
             </div>
-            <!-- <div class="login-form-title">
+            <LoginForm v-if="activeIndex === 0" ref="LoginFormRef" />
-            <el-space>
+            <QrcodeForm v-else></QrcodeForm>
-              <el-button round>登录</el-button>
-              <el-button type="primary" round>注册</el-button>
-            </el-space>
-          </div> -->
-            <LoginForm v-if="tab === 'login'" ref="LoginFormRef" @go-register="changeGoRegister" />
-            <RegisterForm v-else ref="RegisterFormRef" @back-login="changeBackLogin" />
           </div>
         </div>
       </div>
@@ -34,16 +26,12 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import LoginForm from './LoginForm2.vue';
-  import RegisterForm from './RegisterForm2.vue';
+  import QrcodeForm from './QrcodeForm.vue';
 
-  const tab = ref('login');
+  const activeIndex = ref(0)
-
+  const tabData =ref(['密码登录','扫码登录'])
-  function changeBackLogin() {
+  const handleClick =(index)=>{
-    tab.value = 'login';
+    activeIndex.value = index
-  }
-
-  function changeGoRegister() {
-    tab.value = 'register';
   }
 </script>
 
@@ -59,42 +47,61 @@
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      padding: 15px;
+      padding: 20px;
-      background: #9053c7;
+      box-sizing: border-box;
-      background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
+      background-image:url('../../assets/images/login-bg.png');
-      background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
+      background-repeat: no-repeat;
-      background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
+      background-size: 100% 100%;
-      background: linear-gradient(-135deg, #c850c0, #4158d0);
+
     }
 
     &-wrap-login {
-      width: 960px;
+      width: 920px;
-      height: 554px;
+      height: 462px;
       background: #fff;
       border-radius: 10px;
       overflow: hidden;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-      padding: 30px 95px 33px 95px;
       .login-pic {
-        display: flex;
+        flex: 1;
-        align-items: center;
+        padding: 32px 8px;
-        flex-direction: column;
+        box-sizing: border-box;
-        justify-content: center;
+        background-color: #1681fd;
+        background-image: url('../../assets/images/login-img.png');
+        background-repeat: no-repeat;
+        background-position: bottom;
+        background-size: contain;
+        text-align: center;
+        .login-title {
+          color: #ffffff;
+          font-size: 28px;
+          margin: 0 0 6px;
+          font-weight: 400;
+          letter-spacing: 1.2px;
+        }
+        .login-subtitle {
+          color: #fffc;
+          font-size: 16px;
+          margin: 0;
+          font-weight: 400;
+          letter-spacing: 4px;
+          letter-spacing: 1.2px;
+        }
+    }
 
         img {
           max-width: 100%;
         }
-      }
 
       .login-form {
-        width: 350px;
+        width: 400px;
-        display: flex;
-        flex-direction: column;
         &-container {
           margin: auto;
           width: 100%;
+          padding:32px 48px 0;
+          box-sizing: border-box;
         }
         &-title {
           padding-bottom: 15px;
@@ -102,9 +109,10 @@
         }
       }
 
-      @media (max-width: 991px) {
+      @media (max-width: 680px) {
         .login-pic {
-          display: none;
+          padding: 20px 12px 100px;
+          background-size: auto 100px;
         }
 
         .login-form {
@@ -112,43 +120,53 @@
           margin: auto;
         }
     }
-
       .account-top {
-        text-align: center;
-
-        &-logo {
-          text-align: center;
-          margin-bottom: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          img {
-            width: 45px;
-          }
-          .project-title {
-            background: linear-gradient(92.06deg, #33c2ff -17.9%, #1e6fff 43.39%, #1e6fff 99.4%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-size: 24px;
-            line-height: 1.25;
-            font-weight: 500;
-            margin-left: 10px;
-          }
-        }
-
         &-desc {
-          font-size: 14px;
+          font-size: 24px;
-          color: #808695;
+          font-weight: bold;
-          margin-bottom: 20px;
+          color: #000000;
+          margin-bottom: 18px;
+        }
+      }
+      .account-tab-box {
+        display: flex;
+        width:160px;
+        height:34px;
+        margin-bottom: 18px;
+        background-color: #f5f5f5;
+        border-radius: 4px;
+        padding:3px;
+        >div {
+          flex:1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          color:rgba(0, 0, 0, .6);
+          &.active {
+            background-color:#ffffff;
+            color:rgba(0, 0, 0, .92);
+          }
+          &:hover {
+            color:rgba(0, 0, 0, .92);
+          }
         }
       }
     }
 
-    @media (max-width: 640px) {
+    @media (max-width: 680px) {
+      &-container {
+          padding: 0;
+          display: block;
+          background: #fff;
+        }
       &-wrap-login {
-        width: 100%;
+        display: block;
-        padding: 30px;
         height: auto;
+        width: 100%;
+        background: none;
+        box-shadow: none;
+        border-radius: 0;
       }
     }
   }