气泡效果

效果

image.png

代码

<div
     v-for="(item, index) in list"
     :key="index"
     class="normal"
     :class="{
         'active': index === activeIndex,
      }"
      @tap="onTap(index)"
>
</div>

data() {
    return {
        list: [
             {
                  title: 'list1'
             },
             {
                  title: 'list2'
             }],
         activeIndex: 0
     };
},
methods: {
        /**
         * 切换气泡
         *
         * @param {number} index 选中的索引
         */
        onTapSku(index) {
            this.activeIndex = index;
        }
    }
};

 .normal {
      width: 48.78%;
      height: .97rem;
      padding: .12rem 0 .12rem .12rem;
      margin-bottom: .16rem;
      border-radius: .09rem;
      background: #fff;
      border: .01rem solid #f1f1f1;
      box-sizing: border-box;
}
.active {
      background: #f3feff;
      border: .016rem solid #00c8c8;
      position: relative;

      &::after {
           position: absolute;
           width: 0;
           height: 0;
           content: "\00a0";
           display: block;
           /** 用border画等腰三角形 **/
           border-style: solid;
           border-width: .07rem;
           border-color:#00c8c8 transparent transparent transparent;
           left: 50%;
           bottom: -0.15rem;
     }
}