|
|
@@ -1,6 +1,6 @@
|
|
|
+<!-- views/login/Login.vue -->
|
|
|
<template>
|
|
|
<div class="box">
|
|
|
- <!-- <div class="middle"></div> -->
|
|
|
<div class="left">
|
|
|
<div class="loginForm">
|
|
|
<div
|
|
|
@@ -8,27 +8,44 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 104px;
|
|
|
- margin-bottom: 61px;
|
|
|
+ /* justify-content: center; */
|
|
|
+ margin-top: 90px;
|
|
|
+ margin-bottom: 20px;
|
|
|
"
|
|
|
>
|
|
|
- <img
|
|
|
- src="@/assets/img/logo.png"
|
|
|
- alt=""
|
|
|
- style="width: 95px; height: 95px; margin-bottom: 15px"
|
|
|
- />
|
|
|
- <div
|
|
|
+ <span
|
|
|
style="
|
|
|
- font-size: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ width: 420px;
|
|
|
+ "
|
|
|
+ >WELCOME</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ font-size: 45px;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 420px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ "
|
|
|
+ >欢迎登录</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ font-size: 45px;
|
|
|
font-weight: 600;
|
|
|
+ width: 420px;
|
|
|
letter-spacing: 0px;
|
|
|
color: rgba(0, 0, 0, 1);
|
|
|
"
|
|
|
+ >校友信息管理系统</span
|
|
|
>
|
|
|
- 迎新系统管理平台
|
|
|
- </div>
|
|
|
+ <!-- <img src="@/assets/svgs/vue.svg" class="logo vue" alt="Vue logo" />
|
|
|
+ <SvgIcon name="vue" color="#000" size="22"></SvgIcon> -->
|
|
|
</div>
|
|
|
+
|
|
|
<el-form
|
|
|
ref="ruleFormRef"
|
|
|
:model="ruleForm"
|
|
|
@@ -39,59 +56,80 @@
|
|
|
>
|
|
|
<el-form-item label="" prop="user">
|
|
|
<el-input
|
|
|
- :prefix-icon="User"
|
|
|
v-model="ruleForm.user"
|
|
|
placeholder="请输入登录名"
|
|
|
autocomplete="off"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"
|
|
|
+ ><img
|
|
|
+ style="width: 24px; height: 24px"
|
|
|
+ src="@/assets/img/login_user.png"
|
|
|
+ alt=""
|
|
|
+ /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
</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="请输入登录密码"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"
|
|
|
+ ><img
|
|
|
+ style="width: 24px; height: 24px"
|
|
|
+ src="@/assets/img/login_pass.png"
|
|
|
+ alt=""
|
|
|
+ /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
</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)"
|
|
|
+ color="#0095ff"
|
|
|
>登录</el-button
|
|
|
>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <div class="rLogin">
|
|
|
- <img src="@/assets/img/login3.png" alt="" />
|
|
|
- </div>
|
|
|
+ <div class="rLogin"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="login_logo"></div>
|
|
|
+ <div class="login_txt"></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 { ElMessage, ElNotification } from "element-plus";
|
|
|
+
|
|
|
+import { storeToRefs } from "pinia";
|
|
|
import { useCounterStore } from "@/stores/index";
|
|
|
+import { login, queryUserRole } from "@/api/login";
|
|
|
|
|
|
+const router = useRouter();
|
|
|
const store = useCounterStore();
|
|
|
+const { roleList } = storeToRefs(store);
|
|
|
+
|
|
|
+const loginFlag = ref(true);
|
|
|
|
|
|
-const router = useRouter();
|
|
|
const loading = ref(false);
|
|
|
const ruleFormRef = ref();
|
|
|
const ruleForm = reactive({
|
|
|
- user: "",
|
|
|
- pass: "",
|
|
|
+ user: "superAdmin",
|
|
|
+ pass: "Ncjti32003",
|
|
|
+ // user: "",
|
|
|
+ // pass: "",
|
|
|
+ role: "",
|
|
|
});
|
|
|
const checked = ref(false); // 记住密码
|
|
|
|
|
|
@@ -104,46 +142,53 @@ 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 方法
|
|
|
+ const res = await login(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);
|
|
|
+ sessionStorage.setItem("token", res.data.token);
|
|
|
+ sessionStorage.setItem("userName", res.data.userName);
|
|
|
+
|
|
|
+ let roleList = await queryUserRole();
|
|
|
+ console.log(roleList, "获取当前用户角色权限数据");
|
|
|
+ if (roleList.code == 200) {
|
|
|
+ sessionStorage.setItem(
|
|
|
+ "roleList",
|
|
|
+ JSON.stringify(roleList.data.menus),
|
|
|
+ );
|
|
|
+ router.push({
|
|
|
+ path: `/alumni-info`,
|
|
|
+ });
|
|
|
} else {
|
|
|
- localStorage.removeItem("user", ruleForm.user);
|
|
|
- localStorage.removeItem("pass", ruleForm.pass);
|
|
|
+ ElMessage({
|
|
|
+ type: "error",
|
|
|
+ showClose: true,
|
|
|
+ message: roleList.message,
|
|
|
+ center: true,
|
|
|
+ });
|
|
|
}
|
|
|
- localStorage.setItem("token", res.data.token);
|
|
|
- localStorage.setItem("userName", res.data.userName);
|
|
|
- store.ROLEAdd();
|
|
|
|
|
|
+ // 添加路由后跳转到第一个菜单项
|
|
|
+ // store.ROLEAdd().then(() => {
|
|
|
+ // router.push({
|
|
|
+ // path: `/home`,
|
|
|
+ // });
|
|
|
+ // });
|
|
|
ElMessage({
|
|
|
type: "success",
|
|
|
showClose: true,
|
|
|
- message: "登录成功",
|
|
|
+ message: res.message,
|
|
|
center: true,
|
|
|
});
|
|
|
+ loading.value = false;
|
|
|
} else {
|
|
|
ElMessage({
|
|
|
type: "error",
|
|
|
showClose: true,
|
|
|
- message: "登录失败",
|
|
|
+ message: res.message,
|
|
|
center: true,
|
|
|
});
|
|
|
loading.value = false;
|
|
|
@@ -153,21 +198,14 @@ const submitForm = (formEl) => {
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
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(() => {
|
|
|
@@ -179,46 +217,54 @@ onUnmounted(() => {
|
|
|
.box {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
- min-width: 1200px;
|
|
|
- // width: 1920px;
|
|
|
- // height: 1080px;
|
|
|
- background: url(@/assets/img/bg.png) 100% 100%;
|
|
|
- background-size: cover;
|
|
|
+ background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- // .middle {
|
|
|
- // width: 1180px;
|
|
|
- // height: 740px;
|
|
|
- // position: absolute;
|
|
|
+ justify-content: flex-end;
|
|
|
+ background-image: url("@/assets/img/login_bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ background-size: cover; /* 等比缩放铺满容器，超出部分裁剪，仍不变形 */
|
|
|
|
|
|
- // }
|
|
|
.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;
|
|
|
+ width: 557px;
|
|
|
+ height: 675px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 30px;
|
|
|
+ // border-top-left-radius: 30px;
|
|
|
+ // border-bottom-left-radius: 30px;
|
|
|
|
|
|
.el-form {
|
|
|
- width: 500px;
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ padding: 35px 0;
|
|
|
+ border-radius: 16px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(0, 185, 170, 1);
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-divider {
|
|
|
+ width: 85%;
|
|
|
+ margin: 20px 0 30px;
|
|
|
+ }
|
|
|
+
|
|
|
.el-form-item {
|
|
|
width: 420px;
|
|
|
height: 60px;
|
|
|
- // margin-bottom: 40px;
|
|
|
+ margin-bottom: 35px;
|
|
|
|
|
|
:deep(.el-form-item__content) {
|
|
|
margin-left: 0 !important;
|
|
|
@@ -227,7 +273,8 @@ onUnmounted(() => {
|
|
|
height: 60px;
|
|
|
|
|
|
.el-input__wrapper {
|
|
|
- border-radius: 12px;
|
|
|
+ border-radius: 30px;
|
|
|
+
|
|
|
.el-input__prefix {
|
|
|
margin: 0 10px 0 12px;
|
|
|
}
|
|
|
@@ -236,24 +283,28 @@ onUnmounted(() => {
|
|
|
.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;
|
|
|
+ border-radius: 30px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -261,124 +312,65 @@ onUnmounted(() => {
|
|
|
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);
|
|
|
+ display: none;
|
|
|
+
|
|
|
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;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
+}
|
|
|
+.login_logo {
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 60px;
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ background-image: url("@/assets/img/login_logo.png");
|
|
|
+ background-repeat: no-repeat; /* 禁止平铺，只显示一张 */
|
|
|
+ background-position: left center; /* 水平+垂直居中（垂直居中可省略，因高度已适配） */
|
|
|
+ background-size: auto 100%; /* 核心：高度铺满容器，宽度按原始宽高比自动计算（绝对不变形） */
|
|
|
+}
|
|
|
+.login_txt {
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ // left: 40px;
|
|
|
+ width: 100%;
|
|
|
+ height: 75px;
|
|
|
+ background-image: url("@/assets/img/login_txt2.png");
|
|
|
+ background-repeat: no-repeat; /* 禁止平铺，只显示一张 */
|
|
|
+ background-position: 12% center; /* 水平+垂直居中（垂直居中可省略，因高度已适配） */
|
|
|
+ background-size: auto 100%; /* 核心：高度铺满容器，宽度按原始宽高比自动计算（绝对不变形） */
|
|
|
}
|
|
|
</style>
|
hzj18279462576@163.com
