supervision-vue/src/components/negative/approve-description.vue

<template>
    <header>审批意见</header>
    <div class="comments-container flex gap-20">
        <div
            class="item"
            v-for="(item, index) in approves"
            :key="index"
            :approved="item.approved"
        >
            <div class="flex center mb-20 relative comments-header">
                <icon
                    name="local-icon-return"
                    :size="41"
                    color="#FF0606"
                    v-if="item.state === ApproveState.REJECTED"
                />
                <icon
                    name="el-icon-CircleCheck"
                    :size="41"
                    color="var(--primary-color)"
                    v-else-if="item.state === ApproveState.APPROVED"
                />
                <div class="icon" v-else></div>
            </div>
            <h1 class="text-center mb-16">
                <span
                    v-if="item.state === ApproveState.REJECTED"
                    style="color: #ff0606"
                    >退回整改</span
                >
                <span v-else-if="item.state === ApproveState.APPROVED" style="color: var(--primary-color)">审批通过</span>
                <span v-else>待审批</span>
            </h1>
            <h2 class="text-center mb-20">
                {{ item.handlerDepartName }} {{ item.handlerName }}
            </h2>
            <div
                :danger="item.state === ApproveState.REJECTED"
                style="padding: 8px"
                v-if="item.state"
            >
                <h3>
                    {{
                        item.state === ApproveState.REJECTED
                            ? "退回整改意见"
                            : "审批意见"
                    }}
                </h3>
                <p style="font-weight: 700">{{ item.comments }}</p>
                <h4 class="text-right">{{ item.updateTime }}</h4>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ApproveState } from "@/enums/flowEnums";

const approves = inject("approves");
console.log("approves", approves);
</script>
<style lang="scss" scoped>
header {
    font-size: 20px;
    color: var(--primary-color);
    padding: 20px 0;
}
.item {
    width: 100%;
    padding: 8px;
    --base-color: #999;
    --second-color: #d8d8d8;
    .comments-header {
        &::before {
            display: block;
            content: "";
            position: absolute;
            top: 50%;
            right: calc(50% + 30px);
            width: calc(100% - 30px);
            border-top: 2px solid var(--second-color);
        }
    }
    &:first-child .comments-header::before {
        display: none;
    }
    &[approved="true"] {
        --base-color: var(--primary-color);
        --second-color: #8595fb;
    }
    h1 {
        color: var(--base-color);
        font-size: 18px;
        font-weight: 700;
    }
    h2 {
        font-size: 16px;
        font-weight: 500;
    }
    h3 {
        font-size: 14px;
        color: #666;
        font-weight: 500;
        margin-bottom: 8px;
        margin-top: 0;
    }
    h4 {
        font-size: 12px;
        color: #666;
        font-weight: 500;
    }
    p {
        color: #333;
    }
    div[danger="true"] {
        background-color: #feeded;
    }
    .icon {
        width: 22px;
        height: 22px;
        border: 3px solid #e0e0e0;
        border-radius: 50%;
        margin: 6.5px;
    }
}
</style>