mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-06-08 03:33:03 +08:00
add emaillogin
This commit is contained in:
parent
8248f7b969
commit
ad254135c6
88
src/components/EmailLogin.vue
Normal file
88
src/components/EmailLogin.vue
Normal file
@ -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>
|
||||
16
src/components/MainPage/Icp.vue
Normal file
16
src/components/MainPage/Icp.vue
Normal file
@ -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>
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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: '',
|
||||
|
||||
@ -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: '',
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user