tongshanred/components/top-title/top-title.vue

<template>
	<view class="top-title">
		<view class="" style="justify-self: flex-start;">
			<view class="title-before"></view>
			<view class="title">{{title}}</view>
		</view>
		<view class="gd" @click="navTo" v-if="show_more">
			更多 >
		</view>
	</view>
</template>

<script>
	export default {
		name: "top-title",
		data() {
			return {

			};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			navurl: {
				type: String,
				default: ''
			},
			show_more: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			navTo() {
				console.log('dianji')
				uni.navigateTo({
					url: this.navurl
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-title {

		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-before {
			display: inline-block;
			background-color: #F0433C;
			width: 10rpx;
			height: 30rpx;
			margin-right: 16rpx;
			border-radius: 4rpx;
		}

		.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>