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

<template>
  <div class="login login-container">
    <div class="logo">
      <img src="/src/assets/images/login/logo.png" alt="" width="500" />
    </div>
    <div class="form">
      <div class="title">数据交换管理平台</div>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        @submit.prevent="fnLogin"
      >
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            tabindex="1"
          >
            <template #prepend>
              <icon-people theme="filled" size="16" fill="#909399" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            tabindex="2"
          >
            <template #prepend>
              <icon-lock
                theme="filled"
                size="16"
                fill="#909399"
                :stroke-width="3"
              />
            </template>
          </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 class="tips">
        <div style="color: red; text-align: left">
          本平台为互联网非涉密平台，严禁处理、传输国家秘密和工作秘密
        </div>
      </div>
      <el-tooltip effect="dark" placement="bottom">
        <template #content>
          <img :src="appPath.value" alt="" width="180" height="180" />
        </template>
      </el-tooltip>
    </div>
    <div class="footer">
      ICP备案号： 冀ICP备15003849号 技术支持：河北秦安安全科技股份有限公司
    </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 { 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";

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 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/bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.login {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 100vh;
  position: relative;
  background-color: #fff;

  .logo {
    margin-top: 20px;
    margin-left: 20px;
    width: 100%;
    pointer-events: none;
  }

  .form {
    border-radius: 5px;
    box-shadow: 0 0 20px rgb(109 109 109 / 40%);
    position: absolute;
    right: 230px;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 490px;
    padding: 40px 50px;
    background-color: #fff;
    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: rgba(0, 0, 0, 0.5);
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    line-height: 80px;
  }
}

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

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