<template>
  <div class="sub-title">
    <p><slot /></p>
    <span />
    <p @click="clickSecTitle"><slot name="secTitle" /></p>
  </div>
</template>

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

export default defineComponent({
  name: 'SubTitle',
  emits: ['clicktit'],

  setup(_, ctx) {
    function clickSecTitle() {
      ctx.emit('clicktit')
    }
    return {
      clickSecTitle,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sub-title
  display flex
  align-items center
  margin 0.04rem 0
  p
    color $secondary-color
    margin-right 0.1rem
    font-weight bold
  span
    flex 1
    display block
    height 0.01rem
    background $primary-border
</style>
