概览页面

src/views/OverviewMallResources/MyProcess.vue

@@ -4,23 +4,29 @@
       我的流程
     </div>
     <div class="centent2">
-      <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 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;">
+        <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>
-        </Card>
-        <Divider v-if="index === 2" :class="`centent2-2`" type="vertical" class="md:h-25" />
-      </template>
+          </Card>
+          <Divider v-if="index === 2" :class="`centent2-2`" type="vertical" class="md:h-25" />
+        </template>
+      </div>
     </div>
     <List :pagination="pagination">
       <template v-for="item in dataList" :key="item.id">
@@ -59,8 +65,6 @@ const dataList = ref(ListData)
 </script>
 <style lang="less" scoped>
 .centent2{
-  display: flex;
-  justify-content: center;
   .centent2-1{
     display: flex;
     align-items: center;
@@ -68,7 +72,8 @@ const dataList = ref(ListData)
     .centent2-1-1{
       display:flex;
       justify-content: center;
-      align-items: center
+      align-items: center;
+      font-size: 20px;
     }
   }
   .centent2-2{

src/views/OverviewMallResources/index.vue

 <template>
   <div class="p-4">
+    <div style="display: flex;justify-content: center;margin-bottom: 20px">
+      <a-input-search
+        v-model:value="value"
+        placeholder=""
+        style="width: 800px;"
+        @search="onSearch"
+      />
+      <Icon icon="mdi:funnel" style="font-size: 20px;color: rgb(27, 148, 243);margin-left: 5px;margin-right: 5px"/>
+      <Icon icon="ant-design:folder-open-outlined" style="font-size: 20px"/>
+    </div>
     <ResourceStatistics :loading="loading" class="enter-y" />
     <div class="!my-4 md:flex enter-y">
       <PopularResources class="md:w-1/2 w-full" :loading="loading" />
@@ -19,6 +29,7 @@ import PopularResources from './PopularResources.vue';
 import MyProcess from './MyProcess.vue';
 import { Tag, Card } from 'ant-design-vue';
 import StatisticalChart from './StatisticalChart.vue'
+import Icon from "@/components/Icon/Icon.vue";
 
 const loading = ref(false);