效果图： 

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>

 

原文地址：http://www.cnblogs.com/lengfang/p/16836881.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性