<template>
  <div class="">
    <span class="comp-title"
      :style="{
        'color': bgColor,
        'font-weight': fontWeight,
        'font-size': cTextFontSize,
        'padding-top': cPaddingTop,
        'padding-bottom': cPaddingBottom
      }"
    >{{title}}</span>
  </div>
</template>
<script>
export default {
  name: 'common-title',
  data() {
    return {
      fontSize: 37.5
    };
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    bgColor: {
      type: String,
      default: "#999"
    },
    fontWeight: {
      type: Number,
      default: 600
    },
    textFontSize: {
      type: Number,
      default: 16
    },
    paddingTop: {
      type: Number,
      default: 15
    },
    paddingBottom: {
      type: Number,
      default: 15
    }
  },
  created() {},
  mounted() {
    let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
    this.fontSize = htmlDom;
    console.log(htmlDom);
  },
  computed: {
    cTextFontSize() {
      return this.textFontSize / this.fontSize + "rem";
    },
    cPaddingTop() {
      return this.paddingTop / this.fontSize + "rem";
    },
    cPaddingBottom() {
      return this.paddingBottom / this.fontSize + "rem";
    }
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.comp-title {
  display: flex;
  padding-left: 15px;
}
</style>
