<!--
 * @Description: 科普专题
 * @Author: yantingxi
 * @Date: 2019-08-20 14:12:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2019-12-02 15:27:11
 -->
<template>
    <b-navigate
        :url="url"
        :style="{
            color: color,
            background: bgColor
        }"
        :extra="{
            mod: module,
            page: page
        }"
        class="spe-topic__label"
    >
        <view class="spe-topic__label__icon m-icon m-icon-spetopicicon"></view>
        {{ text }}
    </b-navigate>
</template>

<script>
import Icon from "@baidu/med-ui/components/Icon/Icon";
import Navigate from '../../../components/common/navigate';


export default {
    config: {
        component: true
    },
    props: {
        text: String,
        iconName: String,
        url: String,
        bgColor: {
            type: String,
            default: "rgba(3,208,191,0.1)"
        },
        color: {
            type: String,
            default: "#00c8c8"
        },
        page: String,
        module: {
            type: String,
            default: 'label'
        }
    },
    components: {
        "c-icon": Icon,
        "b-navigate": Navigate
    }
};
</script>

<style lang="less" scoped>
.spe-topic__label {
    display: inline-block;
    padding: 0.06rem 0.11rem;
    line-height: normal;
    background: rgba(3, 208, 191, 0.1);
    border-radius: 15px;
    font-size: 0.13rem;

    &__icon {
        font-size: .12rem;
        display: inline-block;
        margin-right: 0.03rem;
    }
}
</style>