feat:概览(有数据),创建多层项目,创建多层子项目

src/views/projectcenter/ProjectManage.vue

@@ -139,7 +139,7 @@
                 <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
                 <div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</div>
             </div>
-            <div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
+            <div class="taskbox" @click="showModal3" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
                 <div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
                 <div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
                 <div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
@@ -185,7 +185,7 @@
                   <div class="centermain">不包含子项目，直接填写项目基础信息后创建任务</div>
                 </div>
               </router-link>             
-              <div class="taskbox" style="margin-bottom: 40px;background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);"> 
+              <div class="taskbox" @click="showModal2" style="margin-bottom: 40px;background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);"> 
                   <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
                   <div class="photo"><img src="../../assets/images/taskpage/picture7.png"/></div>
                   <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
@@ -197,6 +197,205 @@
       </div>
     </div>
     <!-- 创建项目弹窗 -->
+    <!-- 创建多层项目弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="doublepro"
+        :title="null"
+        @ok="closeModal2"
+        :footer="null"
+        :closable="false"
+        wrapClassName="doublepro"
+        width="624px"
+        height="476px"
+        >
+        <div class="modalHeader" 
+              style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+            >
+            <div class="headerLeft" style="margin-left: 32px">
+              <span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
+            </div>
+            <div style="cursor: pointer;margin-right:32px" @click="closeModal2">
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/images/basicinfo/close22.png"
+              />
+            </div>
+        </div>
+        <div class="modalMain">
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                show-count :maxlength="30"
+                placeholder="请输入项目名称"
+                style="border-radius: 8px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">分类:</div>
+            <div class="in">
+              <a-select
+                v-model:value="value"
+                placeholder="四个养成"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目经理:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请选择项目经理"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">资源归属:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="pubtn">
+                    <a-button class="pubtn1" @click="closeModal2">取消</a-button>
+                    <a-button class="pubtn2" @click="closeModal2">确定</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 创建多层项目弹窗 -->
+    <!-- 创建多层子项目弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="doublesonpro"
+        :title="null"
+        @ok="closeModal3"
+        :footer="null"
+        :closable="false"
+        wrapClassName="doublesonpro"
+        width="624px"
+        height="476px"
+        >
+        <div class="modalHeader" 
+              style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+            >
+            <div class="headerLeft" style="margin-left: 32px">
+              <span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
+            </div>
+            <div style="cursor: pointer;margin-right:32px" @click="closeModal3">
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/images/basicinfo/close22.png"
+              />
+            </div>
+        </div>
+        <div class="modalMain">
+          <div style="margin-left: 40px;margin-top: 40px">
+            <span style="color: #000000;font-size: 14px">项目归属：</span>
+            <span style="color:#999999;font-size: 14px; margin-left: 10px">管理者进阶</span>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">子项目名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请输入项目名称"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">分类:</div>
+            <div class="in">
+              <a-select
+                v-model:value="value"
+                placeholder="四个养成"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">子项目经理:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="自动带出 可编辑"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">资源归属:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                style="border-radius: 8px;height: 40px"
+              />
+            </div>
+          </div>
+          <div class="pubtn">
+                    <a-button class="pubtn1" @click="closeModal3">取消</a-button>
+                    <a-button class="pubtn2" @click="closeModal3">确定</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 创建多层子项目弹窗 -->
   </div>
 </template>
 <script>
@@ -536,6 +735,8 @@ export default {
       pageSize: 10,
       sonproject: false,
       estabish: false,
+      doublepro: false,
+      doublesonpro: false,
     });
 
 
@@ -1378,6 +1579,24 @@ export default {
     const closeModal1 = () => {
       state.estabish = false;
       
+    };
+
+    const showModal2 = () => {      
+      state.doublepro = true;
+      state.estabish = false;
+    };
+    const closeModal2 = () => {
+      state.doublepro = false;
+      
+    };
+
+    const showModal3 = () => {      
+      state.doublesonpro = true;
+      state.sonproject = false;
+    };
+    const closeModal3 = () => {
+      state.doublesonpro = false;
+      
     };
     return {
       ...toRefs(state),
@@ -1388,6 +1607,10 @@ export default {
       closeModal,
       showModal1,
       closeModal1,
+      showModal2,
+      closeModal2,
+      showModal3,
+      closeModal3,
       getTableDate,
     };
   },
@@ -1556,6 +1779,171 @@ export default {
     }
   }
 }
