onlinenew_manage/src/views/login/login.vue

<template>
  <div class="box">
    <!-- <div class="middle"></div> -->
    <div class="left">
      <div class="loginForm">
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 104px;
            margin-bottom: 61px;
          "
        >
          <img
            src="@/assets/img/logo.png"
            alt=""
            style="width: 95px; height: 95px; margin-bottom: 15px"
          />
          <div
            style="
              font-size: 30px;
              font-weight: 600;
              letter-spacing: 0px;
              color: rgba(0, 0, 0, 1);
            "
          >
            迎新系统管理平台
          </div>
        </div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="" prop="user">
            <el-input
              :prefix-icon="User"
              v-model="ruleForm.user"
              placeholder="请输入登录名"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input
              :prefix-icon="Lock"
              show-password
              v-model="ruleForm.pass"
              type="password"
              autocomplete="off"
              placeholder="请输入登录密码"
            />
          </el-form-item>
          <el-checkbox v-model="checked" class="remeberPwd el-form-item"
            >记住密码</el-checkbox
          >
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="rLogin">
        <img src="@/assets/img/login3.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { JSEncrypt } from "jsencrypt"; // 加密密码
import { https } from "@/utils/request"; // 接口请求封装
import { useCounterStore } from "@/stores/index";

const store = useCounterStore();

const router = useRouter();
const loading = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  user: "",
  pass: "",
});
const checked = ref(false); // 记住密码

