sssred/components/top-title/top-title.vue

<template>
	<view class="top-title">
		<view class="title-before">
		</view>
		<view class="title">{{title}}</view>
	</view>
</template>

<script>
	export default {
		name:"top-title",
		data() {
			return {
				
			};
		},
		props: {
			title: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style lang="scss">
.top-title {
		display: flex;
		align-items: center;
		.title-before {
			display: inline-block;
			background-color: $m-color;
			width: 10rpx;
			height: 30rpx;
			margin-right: 16rpx;
			
		}
		.title {
			display: inline-block;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.title-after {
			display: inline-block;
			.a1 {
				width: 8rpx;
				height: 8rpx;
				background: #FD424B;
				border-radius: 50%;
				margin-bottom: 6rpx;
				margin-top: 16rpx;
				margin-left: 25rpx;
			}
			.a2 {
				width: 28rpx;
				height: 4rpx;
				background: #FD424B;
				opacity: 0.1;
				border-radius: 2rpx;
				margin-bottom: 6rpx;
				
			}
			.a3 {
				width: 28rpx;
				height: 4rpx;
				background: #FD424B;
				opacity: 0.45;
				border-radius: 2rpx;
				margin-left: 11rpx;
			}
		}
	}
</style>