vue 封装带图标的标题组件

效果图： 

com-item-title.vue组件

<template>
  <div class="com-item-title">
    <div class="com-item-box flex-center-center">
      <div class="com-item-cont">
        <div class="cn" v-html="titleCn"></div>
        <div class="en" v-html="titleEn"></div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  props: {
    titleCn: {
      type: String,
    },
    titleEn: {
      type: String,
    },
  },
 
  methods: {},
};
</script>
 
<style  scoped>
//1rem=100px,可自行转为px
.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
  .com-item-cont {
    text-align: center;
    position: relative;
  }
  .com-item-cont::before {
    width: 0.76rem;
    height: 0.76rem;
    display: block;
    content: "";
    background: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/jintuoluo/2022/pc/small_ball_img.png")
      no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: -0.86rem;
    top: -0.22rem;//左边球的球的上下位置
  }
  .com-item-cont::after {
    width: 0.76rem;
    height: 0.76rem;
    display: block;
    content: "";
    background: url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/jintuoluo/2022/pc/small_ball_img.png")
      no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: -0.86rem;
    top: 1.6em;//右边球的球的上下位置
  }
  .cn {
    font-size: 0.6rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 300;
    color: #092e6d;
    line-height: 0.6rem;
  }
  .en {
    font-size: 0.21rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 400;
    color: #adbac7;
    line-height: 0.31rem;
    margin-top: 0.16rem;
  }
 
</style>

about-fbec2022.vue页面引用com-item-title.vue组件

<template>
  <!-- 首页-大会介绍 -->
  <div class="about-fbec2022">
    <comItemTitle titleCn="FBEC2022" titleEn="About FBEC2022"></comItemTitle>
    
  </div>
</template>
<script>
import comItemTitle from "@/components/common/com-item-title.vue";
 
export default {
  name: "about-fbec2022",
  
  components: {
    comItemTitle,
  },
  data() {
    return {
      
    };
  },
 
};
</script>