<template>
    <div class="zr-info">
        <el-tooltip effect="light" v-if="tips" :content="tips" placement="top"><i
                class="info-icon el-icon-question"></i></el-tooltip>
        <span class="info-label">{{ label }}：</span>
        <el-link :type="type" :underline="false">
            <slot></slot>
        </el-link>
    </div>
</template>

<script>
export default {
    props: {
        tips: {
            type: String,
            default: "",
        },
        label: {
            type: String,
            default: "",
        },
        color: {
            type: String,
            default: "",
        },
        type: {
            type: String,
            default: "",
        },
    },
    data() {
        return {};
    },
    methods: {},
};
</script>

<style lang="less" scoped>
a {
    font-weight: normal;
    color: #333;
}

.zr-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    line-height: 24px;
    margin-right: 20px;

    .info-icon {
        font-size: 14px;
        color: #999;
        margin-right: 5px;
    }
}
</style>