<template>
  <div class="my-sub">
    <span />
    <p><slot /></p>
    <img src="@/assets/images/sub-dot.png" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MySub',
  displayName: 'm-sub',
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-sub
  display flex
  align-items center
  >span
    display inline-block
    width .02rem
    height @width
    background $secondary-color
    margin-right .05rem
  >p
    font-family $font-zcool
    color $secondary-color
    flex 1
    font-size .12rem
  >img
    width .6rem
</style>
