<template>
  <div class="sub-title">
    <p><slot /></p>
    <img src="@/assets/images/title-dec.png" />
    <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
    font-size .12rem
    font-family $font-zcool
  img
    width .26rem
    margin-left .1rem
</style>
