WxxyDeveloper/JSL_OrganizeInternalOAWeb_Archive
9
0
Fork 0
mirror of https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git synced 2025-06-08 11:43:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

完善导航栏

Browse Source
This commit is contained in:
GUjiYN 2024-01-23 23:23:31 +08:00
parent 23466e6916
commit b46c317b3c
7 changed files with 83 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/EmailLogin.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="relative min-h-screen w-full bg-gray-200"> <div class="relative min-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"> <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <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"> <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> <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
</a> </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"> <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" aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span> <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"> <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"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
@ -15,35 +15,35 @@
</nav> </nav>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="container mx-auto mt-20 mb-40" > <div class="container mx-auto mt-20 mb-40" >
<div class="max-w-md mx-auto bg-white border border-gray-200 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">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">邮箱登录</h2> <h2 class="text-3xl font-bold mb-6 text-center text-gray-900">邮箱登录</h2>
<form class="max-w-lg mx-auto w-auto"> <form class="max-w-lg mx-auto w-auto">
<div class="mb-5"> <div class="mb-5">
<label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900 dark:text-white "> <label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900">
<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"> <svg class="w-5 h-5 text-gray-800" 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"/> <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> </svg>
邮箱 邮箱
</label> </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> <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" required>
</div> </div>
<div class="mb-5"> <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"> <label for="password" class="flex items-center space-x-4 mb-2 text-sm font-medium text-gray-900">
<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"> <svg class="w-5 h-5 text-gray-800" 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"/> <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> </svg>
验证码 验证码
</label> </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> <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" required>
</div> </div>
<div class="flex items-start mb-5"> <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> <a href="" class="ml-auto text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">获取邮箱验证码</a>
</div> </div>
<div class="flex flex-col "> <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> <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">登录</a>
<div class="flex space-x-2 ml-24"> <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="/login" class="text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">账号密码登录 |</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> <a href="/register" class="text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">立即注册</a>
</div> </div>
</div> </div>
</form> </form>

8
src/components/ForgetPassword.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="relative min-h-screen w-full bg-gray-200"> <div class="relative min-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"> <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <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"> <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> <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
</a> </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"> <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" aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span> <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"> <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"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
@ -16,7 +16,7 @@
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="container mx-auto mt-20 mb-40" > <div class="container mx-auto mt-20 mb-40" >
<div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10"> <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">重置密码</h2> <h2 class="text-3xl font-bold mb-6 text-center text-gray-900">重置密码</h2>
<form class="max-w-lg mx-auto w-auto"> <form class="max-w-lg mx-auto w-auto">
<div class="mb-5 flex"> <div class="mb-5 flex">
<span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-e-0 border-gray-300 rounded-s-md"> <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-e-0 border-gray-300 rounded-s-md">

32
src/components/MainPage/NavBar.vue
View File

@ -1,62 +1,62 @@
<template> <template>
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700"> <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <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"> <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> <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
</a> </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"> <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" aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span> <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"> <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"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg> </svg>
</button> </button>
<div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse"> <div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
<a href="/login" class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <a href="/login" class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center">
登录 | 登录 |
</a> </a>
<a href="/register" class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <a href="/register" class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center">
注册 注册
</a> </a>
</div> </div>
<div class="hidden w-full md:block md:w-auto" id="navbar-dropdown"> <div class="w-full md:block md:w-auto" id="navbar-dropdown">
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"> <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
<li> <li>
<a href="/" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page"> <a href="/" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" aria-current="page">
首页 首页
</a> </a>
</li> </li>
<li> <li>
<a href="/Project" @click="changeColor" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> <a href="/Project" @click="changeColor" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">
项目 项目
</a> </a>
</li> </li>
<li class="relative"> <li class="relative">
<button @click="toggleDropdown()" id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent"> <button @click="toggleDropdown()" id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto">
关于 关于
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"> <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg> </svg>
</button> </button>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"> <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton"> <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">关于我们</a> <a href="#" class="block px-4 py-2 hover:bg-gray-100">关于我们</a>
</li> </li>
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">加入我们</a> <a href="#" class="block px-4 py-2 hover:bg-gray-100">加入我们</a>
</li> </li>
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">项目合作</a> <a href="#" class="block px-4 py-2 hover:bg-gray-100">项目合作</a>
</li> </li>
</ul> </ul>
</div> </div>
</li> </li>
<li> <li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">团队</a> <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">团队</a>
</li> </li>
<li> <li>
<a href="/New" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">新闻</a> <a href="/New" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">新闻</a>
</li> </li>
</ul> </ul>
</div> </div>

