feat: 修改审批记录的样式

src/components/SecondDev/FlowHistory.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="geg-flow-history">
+        <div v-for="(item, index) in items" :class="{ sep: index !== 0 }" class="item">
+            <template v-if="mode === 'simple'"></template>
+            <template v-if="mode === 'complex'">
+                <div class="row">
+                    <div class="col-1">审批人</div>
+                    <div class="col-2">用时：1小时10分</div>
+                    <div class="col-3 agree">{{ item.nodeName }}</div>
+                </div>
+                <div class="row">
+                    <div class="col-1 position">职务</div>
+                    <div class="col-2">2023-03-27 12:00:00</div>
+                    <div class="col-3">{{ item.comment }}</div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style lang="less">
+    .geg-flow-history {
+        .row {
+            display: flex;
+            flex-direction: row;
+            margin: 6px 0;
+            line-height: 20px;
+            font-size: 14px;
+        }
+
+        .col-1 {
+            width: 180px;
+        }
+
+        .col-2 {
+            width: 180px;
+            color: #5a6875;
+        }
+
+        .col-3 {
+            flex: 1;
+
+            &.agree {
+                color: #52c41a;
+            }
+        }
+
+        .position{
+            color: #90a0af;
+        }
+
+        .item {
+            padding: 8px 0;
+
+            &.sep {
+                border-top: 1px solid #e9e9e9;
+            }
+        }
+    }
+</style>
+
+<script setup>
+    import { defineProps, ref } from 'vue';
+
+    const props = defineProps({
+        mode: {
+            type: String,
+            default: 'complex'
+        },
+        items: Array,
+        autoHide: {
+            type: Boolean,
+            default: true
+        },
+        sort: {
+            type: String,
+            default: 'desc'
+        }
+    });
+</script>