This commit is contained in:
吴先生 2023-07-13 11:56:06 +08:00
parent 7abb01ab70
commit 055a415a42
14 changed files with 620 additions and 309 deletions

View File

@ -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

BIN
src/assets/images/fold.png Normal file

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

View File

@ -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>

View File

@ -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-icon>
<breadcrumb style="margin-left: 20px;" />
<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>
<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;
cursor: pointer;
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>

View File

@ -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">&nbsp;</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>

View File

@ -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">&nbsp;</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>

View File

@ -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>

View File

@ -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
}
}

View File

@ -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==