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

<template>
  <div class="login login-container">
    <div class="logo">
      <img src="/src/assets/images/login/logo3.png" alt="" />
      <div>
        <span class="btn" @click="router.push({ path: '/api' })">查看API</span>
      </div>
    </div>

    <div class="form">
      <div class="title mb-20">欢迎登录数据交换平台</div>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        @submit.prevent="fnLogin"
      >
        <el-form-item prop="username">
          <div class="mb-5 form-item">用户名</div>
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            tabindex="1"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password" class="mt-20">
          <div class="mb-5 form-item">密码</div>
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            tabindex="2"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item class="mt-30">
          <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/bg3.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.login {
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  position: relative;
  background-color: #fff;

  .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 80px 0 20px;
  }
  .btn {
    border-radius: 4px;
    border: 1px solid #3a83fc;
    color: #3a83fc;
    padding: 5px 8px;
    cursor: pointer;
  }
  .form {
    border-radius: 20px;
    box-shadow: 0px 5px 20px 0px rgba(137, 149, 174, 0.2);
    position: absolute;
    right: 270px;
    top: 55%;
    transform: translateY(-50%);
    width: 506px;
    height: 590px;
    padding: 4px 30px;
    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;
    // }
    .form-item {
      font-size: 20px;
    }
    .title {
      font-size: 30px;
      color: #3b4f70;
      font-weight: bold;
      line-height: 60px;
    }

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

    .button {
      position: absolute;
      bottom: 30px;
      width: 445px;
      .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>