From ad254135c69971db3dce63aaffa5be8cd124d7b3 Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Fri, 19 Jan 2024 16:06:54 +0800
Subject: [PATCH] add emaillogin

---
 src/components/EmailLogin.vue           | 88 +++++++++++++++++++++++++
 src/components/MainPage/Icp.vue         | 16 +++++
 src/components/MainPage/More.vue        |  2 +-
 src/components/MainPage/TeamProfile.vue |  6 +-
 src/components/index.vue                | 14 +---
 src/components/login.vue                | 31 +++++----
 src/components/register.vue             | 30 +++++----
 src/router/index.js                     |  5 ++
 8 files changed, 153 insertions(+), 39 deletions(-)
 create mode 100644 src/components/EmailLogin.vue
 create mode 100644 src/components/MainPage/Icp.vue

diff --git a/src/components/EmailLogin.vue b/src/components/EmailLogin.vue
new file mode 100644
index 0000000..bd932a4
--- /dev/null
+++ b/src/components/EmailLogin.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="relative h-screen w-full bg-gray-200">
+    <nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
+      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+          <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">LOGO</span>
+        </a>
+        <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+          </svg>
+        </button>
+      </div>
+    </nav>
+      <div class="flex items-center justify-center">
+        <div class="container mx-auto mt-20" >
+          <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10 dark:bg-gray-800 dark:border-gray-700">
+            <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">邮箱登录</h2>
+            <form class="max-w-lg mx-auto w-auto">
+              <div class="mb-5">
+                <label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900 dark:text-white ">
+                  <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 18">
+                    <path d="M7 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm2 1H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
+                  </svg>
+                  邮箱
+                </label>
+                <input type="email" id="email" v-model="data.userNum" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"  required>
+              </div>
+              <div class="mb-5">
+                <label for="password" class="flex items-center space-x-4  mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                  <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+                    <path d="M14 7h-1.5V4.5a4.5 4.5 0 1 0-9 0V7H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm-5 8a1 1 0 1 1-2 0v-3a1 1 0 1 1 2 0v3Zm1.5-8h-5V4.5a2.5 2.5 0 1 1 5 0V7Z"/>
+                  </svg>
+                  验证码
+                </label>
+                <input type="password" v-model="data.password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
+              </div>
+              <div class="flex items-start mb-5">
+                <a href="" class="ml-auto text-blue-500  font-medium rounded-lg text-sm  sm:w-auto text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">获取邮箱验证码</a>
+              </div>
+              <div class="flex flex-col ">
+                <a @click="loginUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mt-2 mb-3 mx-8 px-10 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">登录</a>
+                <div class="flex space-x-2 ml-24">
+                  <a href="/login" class="text-blue-500  font-medium rounded-lg text-sm  sm:w-auto  text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">账号密码登录 |</a>
+                  <a href="/register" class="text-blue-500  font-medium rounded-lg text-sm  sm:w-auto  text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">立即注册</a>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    <Icp class="absolute bottom-0"/>
+  </div>
+</template>
+<script setup>
+import axios from 'axios';
+import getCurrentTimestamp from '../public/methods.js';
+import Icp from "@/components/MainPage/Icp.vue";
+
+const data = {
+  userNum: '',
+  password: ''
+}
+
+function loginUser(){
+  axios({
+    url: "api/user/login",
+    method: "post",
+    data: {
+      "userNum": data.userNum,
+      "password": data.password
+    },
+    headers: {
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp':getCurrentTimestamp()
+    },
+  }).then((res) => {
+    if (res.data.code === 200) {
+      //登录成功，跳转页面+消息提示+存储登录用户的数据
+    } else {
+      //登录失败，消息提示
+    }
+
+  });
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/MainPage/Icp.vue b/src/components/MainPage/Icp.vue
new file mode 100644
index 0000000..3f34dce
--- /dev/null
+++ b/src/components/MainPage/Icp.vue
@@ -0,0 +1,16 @@
+<template>
+  <!--版权-->
+  <div class="w-full h-12 flex items-center justify-center bg-gray-700 text-gray-400">
+    <div class="flex space-x-10">
+      <div>
+        ICP备案
+      </div>
+      <div>
+        公安备案
+      </div>
+      <div>
+        Copyright (C) 2023 xxx Group All Right Services.
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/MainPage/More.vue b/src/components/MainPage/More.vue
index 0df7a0a..31bf18c 100644
--- a/src/components/MainPage/More.vue
+++ b/src/components/MainPage/More.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full  mt-40 bg-gray-700 h-[400px]">
+  <div class="w-full bg-gray-700 h-[400px]">
     <div class="flex text-white">
       <div class="">
         <p class="pt-32 pl-52 text-2xl">
diff --git a/src/components/MainPage/TeamProfile.vue b/src/components/MainPage/TeamProfile.vue
index fce1ccd..cfb9904 100644
--- a/src/components/MainPage/TeamProfile.vue
+++ b/src/components/MainPage/TeamProfile.vue
@@ -13,11 +13,11 @@
           </button>
         </div>
       </div>
-      <div class="flex">
-        <div class="flex-1 mt-16 h-96 w-[600px] border-2 border-gray-400">
+      <div class="mt-16 flex space-x-5">
+        <div class="flex-1 h-96 w-1/2">
           团队介绍
         </div>
-        <div role="status" class="flex-1 ml-10 mt-16 mb-40 h-96 w-2/5 bg-white shadow-lg">
+        <div role="status" class="flex-1 mb-40 h-96 w-1/2 bg-white shadow-lg">
           <img src="@/assets/images/img15.jpg" alt="">
         </div>
       </div>
diff --git a/src/components/index.vue b/src/components/index.vue
index 9648cb4..3a0774d 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -16,16 +16,7 @@ onMounted(() => {
       <NewProfile/>
       <ExcellentMember/>
       <More/>
-    </div>
-    <!--版权-->
-    <div class="mt-40 flex items-center justify-center">
-      <div class="text-center">
-        ICP备案
-        <br>
-        公安备案
-        <br>
-        Copyright (C) 2023 xxx Group All Right Services.
-      </div>
+      <Icp/>
     </div>
   </div>
 </template>
@@ -38,8 +29,9 @@ import NewProfile from "@/components/MainPage/NewProfile.vue";
 import ExcellentMember from "@/components/MainPage/ExcellentMember.vue";
 import ProjectList from "@/components/MainPage/ProjectList.vue";
 import More from "@/components/MainPage/More.vue";
+import Icp from "@/components/MainPage/Icp.vue";
 
 export default{
-  components: {More,ProjectList, ExcellentMember, NewProfile, TeamProfile, Carousel, NavBar},
+  components: {Icp, More,ProjectList, ExcellentMember, NewProfile, TeamProfile, Carousel, NavBar},
 }
 </script>
\ No newline at end of file
diff --git a/src/components/login.vue b/src/components/login.vue
index 7978540..7524c44 100644
--- a/src/components/login.vue
+++ b/src/components/login.vue
@@ -1,8 +1,21 @@
 <template>
-  <div class="w-full h-screen">
+  <div class="relative h-screen w-full bg-gray-200">
+    <nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
+      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+          <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">LOGO</span>
+        </a>
+        <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+          </svg>
+        </button>
+      </div>
+    </nav>
     <div class="flex items-center justify-center">
       <div class="container mx-auto mt-20" >
-        <div class="max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow p-10 dark:bg-gray-800 dark:border-gray-700">
+        <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10 dark:bg-gray-800 dark:border-gray-700">
           <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">账号登录</h2>
           <form class="max-w-lg mx-auto w-auto">
             <div class="mb-5">
@@ -28,6 +41,7 @@
                 <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required>
               </div>
               <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">记住我</label>
+              <a href="/emaillogin" class="ml-auto text-blue-500  font-medium rounded-lg text-sm  sm:w-auto text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">邮箱验证码登录</a>
             </div>
             <div class="flex flex-col ">
               <a @click="loginUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mt-2 mb-3 mx-8 px-10 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">登录</a>
@@ -41,20 +55,13 @@
         </div>
       </div>
     </div>
-    <div class="mt-40 flex items-center justify-center">
-      <div class="text-center">
-        ICP备案
-        <br>
-        公安备案
-        <br>
-        Copyright (C) 2023 xxx Group All Right Services.
-      </div>
-    </div>
-</div>
+    <Icp class="absolute bottom-0"/>
+  </div>
 </template>
 <script setup>
 import axios from 'axios';
 import getCurrentTimestamp from '../public/methods.js';
+import Icp from "@/components/MainPage/Icp.vue";
 
 const data = {
   userNum: '',
diff --git a/src/components/register.vue b/src/components/register.vue
index 3c643e5..930f07b 100644
--- a/src/components/register.vue
+++ b/src/components/register.vue
@@ -1,8 +1,21 @@
 <template>
-  <div class="w-auto h-auto bg-sky-200">
+  <div class="relative h-screen w-full bg-gray-200">
+    <nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
+      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+          <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">LOGO</span>
+        </a>
+        <button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+          </svg>
+        </button>
+      </div>
+    </nav>
     <div class="flex items-center justify-center">
-      <div class="container w-full max-w-md mx-auto mt-8 " >
-        <div class=" mx-auto bg-white border border-gray-200 rounded-lg shadow p-8 dark:bg-gray-800 dark:border-gray-700">
+      <div class="container w-full max-w-md mx-auto mt-2" >
+        <div class=" mx-auto bg-white border border-gray-200 shadow p-8 dark:bg-gray-800 dark:border-gray-700">
           <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">用户注册</h2>
           <form class="flex flex-col space-y-5 max-w-sm w-96">
             <div class="mb-5">
@@ -76,15 +89,7 @@
         </div>
       </div>
     </div>
-    <div class="mt-40 flex items-center justify-center">
-      <div class="text-center">
-        ICP备案
-        <br>
-        公安备案
-        <br>
-        Copyright (C) 2023 xxx Group All Right Services.
-      </div>
-    </div>
+    <Icp class="absolute bottom-0"/>
   </div>
 </template>
 
@@ -94,6 +99,7 @@
 <script setup>
 import axios from 'axios';
 import getCurrentTimestamp from '../public/methods.js';
+import Icp from "@/components/MainPage/Icp.vue";
 
 const data = {
   username: '',
diff --git a/src/router/index.js b/src/router/index.js
index d58722d..67d6aa6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,11 @@ const router = createRouter({
       name:'success',
       component:()=>import('../components/success.vue')
     },
+    {
+      path:'/emaillogin',
+      name:'emaillogin',
+      component:()=>import('../components/EmailLogin.vue')
+    },
     {
       path:'/manager',
       name:'manager',