后端静态页面

src/components/WorkLoadComponents/Header.vue

@@ -122,6 +122,9 @@
             <li>
               <a class="text-gray-900 custom-link" href="/WorkLoad/I_Manage">我管理的</a>
             </li>
+            <li>
+              <a class="text-gray-900 custom-link" href="/WorkLoad/I_Responsible">我负责的</a>
+            </li>
           </ul>
         </div>
       </div>

src/router/index.js

@@ -124,6 +124,16 @@ const router = createRouter({
           name:'WordLoadI_Manage',
           component:()=>import('@/views/WorkLoadPage/I_Manage.vue')
         },
+        {
+          path: '/WorkLoad/I_Responsible',
+          name:'WorkLoadI_Responsible',
+          component:() =>import('@/views/WorkLoadPage/I_Responsible.vue')
+        },
+        {
+          path:'/WorkLoad/I_Manage/Back',
+          name:'WorkLoadI_ManageBack',
+          component:()=>import('@/views/WorkLoadPage/Back.vue')
+        },
       ]
     },
   ]

src/views/WorkLoadPage/Back.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="flex relative">
+    <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 @click="$router.push('/WorkLoad/I_Manage')">
+          <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>
+        <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="flex absolute right-8 mt-6 space-x-4">
+      <button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
+      <button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white">新增子模块</button>
+    </div>
+  </div>
+  <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-80 h-full p-8">
+      <p class="text-lg">子系统名称：后台管理系统</p>
+      <p>子系统周期：10天</p>
+      <p>项目开始时间：</p>
+      <p>项目完成时间：</p>
+      <div class="space-y-2">
+        <p>工作量：</p>
+        <p>20人/天</p>
+      </div>
+    </div>
+
+    <div class="flex space-x-9">
+      <a-card class="relative bg-blue-400 w-72 h-36 text-white rounded-xl">
+        <div class="flex space-x-9">
+          <p class="absolute left-4 top-4">登录注册模块</p>
+          <p class="absolute right-4 top-4">负责人: 无</p>
+        </div>
+       <div class="left-0 absolute bottom-0 h-[35%] w-full bg-white flex justify-center items-center space-x-3">
+          <div class="flex absolute right-16">
+            <p class="text-blue-400 font-bold text-2xl">2</p>
+            <p class="text-blue-400 mt-2">人/天</p>
+          </div>
+          <button class="absolute right-8 w-6 h-6 flex items-center justify-center bg-blue-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>
+      </a-card>
+      <a-card class="relative bg-teal-300 w-72 h-36 text-white rounded-xl">
+        <div class="flex space-x-9">
+          <p class="absolute left-4 top-4">用户管理模块</p>
+          <p class="absolute right-4 top-4">负责人: 无</p>
+        </div>
+        <div class="left-0 absolute bottom-0 h-[35%] w-full bg-white flex justify-center items-center space-x-3">
+          <div class="flex absolute right-16">
+            <p class="text-teal-300 font-bold text-2xl">2</p>
+            <p class="text-teal-300 mt-2">人/天</p>
+          </div>
+          <button class="absolute right-8 w-6 h-6 flex items-center justify-center bg-teal-300 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>
+      </a-card>
+      <a-card class="relative bg-rose-400 w-72 h-36 text-white rounded-xl">
+        <div class="flex space-x-9">
+          <p class="absolute left-4 top-4">权限管理模块</p>
+          <p class="absolute right-4 top-4">负责人: 无</p>
+        </div>
+        <div class="left-0 absolute bottom-0 h-[35%] w-full bg-white flex justify-center items-center space-x-3">
+          <div class="flex absolute right-16">
+            <p class="text-rose-400 font-bold text-2xl">2</p>
+            <p class="text-rose-400 mt-2">人/天</p>
+          </div>
+          <button class="absolute right-8 w-6 h-6 flex items-center justify-center bg-rose-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>
+      </a-card>
+    </div>
+  </div>
+</template>
+<script setup>
+
+</script>

src/views/WorkLoadPage/I_Manage.vue

@@ -18,7 +18,7 @@
       </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">
+      <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
         <p class="text-lg">项目名称：梁溪区纪委大数据管理平台项目</p>
         <p>项目周期：3个月</p>
         <p>项目开始日期：2024/3/2</p>
@@ -40,7 +40,7 @@
               <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">
+              <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" @click="$router.push('/WorkLoad/I_Manage/Back')">
                 <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>
@@ -67,18 +67,12 @@
       </div>
     </div>
   </div>
-
 </template>
 
 
-<script>
+<script setup>
+import {ref} from 'vue';
 
-export default {
+const LearnMore1 = ref(false);
-  data() {
+const LearnMore2 = ref(false);
-    return {
-      LearnMore1:false,
-      LearnMore2:false,
-    };
-  },
-};
 </script>

src/views/WorkLoadPage/Message.vue

@@ -36,7 +36,7 @@
             <td class="px-6 py-4">
               时间
             </td>
-            <td class="px-6 py-4">
+            <td class="px-6 py-4 flex justify-end">
               <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
             </td>
           </tr>
@@ -47,7 +47,7 @@
             <td class="px-6 py-4">
               时间
             </td>
-            <td class="px-6 py-4">
+            <td class="px-6 py-4 flex justify-end">
               <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
             </td>
           </tr>
@@ -58,7 +58,7 @@
             <td class="px-6 py-4">
               时间
             </td>
-            <td class="px-6 py-4 flex">
+            <td class="px-6 py-4 flex justify-end">
               <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
             </td>
           </tr>

src/views/WorkLoadPage/PersonalProject.vue

@@ -3,10 +3,10 @@
     <div class="mt-12">
       <nav class="ml-16 flex space-x-72">
         <ul class="flex space-x-24">
-          <li>全部</li>
+          <li class="hover:text-blue-500">全部</li>
-          <li>Web</li>
+          <li class="hover:text-blue-500">Web</li>
-          <li>Ai</li>
+          <li class="hover:text-blue-500">Ai</li>
-          <li>App</li>
+          <li class="hover:text-blue-500">App</li>
         </ul>
         <ul class="flex space-x-12">
           <a-checkbox>未开始</a-checkbox>