<template>
  <section>
    <article class>
      <span></span>
      <span>{{title}}</span>
      <span></span>
      <span>{{title}}</span>
      <span></span>
    </article>
    <article>
      <section >1</section>
      <section >2</section>
    </article>
  </section>
</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>
