performance-test/src/components/MessageCom.vue

<template>
    <div class="Information">
        <div class="Total" v-if="showfirstly">
            <p class="captionText">总容量</p>
            <p class="strong"><span>{{ totalCapacity }}</span>MW</p>
            <p class="bottomText">此信息仅作为布局</p>
        </div>

        <div class="Total potential" v-if="showfourth">
            <p class="captionText">电力价格</p>
            <p class="strong"><span>{{ potentialIssuesCost }}</span>/MWh</p>
            <p class="bottomText">{{ potentialIssuesMWh }}/yr <span class="greenText">{{ potentialIssuesIncrease
                    }}</span></p>
        </div>


        <div class="Total issues" v-if="showsecond">
            <p class="captionText">总容量</p>
            <p class="strong"><span>{{ totalCapacity }}</span>检查需要注意</p>
            <p class="bottomText"><span>{{ openIssues }} 开放的</span><span class="greenText">{{ fixedIssues }}
                    固定的</span><span class="yellowText">{{ unverifiedIssues }} 未证实的</span></p>
        </div>

        <div class="Total potential" v-if="showthird">
            <p class="captionText">AEP 潜在开放性问题</p>
            <p class="strong"><span>{{ potentialIssuesCost }}</span>/yr</p>
            <p class="bottomText">{{ potentialIssuesMWh }}/yr <span class="greenText">{{ potentialIssuesIncrease
                    }}</span></p>
        </div>

    

        <div class="Total earnings" v-if="showfifth">
            <p class="captionText">AEP 固定问题收益</p>
            <p class="strong"><span>{{ potentialIssuesCost }}</span>/yr</p>
            <p class="bottomText">{{ potentialIssuesCost }}/yr <span class="greenText">{{ fixedIssuesIncrease }}</span>
            </p>
        </div>


    </div>
</template>

<script>
export default {
    props: {
        showfirstly: Boolean,
        showsecond: Boolean,
        showthird: Boolean,
        showfourth: Boolean,
        showfifth: Boolean,
        totalCapacity: String,
        totalIssues: String,
        openIssues: String,
        fixedIssues: String,
        unverifiedIssues: String,
        potentialIssuesCost: String,
        potentialIssuesMWh: String,
        potentialIssuesIncrease: String,
        fixedIssuesEarnings: String,
        fixedIssuesMWh: String,
        fixedIssuesIncrease: String
    }
}
</script>

<style lang="scss" scoped>
.Information {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;


    .Total {

        flex: 1 1 calc(20% - 20px);
        /* Initially, each .Total takes up 20% of the container width */
        margin: 10px;
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #d1d1d1;
        box-sizing: border-box;
        background: #fff;

        // width: 24%;
        // padding: 15px;
        // border-radius: 10px;
        // border: 1px solid #d1d1d1;
        // box-sizing: border-box;
        // background: #fff;

        /* 设置为怪异盒模型 */
        span {
            margin-right: 10px;
        }
    }

    .Total:first-child {
        margin-left: 0;
        /* Set margin-left to 0 for the first .Total element */
    }

    .Total:last-child {
        margin-right: 0;
        /* Set margin-right to 0 for the last .Total element */
    }

    @media only screen and (max-width: 1200px) {
        .Total {
            flex-basis: calc(25% - 20px);
            /* For screens smaller than 1200px, each .Total takes up 25% of the container width */
        }
    }

    @media only screen and (max-width: 900px) {
        .Total {
            flex-basis: calc(33.33% - 20px);
            /* For screens smaller than 900px, each .Total takes up 33.33% of the container width */
        }
    }

    @media only screen and (max-width: 600px) {
        .Total {
            flex-basis: calc(50% - 20px);
            /* For screens smaller than 600px, each .Total takes up 50% of the container width */
        }
    }

    @media only screen and (max-width: 400px) {
        .Total {
            flex-basis: calc(100% - 20px);
            /* For screens smaller than 400px, each .Total takes up 100% of the container width */
        }
    }


    .earnings {
        background: rgb(229, 242, 238, );

        .greenText {
            color: green;
            font-weight: 600;
            margin-left: 10px;
        }
    }

    .potential {
        .greenText {
            color: green;
            font-weight: 600;
            margin-left: 10px;
        }
    }

    .issues {
        .strong {
            color: red;

        }

        .greenText {
            color: green;
            margin-left: 10px;
        }

        .yellowText {
            color: #f9b115;
            margin-left: 10px;
        }
    }

}
</style>