This commit is contained in:
吴先生
parent
7abb01ab70
commit
055a415a42
|
|
@ -25,6 +25,7 @@
|
|||
"vform3-builds": "^3.0.10",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "4",
|
||||
"vue3-slide-verify": "^1.1.4",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 586 B |
Binary file not shown.
|
After Width: | Height: | Size: 593 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -40,9 +40,9 @@ http.get(`/api/build/${grapeName}`).then((resp) => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
/* .content {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,83 @@
|
|||
<template>
|
||||
<el-container v-if="store.menuBar == 'left'">
|
||||
<el-aside :class="['aside', isCollapse ? 'isCollapse' : '']">
|
||||
<div class="NavMenu_title">
|
||||
<el-icon :size="28">
|
||||
<eleme />
|
||||
</el-icon>
|
||||
<span class="title" v-if="!isCollapse">{{ store.title }}</span>
|
||||
</div>
|
||||
|
||||
<el-scrollbar
|
||||
wrap-class="scrollbar_dropdown__wrap"
|
||||
style="height: calc(100vh - 60px)"
|
||||
>
|
||||
<el-menu
|
||||
:uniqueOpened="true"
|
||||
class="el-menu-vertical-demo"
|
||||
background-color="#086dd9"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffffff"
|
||||
:collapse="isCollapse"
|
||||
:router="true"
|
||||
:default-active="route.path"
|
||||
>
|
||||
<template v-for="menu in user.menus" :key="menu.name">
|
||||
<menu-item :menu="menu" />
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header class="yd_header">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-icon :size="24" class="icon" @click="isCollapse = !isCollapse">
|
||||
<expand v-if="isCollapse" />
|
||||
<fold v-else />
|
||||
<el-header class="yd_header">
|
||||
<div style="display: flex; align-items: center">
|
||||
<div class="NavMenu_title">
|
||||
<el-icon :size="28" color="#3A84FF">
|
||||
<eleme />
|
||||
</el-icon>
|
||||
<breadcrumb style="margin-left: 20px;" />
|
||||
<span class="title">{{ store.title }}</span>
|
||||
</div>
|
||||
|
||||
<el-space wrap :size="25">
|
||||
<el-icon :size="24" class="icon" @click="screen">
|
||||
<full-screen />
|
||||
</el-icon>
|
||||
<el-badge is-dot class="item" style="font-size: 0">
|
||||
<el-icon :size="24" class="icon">
|
||||
<bell-filled />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
<el-dropdown class="userCenter">
|
||||
<div class="el-dropdown-link">
|
||||
<el-avatar
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
:size="24"
|
||||
></el-avatar>
|
||||
<span class="name">admin</span>
|
||||
<el-icon>
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="Avatar">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item icon="SwitchButton" @click="handleUserMenu('logout')">退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
</el-header>
|
||||
<breadcrumb style="margin-left: 20px" />
|
||||
</div>
|
||||
|
||||
<el-main>
|
||||
<el-space wrap :size="24">
|
||||
<el-icon :size="16" class="icon" @click="screen">
|
||||
<full-screen />
|
||||
</el-icon>
|
||||
<el-badge is-dot class="item" style="font-size: 0">
|
||||
<el-icon :size="16" class="icon">
|
||||
<bell-filled />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
<el-dropdown class="userCenter">
|
||||
<div class="el-dropdown-link">
|
||||
<el-avatar
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
:size="24"
|
||||
></el-avatar>
|
||||
<span class="name">{{nameInfo.name}}</span>
|
||||
<el-icon>
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="Avatar">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
icon="SwitchButton"
|
||||
@click="handleUserMenu('logout')"
|
||||
>退出</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
</el-header>
|
||||
|
||||
<el-container>
|
||||
<el-aside :class="['aside', isCollapse ? 'isCollapse' : '']">
|
||||
<el-scrollbar
|
||||
wrap-class="scrollbar_dropdown__wrap"
|
||||
style="height: calc(100vh - 60px)"
|
||||
>
|
||||
<el-menu
|
||||
:uniqueOpened="true"
|
||||
class="el-menu-vertical-demo"
|
||||
background-color="#285FBC"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffffff"
|
||||
:collapse="isCollapse"
|
||||
:router="true"
|
||||
:default-active="route.path"
|
||||
>
|
||||
<template v-for="menu in user.menus" :key="menu.name">
|
||||
<menu-item :menu="menu" />
|
||||
</template>
|
||||
</el-menu>
|
||||
|
||||
<el-icon
|
||||
:size="24"
|
||||
class="icon_switch"
|
||||
@click="isCollapse = !isCollapse"
|
||||
>
|
||||
<img src="../../assets/images/fold.png" alt="" v-if="isCollapse" />
|
||||
<img src="../../assets/images/expand.png" alt="" v-else />
|
||||
</el-icon>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-main class="content_main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</router-view>
|
||||
|
|
@ -99,12 +108,12 @@
|
|||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-space wrap :size="25">
|
||||
<el-icon :size="24" class="icon" @click="screen">
|
||||
<el-space wrap :size="20">
|
||||
<el-icon :size="16" class="icon" @click="screen">
|
||||
<full-screen />
|
||||
</el-icon>
|
||||
<el-badge is-dot class="item" style="font-size: 0">
|
||||
<el-icon :size="24" class="icon">
|
||||
<el-icon :size="16" class="icon">
|
||||
<bell-filled />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
|
|
@ -122,7 +131,10 @@
|
|||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="Avatar">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item icon="Avatar" command="logout" @click="handleUserMenu('logout')"
|
||||
<el-dropdown-item
|
||||
icon="Avatar"
|
||||
command="logout"
|
||||
@click="handleUserMenu('logout')"
|
||||
>退出</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
|
|
@ -155,7 +167,9 @@ import menuItem from "./components/menu/menu-item.vue";
|
|||
import breadcrumb from "./components/breadcrumb/index.vue";
|
||||
|
||||
const user = tools.data.get("user");
|
||||
const router = useRouter()
|
||||
console.log("user", user);
|
||||
let nameInfo = ref(user);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let store = useCar();
|
||||
|
|
@ -195,7 +209,7 @@ emitter.on("closeModifyPassword", (e) => {
|
|||
});
|
||||
|
||||
const handleUserMenu = (command) => {
|
||||
console.log('command',);
|
||||
console.log("command");
|
||||
if ("modifyPassword" == command) {
|
||||
data.dialog.visibled = true;
|
||||
} else if ("logout" == command) {
|
||||
|
|
@ -214,7 +228,7 @@ const handleUserMenu = (command) => {
|
|||
<style lang="scss">
|
||||
.aside {
|
||||
width: 220px;
|
||||
background-color: rgb(8, 109, 217);
|
||||
background-color: #285fbc;
|
||||
transition: all 0.4s;
|
||||
&.isCollapse {
|
||||
width: 64px;
|
||||
|
|
@ -222,27 +236,29 @@ const handleUserMenu = (command) => {
|
|||
}
|
||||
.NavMenu_title {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
color: #3d454d;
|
||||
}
|
||||
}
|
||||
.el-container {
|
||||
height: 100vh;
|
||||
.el-header {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06),
|
||||
0px 4px 10px 0px rgba(78, 89, 105, 0.06);
|
||||
}
|
||||
}
|
||||
.yd_header_top {
|
||||
.el-popper.is-pure {
|
||||
background-color: #1890ff !important;
|
||||
background-color: #3a84ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -255,7 +271,7 @@ const handleUserMenu = (command) => {
|
|||
line-height: 48px;
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
background-color: #1890ff !important;
|
||||
background-color: #3a84ff !important;
|
||||
}
|
||||
.yd_header {
|
||||
display: flex;
|
||||
|
|
@ -263,10 +279,9 @@ const handleUserMenu = (command) => {
|
|||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
.icon {
|
||||
color: #1890ff;
|
||||
color: #3a84ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
.el-dropdown-link {
|
||||
display: flex;
|
||||
|
|
@ -295,7 +310,7 @@ const handleUserMenu = (command) => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #1890ff !important;
|
||||
background-color: #3a84ff !important;
|
||||
overflow: hidden;
|
||||
color: #ffffff;
|
||||
.yd_header_top_left {
|
||||
|
|
@ -327,7 +342,7 @@ const handleUserMenu = (command) => {
|
|||
}
|
||||
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
|
||||
color: #1890ff !important;
|
||||
color: #3a84ff !important;
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
.el-menu--horizontal .el-menu .el-menu-item,
|
||||
|
|
@ -337,11 +352,26 @@ const handleUserMenu = (command) => {
|
|||
|
||||
.is-light .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.is-light .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||
color: #1890ff !important;
|
||||
color: #3a84ff !important;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 20px 10px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.content_main {
|
||||
height: calc(100vh - 60px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon_switch {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div class="login">
|
||||
<div class="bd5_left"></div>
|
||||
<div class="bd5_right"></div>
|
||||
<div class="login_image"></div>
|
||||
<div class="auto">
|
||||
<span class="auto_title"> 登录 </span>
|
||||
<el-form :model="data" size="medium" ref="formRef" @keyup.enter.native="handleSubmit">
|
||||
<el-row :span="22">
|
||||
<el-form-item prop="user">
|
||||
<el-input v-model="data.user" style="width: 100%; margin-bottom: 20px" placeholder="帐号"
|
||||
prefix-icon="User"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row :span="22">
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="data.password" style="width: 100%; margin-bottom: 20px" type="password" placeholder="密码"
|
||||
prefix-icon="Lock" show-password>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<div style="display: flex; align-items: center;margin-bottom: 30px;">
|
||||
|
||||
<el-row :span="21">
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="data.password" style="width: 100%; margin-right: 20px;" type="password" placeholder="验证码"
|
||||
prefix-icon="Paperclip" >
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-form-item prop="password">
|
||||
<img src="@/assets/images/login_bg.png" class="codeStyle" @click="handleCode">
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-button class="login-btn-submit" type="primary" @click="handleSubmit()" :loading="loading">
|
||||
<span class="info1">登 录</span>
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import tools from "@/utils/tools";
|
||||
import http from "@/utils/request.js";
|
||||
import { encrypt } from "@/utils";
|
||||
|
||||
const Router = useRouter();
|
||||
|
||||
const data = reactive({
|
||||
user: "",
|
||||
password: "",
|
||||
});
|
||||
const loading = ref(false);
|
||||
const formRef = ref();
|
||||
const handleCode = () =>{
|
||||
console.log('111111111');
|
||||
|
||||
}
|
||||
const handleSubmit = async () => {
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
var params = {
|
||||
user: encrypt(data.user),
|
||||
password: encrypt(data.password),
|
||||
};
|
||||
http.post("/api/auth/login", params).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
var user = {
|
||||
token: resp.data.token,
|
||||
name: resp.data.name,
|
||||
menus: resp.data.menus,
|
||||
buttons: resp.data.buttons,
|
||||
accountType: resp.data.accountType,
|
||||
};
|
||||
tools.data.set("user", user);
|
||||
ElMessage.success("登录成功");
|
||||
//loading.value = false;
|
||||
Router.push("/");
|
||||
// 跳转到 首页路由
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.main {
|
||||
.login {
|
||||
.auto {
|
||||
.el-row {
|
||||
width: 100%;
|
||||
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border: 1px solid #a8abb2;
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
-webkit-user-select: none;
|
||||
/*谷歌 /Chrome*/
|
||||
-moz-user-select: none;
|
||||
/*火狐/Firefox*/
|
||||
-ms-user-select: none;
|
||||
/*IE 10+*/
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
.codeStyle{
|
||||
width: 100px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login {
|
||||
position: relative;
|
||||
background: url(@/assets/images/login_bg_3.png);
|
||||
background-size: 80% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.login_image {
|
||||
z-index: 31;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 150px;
|
||||
width: 45%;
|
||||
height: 599px;
|
||||
background: url(@/assets/images/login_bg_1.png) -1px 0px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.bd5_left {
|
||||
z-index: 313;
|
||||
position: absolute;
|
||||
left: -38px;
|
||||
bottom: 0;
|
||||
width: 297px;
|
||||
height: 113px;
|
||||
background: url(@/assets/images/login_bg_4.png) -1px 0px no-repeat;
|
||||
}
|
||||
|
||||
.bd5_right {
|
||||
z-index: 267;
|
||||
position: absolute;
|
||||
right: 20%;
|
||||
top: 0;
|
||||
width: 297px;
|
||||
height: 113px;
|
||||
background: url(@/assets/images/login_bg_2.png) 0px 0px no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.auto {
|
||||
z-index: 4;
|
||||
width: 436px;
|
||||
position: absolute;
|
||||
padding: 58px 32px;
|
||||
left: 50%;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
background: #fefefe;
|
||||
box-shadow: 10px 10px 0px 0px #e4e8ec;
|
||||
border-radius: 2px;
|
||||
backdrop-filter: blur(50px);
|
||||
|
||||
.auto_title {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 33px;
|
||||
font-size: 30px;
|
||||
margin-bottom: 48px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #0081eb;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.login-btn-submit {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #0081eb;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info1 {
|
||||
width: 52px;
|
||||
height: 24px;
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.main .login .login_image {
|
||||
width: 80%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -60%);
|
||||
}
|
||||
|
||||
.main .auto {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.main .login {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 662px) {
|
||||
.main .login .login_image {
|
||||
width: 100%;
|
||||
transform: translate(-56%, -60%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.main .auto {
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,47 +1,56 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div class="login">
|
||||
<div class="bd5_left"></div>
|
||||
<div class="bd5_right"></div>
|
||||
<div class="login_image"></div>
|
||||
<div class="auto">
|
||||
<span class="auto_title"> 登录 </span>
|
||||
<el-form :model="data" size="medium" ref="formRef" @keyup.enter.native="handleSubmit">
|
||||
<el-row :span="22">
|
||||
<el-form-item prop="user">
|
||||
<el-input v-model="data.user" style="width: 100%; margin-bottom: 20px" placeholder="帐号"
|
||||
prefix-icon="User"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row :span="22">
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="data.password" style="width: 100%; margin-bottom: 20px" type="password" placeholder="密码"
|
||||
prefix-icon="Lock" show-password>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<div style="display: flex; align-items: center;margin-bottom: 30px;">
|
||||
|
||||
<el-row :span="21">
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="data.password" style="width: 100%; margin-right: 20px;" type="password" placeholder="验证码"
|
||||
prefix-icon="Paperclip" >
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-form-item prop="password">
|
||||
<img src="@/assets/images/login_bg.png" class="codeStyle" @click="handleCode">
|
||||
</el-form-item>
|
||||
<div class="login_content">
|
||||
<div class="login_left">
|
||||
<img src="../../assets/images/login_01.png" alt="" />
|
||||
</div>
|
||||
<div class="login_right">
|
||||
<div class="form">
|
||||
<img class="title" src="../../assets/images/login_02.png" alt="" />
|
||||
<el-form
|
||||
:model="data"
|
||||
size="medium"
|
||||
ref="formRef"
|
||||
@keyup.enter.native="handleSubmit"
|
||||
>
|
||||
<el-form-item prop="user">
|
||||
<el-input
|
||||
v-model="data.user"
|
||||
style="width: 100%"
|
||||
placeholder="帐号"
|
||||
prefix-icon="User"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="data.password"
|
||||
style="width: 100%"
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
prefix-icon="Lock"
|
||||
show-password
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div style="font-size: 0" class="rememb">
|
||||
<el-checkbox v-model="remembIf" label="记住我" size="large" />
|
||||
</div>
|
||||
<el-button class="login-btn-submit" type="primary" @click="handleSubmit()" :loading="loading">
|
||||
<el-button
|
||||
class="login-btn-submit"
|
||||
type="primary"
|
||||
@click="handleSubmit()"
|
||||
:loading="loading"
|
||||
>
|
||||
<span class="info1">登 录</span>
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
<slideVerify
|
||||
v-show="slideVerifyShow"
|
||||
@onSuccess="slideVerifySuccess"
|
||||
></slideVerify>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
|
@ -49,213 +58,127 @@ import { ElMessage } from "element-plus";
|
|||
import tools from "@/utils/tools";
|
||||
import http from "@/utils/request.js";
|
||||
import { encrypt } from "@/utils";
|
||||
|
||||
import slideVerify from "./slideVerify.vue";
|
||||
const Router = useRouter();
|
||||
|
||||
let paramsData = tools.data.get("params");
|
||||
let slideVerifyShow = ref(false);
|
||||
|
||||
const data = reactive({
|
||||
user: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
console.log("paramsData", paramsData);
|
||||
if (paramsData) {
|
||||
console.log("存在");
|
||||
data.user = paramsData.user;
|
||||
data.password = paramsData.password;
|
||||
}
|
||||
|
||||
const remembIf = ref(false);
|
||||
const loading = ref(false);
|
||||
const formRef = ref();
|
||||
const handleCode = () =>{
|
||||
console.log('111111111');
|
||||
|
||||
}
|
||||
const slideVerifySuccess = () => {
|
||||
console.log("验证成功");
|
||||
slideVerifyShow.value = false;
|
||||
loading.value = true;
|
||||
var params = {
|
||||
user: encrypt(data.user),
|
||||
password: encrypt(data.password),
|
||||
};
|
||||
|
||||
http.post("/api/auth/login", params).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
var user = {
|
||||
token: resp.data.token,
|
||||
name: resp.data.name,
|
||||
menus: resp.data.menus,
|
||||
buttons: resp.data.buttons,
|
||||
accountType: resp.data.accountType,
|
||||
};
|
||||
tools.data.set("user", user);
|
||||
|
||||
if (remembIf) {
|
||||
tools.data.set("params", {
|
||||
user: data.user,
|
||||
password: data.password,
|
||||
});
|
||||
} else {
|
||||
tools.data.remove("params");
|
||||
}
|
||||
ElMessage.success("登录成功");
|
||||
//loading.value = false;
|
||||
Router.push("/");
|
||||
// 跳转到 首页路由
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
var params = {
|
||||
user: encrypt(data.user),
|
||||
password: encrypt(data.password),
|
||||
};
|
||||
http.post("/api/auth/login", params).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
var user = {
|
||||
token: resp.data.token,
|
||||
name: resp.data.name,
|
||||
menus: resp.data.menus,
|
||||
buttons: resp.data.buttons,
|
||||
accountType: resp.data.accountType,
|
||||
};
|
||||
tools.data.set("user", user);
|
||||
ElMessage.success("登录成功");
|
||||
//loading.value = false;
|
||||
Router.push("/");
|
||||
// 跳转到 首页路由
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
slideVerifyShow.value = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.main {
|
||||
.login {
|
||||
.auto {
|
||||
.el-row {
|
||||
width: 100%;
|
||||
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
border: 1px solid #a8abb2;
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
-webkit-user-select: none;
|
||||
/*谷歌 /Chrome*/
|
||||
-moz-user-select: none;
|
||||
/*火狐/Firefox*/
|
||||
-ms-user-select: none;
|
||||
/*IE 10+*/
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
.login_content {
|
||||
display: flex;
|
||||
background: linear-gradient(123deg, #f4f7fb 0%, #f4f7fb 100%);
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
.codeStyle{
|
||||
width: 100px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login {
|
||||
position: relative;
|
||||
background: url(@/assets/images/login_bg_3.png);
|
||||
background-size: 80% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.login_image {
|
||||
z-index: 31;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 150px;
|
||||
width: 45%;
|
||||
height: 599px;
|
||||
background: url(@/assets/images/login_bg_1.png) -1px 0px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.bd5_left {
|
||||
z-index: 313;
|
||||
position: absolute;
|
||||
left: -38px;
|
||||
bottom: 0;
|
||||
width: 297px;
|
||||
height: 113px;
|
||||
background: url(@/assets/images/login_bg_4.png) -1px 0px no-repeat;
|
||||
}
|
||||
|
||||
.bd5_right {
|
||||
z-index: 267;
|
||||
position: absolute;
|
||||
right: 20%;
|
||||
top: 0;
|
||||
width: 297px;
|
||||
height: 113px;
|
||||
background: url(@/assets/images/login_bg_2.png) 0px 0px no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.auto {
|
||||
z-index: 4;
|
||||
width: 436px;
|
||||
position: absolute;
|
||||
padding: 58px 32px;
|
||||
left: 50%;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
background: #fefefe;
|
||||
box-shadow: 10px 10px 0px 0px #e4e8ec;
|
||||
border-radius: 2px;
|
||||
backdrop-filter: blur(50px);
|
||||
|
||||
.auto_title {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 33px;
|
||||
font-size: 30px;
|
||||
margin-bottom: 48px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #0081eb;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.login-btn-submit {
|
||||
.login_left {
|
||||
flex: auto;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #0081eb;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info1 {
|
||||
width: 52px;
|
||||
height: 24px;
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
.login_right {
|
||||
flex: 0 0 597px;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 115px;
|
||||
box-sizing: border-box;
|
||||
.form {
|
||||
width: 100%;
|
||||
.title {
|
||||
width: 277px;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.main .login .login_image {
|
||||
width: 80%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -60%);
|
||||
}
|
||||
|
||||
.main .auto {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.main .login {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
:deep(.el-input__icon) {
|
||||
width: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.login-btn-submit {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 662px) {
|
||||
.main .login .login_image {
|
||||
width: 100%;
|
||||
transform: translate(-56%, -60%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.main .auto {
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
.rememb {
|
||||
font-size: 0;
|
||||
margin-bottom: 40px;
|
||||
.el-checkbox.el-checkbox--large {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div class="silde_box_content">
|
||||
<div class="silde_box">
|
||||
<slide-verify
|
||||
class="silde_box"
|
||||
ref="block"
|
||||
:slider-text="text"
|
||||
:accuracy="accuracy"
|
||||
@again="onAgain"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
@refresh="onRefresh"
|
||||
></slide-verify>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
// 局部注册组件，需要单独引用组件样式
|
||||
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
|
||||
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
|
||||
import "vue3-slide-verify/dist/style.css";
|
||||
|
||||
export default defineComponent({
|
||||
components: { SlideVerify },
|
||||
|
||||
setup(props, context) {
|
||||
const msg = ref("");
|
||||
const block = ref<SlideVerifyInstance>();
|
||||
|
||||
const onAgain = () => {
|
||||
msg.value = "检测到非人为操作的哦！ try again";
|
||||
// 刷新
|
||||
block.value?.refresh();
|
||||
};
|
||||
|
||||
const onSuccess = (times: number) => {
|
||||
msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
|
||||
context.emit('onSuccess')
|
||||
};
|
||||
|
||||
const onFail = () => {
|
||||
console.log("验证不通过")
|
||||
msg.value = "验证不通过";
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
msg.value = "点击了刷新小图标";
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
// 刷新
|
||||
block.value?.refresh();
|
||||
msg.value = "";
|
||||
};
|
||||
|
||||
return {
|
||||
block,
|
||||
msg,
|
||||
text: "向右滑动->",
|
||||
accuracy: 1,
|
||||
onAgain,
|
||||
onSuccess,
|
||||
onFail,
|
||||
onRefresh,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.silde_box_content {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
.silde_box{
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,6 +15,7 @@ export default defineConfig({
|
|||
}),
|
||||
Components({
|
||||
// resolvers: [ElementPlusResolver()],
|
||||
directoryAsNamespace: true
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
|
|
@ -28,10 +29,10 @@ export default defineConfig({
|
|||
proxy: {
|
||||
'/api': {
|
||||
// target: 'http://10.0.0.29:9999',
|
||||
// target: 'https://fywz.btdit.cn/',
|
||||
target: 'http://10.0.0.74:7777/', // 刘进
|
||||
target: 'https://fywz.btdit.cn/',
|
||||
// target: 'http://10.0.0.65:7777/', // 刘进
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
// rewrite: (path) => path.replace(/^\/api/, '')
|
||||
// ws: true,// 开启webSocket
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1068,7 +1068,14 @@ vue-router@4:
|
|||
dependencies:
|
||||
"@vue/devtools-api" "^6.5.0"
|
||||
|
||||
vue@^3.2.47:
|
||||
vue3-slide-verify@^1.1.4:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/vue3-slide-verify/-/vue3-slide-verify-1.1.4.tgz#fdb623b802468f15df8b8b5d481ab0dc63948d30"
|
||||
integrity sha512-er2d9TSPsF5CcmoxBfP6eSkc4IHROwXu6Ytghkwf52apXpXy2ZtW3tOgHnmFWb3GHESKxZ9bsFXqSX+fJ6hjrg==
|
||||
dependencies:
|
||||
vue "^3.2.25"
|
||||
|
||||
vue@^3.2.25, vue@^3.2.47:
|
||||
version "3.3.4"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
|
||||
integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
|
||||
|
|
|
|||
Loading…
Reference in New Issue