<template>
	<view class="content-wrapper bdR16" :style="{ backgroundColor: bgColor, margin, color }" @tap="taps">
		<view class="content-left">
			<image :src="leftImg" mode="scaleToFill" />
			<view class="content-title"><slot /></view>
		</view>
		<view class="content-right">
			<image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
		</view>
	</view>
	<view :style="{ height }" v-if="height != ''"> </view>
</template>

<script setup>
const props = defineProps({
	bgColor: {
		type: String,
		default: '#f7f7f7'
	},
	margin: {
		type: String,
		default: '30rpx 0 0 0'
	},
	leftImg: {
		type: String,
		default: '/static/iconImg/notice-img.svg'
	},
	height: {
		type: String,
		default: ''
	},
	rightImg: {
		type: String,
		default: '/static/iconImg/right-arrow.svg'
	},
	color: {
		type: String,
		default: '#000'
	}
})
const emits = defineEmits(['HandleTouch'])
const taps = () => {
	emits('HandleTouch')
}
</script>

<style lang="scss" scoped>
.content-wrapper {
	padding: 40rpx 32rpx 40rpx 38rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.content-left {
		display: flex;
		align-items: center;
		font-size: 33rpx;
		color: #666;
		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
		.content-title {
			vertical-align: top;
		}
	}
	.content-right {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
</style>
