meri-design-dev/custom/theme/Badge.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-badge
  position: relative
  display: inline-block
  cursor: pointer

.p-badge+.p-badge
  margin-left: 20px

.p-badge .p-badge-normal
  position: absolute
  top: 0
  right: 0
  transform: translate(50%,-50%)
  border-radius: 9px
  height: 18px
  text-align: center
  color: $white
  z-index: 10

.p-badge .p-badge-normal.p-badge-dot
  padding: 0
  width: 8px
  height: 8px

.p-badge .p-badge-normal .p-badge-text
  display: flex
  align-items: flex-start
  justify-content: center
  padding-left: 4px
  padding-right: 4px
  min-width: 18px
  height: 18px
  overflow-y: hidden

.p-badge .p-badge-normal .p-badge-text .p-badge-figure
  height: 180px
  text-align: center
  transition: transform .3s

.p-badge .p-badge-normal .p-badge-text .p-badge-figure span
  display: block
  width: 7px
  height: 18px
  line-height: 18px
  font-size: 12px
  text-align: center

.p-badge .p-badge-normal .p-badge-text .p-badge-add
  width: 7px
  height: 18px
  line-height: 18px
  font-size: 12px

.p-badge .p-badge-normal .p-badge-str
  padding-left: 4px
  padding-right: 4px
  height: 18px
  line-height: 18px
  font-size: 12px