<!--
 * @Date: 2024-09-29 10:07:11
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-09 15:37:00
 * @FilePath: /hager/src/components/common/hagerH1.vue
 * @Description: 文件描述
-->
<template>
  <div :class="['hagerH1', is_xs ? 'xs' : '']">
    <p class="h1">{{ title }}</p>
    <p class="sub">{{ sub }}</p>
  </div>
</template>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  props: {
    title: {
      type: String,
      default: '标题'
    },
    sub: {
      type: String,
      default: '副标题'
    },
    width: {
      type: Number,
      default: 0
    }
  },
  watch: {
    width (val) {
      this.screen_width = val;
    }
  },
  computed: {
    is_xs () {
      return this.screen_width < 768;
    }
  },
  data () {
    return {
      // is_xs: false,
      screen_width: 0,
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
  .hagerH1 {
    // &.xs {
      // padding: 0 1rem;
    // }
    .h1 {
      color: @secondary-color;
      font-size: 1.75rem;
      font-weight: bold;
    }
    .sub {
      color: @primary-color;
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
</style>