优化结构

完善注册页面

components.d.ts

@@ -14,6 +14,8 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
@@ -35,6 +37,7 @@ declare module '@vue/runtime-core' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
@@ -43,6 +46,8 @@ declare module '@vue/runtime-core' {
     Hleft: typeof import('./src/components/header/hleft.vue')['default']
     Hright: typeof import('./src/components/header/hright.vue')['default']
     Hsearch: typeof import('./src/components/header/hsearch.vue')['default']
+    Login: typeof import('./src/components/auth/login.vue')['default']
+    Register: typeof import('./src/components/auth/register.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/auth/register.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+let ressuccess = ''
+const codvisible = ref(false)
+const bt_disabled = ref(false)
+function codsuccess(success: string) {
+  codvisible.value = false
+  bt_disabled.value = true
+  ressuccess = success
+}
+const form = reactive({
+  name: '',
+  paw: '',
+  paw1: '',
+})
+</script>
+
+<template>
+  <el-card class="box-card register">
+    <el-form :model="form"
+             label-position="top">
+      <el-form-item label="用户名">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input type="password"
+                  v-model="form.paw" />
+      </el-form-item>
+      <el-form-item label="确认密码">
+        <el-input type="password"
+                  v-model="form.paw1" />
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox>
+          <span>我已阅读并同意</span>
+          <el-link type="primary"
+                   href="#">《用户协议》</el-link>
+        </el-checkbox>
+      </el-form-item>
+      <el-form-item label="验证码">
+        <el-popover placement="top"
+                    :width="330"
+                    :visible="codvisible">
+          <template #reference>
+            <el-button :type="bt_disabled?'success':'info'"
+                       style="width: 100%;"
+                       :disabled="bt_disabled"
+                       @click="(codvisible = !codvisible)">{{bt_disabled?"✅验证通过":"点击进行验证"}}</el-button>
+          </template>
+          <Suspense>
+            <template #default>
+              <el-space>
+                <div class="center">
+                  <cod @success="codsuccess" />
+                </div>
+              </el-space>
+            </template>
+            <template #fallback>
+              验证码获取中
+            </template>
+          </Suspense>
+        </el-popover>
+      </el-form-item>
+    </el-form>
+    <el-divider />
+    <el-button type="primary"
+               style="width:100%;">注册</el-button>
+    <br>
+    <div>
+      <el-button type="text"
+                 id="to_login"
+                 style="float:right;">已有账号？去登录</el-button>
+    </div>
+    <br>
+  </el-card>
+</template>
+<style scoped >
+</style>

src/components/cod/index.vue

@@ -109,7 +109,7 @@ onMounted(async () => {
     if (success === 4) {
       console.log('通过')
       codsuccess('success', encrypt(JSON.stringify(seed)))
-      init()
+
       return
     }
     if (seed.length === 4) {
@@ -117,7 +117,6 @@ onMounted(async () => {
         message: '验证失败',
         type: 'error',
       })
-      console.log('失败')
       init()
     }
   }

src/layouts/auth.vue

@@ -1,10 +1,147 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import cod from './../components/cod/index.vue'
+import register from './../components/auth/register.vue'
+import login from './../components/auth/login.vue'
+onMounted(() => {
+  const avatar = document.getElementById('avatar')
+  const register = document.getElementsByClassName('box-card')[0] as HTMLElement
+  const login = document.getElementsByClassName('login')[0] as HTMLElement
+  if (avatar && register) {
+    avatar.style.left = (register.clientWidth - 100) / 2 + 'px'
+  }
+  function avatar_move() {
+    if (avatar) {
+      avatar.style.top = '0px'
+      avatar.style.opacity = '1'
+      avatar.style.zIndex = '2'
+      avatar.style.transform = 'scale(1.2)'
+      avatar.style.transition = 'all 1s'
+    }
+  }
+  function avatar_leave() {
+    if (avatar) {
+      avatar.style.top = '80px'
+      avatar.style.opacity = '0'
+      avatar.style.transform = 'scale(1.1)'
+      avatar.style.transition = 'all 1s'
+    }
+  }
+  register.addEventListener('mouseenter', avatar_move)
+  register.addEventListener('mouseleave', avatar_leave)
+  window.addEventListener('resize', () => {
+    if (avatar) {
+      avatar.style.left = (register.offsetWidth - 100) / 2 + 'px'
+    }
+  })
+  function card_move(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    target.style.transform = 'translateX(30px)'
+  }
+  function card_leave(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    target.style.transform = 'translateX(15px)'
+  }
+  login.addEventListener('mouseenter', card_move)
+  login.addEventListener('mouseleave', card_leave)
+  function card_click(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (target.className === login.className) {
+      register.removeEventListener('mouseenter', avatar_move)
+      register.removeEventListener('mouseleave', avatar_leave)
+      target.removeEventListener('mouseenter', card_move)
+      target.removeEventListener('mouseleave', card_leave)
+      target.style.transform = 'translateX(0px)'
+      register.style.transform = 'translateX(30px)'
+      register.style.paddingRight = '30px'
+      target.style.paddingRight = '20px'
+      register.addEventListener('mouseenter', card_move)
+      register.addEventListener('mouseleave', card_leave)
+      register.style.zIndex = '-1'
+      target.style.zIndex = '1'
+    }
+    if (target.className === register.className) {
+      register.addEventListener('mouseenter', avatar_move)
+      register.addEventListener('mouseleave', avatar_leave)
+      target.removeEventListener('mouseenter', card_move)
+      target.removeEventListener('mouseleave', card_leave)
+      target.style.transform = 'translateX(0px)'
+      login.style.transform = 'translateX(30px)'
+      login.style.paddingRight = '30px'
+      target.style.paddingRight = '20px'
+      login.addEventListener('mouseenter', card_move)
+      login.addEventListener('mouseleave', card_leave)
+      console.log(target.className, login.className)
+      login.style.zIndex = '-1'
+      target.style.zIndex = '1'
+    }
+  }
+  register.addEventListener('click', card_click)
+  login.addEventListener('click', card_click)
+  document.getElementById('to_login')?.addEventListener('click', () => {
+    login.click()
+    avatar_leave()
+  })
+})
+</script>
 
 <template>
 
-  <router-view />
-
+  <div id="r_main">
+    <div style="position: relative;">
+      <div id="avatar">
+        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                   :size="100" />
+      </div>
+      <register class="box-card register" />
+      <el-card class="box-card login">
+        <login />
+      </el-card>
+    </div>
+    &nbsp;
+  </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped >
+.center {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.login {
+  position: absolute;
+  top: 0;
+  transform: translateX(15px);
+  z-index: -1;
+  transition: all 1s;
+}
+.register {
+  position: relative;
+  transition: all 1s;
+}
+
+#avatar {
+  top: 50px;
+  z-index: 2;
+  opacity: 0;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.box-card {
+  min-width: 400px;
+  height: 500px;
+  margin-top: 50px;
+  padding-top: 50px;
+}
+#r_main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

src/plugins/router.ts

@@ -15,16 +15,6 @@ const router = createRouter({
         {
           path: "/auth",
           component: () => import("../layouts/auth.vue"),
-          children: [
-            {
-              path: "/auth/login",
-              component: () => import("../views/auth/login.vue"),
-            },
-            {
-              path: "/auth/register",
-              component: () => import("../views/auth/register.vue"),
-            },
-          ],
         },
       ],
     },

src/views/auth/register.vue

@@ -1,110 +0,0 @@
-
-
-<script setup lang="ts">
-import { onMounted, reactive } from 'vue'
-onMounted(() => {
-  const avatar = document.getElementById('avatar')
-  const box_card = document.getElementsByClassName('box-card')[0] as HTMLElement
-  if (avatar && box_card) {
-    //r_main到浏览器左边距离+自身宽度的一半-头像宽度的一半
-    avatar.style.left = (box_card.clientWidth - 100) / 2 + 'px'
-  }
-  window.addEventListener('resize', () => {
-    if (avatar) {
-      avatar.style.left = (box_card.clientWidth - 100) / 2 + 'px'
-    }
-  })
-})
-const form = reactive({
-  name: '',
-  paw: '',
-  paw1: '',
-})
-</script>
-
-<template>
-  <div id="r_main">
-    <div style="position: relative;">
-      <div id="avatar">
-        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-                   :size="100" />
-      </div>
-
-      <el-card class="box-card">
-
-        <el-form :model="form"
-                 label-position="top">
-          <el-form-item label="用户名">
-            <el-input v-model="form.name" />
-          </el-form-item>
-          <el-form-item label="密码">
-            <el-input type="password"
-                      v-model="form.paw" />
-          </el-form-item>
-          <el-form-item label="确认密码">
-            <el-input type="password"
-                      v-model="form.paw1" />
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox>
-              <span>我已阅读并同意</span>
-              <el-link type="primary"
-                       href="#">《用户协议》</el-link>
-            </el-checkbox>
-          </el-form-item>
-          <el-form-item label="验证码">
-            <el-button type="info"
-                       style="width: 100%;">点击进行验证</el-button>
-          </el-form-item>
-        </el-form>
-        <el-divider />
-        <el-button type="primary"
-                   style="width:100%;">注册</el-button>
-        <br>
-        <div>
-          <el-button type="text"
-                     style="float:right;">已有账号？去登录</el-button>
-        </div>
-        <br>
-      </el-card>
-    </div>
-    &nbsp;
-    <el-card class="box-card">
-      <h3>明天在想写点什么</h3>
-    </el-card>
-  </div>
-</template>
-
-<style scoped >
-#avatar {
-  top: 0px;
-  z-index: 2;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  animation: avatar 1s ease-in-out infinite;
-}
-@keyframes avatar {
-  0% {
-    transform: scale(1.1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1.1);
-  }
-}
-.box-card {
-  min-width: 400px;
-  height: 500px;
-  margin-top: 50px;
-  padding-top: 50px;
-}
-#r_main {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>

src/views/home/index.vue

@@ -2,29 +2,17 @@
 import { onMounted, ref, VNodeRef } from 'vue'
 import { encrypt, decrypt } from '../../plugins/crypto'
 import { ElMessage } from 'element-plus'
-import cod from '../../components/cod/index.vue'
-const successcod = (success: string) => {
-  ElMessage({
-    message: `验证通过,加密验证为${success}`,
-    type: 'success',
+import service from '../../plugins/axios'
+const successcod = async (success: string) => {
+  const res = await service.post('cod/verifycod', {
+    cod: success,
   })
-  console.log(success)
+
+  console.log(res.data)
 }
 </script>
 
 <template>
-  <Suspense>
-    <template #default>
-      <el-space>
-        <el-card class="box-card">
-          <cod @success="successcod" />
-        </el-card>
-      </el-space>
-    </template>
-    <template #fallback>
-      验证码获取中
-    </template>
-  </Suspense>
   <el-empty description="没有内容哦" />
   <button @click="ElMessage('text')">tx</button>
 </template>

tsconfig.json

@@ -11,7 +11,11 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]