+.doublesonpro {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        //align-items: center;
+        margin-left: 60px;
+        .name {
+          //width: 90%;
+          // background-color: lightcoral;
+          display: flex;
+          justify-content: right;
+          margin-top: 32px;
+          align-items: center;
+          height: 40px;
+          // border: 1px solid black;
+
+          .inname {
+            color: #000000;
+            font-size: 14px;
+            margin-left: 7px;
+          }
+          .in {
+            margin-left: 14px;
+            width: 80%;
+            .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 80%;
+              height: 30px;
+            }
+            .ant-select {
+              border-radius: 5px;
+              // height: 120%;
+              width: 80%;
+              height: 40px;
+              .ant-select-selector {
+              border-radius: 8px;
+              // height: 120%;
+              width: 100%;
+              height: 40px;
+            }
+            }
+          }
+        
+      }
+      .pubtn {
+            display: flex;
+            justify-content: center;
+            margin-top: 25px;
+            //margin-bottom: 29px;
+            .pubtn1 {
+                width: 100px;
+                height: 40px;
+                margin-right: 16px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: rgba(78, 166, 255, 1);
+                font-size: 14px;
+                //line-height: 36px;
+                align-items: center;
+                background: rgba(255, 255, 255, 1)
+            }
+            .pubtn2 {
+                width: 100px;
+                height: 40px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: #FFFFFF;
+                font-size: 14px;
+                align-items: center;
+                //line-height: 36px;
+                background: #409EFF;
+            }
+        }
+      }
+    }
+  }
+}
+.doublepro {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .name {
+          width: 78%;
+          // background-color: lightcoral;
+          display: flex;
+          justify-content: right;
+          margin-top: 32px;
+          align-items: center;
+          height: 40px;
+          // border: 1px solid black;
+
+          .inname {
+            color: #000000;
+            font-size: 14px;
+            margin-left: 7px;
+          }
+          .in {
+            margin-left: 14px;
+            width: 81%;
+            .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 30px;
+            }
+            .ant-select {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 40px;
+              .ant-select-selector {
+              border-radius: 8px;
+              // height: 120%;
+              width: 100%;
+              height: 40px;
+            }
+            }
+          }
+        
+      }
+      .pubtn {
+            display: flex;
+            justify-content: center;
+            margin-top: 25px;
+            //margin-bottom: 29px;
+            .pubtn1 {
+                width: 100px;
+                height: 40px;
+                margin-right: 16px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: rgba(78, 166, 255, 1);
+                font-size: 14px;
+                //line-height: 36px;
+                align-items: center;
+                background: rgba(255, 255, 255, 1)
+            }
+            .pubtn2 {
+                width: 100px;
+                height: 40px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: #FFFFFF;
+                font-size: 14px;
+                align-items: center;
+                //line-height: 36px;
+                background: #409EFF;
+            }
+        }
+      }
+    }
+  }
+}
 .sonproject {
   .ant-modal {
     .ant-modal-body {

src/views/projectcenter/TaskPage.vue

@@ -46,30 +46,111 @@
             :tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
             <a-tab-pane key="1" tab="概览">
                 <div class="split"></div>
-                <div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
+                <!-- 概览（无数据） -->
-                <div class="second">
+                <div >
-                    <div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
+                    <div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
-                        <div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
+                    <div class="second">
-                        <div class="photo"><img src="../../assets/images/taskpage/picture1.png"/></div>
+                        <div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
-                        <div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
+                            <div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
-                        <div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div>
+                            <div class="photo"><img src="../../assets/images/taskpage/picture1.png"/></div>
-                        <div class="centermain">快速添加任务/阶段</div>
+                            <div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
+                            <div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div>
+                            <div class="centermain">快速添加任务/阶段</div>
+                        </div>
+                        <div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
+                            <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
+                            <div class="photo"><img src="../../assets/images/taskpage/picture2.png"/></div>
+                            <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
+                            <div class="centerbox" style="color: rgba(78, 166, 255, 1)">添加学员</div>
+                            <div class="centermain">快速添加学员</div>
+                        </div>
+                        <div class="taskbox" @click="showModal" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
+                            <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
+                            <div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
+                            <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
+                            <div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
+                            <div class="centermain">快速发布项目</div>
+                        </div>
                     </div>
-                    <div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
+                </div>               
-                        <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
+                <!-- 概览（无数据） -->
-                        <div class="photo"><img src="../../assets/images/taskpage/picture2.png"/></div>
+                <!-- 概览（有数据） -->
-                        <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
+                <div style="display: none">
-                        <div class="centerbox" style="color: rgba(78, 166, 255, 1)">添加学员</div>
+                    <div class="onerow"><div class="taskmain">项目概览</div></div>
-                        <div class="centermain">快速添加学员</div>
+                    <div class="second" style="margin-top: 0">
+                        <div class="nubbox">
+                            <span class="nub1">200</span>
+                            <div class="nub2">总人数</div>
+                        </div>
+                        <div class="nubbox">
+                            <span class="nub1" style="color: #FF90AE">15</span>
+                            <div class="nub2">必修课</div>
+                        </div>
+                        <div class="nubbox">
+                            <span class="nub1" style="color: #A497FF">15</span>
+                            <div class="nub2">选修课</div>
+                        </div>
+                        <div class="nubbox">
+                            <div>
+                                <span class="nub1" style="color: #5DC988">50</span><span style="color: #5DC988;font-size: 14px">%</span>
+                            </div>   
+                            <div class="nub2">完成率</div>
+                        </div>
+                        <div class="nubbox">
+                            <div>
+                                <span class="nub1" style="color: #FF90AE">30</span><span style="color: #FF90AE;font-size: 14px">%</span>
+                            </div>   
+                            <div class="nub2">必修完成率</div>
+                        </div>
+                        <div class="nubbox">
+                            <div>
+                                <span class="nub1" style="color: #A497FF">30</span><span style="color: #A497FF;font-size: 14px">%</span>
+                            </div>   
+                            <div class="nub2">选修完成率</div>
+                        </div>
                     </div>
-                    <div class="taskbox" @click="showModal" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
+                    <div class="onerow"><div class="taskmain">阶段信息</div></div>
-                        <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
+                    <div class="stagemess">
-                        <div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
+                        <div class="stage1">阶段1</div>
-                        <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
+                        <div class="stage2">阶段2</div>
-                        <div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
+                    </div>
-                        <div class="centermain">快速发布项目</div>
+                    <div class="stagesecond">
+                        <div class="staname">阶段名称：</div>
+                        <div class="stamess">管理者进阶-腾飞班1第一阶段</div>
+                    </div>
+                    <div class="stagelast">
+                        <div class="stagepro">
+                            <a-progress type="dashboard" gapDegree="0"  :percent="50" :width="140" />
+                            <div class="protext">课程完成率</div>
+                        </div>
+                        <div class="stagepro">
+                            <a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
+                            <div class="protext">考试通过率</div>
+                        </div>
+                        <div class="stagepro" style="margin-right: 0">
+                            <a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
+                            <div class="protext">作业合格率</div>
+                        </div>
+                        <div class="proright">
+                            <div class="pronub" style="margin-left: 280px">10</div>
+                            <div class="proright1">
+                                <span class="textpro">阶段任务总数</span>
+                                <a-progress :percent="50" style="width: 369px" />
+                            </div>
+                            <div class="pronub" style="margin-left: 206px">5</div>
+                            <div class="proright1">
+                                <span class="textpro">必修课</span>
+                                <a-progress :percent="25" style="width: 369px"/>
+                            </div>
+                            <div class="pronub" style="margin-left: 142px">1</div>
+                            <div class="proright1">
+                                <span class="textpro">选修课</span>
+                                <a-progress :percent="5" style="width: 369px"/>
+                            </div>
+                        </div>
                     </div>
                 </div>
+                <!-- 概览（有数据） -->
             </a-tab-pane>
             <a-tab-pane key="2" tab="任务" force-render>
                 <div class="split"></div>
@@ -266,6 +347,7 @@
             <a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
         </a-tabs>
     </div>
+<!-- 项目发布弹窗 -->
     <div>
         <a-modal
             v-model:visible="pubproject"
@@ -313,12 +395,13 @@
                     <a-checkbox v-model:checked="checked2"><span class="sendpeo">发给学员</span></a-checkbox>
                 </div>
                 <div class="pubtn">
-                    <a-button class="pubtn1">取消</a-button>
+                    <a-button class="pubtn1" @click="closeModal">取消</a-button>
-                    <a-button class="pubtn2">发布</a-button>
+                    <a-button class="pubtn2" @click="closeModal">发布</a-button>
                 </div>
             </div>
         </a-modal>
     </div>
+<!-- 项目发布弹窗 -->
 </div>
 </template>
 <script>
@@ -635,11 +718,11 @@ export default {
         }
     
     }
-        .split {
+    .split {
-            width: 100%;
+        width: 100%;
-            height: 20px;
+        height: 20px;
-            background-color: #edf0f5;
+        background-color: #edf0f5;
-         }
+    }
     .content {
         //display: flex;
         //margin: 0 37px;
@@ -702,15 +785,37 @@ export default {
         }
         .second {
             display: flex;
-            justify-content: center;
+            justify-content: left;
             flex-wrap: wrap;
             margin-top: 40px;
+            margin-left: 20px;
+            .nubbox {
+                width: 253px;
+                height: 116px;
+                margin-top: 20px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                background: #FAFBFC;
+                border-radius: 10px;
+                margin-left: 15px;
+                .nub1 {
+                    color: #FFB54A;
+                    font-size: 30px;
+                    font-weight: 700;
+                }
+                .nub2 {
+                    color: #6D7584;
+                    font-size: 14px;
+                }
+            }
             .taskbox {
                 width: 412px;
                 height: 160px;
                 border-radius: 10px;
                 position: relative;
-                margin-right: 68px;
+                margin-left: 68px;
                 margin-bottom: 40px;
                 cursor: pointer;
                 .leftt {
@@ -745,6 +850,106 @@ export default {
                 }
             }
         }
+        .stagemess {
+            display: flex;
+            margin-left: 38px;
+            .stage1 {
+                width: 100px;
+                height: 33px;
+                text-align: center;
+                line-height: 34px;
+                border-radius: 6px;
+                color: #FFFFFF;
+                font-size: 16px;
+                background: #4EA6FF;
+                margin-right: 10px;
+                margin-top: 19px;
+                cursor: pointer;
+            }
+            .stage2 {
+                width: 100px;
+                height: 33px;
+                text-align: center;
+                line-height: 34px;
+                border-radius: 6px;
+                border: 1px solid #EBEEF3;
+                color: #000000;
+                font-size: 16px;
+                background: #FFFFFF;
+                margin-right: 10px;
+                margin-top: 19px;
+                cursor: pointer;
+            }
+        }
+        .stagesecond {
+            display: flex;
+            margin-left: 39px;
+            margin-top: 29px;
+            .staname {
+                color: #999BA3;
+                font-size: 14px;
+            }
+            .stamess {
+                color: #4F5156;
+                font-size: 14px;
+            }
+        }
+        .stagelast {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin-bottom: 55px;
+            .stagepro {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                margin-top: 55px;
+                margin-right: 120px;
+                .ant-progress-circle-path {
+                    stroke: #4EA6FF;
+                }
+                .ant-progress-text {
+                    color: #4EA6FF;
+                    font-weight: 700;
+                }
+                .protext {
+                    color: #6D7584;
+                    font-size: 14px;
+                    margin-top: 25px;
+                }
+            }
+            .proright {
+                width: 500px;
+                margin-top: 55px;
+                margin-left: 50px;
+                .ant-progress-bg {
+                    height: 24px !important;
+                    background: #4EA6FF;
+                }
+                .ant-progress-inner {
+                    height: 24px;
+                }
+                .pronub {
+                    color: #4EA6FF;
+                    font-size: 14px;
+                    margin: 5px 0;
+                }
+                .proright1 {
+                    display: flex;
+                    justify-content: right;
+                    .textpro {
+                        color: #6D7584;
+                        font-size: 14px;
+                        margin-right: 20px;
+                    }
+                    .ant-progress-text {
+                        color: #4EA6FF;
+                        font-size: 14px;
+                        font-weight: 700;
+                    }
+                }
+            }
+        }
         .stage {
             display: flex;
             height: 49px;