10
src/components/MainPage/NewProfile.vue
View File

@ -31,7 +31,7 @@
</div> </div>
</div> </div>
<div class="mt-10 ml-auto mr-10"> <div class="mt-10 ml-auto mr-10">
<a href="#" v-if="showMoreButton1" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <a href="#" v-if="showMoreButton1" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full">
<svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"> <svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg> </svg>
@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<div @mouseover="showMoreButton2=true" @mouseleave="showMoreButton2=false" <div @mouseover="showMoreButton2=true" @mouseleave="showMoreButton2=false"
class="flex-1 transition-transform transform-gpu hover:scale-105 relative sm:w-1/2 md:w-1/4 lg:w-1/3 xl:w-1/4 h-[500px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700" class="flex-1 transition-transform transform-gpu hover:scale-105 relative sm:w-1/2 md:w-1/4 lg:w-1/3 xl:w-1/4 h-[500px] bg-white border border-gray-200 shadow"
:class="{'hover:bg-green-400':showMoreButton2}" :class="{'hover:bg-green-400':showMoreButton2}"
> >
<div class=""> <div class="">
@ -58,7 +58,7 @@
</div> </div>
</div> </div>
<div class="mt-10 ml-auto mr-10"> <div class="mt-10 ml-auto mr-10">
<a href="#" v-if="showMoreButton2" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <a href="#" v-if="showMoreButton2" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full">
<svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"> <svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg> </svg>
@ -68,7 +68,7 @@
</div> </div>
</div> </div>
<div @mouseover="showMoreButton3=true" @mouseleave="showMoreButton3=false" <div @mouseover="showMoreButton3=true" @mouseleave="showMoreButton3=false"
class="flex-1 transition-transform transform-gpu hover:scale-105 hover:bg-green-400 relative sm:w-1/2 md:w-1/4 lg:w-1/3 xl:w-1/4 h-[500px] bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700" class="flex-1 transition-transform transform-gpu hover:scale-105 hover:bg-green-400 relative sm:w-1/2 md:w-1/4 lg:w-1/3 xl:w-1/4 h-[500px] bg-white border border-gray-200 shadow"
:class="{'hover:bg-green-400':showMoreButton3}" :class="{'hover:bg-green-400':showMoreButton3}"
> >
<div class=""> <div class="">
@ -85,7 +85,7 @@
</div> </div>
</div> </div>
<div class="mt-10 ml-auto mr-10"> <div class="mt-10 ml-auto mr-10">
<a href="#" v-if="showMoreButton3" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <a href="#" v-if="showMoreButton3" class="inline-flex items-center text-sm font-medium text-center text-white bg-green-400 rounded-full">
<svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"> <svg class="rtl:rotate-180 w-4 h-4 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg> </svg>

38
src/components/NewPage/NewCard.vue
View File

@ -1,30 +1,22 @@
<template> <template>
<div class="w-full min-h-screen mt-2"> <div class="w-full min-h-screen mt-2">
<div class="container mx-auto w-3/4"> <div class="container mx-auto w-3/4">
<nav class="bg-white border-gray-200 dark:bg-gray-900"> <nav class="bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<div class="flex md:order-2"> <div class="flex md:order-2">
<div class="relative hidden md:block"> <div class="relative md:block">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"> <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg> </svg>
</div> </div>
<input type="text" id="search-navbar" class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 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" placeholder="请输入关键字"> <input type="text" id="search-navbar" class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500" placeholder="请输入关键字">
</div> </div>
</div> </div>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-search"> <div class="items-center justify-between w-full md:flex md:w-auto md:order-1" id="navbar-search">
<div class="relative mt-3 md:hidden"> <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<input type="text" id="search-navbar" class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 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" placeholder="Search...">
</div>
<ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li> <li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">全部</a> <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" aria-current="page">全部</a>
</li> </li>
</ul> </ul>
<div date-rangepicker class="flex items-center ml-8"> <div date-rangepicker class="flex items-center ml-8">
@ -71,7 +63,7 @@
2024 2024
</div> </div>
<div class="mt-10 ml-auto mr-10"> <div class="mt-10 ml-auto mr-10">
<a href="#" class="inline-flex items-center text-sm font-medium text-center text-gray-400 hover:text-white hover:bg-green-400 border border-gray-300 rounded-full"> <a href="#" class="inline-flex items-center text-sm font-medium text-center text-gray-400 hover:text-white hover:bg-green-400 border border-gray-300 rounded-full">
<svg class="rtl:rotate-180 w-6 h-6 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"> <svg class="rtl:rotate-180 w-6 h-6 m-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg> </svg>
@ -139,7 +131,7 @@
<nav aria-label="Page navigation example" class="mt-10"> <nav aria-label="Page navigation example" class="mt-10">
<ul class="flex items-center -space-x-px h-10 text-base"> <ul class="flex items-center -space-x-px h-10 text-base">
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700">
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
@ -147,32 +139,32 @@
</a> </a>
</li> </li>
<li> <li>
<a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 leading-tight text-blue-600 bg-blue-50 border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 leading-tight text-blue-600 bg-blue-50 border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
1 1
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
2 2
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-blue-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-blue-300 hover:bg-blue-100 hover:text-blue-700">
3 3
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
4 4
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
5 5
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700">
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>

