docking-vue/src/views/login/index.vue

<template>
  <div class="login login-container">
      <div class="logo">
        <img src="/src/assets/images/login/logo2.png" alt="" width="250" />
      </div>
    <div class="form">
      <div class="title">欢迎登录！</div>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        @submit.prevent="fnLogin"
      >
        <el-form-item prop="username">
          <label>账号</label>
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            tabindex="1"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <label>密码</label>
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            tabindex="2"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <verification v-model:verification-pass="verificationPass" />
        </el-form-item>
        <el-form-item class="button">
          <el-button native-type="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      河北秦安安全科技股份有限公司 版权所有 Copy right 2013-2020-v7
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import Verification from "@/components/verification/index";
import { useUserStore } from "@/pinia/user";
import { getAppPath, getUserInfo, Login } from "@/request/api";
import { debounce } from "throttle-debounce";
import useForm from "@/hooks/useForm.js";
import dayjs from "dayjs";
import { encrypt } from "@/assets/js/aes_secret.js";
import { ElMessage } from "element-plus";
import { useQRCode } from "@vueuse/integrations/useQRCode";
import { getFileUrl } from "@/assets/js/utils.js";


const userStore = useUserStore();
const router = useRouter();
const { formRef, validate } = useForm();
const verificationPass = ref(false);
const appPath = ref("");
const form = ref({
  username: "",
  password: "",
  code: "",
});
const rules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};
const fnGetAppDownloadPath = async () => {
  const { versionmanager } = await getAppPath();
  appPath.value = useQRCode(() => getFileUrl() + versionmanager.fileUrl, {
    width: 100,
    height: 100,
    margin: 1,
    correctLevel: "H",
  });
};
fnGetAppDownloadPath();
const fnLogin = debounce(
  1000,
  () => {
    if (import.meta.env.DEV) {
      fnSubmitLogin();
      return;
    }
    if (verificationPass.value) {
      fnSubmitLogin();
    } else {
      ElMessage.warning("请进行登录验证");
    }
  },
  { atBegin: true }
);
const fnSubmitLogin = async () => {
  await validate("请输入用户名密码");
  const { token } = await Login({
    username: encrypt(form.value.username),
    password: encrypt(form.value.password),
  });
  await userStore.setToken(token);
  await userStore.setTokenTime(dayjs().format("YYYY-MM-DD HH:mm:ss"));
  const { user } = await getUserInfo();
  userStore.setUserInfo({
    ...userStore.getUserInfo,
    ...user,
  });
  await router.replace("/index");
};
</script>

<style scoped lang="scss">
.login-container {
  height: 100vh;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
  background-image: url(../../assets/images/login/bg2.png);
  background-repeat: no-repeat;
  background-size: 70% 100%;
  float: left;
  position: relative;
}

.login {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 100vh;
  position: relative;
  background-color: #fff;

  .logo {
    top: 20px;
    left: 20px;
    position: absolute;
  }

  .form {
    float: right;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 150px;
    width: 30%;
    height: 100%;
    //padding: 40px 50px;
    background-color: #d6def2;
    //z-index: 1;

    &:after {
      content: "";
      position: absolute;
      top: 40px;
      left: -30px;
      width: calc(100% + 60px);
      height: calc(100% - 80px);
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.3);
      z-index: -1;
    }

    &:before {
      content: "";
      position: absolute;
      top: 20px;
      left: -15px;
      width: calc(100% + 30px);
      height: calc(100% - 40px);
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.5);
      z-index: -2;
    }

    .title {
      font-size: 20px;
      color: #000;
      line-height: 60px;
    }

    .el-form-item {
      .el-input {
        height: 40px;
      }
    }

    .button {
      .el-button {
        background: #0a7dfe;
        height: 45px;
        width: 100%;
        color: #ffffff;
        margin-top: 10px;
      }
    }

    .tooltip {
      width: max-content;
      cursor: pointer;
      position: absolute;
      right: 50px;
    }
  }

  .footer {
    width: 100%;
    height: 80px;
    font-size: 14px;
    color: white;
    //color: rgba(0, 0, 0, 0.5);
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-70%);
    z-index: 1;
    line-height: 80px;
  }
}

:deep {
  .el-input-group__prepend {
    padding-top: 5px !important;
  }

  .el-carousel__indicators {
    display: none;
  }
}
</style>