更新

package.json

@@ -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": {

src/views/grape/index.vue

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

src/views/layout/index.vue

@@ -1,13 +1,53 @@
 <template>
   <el-container v-if="store.menuBar == 'left'">
-    <el-aside :class="['aside', isCollapse ? 'isCollapse' : '']">
+    <el-header class="yd_header">
+      <div style="display: flex; align-items: center">
         <div class="NavMenu_title">
-        <el-icon :size="28">
+          <el-icon :size="28" color="#3A84FF">
             <eleme />
           </el-icon>
-        <span class="title" v-if="!isCollapse">{{ store.title }}</span>
+          <span class="title">{{ store.title }}</span>
         </div>
 
+        <breadcrumb style="margin-left: 20px" />
+      </div>
+
+      <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)"
@@ -15,7 +55,7 @@
           <el-menu
             :uniqueOpened="true"
             class="el-menu-vertical-demo"
-          background-color="#086dd9"
+            background-color="#285FBC"
             text-color="#fff"
             active-text-color="#ffffff"
             :collapse="isCollapse"
@@ -26,49 +66,18 @@
               <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-container>
+      <el-main class="content_main">
-      <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;" />
-        </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>
-
-      <el-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-space wrap :size="20">
-        <el-icon :size="24" class="icon" @click="screen">
+        <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>

src/views/login/index copy.vue

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

src/views/login/index.vue

@@ -1,47 +1,56 @@
 <template>
-  <div class="main">
+  <div class="login_content">
-    <div class="login">
+    <div class="login_left">
-      <div class="bd5_left"></div>
+      <img src="../../assets/images/login_01.png" alt="" />
-      <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">
+    <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"
+          >
             <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,27 +58,37 @@ 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 = () => {
-const handleSubmit = async () => {
+  console.log("验证成功");
-  formRef.value.validate(async (valid) => {
+  slideVerifyShow.value = false;
-    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 = {
@@ -80,6 +99,15 @@ const handleSubmit = async () => {
         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("/");
@@ -89,173 +117,68 @@ const handleSubmit = async () => {
       loading.value = false;
     }
   });
+};
+
+const handleSubmit = async () => {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      slideVerifyShow.value = true;
     }
   });
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
-.main {
+.login_content {
-  .login {
+  display: flex;
-    .auto {
+  background: linear-gradient(123deg, #f4f7fb 0%, #f4f7fb 100%);
-      .el-row {
+  height: 100vh;
-        width: 100%;
+  .login_left {
-
+    flex: auto;
-        .el-form-item {
+    padding: 25px;
+    display: flex;
+    align-items: center;
+    img {
       width: 100%;
     }
   }
-
+  .login_right {
-      .el-input__inner {
+    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;
+      }
+    }
+  }
+}
+: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;
-        border: none;
+  line-height: 40px;
-      }
+}
 
-      .el-input__wrapper {
+.rememb {
-        border: 1px solid #a8abb2;
+  font-size: 0;
-        background-color: #fff;
+  margin-bottom: 40px;
-        box-shadow: none;
+  .el-checkbox.el-checkbox--large {
-      }
+    height: 16px;
-
-      .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>

src/views/login/slideVerify.vue

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

vite.config.js

@@ -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: 'https://fywz.btdit.cn/',
-        target: 'http://10.0.0.74:7777/', // 刘进
+        // target: 'http://10.0.0.65:7777/', // 刘进
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        // rewrite: (path) => path.replace(/^\/api/, '')
         // ws: true,// 开启webSocket
       }
     }

yarn.lock

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