uni_mattress/sleep/components/boxTitle/index.vue

<template>
	<view class="box-tile" :class="className">
		<text class="title-wrapper">{{ title }}</text>
		<text class="more" @click="$emit('handlePlay')" v-if="iconName">
			<text>{{ buttonName }}</text>
			<text :class="['iconfont icon-title icon-' + iconName]"  v-if="iconName"></text>
		</text>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		iconName: {
			type: String,
			default: ''
		},
		buttonName: {
			type: String,
			default: ''
		},
		className: {
			type: String,
			default: ''
		}
	}
};
</script>
<style lang="scss" scoped>
.box-tile {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 3px;
	
	.title-wrapper {
		font-size: 18px;
		font-weight: 500;
		line-height: 18px;
		color: #ffffff;
		position: relative;
		text-indent: 2px;
		// &:before {
		// 	content: '';
		// 	width: 4px;
		// 	height: 18px;
		// 	background-image: linear-gradient(to bottom, rgb(253, 117, 102), rgb(247, 73, 79));
		// 	position: absolute;
		// 	left: 0px;
		// 	top: 3px;
		// }
	}
	.more {
		border-radius: 9px;
		color:  rgba(22, 125, 242, 1);;
		padding: 3px 10px 3px 13px;
		font-size: 12px;
		border: 1px solid rgba(22, 125, 242, 1);
	}
	.icon-title {
		margin-left: 2px;
		color: rgba(22, 125, 242, 1);;
		font-size: 12rpx;
	}
}
</style>