uniapp中区域标题的封装

像这种很相像的标题部分，可以自己封装一个组件

第一步在components文件下新建一个组件uni-title.vue。内容就是标题的布局

挂载为全局组件，在main.js里

import  UniTitle from 'components/uni-title.vue'

Vue.component('uni-title',UniTitle)

<template>
	<view class="uni-title-box">
		<view class="tit_box">
			<text>{{title1}}</text>
		</view>
		<view class="text_box">
			<text>{{text1}}</text>
		</view>
	</view>
</template>
<script>
	export default {
		name:"uni-title",
		props:{
			title1:String,
			text1:String,
		},
        // props:['title1','text1'],  // 写数组也可以
		data() {
			return {
				
			};
		}
	}
</script>
<style scoped lang="less">
.uni-title-box{
	margin: 10px auto;	
}
.tit_box,
.text_box{
	text-align: center;
}
.tit_box{
	font-size: 40rpx;
	font-weight: 600;
	text-shadow: 2rpx 2rpx 2rpx rgb(98 98 98 / 52%);
	.tit2{
		color: #eb7c06;
	}
}
.text_box{
    color: rgb(237, 142, 130);
	line-height: 30rpx;
}
</style>

第二步在你需要写标题的地方直接写

<uni-title title1="我们的服务" text1="What We Offer"></uni-title>
<uni-title title1="方案制定" text1="Learning Curriculum"></uni-title>
<uni-title title1="解决疑问" text1="Solve The Problem"></uni-title>

 title1="文字内容"   和 text1=”文字内容“   里面文字内容根据自己实际情况写

哪里需要同样的标题了直接写<uni-title title1="内容" text1="内容"></uni-title>就行