30
src/components/ProjectPage/ProjectCard.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<div class="w-full min-h-screen mt-2"> <div class="w-full min-h-screen mt-2">
<div class="container mx-auto w-3/4"> <div class="container mx-auto w-3/4">
<nav class="bg-white border-gray-200 dark:bg-gray-900"> <nav class="bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<div class="hidden w-full md:block md:w-auto" id="navbar-default"> <div class="w-full md:block md:w-auto" id="navbar-default">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"> <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white">
<li> <li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">全部</a> <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" aria-current="page">全部</a>
</li> </li>
<li> <li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Web</a> <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">Web</a>
</li> </li>
<li> <li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Ai</a> <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">Ai</a>
</li> </li>
<li> <li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">App</a> <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">App</a>
</li> </li>
<li> <li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">大数据</a> <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">大数据</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -133,7 +133,7 @@
<nav aria-label="Page navigation example" class="mt-10"> <nav aria-label="Page navigation example" class="mt-10">
<ul class="flex items-center -space-x-px h-10 text-base"> <ul class="flex items-center -space-x-px h-10 text-base">
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700">
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
@ -141,32 +141,32 @@
</a> </a>
</li> </li>
<li> <li>
<a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 leading-tight text-blue-600 bg-blue-50 border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 leading-tight text-blue-600 bg-blue-50 border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
1 1
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
2 2
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-blue-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-blue-300 hover:bg-blue-100 hover:text-blue-700">
3 3
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
4 4
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
5 5
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700">
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
<svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"> <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>

26
src/components/login.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="relative min-h-screen w-full bg-gray-200"> <div class="relative min-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"> <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <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"> <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> <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
</a> </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"> <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" aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span> <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"> <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"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
@ -16,38 +16,38 @@
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="container mx-auto mt-20 mb-40" > <div class="container mx-auto mt-20 mb-40" >
<div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10"> <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">账号登录</h2> <h2 class="text-3xl font-bold mb-6 text-center text-gray-900">账号登录</h2>
<form class="max-w-lg mx-auto w-auto"> <form class="max-w-lg mx-auto w-auto">
<div class="mb-5"> <div class="mb-5">
<label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900 dark:text-white "> <label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900">
<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"> <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"/> <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> </svg>
用户名 用户名
</label> </label>
<input type="email" id="email" v-model="data.user" 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> <input type="email" id="email" v-model="data.user" 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" required>
</div> </div>
<div class="mb-5"> <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"> <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"> <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"/> <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> </svg>
密码 密码
</label> </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> <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" required>
</div> </div>
<div class="flex items-start mb-5"> <div class="flex items-start mb-5">
<div class="flex items-center h-5"> <div class="flex items-center h-5">
<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> <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" required>
</div> </div>
<label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">记住我</label> <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> <a href="/emaillogin" class="ml-auto text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">邮箱验证码登录</a>
</div> </div>
<div class="flex flex-col "> <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> <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">登录</a>
<div class="flex space-x-2 ml-32"> <div class="flex space-x-2 ml-32">
<a href="/ForgetPassword" 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="/ForgetPassword" class="text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">忘记密码? |</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> <a href="/register" class="text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center">注册</a>
</div> </div>
</div> </div>
</form> </form>