From 187d20120535910574c3fe4cfb7dfa92245e2521 Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Sun, 17 Mar 2024 14:06:15 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E5=AD=90=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/WorkLoadPage/ChildModule.vue | 96 ++++++++++++--------------
 1 file changed, 45 insertions(+), 51 deletions(-)

diff --git a/src/views/WorkLoadPage/ChildModule.vue b/src/views/WorkLoadPage/ChildModule.vue
index a8017c5..fc331ad 100644
--- a/src/views/WorkLoadPage/ChildModule.vue
+++ b/src/views/WorkLoadPage/ChildModule.vue
@@ -1,58 +1,52 @@
 <template>
-  <div class="container">
-    <a-breadcrumb class="mt-6 ml-6">
-      <a-breadcrumb-item><a href="/WorkLoad/I_Manage">我管理的项目</a></a-breadcrumb-item>
-      <a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
-      <a-breadcrumb-item><a href="">子模块</a></a-breadcrumb-item>
-    </a-breadcrumb>
-    <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" @click="showAddModal">新增子模块</button>
+  <div class="flex-col space-y-8">
+    <div class="container">
+      <a-breadcrumb class="mt-6 ml-6">
+        <a-breadcrumb-item><a href="/WorkLoad/I_Manage">我管理的项目</a></a-breadcrumb-item>
+        <a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
+        <a-breadcrumb-item><a href="">子模块</a></a-breadcrumb-item>
+      </a-breadcrumb>
+      <div class="flex absolute right-8 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" @click="showAddModal">新增子模块</button>
+      </div>
+    </div>
+    <div class=" flex w-4/5 justify-center h-auto ml-24">
+      <div class="flex  flex-wrap container justify-center">
+        <div v-for="(ChildModule, index) in ChildModules" :key="index" class="p-4 w-1/3" >
+          <a-card class="relative w-2/3 bg-blue-400 lg:h-36 md:h-24 text-white rounded-xl">
+            <div class="flex space-x-9">
+              <p class="absolute lg:left-4 md:left-0 top-4">{{ChildModule.name}}</p>
+              <p class="absolute right-4 top-4">负责人: {{ChildModule.principalId }}</p>
+            </div>
+            <div class="flex flex-col mt-8">
+              <p class="text-green-100">剩余 3 天</p>
+              <CaretUpOutlined class="absolute bottom-[32%] ml-2"/>
+            </div>
+            <div class="left-0 absolute bottom-0 h-[35%] w-full bg-white flex justify-center items-center space-x-3">
+              <div class="text-blue-400 flex absolute md:text-sm lg:left-5 md:left-2">
+                <CheckOutlined class="mt-1"/>
+                <p v-if="ChildModule.isFinish === 2">进行中</p>
+                <p v-if="ChildModule.isFinish === 1">已完成</p>
+                <p v-if="ChildModule.isFinish === 0">未开始</p>
+                <p v-if="ChildModule.isFinish === -1">暂停中</p>
+              </div>
+              <div class="flex absolute lg:right-12 md:right-6">
+                <p class="text-blue-400 font-bold md:text-lg lg:text-xl sm:text-sm">{{ChildModule.workLoad}}</p>
+                <p class="text-blue-400 mt-2">人/天</p>
+              </div>
+              <button class="absolute lg:right-4 md:right-2 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" @click="$router.push('/WorkLoad/I_Manage/ModuleInfo/'+ChildModule.id)">
+                <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>
     </div>
   </div>
-  <div class="mt-12 ml-8 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 v-for="(ChildModule, index) in ChildModules" :key="index"  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">{{ChildModule.name}}</p>
-          <p class="absolute right-4 top-4">负责人: {{ChildModule.principalId }}</p>
-        </div>
-        <div class="flex flex-col mt-8">
-          <p class="text-green-100">剩余 3 天</p>
-          <CaretUpOutlined class="absolute bottom-[32%] ml-2"/>
-        </div>
-        <div class="left-0 absolute bottom-0 h-[35%] w-full bg-white flex justify-center items-center space-x-3">
-          <div class="text-blue-400 flex absolute left-5">
-            <CheckOutlined class="mt-1"/>
-            <p v-if="ChildModule.isFinish === 2">进行中</p>
-            <p v-if="ChildModule.isFinish === 1">已完成</p>
-            <p v-if="ChildModule.isFinish === 0">未开始</p>
-            <p v-if="ChildModule.isFinish === -1">暂停中</p>
-          </div>
-          <div class="flex absolute right-16">
-            <p class="text-blue-400 font-bold text-2xl">{{ChildModule.workLoad}}</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" @click="$router.push('/WorkLoad/I_Manage/ModuleInfo/'+ChildModule.id)">
-            <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>
   <!--新增子模块对话框-->
   <a-modal v-model:open="AddModule" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子模块">
     <a-form>