ysred/components/top-title/top-title.vue

<template>
	<view class="top-title">
		<view class="title-before">
			<view class="b1"></view>
			<view class="b2"></view>
			<view class="b3"></view>
			<view class="b4"></view>
		</view>
		<view class="title">{{title}}</view>
		<view class="title-after">
			<view class="a1"></view>
			<view class="a2"></view>
			<view class="a3"></view>
		</view>
	</view>
</template>

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

<style lang="scss">
.top-title {
		display: flex;
		.title-before {
			display: inline-block;
			.b1 {
				width: 4rpx;
				height: 4rpx;
				background: #FD424B;
				border-radius: 50%;
				margin-bottom: 6rpx;
				margin-left: 22rpx;
			}
			.b2 {
				width: 28rpx;
				height: 4rpx;
				background: #FFE9EA;
				border-radius: 2rpx;
				margin-bottom: 6rpx;
				margin-left: 18rpx;
			}
			.b3 {
				width: 48rpx;
				height: 4rpx;
				background: #FFE9EA;
				border-radius: 2rpx;
				margin-bottom: 6rpx;
			}
			.b4 {
				width: 5rpx;
				height: 5rpx;
				background: #FD424B;
				border-radius: 50%;
				margin-bottom: 6rpx;
				margin-left: 13rpx;
			}
		}
		.title {
			display: inline-block;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #108EEF;
			// line-height: 20px;
			background: linear-gradient(0deg, #FF7077 0%, #FD424B 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.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>