首页-基本完成

src/components/FlowChart/index.vue

@@ -64,11 +64,15 @@ const xuanran = ()=>{
 }
 
 watch([() => props.dataList, () => props.activeIndex], () => {
-  xuanran()
+  if(!props.itemWidth){
+    xuanran()
+  }
 });
 onMounted(() => {
   nextTick(()=>{
-    xuanran()
+    if(!props.itemWidth){
+      xuanran()
+    }
   })
 
 });

src/views/index.vue

@@ -105,7 +105,39 @@
         </div>
         <!--        右边下面的div-->
         <div  class="right-div-bottom">
-
+            <div class="right-div-bottom-title">
+                <span style="font-size: 18px;color: #303133">我的审批</span>
+              <div style="display: flex;align-items: center">
+                <span style="font-size: 14px;color: #909399">查看更多审批</span>
+                <el-icon size="14" color="#909399" style="margin-left:20px"><ArrowRightBold /></el-icon>
+              </div>
+            </div>
+            <div class="right-div-bottom-body">
+              <div class="right-div-bottom-body-item" v-for="item in 3">
+<!--                上-->
+                <div style="display: flex;height: 20%;flex-direction: column;justify-content: space-between;">
+                    <span style="font-size: 16px;color: #303133">项目名称</span>
+                   <div style="display: flex;">
+                     <el-tag style="font-size: 12px" size="small" checked>我发起的</el-tag>
+                     <el-tag size="small" type="info" style="margin-left: 10px;font-size: 12px">参与的</el-tag>
+                   </div>
+                </div>
+<!--                中-->
+                <div style="margin-top: 15px;width: 100%;height: 35%;display: flex;justify-content: space-between;flex-direction: column;">
+                  <span style="font-size: 14px;color: #909399">审批进度：</span>
+                  <el-steps  style="width: 100%;" :active="2" >
+                    <el-step title="个人"  />
+                    <el-step title="事业部负责人"/>
+                    <el-step title="总经理" />
+                  </el-steps>
+                </div>
+<!--                下-->
+                <div style="height: 30%;display: flex;align-items: center;justify-content: space-between">
+                  <span style="font-size: 14px;color: #909399">申请日期：<span>2024.10.3</span></span>
+                  <el-button size="small"  type="primary">查看详情</el-button>
+                </div>
+              </div>
+            </div>
         </div>
       </div>
     </div>
@@ -136,6 +168,11 @@ const projectTaskList = reactive([
     principal:'张娜娜'
   }
 ])
+
+//流程图
+const list = ['个人','事业部负责人','总经理']  // 流程图内容
+
+const stepActive = ref(1);
 //代办信息列表
 const commissionInfoList = reactive([
   '您有一份关于市场推广预算的申请待批复',
@@ -184,7 +221,15 @@ const isShowDot = (data)=>{
 }
 :deep(.el-progress__text span) {
   font-size: 12px;
-
+}
+:deep(.el-step__title.is-finish) {
+  font-size: 12px;
+}
+:deep(.el-step__title) {
+  font-size: 12px;
+}
+:deep(.el-step__title.is-process) {
+  color: #767676;
 }
 .cell-calender-div{
   display: flex;
@@ -293,7 +338,6 @@ const isShowDot = (data)=>{
             height: 15%;
             width: 95%;
             border-radius: 5px;
-            background-color: red;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -302,9 +346,36 @@ const isShowDot = (data)=>{
       }
     }
     .right-div-bottom{
+      background-color: white;
       height: 49%;
+      display: flex;
+      flex-direction: column;
       margin-top: 22.8px;
-      background-color: #1890ff;
+      .right-div-bottom-title{
+        padding: 29px 23px 12px 23px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .right-div-bottom-body{
+        flex: 1;
+        padding: 0 24px 20px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .right-div-bottom-body-item{
+          border: 1px solid #DCDFE6;
+          border-radius: 8px;
+          width: 32.5%;
+          padding: 22px 18px 0 18px;
+          //background-color: red;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+      }
     }
   }
 }