之前的项目界面粘贴过来，工作量管理系统三个静态页面
This commit is contained in:
parent
79e92352a7
commit
ff6194137c
161
src/components/WorkLoadComponents/Header.vue
Normal file
161
src/components/WorkLoadComponents/Header.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
|
||||
<!-- <div class="text-sky-600">000</div> -->
|
||||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a class="flex items-center space-x-3 rtl:space-x-reverse" href="/src/js">
|
||||
<span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
|
||||
</a>
|
||||
<button aria-controls="navbar-dropdown" aria-expanded="false" 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" data-collapse-toggle="navbar-dropdown" type="button">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="none" viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
|
||||
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">
|
||||
登录 |
|
||||
</a>
|
||||
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">
|
||||
注册
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbar-dropdown" class="w-full md:block md:w-auto">
|
||||
<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>
|
||||
<a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/src/js">
|
||||
首页
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="/Project" @click="changeColor">
|
||||
项目
|
||||
</a>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<button id="dropdownNavbarLink" 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" data-dropdown-toggle="dropdownNavbar" @click="toggleDropdown()">
|
||||
关于
|
||||
<svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
|
||||
<ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">
|
||||
<li>
|
||||
<a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">团队</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="/New">新闻</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="bg-gray-50">
|
||||
<div class="max-w-screen-xl px-4 py-3 ml-6">
|
||||
<div class="flex items-center">
|
||||
<ul class="flex flex-row font-medium mt-0 space-x-10 rtl:space-x-reverse text-sm">
|
||||
<li>
|
||||
<a aria-current="page" class="text-gray-900 custom-link" href="/WorkLoad/PersonalInformation">
|
||||
<div class="flex">
|
||||
个人信息管理
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10h16M8 14h8m-4-7V4M7 7V4m10 3V4M5 20h14c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1H5a1 1 0 0 0-1 1v12c0 .6.4 1 1 1Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-900 custom-link" href="/WorkLoad/PersonalProject">
|
||||
<div class="flex">
|
||||
个人项目
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 19h4c.6 0 1-.4 1-1v-1a3 3 0 0 0-3-3h-2m-2.2-4A3 3 0 0 0 19 8a3 3 0 0 0-5.2-2M3 18v-1a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1Zm8-10a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-900 custom-link" href="/WorkLoad/PersonalBelongings">
|
||||
<div class="flex">
|
||||
个人财务
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 6c0 1.7-3.1 3-7 3S5 7.7 5 6m14 0c0-1.7-3.1-3-7-3S5 4.3 5 6m14 0v6M5 6v6m0 0c0 1.7 3.1 3 7 3s7-1.3 7-3M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-900 custom-link" href="/WorkLoad/Message">
|
||||
<div class="flex">
|
||||
消息
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 10.5h0m-4 0h0m-4 0h0M5 5h14c.6 0 1 .4 1 1v9c0 .6-.4 1-1 1h-6.6a1 1 0 0 0-.7.3L8.8 19c-.3.3-.8 0-.8-.4V17c0-.6-.4-1-1-1H5a1 1 0 0 1-1-1V6c0-.6.4-1 1-1Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-900 custom-link" href="/WorkLoad/DailyPaper">
|
||||
<div class="flex">
|
||||
日报
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 4h3c.6 0 1 .4 1 1v15c0 .6-.4 1-1 1H6a1 1 0 0 1-1-1V5c0-.6.4-1 1-1h3m0 3h6m-6 5h6m-6 4h6M10 3v4h4V3h-4Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-900 custom-link" href="/WorkLoad/I_Manage">我管理的</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.custom-link {
|
||||
color: #1a202c; /* 文字默认颜色 */
|
||||
fill: #1a202c; /* SVG图标默认颜色 */
|
||||
}
|
||||
.custom-link:hover {
|
||||
color: #4299e1 !important; /* 鼠标悬浮时的文字颜色 */
|
||||
}
|
||||
.custom-link:hover svg {
|
||||
color: #4299e1 !important; /* 鼠标悬浮时的SVG颜色 */
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDropdownOpen: false,
|
||||
textColor: 'black',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.isDropdownOpen = !this.isDropdownOpen;
|
||||
},
|
||||
changeColor() {
|
||||
// 当按钮被点击时，将文字颜色改为蓝色
|
||||
this.textColor = 'blue';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
7
src/components/WorkLoadComponents/MainSection.vue
Normal file
7
src/components/WorkLoadComponents/MainSection.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
@ -18,6 +18,16 @@ const router = createRouter({
|
||||
name:'register',
|
||||
component:()=>import('../views/AuthPage/Register.vue')
|
||||
},
|
||||
{
|
||||
path:'/LoginRegister/Login',
|
||||
name:'Login',
|
||||
component:() =>import('@/views/AuthPage/Login.vue')
|
||||
},
|
||||
{
|
||||
path:'/Project',
|
||||
name:'Project',
|
||||
component:()=>import('@/views/ProjectPage/ProjectDefaultPage.vue')
|
||||
},
|
||||
{
|
||||
path:'/Manager',
|
||||
name:'Manager',
|
||||
@ -78,11 +88,44 @@ const router = createRouter({
|
||||
}
|
||||
]
|
||||
}
|
||||
,{
|
||||
path:'/LoginRegister/Login',
|
||||
name:'Login',
|
||||
component:() =>import('@/views/AuthPage/Login.vue')
|
||||
}
|
||||
,
|
||||
{
|
||||
path:'/WorkLoad',
|
||||
name:'WorkLoad',
|
||||
component:()=>import('@/views/WorkLoadPage/WorkLoad.vue'),
|
||||
children:[
|
||||
{
|
||||
path: '/WorkLoad/PersonalInformation',
|
||||
name:'WorkLoadPersonalInformation',
|
||||
component:() =>import('@/views/WorkLoadPage/PersonalInformation.vue')
|
||||
},
|
||||
{
|
||||
path: '/WorkLoad/PersonalProject',
|
||||
name:'WorkLoadPersonalProject',
|
||||
component:()=>import('@/views/WorkLoadPage/PersonalProject.vue')
|
||||
},
|
||||
{
|
||||
path: '/WorkLoad/PersonalBelongings',
|
||||
name:'WorkLoadPersonalBelongings',
|
||||
component:()=>import('@/views/WorkLoadPage/PersonalBelongings.vue')
|
||||
},
|
||||
{
|
||||
path: '/WorkLoad/Message',
|
||||
name:'WorkLoadMessage',
|
||||
component:()=>import('@/views/WorkLoadPage/Message.vue')
|
||||
},
|
||||
{
|
||||
path: '/WorkLoad/DailyPaper',
|
||||
name:'WorkLoadDailyPaper',
|
||||
component:() =>import('@/views/WorkLoadPage/DailyPaper.vue')
|
||||
},
|
||||
{
|
||||
path:'/WorkLoad/I_Manage',
|
||||
name:'WordLoadI_Manage',
|
||||
component:()=>import('@/views/WorkLoadPage/I_Manage.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
194
src/views/ProjectPage/ProjectCard.vue
Normal file
194
src/views/ProjectPage/ProjectCard.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="w-full min-h-screen mt-2">
|
||||
<div class="container mx-auto w-3/4">
|
||||
<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 id="navbar-default" class="w-full md:block md:w-auto">
|
||||
<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>
|
||||
<a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" href="#">全部</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">Web</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">Ai</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">App</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">大数据</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-gray-800 flex space-x-5">
|
||||
<label>
|
||||
<input type="checkbox"/>
|
||||
未开始
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox"/>
|
||||
进行中
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox"/>
|
||||
已完成
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="w-full h-full mt-2">
|
||||
<div class="flex flex-col mx-auto space-y-8">
|
||||
<div class="flex space-x-12">
|
||||
<div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img21.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=true">
|
||||
<div class="flex items-center">
|
||||
<div :class="{'bg-white':LearnMore1}" class="flex absolute bottom-0 min-h-[30%] w-full">
|
||||
<h5 v-if="LearnMore1" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img22.jpg')]" @mouseleave="LearnMore2=false" @mouseover="LearnMore2=true">
|
||||
<div class="flex items-center">
|
||||
<div :class="{'bg-white':LearnMore2}" class="flex absolute bottom-0 min-h-[30%] w-full">
|
||||
<h5 v-if="LearnMore2" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore2" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img23.jpg')]" @mouseleave="LearnMore3=false" @mouseover="LearnMore3=true">
|
||||
<div class="flex items-center">
|
||||
<div :class="{'bg-white':LearnMore3}" class="flex absolute bottom-0 min-h-[30%] w-full">
|
||||
<h5 v-if="LearnMore3" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore3" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-12">
|
||||
<div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img24.jpg')]" @mouseleave="LearnMore4=false" @mouseover="LearnMore4=true">
|
||||
<div class="flex items-center">
|
||||
<div :class="{'bg-white':LearnMore4}" class="flex absolute bottom-0 min-h-[30%] w-full">
|
||||
<h5 v-if="LearnMore4" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore4" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img25.jpg')]" @mouseleave="LearnMore5=false" @mouseover="LearnMore5=true">
|
||||
<div class="flex items-center">
|
||||
<div :class="{'bg-white':LearnMore5}" class="flex absolute bottom-0 min-h-[30%] w-full">
|
||||
<h5 v-if="LearnMore5" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore5" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assert/images/img26.jpg')]" @mouseleave="LearnMore6=false" @mouseover="LearnMore6=true">
|
||||
<div class="flex items-center">
|
||||
<div :class="{'bg-white':LearnMore6}" class="flex absolute bottom-0 min-h-[30%] w-full">
|
||||
<h5 v-if="LearnMore6" class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900">项目标题</h5>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore6" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav aria-label="Page navigation example" class="mt-10">
|
||||
<ul class="flex items-center -space-x-px h-10 text-base">
|
||||
<li>
|
||||
<a 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" href="#">
|
||||
<span class="sr-only">Previous</span>
|
||||
<svg aria-hidden="true" class="w-3 h-3 rtl:rotate-180" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1 1 5l4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a 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" href="#">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg aria-hidden="true" class="w-3 h-3 rtl:rotate-180" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m1 9 4-4-4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
LearnMore1:false,
|
||||
LearnMore2:false,
|
||||
LearnMore3:false,
|
||||
LearnMore4:false,
|
||||
LearnMore5:false,
|
||||
LearnMore6:false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
12
src/views/ProjectPage/ProjectDefaultPage.vue
Normal file
12
src/views/ProjectPage/ProjectDefaultPage.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="relative w-[100%] min-h-screen">
|
||||
<div class="flex flex-col">
|
||||
<NavBar/>
|
||||
<ProjectCard/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import NavBar from "@/components/HomeComponents/NavBar.vue";
|
||||
import ProjectCard from "@/views/ProjectPage/ProjectCard.vue";
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<template></template>
|
||||
<script setup>
|
||||
</script>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full bg-gray-50">
|
||||
<nav aria-label="Breadcrumb" class="flex ml-12">
|
||||
<ol class="mt-4 inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
|
||||
<li class="inline-flex items-center">
|
||||
<a class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" href="#">
|
||||
我管理的
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m1 9 4-4-4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
<a class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white" href="#">梁溪区纪委大数据管理平台项目</a>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="mt-12 ml-12 flex space-x-16 h-full">
|
||||
<div class="flex flex-col space-y-6 border-r border-gray-200 w-96 h-full p-8">
|
||||
<p class="text-lg">项目名称：梁溪区纪委大数据管理平台项目</p>
|
||||
<p>项目周期：3个月</p>
|
||||
<p>项目开始日期：2024/3/2</p>
|
||||
<div class="space-y-2">
|
||||
<p>技术选型：</p>
|
||||
<p>前端：vue3</p>
|
||||
<p>后端：java,springboot</p>
|
||||
</div>
|
||||
<p>完成情况：进行中</p>
|
||||
<p>是否发布：未发布</p>
|
||||
<p>负责人：张三</p>
|
||||
</div>
|
||||
<div class="flex space-x-9">
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img23.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-xl font-bold tracking-tight text-gray-900">后台管理系统</p>
|
||||
<div class="flex flex-col">
|
||||
<p class="mt-2 ml-12 text-lg">剩余</p>
|
||||
<p class=" ml-12 text-xl text-green-400 font-bold">10天</p>
|
||||
</div>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img24.jpg')]" @mouseleave="LearnMore2=false" @mouseover="LearnMore2=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-xl font-bold tracking-tight text-gray-900">前台展示系统</p>
|
||||
<div class="flex flex-col">
|
||||
<p class="mt-2 ml-12 text-lg">剩余</p>
|
||||
<p class=" ml-12 text-xl text-green-400 font-bold">10天</p>
|
||||
</div>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore2" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
LearnMore1:false,
|
||||
LearnMore2:false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<template></template>
|
||||
3
src/views/WorkLoadPage/Message.vue
Normal file
3
src/views/WorkLoadPage/Message.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template></template>
|
||||
<script setup>
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<template></template>
|
||||
<script setup>
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="relative h-full bg-gray-50 flex">
|
||||
<a-card class="ml-20 mt-6 w-[300px] h-[500px] rounded-none bg-cover bg-center bg-[url('@/assert/images/img4.jpg')]"/>
|
||||
<div class="ml-24 mt-6">
|
||||
<p class="text-3xl font-bold">Sam</p>
|
||||
<p class="text-gray-600 mt-4">网页设计师</p>
|
||||
<p class="text-lg font-bold mt-10">个人经历</p>
|
||||
<p class="text-lg font-bold mt-44">受邀</p>
|
||||
<p class="text-lg font-bold mt-44">个人荣誉</p>
|
||||
</div>
|
||||
<a-card class="mt-6 rounded-2xl absolute right-20 w-96 h-[750px] border-gray-200">
|
||||
<div class=" flex flex-col space-y-52">
|
||||
<p class="text-xl font-bold">项目消息：</p>
|
||||
<p class="text-xl font-bold">项目推荐：</p>
|
||||
</div>
|
||||
</a-card>
|
||||
<div class="absolute right-[500px] bottom-10 flex space-x-5">
|
||||
<button class="rounded-lg bg-green-400 hover:bg-green-500 p-2 text-white">编辑资料</button>
|
||||
<button class="rounded-lg bg-red-500 hover:bg-red-600 p-2 text-white">修改密码</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup></script>
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="relative h-full bg-gray-50 flex">
|
||||
<div class="mt-12">
|
||||
<nav class="ml-16 flex space-x-72">
|
||||
<ul class="flex space-x-24">
|
||||
<li>全部</li>
|
||||
<li>Web</li>
|
||||
<li>Ai</li>
|
||||
<li>App</li>
|
||||
</ul>
|
||||
<ul class="flex space-x-12">
|
||||
<a-checkbox>未开始</a-checkbox>
|
||||
<a-checkbox>进行中</a-checkbox>
|
||||
<a-checkbox>已完成</a-checkbox>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="flex space-x-9 ml-16 mt-12">
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-[350px] h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img25.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">梁溪区纪委大数据管理平台项目</p>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-[350px] h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img26.jpg')]" @mouseleave="LearnMore2=false" @mouseover="LearnMore2=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">梁溪区纪委大数据管理平台项目</p>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore2" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-[350px] h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img27.jpg')]" @mouseleave="LearnMore3=false" @mouseover="LearnMore3=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">梁溪区纪委大数据管理平台项目</p>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="LearnMore3" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
<a-card class="mt-12 rounded-2xl absolute right-20 w-96 h-[750px] border-gray-200">
|
||||
<div class=" flex flex-col space-y-52">
|
||||
<p class="text-xl font-bold">项目消息：</p>
|
||||
<p class="text-xl font-bold">项目推荐：</p>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
LearnMore1:false,
|
||||
LearnMore2:false,
|
||||
LearnMore3:false
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
11
src/views/WorkLoadPage/WorkLoad.vue
Normal file
11
src/views/WorkLoadPage/WorkLoad.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-screen">
|
||||
<Header></Header>
|
||||
<MainSection></MainSection>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import Header from "@/components/WorkLoadComponents/Header.vue";
|
||||
import MainSection from "@/components/WorkLoadComponents/MainSection.vue";
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user