ezpc/src/views/homeChild/ItemTitle.vue

<template>
	<div class="item-title">
		<div class="title moren">{{ title }}</div>
		<div class="more hand" v-if="isShow === '1'" @click="loadMore">
			更多
			<span>>></span>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		isShow: {
			type: String,
			default: '1'
		},
		topath: {
			type: String,
			default: '/home'
		}
	},
	methods: {
		loadMore() {
			this.$router.push(this.topath);
		}
	}
};
</script>

<style lang="scss" scoped>
.item-title {
	height: 54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: #e5e5e5 1px solid;
	.title {
		// width: 100px;
		padding-left: 20px;
		padding-right: 20px;
		height: 54px;
		font-size: 22px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 54px;
		text-align: center;
		background-color: var(--m-color);
		position: relative;
		z-index: 1;

		&::after {
			content: '';
			border: solid 9px var(--m-color);
			position: absolute;
			height: 0;
			width: 0;
			right: 0;
			left: 0;
			bottom: -18px;
			margin: 0 auto;
			border-color: var(--m-color) transparent transparent;
		}
	}
	.more {
		width: 71px;
		height: 26px;
		border: 1px solid #fdb813;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fdb813;
		text-align: center;
		line-height: 26px;
		// line-height: 40px;
		span {
			font-size: 12px;
		}
	}
}
</style>