<template>
    <div class="linear" :class="`ra-` + radius">
        <div class="content">
            <slot>赠送</slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        radius: {
            type: Number,
            default: 100
        }
    }
};
</script>

<style lang="less" scoped>
.linear {
    .linear();
    position: relative;
    display: inline-block;

    .content {
        position: relative;
        z-index: 1;
    }
    &::after {
        content: '';
        background-color: @bg;
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        left: 1px;
        z-index: 0;
    }
}

@radiusList: {
    4: 4px;
    5: 5px;
    26: 26px;
    100: 100px;
};

each(@radiusList,{
    .ra-@{key}{
        border-radius: @value;
        &::after{
              border-radius: @value;
        }
    }
});
</style>
