<template>
    <!-- bubble -->
    <view class="bubble-item__container">
        <view class="bubble-item__container__triangle"/>
        <slot></slot>
    </view>
</template>

<script>
/**
 * @file 基因检测
 * @author fujinghua
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true  
    },
    data(){
        return {

        };
    }
};

</script>

<style lang="less" scoped>
    @backgroundColor: #f5f5f5;
    @width : 0.08rem;
    .bubble-item__container{
        position: relative;
        width: 3.5rem;
        background-color: @backgroundColor;
        border-radius: 0.12rem;
        box-sizing: border-box;
        padding: 0.15rem 0.13rem 0.095rem;
        margin-left: 0.08rem;
        margin-top: @width;
        
        &__triangle{
            position: absolute;
            left: 0.4rem;
            top: -@width * 2;
            width: 0;
            height: 0;
            border: @width solid transparent;
            border-bottom-color: @backgroundColor ;
        }
    }
</style>
