diff --git a/src/components/WorkLoadComponents/Header.vue b/src/components/WorkLoadComponents/Header.vue
new file mode 100644
index 0000000..daa90dd
--- /dev/null
+++ b/src/components/WorkLoadComponents/Header.vue
@@ -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>
diff --git a/src/components/WorkLoadComponents/MainSection.vue b/src/components/WorkLoadComponents/MainSection.vue
new file mode 100644
index 0000000..4d15cce
--- /dev/null
+++ b/src/components/WorkLoadComponents/MainSection.vue
@@ -0,0 +1,7 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script setup>
+
+</script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index e9f3826..b235295 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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')
+        },
+      ]
+    },
   ]
 })
 
diff --git a/src/views/ProjectPage/ProjectCard.vue b/src/views/ProjectPage/ProjectCard.vue
new file mode 100644
index 0000000..fb97fcd
--- /dev/null
+++ b/src/views/ProjectPage/ProjectCard.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/ProjectPage/ProjectDefaultPage.vue b/src/views/ProjectPage/ProjectDefaultPage.vue
new file mode 100644
index 0000000..0e5f473
--- /dev/null
+++ b/src/views/ProjectPage/ProjectDefaultPage.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/WorkLoadPage/DailyPaper.vue b/src/views/WorkLoadPage/DailyPaper.vue
index e69de29..b22b8ec 100644
--- a/src/views/WorkLoadPage/DailyPaper.vue
+++ b/src/views/WorkLoadPage/DailyPaper.vue
@@ -0,0 +1,3 @@
+<template></template>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/views/WorkLoadPage/I_Manage.vue b/src/views/WorkLoadPage/I_Manage.vue
index e69de29..be77a6e 100644
--- a/src/views/WorkLoadPage/I_Manage.vue
+++ b/src/views/WorkLoadPage/I_Manage.vue
@@ -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>
diff --git a/src/views/WorkLoadPage/I_Responsible.vue b/src/views/WorkLoadPage/I_Responsible.vue
index e69de29..41a40c8 100644
--- a/src/views/WorkLoadPage/I_Responsible.vue
+++ b/src/views/WorkLoadPage/I_Responsible.vue
@@ -0,0 +1 @@
+<template></template>
\ No newline at end of file
diff --git a/src/views/WorkLoadPage/Message.vue b/src/views/WorkLoadPage/Message.vue
new file mode 100644
index 0000000..b22b8ec
--- /dev/null
+++ b/src/views/WorkLoadPage/Message.vue
@@ -0,0 +1,3 @@
+<template></template>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/views/WorkLoadPage/Messmage.vue b/src/views/WorkLoadPage/Messmage.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/WorkLoadPage/PersonalBelongings.vue b/src/views/WorkLoadPage/PersonalBelongings.vue
index e69de29..b22b8ec 100644
--- a/src/views/WorkLoadPage/PersonalBelongings.vue
+++ b/src/views/WorkLoadPage/PersonalBelongings.vue
@@ -0,0 +1,3 @@
+<template></template>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/views/WorkLoadPage/PersonalInformation.vue b/src/views/WorkLoadPage/PersonalInformation.vue
index e69de29..ceb15fd 100644
--- a/src/views/WorkLoadPage/PersonalInformation.vue
+++ b/src/views/WorkLoadPage/PersonalInformation.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/WorkLoadPage/PersonalProject.vue b/src/views/WorkLoadPage/PersonalProject.vue
index e69de29..00ee73f 100644
--- a/src/views/WorkLoadPage/PersonalProject.vue
+++ b/src/views/WorkLoadPage/PersonalProject.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/WorkLoadPage/WorkLoad.vue b/src/views/WorkLoadPage/WorkLoad.vue
new file mode 100644
index 0000000..59c9f12
--- /dev/null
+++ b/src/views/WorkLoadPage/WorkLoad.vue
@@ -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>
\ No newline at end of file