desktop_task_schedule/code/web/task_schedule/src/components/CallerArchievementComponent.vue

<!--
 * @Author: Kane
 * @Date: 2023-08-30 14:08:57
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/components/CallerArchievementComponent.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="caller-archievment-wrapper">
        <h1>{{ CallerName }}</h1>
        <table>
            <tr>
                <th>当月保费</th><td>{{ PresentMonthPremium }}&nbsp;万元</td>
            </tr>
            <tr>
                <th>车非渗透率</th><td>{{ props.attachingRate }}%</td>
            </tr>
            <tr>
                <th>续保率</th><td>{{ props.renewalRate }}%</td>
            </tr>
        </table>
    </div>
</template>
<script lang="ts">
import { computed } from "vue";
interface CallerArchievementComponentUI
{
    callerName: string,
    thisMonthPremium: number,
    attachingRate: string,
    renewalRate: string,
}

export default {
    name: "CallerArchievementComponent",
    props: {
        callerName: {
            type: String,
            require: true,
            default: (): string => "",
        },
        thisMonthPremium: {
            type: Number,
            require: true,
            default: (): number => 0,
        },
        attachingRate: {
            type: String,
            require: true,
            default: (): string => "0.0",
        },
        renewalRate: {
            type: String,
            require: true,
            default: (): string => "0.0",
        },
    },
    setup( props )
    {
        const ui: CallerArchievementComponentUI = {
            callerName: "",
            thisMonthPremium: 0,
            attachingRate: "0.0",
            renewalRate: "0.0",
        };

        const PresentMonthPremium = computed((): string =>
        {
            return ( props.thisMonthPremium / 10000 ).toFixed( 2 );
        });

        const CallerName = computed((): string =>
        {
            return props.callerName;
        });

        return {
            CallerName,
            PresentMonthPremium,
            ui,
            props,
        };
    },
};
</script>
<style scoped lang="scss">
.caller-archievment-wrapper
{
    width: 300px;
    height: 120px;

    border-radius: 5px;

    margin-bottom: 30px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    background-color: #fff;
    color: #4f4f4f;
    font-size: 15px;

    h1 {
        background-color: #fecb96;
        width: 100%;
        text-align: center;
        border-radius: 5px 5px 0px 0px;
        margin: 0px;
        padding: 5px 0px;

        color: #da3703;

        font: {
            size: 1.2rem;
            weight: 100;
            family: "FZ-ZHUOHEI";
        }
    }

    table {
        border-collapse: collapse;
        border-radius: 0px 0px 5px 5px;
        width: 100%;

        margin-top: 5px;

        background-color: #ffffff;

        font: {
            size: 14px;
        }

        th,td {
            padding: 9px;
            border-bottom: 1.5px solid #ebeef5;
        }

        th {
            width: 5.2rem;
            text-align: right;
        }

        th.caller-name {
            text-align: center;
            background-color: yellow;
        }

        td {
            text-align: left;
        }

        tr:nth-child(even) {
            background-color: #f5f6f7;
        }

        tr:last-child td,th {
            border-bottom: none;
        }
    }
}

</style>