uniapp-hainan/components/lf-title-line/lf-title-line.vue

<template>
	<view class="decorative-box" :class="{'padding-tb': isPadding}" @click="onClick">
		<view class="decorative-liner"></view>
		<view class="lf-flex decorative-content">
			<view class="rhombus lf-m-r-23" v-if="isRhombus"></view>
			<view class="lf-font-32 lf-font-bold title">{{ title }}</view>
			<view class="rhombus lf-m-l-23" v-if="isRhombus"></view>
		</view>
		<view class="decorative-liner"></view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: [String, Number], // 标题
				default: '猜你喜欢'
			},
			isRhombus: {
				type: Boolean, // 是否显示菱形，默认显示
				default: true
			},
			isPadding: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			onClick(event){
				this.$emit('click', event);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.decorative-box {
		width: 100%;
		height: max-content;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		box-sizing: border-box;
		.decorative-liner{
			width: 110rpx;
			height: 1rpx;
			border: 1rpx solid #DCDCDC;
		}
		.decorative-content{
			padding: 0 30rpx;
			.rhombus{
				width: 16rpx;
				height: 16rpx;
				transform: rotateZ(45deg);
				background: #222;
			}
			.title{
				max-width: 340rpx;
			}
		}
	}
	.padding-tb{
		padding: 25rpx 0;
	}
</style>