数据要素-概览

src/views/OverviewMallResources/MyProcess.vue

 <template>
   <Card :loading="loading">
-    <div class="centent1">
-      我的流程
-    </div>
+    <div class="centent1"> 我的流程 </div>
     <div class="centent2">
-      <div style="display: flex;justify-content: center;width:100%">
-        <div style="margin-left: 18%">我发起的</div>
-        <div style="margin-left: 30%">我的代办</div>
-      </div>
-      <div style="display: flex;justify-content: center;">
+      <div style="display: flex; justify-content: center">
         <template v-for="(item, index) in CardList2" :key="item.title">
-          <Card
-            size="small"
-            :loading="loading"
-            hoverable="true"
-            class="md:w-25 w-full !md:mt-0 h-25 md:h-25"
-            :class="[{ 'md:mr-4': index + 1 < 4, 'mt-4': index > 0,'bg-color':(index % 4) + 1 },`bg-color-${(index % 4) + 1}`]"
-          >
-            <div :class="`centent2-1`" class="md:h-20">
-              <div>
-                <span class="centent2-1-1">{{item.total}}</span>
-                <span>{{item.title}}</span>
-              </div>
+          <div>
+            <div style="margin-bottom: 5px"
+              ><div v-if="index === 1" style="padding-left: 22px">我发起的</div>
+              <div v-else-if="index === 3" style="padding-left: 22px">我的代办</div>
+              <div v-else>&nbsp;</div>
             </div>
-          </Card>
-          <Divider v-if="index === 2" :class="`centent2-2`" type="vertical" class="md:h-25" />
+            <Card
+              size="small"
+              :loading="loading"
+              hoverable="true"
+              class="md:w-25 w-full !md:mt-0 h-25 md:h-25"
+              :class="[
+                { 'md:mr-4': index + 1 < 4, 'mt-4': index > 0, 'bg-color': (index % 4) + 1 },
+                `bg-color-${(index % 4) + 1}`,
+              ]"
+            >
+              <div :class="`centent2-1`" class="md:h-20">
+                <div>
+                  <span class="centent2-1-1">{{ item.total }}</span>
+                  <span>{{ item.title }}</span>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <Divider v-if="index === 2" :class="`centent2-2`" type="vertical" class="md:h-35" />
         </template>
       </div>
     </div>
@@ -33,12 +37,17 @@
         <List.Item class="centent3" @click="">
           <List.Item.Meta class="centent3-1">
             <template #avatar>
-              <Icon style="font-size: 20px" v-if="item.icon" :icon="item.icon" :color="item.color" />
+              <Icon
+                style="font-size: 20px"
+                v-if="item.icon"
+                :icon="item.icon"
+                :color="item.color"
+              />
             </template>
             <template #title>
               <div class="centent3-1-1">
                 <span>{{ item.title }}</span>
-                <span style="color:rgb(161, 161, 161);">当前审批人: {{item.approver}}</span>
+                <span style="color: rgb(161, 161, 161)">当前审批人: {{ item.approver }}</span>
               </div>
             </template>
             <template #description>
@@ -54,52 +63,52 @@
   </Card>
 </template>
 <script lang="ts" setup>
-import { Tag, Card,Select,List,Divider } from 'ant-design-vue';
-import { BasicTable, useTable, TableAction } from '@/components/Table';
-import {ListData, TableData2,CardList2} from "./overviewMallResourceData";
-import {columns2} from "./overviewMallResource.data";
-import { ref } from 'vue';
-import Icon from '@/components/Icon/Icon.vue';
+  import { Tag, Card, Select, List, Divider } from 'ant-design-vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { ListData, TableData2, CardList2 } from './overviewMallResourceData';
+  import { columns2 } from './overviewMallResource.data';
+  import { ref } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
 
-const dataList = ref(ListData)
+  const dataList = ref(ListData);
 </script>
 <style lang="less" scoped>
-.centent2{
-  .centent2-1{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .centent2-1-1{
-      display:flex;
-      justify-content: center;
+  .centent2 {
+    .centent2-1 {
+      display: flex;
       align-items: center;
-      font-size: 20px;
+      justify-content: center;
+      .centent2-1-1 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+      }
+    }
+    .centent2-2 {
+      margin-right: 20px;
+      border: 1px solid rgb(240, 242, 243);
     }
   }
-  .centent2-2{
-    margin-right: 20px;
-    border:1px solid rgb(240, 242, 243);
+  .centent1 {
+    display: flex;
+    margin-bottom: 10px;
+    font-weight: bold;
   }
-}
-.centent1{
-  display: flex;
-  margin-bottom: 10px;
-  font-weight: bold;
-}
-.centent3{
-  background-color: rgb(250, 251, 252);
-  margin-top: 10px;
-  .centent3-1{
-    display: flex !important;
-    align-items: center !important;
-    .centent3-1-1{
-      display: flex;
-      justify-content: space-between;
-    }
-    .centent3-1-2{
-      display: flex;
-      justify-content: space-between;
+  .centent3 {
+    background-color: rgb(250, 251, 252);
+    margin-top: 10px;
+    .centent3-1 {
+      display: flex !important;
+      align-items: center !important;
+      .centent3-1-1 {
+        display: flex;
+        justify-content: space-between;
+      }
+      .centent3-1-2 {
+        display: flex;
+        justify-content: space-between;
+      }
     }
   }
-}
 </style>