<!--
 * @Date: 2024-09-29 10:07:11
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-22 11:38:03
 * @FilePath: /hager/src/components/common/hagerH1.vue
 * @Description: 文件描述
-->
<template>
  <div class="hagerH1">
    <p :class="['h1', is_xs ? 'xs' : '']">{{ title }}</p>
    <p :class="['sub', , is_xs ? 'xs' : '']">{{ 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;
    }
  },
  data () {
    return {
      screen_width: 0,
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
  .hagerH1 {
    .h1 {
      color: @secondary-color;
      font-size: 1.9rem;
      font-weight: bold;

      &.xs {
        font-size: 1.5rem;
      }
    }
    .sub {
      color: @primary-color;
      font-size: 1.7rem;
      font-weight: bold;

      &.xs {
        font-size: 1rem;
      }
    }
  }
</style>