const rules = reactive({
  user: [{ required: true, message: "请填写用户名", trigger: "blur" }],
  pass: [{ required: true, message: "请填写密码", trigger: "blur" }],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      // let publicKey =
      //   "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDMOcPB06u5yKyQsPjfVWiWgbEIrd14kiXNNihciaVKb6HnkQvq7zpQuZ80WEX94spnUMI3iOAl/GmIvHrpGwcbB4hJbznm+PajiwnUSPuCCXA68YJF640cJKb/8KeM7WVz69OFkIEPHhVxOy4FFF5QWe/kt6zOZ19HmE+ak+5x/QIDAQAB";
      // let encryptor = new JSEncrypt(); // 新建JSEncrypt对象
      // encryptor.setPublicKey(publicKey); // 设置公钥
      // let rsaPassWord = encryptor.encrypt(ruleForm.pass); // 对密码进行加密
      // console.log(rsaPassWord);
      let data = {
        account: ruleForm.user,
        password: ruleForm.pass,
      };
      // let data = new FormData();
      // data.set("number", ruleForm.user);
      // data.set("password", ruleForm.pass); //前面的key记得对应！
      const res = await https.post("/welcome/api/home/login", "data", data); // 使用封装的 get 方法
      console.log(res, "登录获取数据");
      if (res.code == 200) {
        sessionStorage.setItem("accountId", res.data.accountId);
        if (checked.value) {
          localStorage.setItem("user", ruleForm.user);
          localStorage.setItem("pass", ruleForm.pass);
        } else {
          localStorage.removeItem("user", ruleForm.user);
          localStorage.removeItem("pass", ruleForm.pass);
        }
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userName", res.data.userName);
        store.ROLEAdd();

        ElMessage({
          type: "success",
          showClose: true,
          message: "登录成功",
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: "登录失败",
          center: true,
        });
        loading.value = false;
      }
    } else {
      return false;
    }
  });
};
const Enters = (e) => {
  // console.log("按键:", e.key);
  if (e.key == "Enter") {
    submitForm(ruleFormRef.value);
  }
};
onMounted(() => {
  if (localStorage.getItem("pass") && localStorage.getItem("user")) {
    ruleForm.user = localStorage.getItem("user");
    ruleForm.pass = localStorage.getItem("pass");
    checked.value = true;
  }
  if (localStorage.getItem("user")) {
    ruleForm.user = localStorage.getItem("user");
  }
  document.addEventListener("keyup", Enters);
});
onUnmounted(() => {
  document.removeEventListener("keyup", Enters);
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  min-width: 1200px;
  // width: 1920px;
  // height: 1080px;
  background: url(@/assets/img/bg.png) 100% 100%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  // .middle {
  //   width: 1180px;
  //   height: 740px;
  //   position: absolute;

  // }
  .left {
    box-shadow: 39px 30px 58px 0px rgba(8, 53, 115, 0.55);

    width: 1180px;
    height: 740px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    background-size: 110% 116%;
    background-position: -19px -28px;
    .loginForm {
      width: 497px;
      height: 740px;
      background-color: #fff;
      border-radius: 18px 0 0 18px;

      .el-form {
        width: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .el-form-item {
          width: 420px;
          height: 60px;
          // margin-bottom: 40px;

          :deep(.el-form-item__content) {
            margin-left: 0 !important;

            .el-input {
              height: 60px;

              .el-input__wrapper {
                border-radius: 12px;
                .el-input__prefix {
                  margin: 0 10px 0 12px;
                }
              }

              .el-icon {
                width: 24px;
                height: 24px;
                svg {
                  width: 24px;
                  height: 24px;
                }
              }
              .el-input__inner {
                height: 100%;
                font-size: 24px;
              }
            }
            .el-form-item__error {
              font-size: 16px;
            }
            .el-button {
              width: 100%;
              height: 60px;
              font-size: 24px;
              border-radius: 12px;
            }
          }

          .el-button--primary {
            width: 380px;
          }
        }
        .remeberPwd {
          height: 30px;
          margin-bottom: 30px;
          :deep(.el-checkbox__input) {
            .el-checkbox__inner {
              width: 18px;
              height: 18px;
            }
            .el-checkbox__inner::after {
              width: 6px;
              height: 12px;
              top: -1px;
            }
          }
          :deep(.el-checkbox__label) {
            font-size: 18px;
          }
        }
      }
    }
    .rLogin {
      width: 683px;
      height: 740px;
      border-radius: 0 18px 18px 0;
      display: flex;
      background: rgba(41, 142, 243, 1);
      img {
        width: 683px;
        align-self: flex-end;
      }
    }
  }
  // @media (max-width: 500px) {
  //   .left {
  //     width: 100%;
  //     height:100%;
  //     .loginForm {
  //       width:100%;
  //       height:100%;
  //       background-color: #fff;
  //       border-radius: 18px 0 0 18px;

  //       .el-form {
  //         width: 100%;
  //         display: flex;
  //         flex-direction: column;
  //         justify-content: center;
  //         align-items: center;
  //         .el-form-item {
  //           width: 90%;
  //           height: 40px;
  //           // margin-bottom: 40px;

  //           :deep(.el-form-item__content) {
  //             margin-left: 0 !important;

  //             .el-input {
  //               height: 50px;

  //               .el-input__wrapper {
  //                 border-radius: 12px;
  //                 .el-input__prefix {
  //                   margin: 0 10px 0 12px;
  //                 }
  //               }

  //               .el-icon {
  //                 width: 24px;
  //                 height: 24px;
  //                 svg {
  //                   width: 24px;
  //                   height: 24px;
  //                 }
  //               }
  //               .el-input__inner {
  //                 height: 100%;
  //                 font-size: 24px;
  //               }
  //             }
  //             .el-form-item__error {
  //               font-size: 16px;
  //             }
  //             .el-button {
  //               width: 100%;
  //               height: 50px;
  //               font-size: 24px;
  //               border-radius: 12px;
  //             }
  //           }

  //           .el-button--primary {
  //             width: 90%;
  //           }
  //         }
  //         .remeberPwd {
  //           height: 30px;
  //           margin-bottom: 30px;
  //           :deep(.el-checkbox__input) {
  //             .el-checkbox__inner {
  //               width: 18px;
  //               height: 18px;
  //             }
  //             .el-checkbox__inner::after {
  //               width: 6px;
  //               height: 12px;
  //               top: -1px;
  //             }
  //           }
  //           :deep(.el-checkbox__label) {
  //             font-size: 18px;
  //           }
  //         }
  //       }
  //     }
  //     .rLogin {
  //       display: none;
  //     }
  //   }
  // }
}
</style>