效果图：
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>
标签：vue,封装,center,item,rem,font,com,图标 From： https://www.cnblogs.com/lengfang/p/16836881.html