CSS 实现Tag

<template>

  <!-- 提示灯组件 -->

  <div class="light">

    <label for="tag-typer">

      <div>

        <span class="tag"><span class="tagLogo"><i class="iconfont dianapianhao">Preference</i></span></span>

        <span class="tag"><span class="tagLogo"><i class="iconfont dianabeizhu">Note</i></span></span>

        <span class="tag"><span class="tagLogo"><i class="iconfont dianaguanxi">RelationShip</i></span></span>

        <span class="tag"><span class="tagLogo"><i class="iconfont dianaxieyijia">Neg. Rate</i></span></span>

        <span class="tag"><span class="tagLogo"><i class="iconfont dianafenzhangshezhi">Routing</i></span></span>

        <span class="tag"><span class="tagLogo"><i class="iconfont dianalishi">History</i></span></span>

        <span class="tag"><span class="tagLogo"><i class="iconfont dianajianglai">Future</i></span></span>

      </div>

    </label>

  </div>

</template>

<script lang="ts">

import { Vue, Component, Prop, Watch, Emit } from "vue-property-decorator";

@Component({

  name: "IndicatorLight",

})

export default class IndicatorLight extends Vue {}

</script>

<style lang="less" scoped>

.light {

  position: absolute;

  margin-left: 180px;

}

.tag {

  display: inline-block;

  background: #12bedf;

  color: #fff;

  padding: 5px 10px;

  margin: 2px 2px 2px 10px;

  font: normal 16px sans-serif;

  position: relative;

  cursor: pointer;

  border-top-right-radius: 5px;

  border-bottom-left-radius: 5px;

  border-bottom-right-radius: 5px;

  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);

  //   -webkit-transform-origin: 0% 50%;

  -webkit-animation: swing 1s;

  -o-animation: swing 1s;

  animation: swing 1s;

}

.tag .tagLogo {

  position: relative;

  left: 2px;

  margin-right: 4px;

  z-index: 3;

}

.tag:after {

  content: "";

  width: 6px;

  height: 6px;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;

  background: #fff;

  position: absolute;

  left: 2px;

  top: 6px;

  box-shadow: inset 1px 1px 0 #ccc;

}

</style>