<template>
	<view class="container">
		<view class="mk-title">
			<text class="title"> {{ recommendTheme.themeName }}</text>
		    <image class="wave" src="@/static/wave_icon.png" mode="widthFix"/>
		</view>
		<view class="container-scroll">
			<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
				<image :src="item.coverPhoto" mode="widthFix"></image>
				<text>{{ item.topic }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	

defineProps({
	recommendTheme: {
		type: Object,
		default: {}
	}
})

</script>

<style lang="scss" scoped>
	.container {		
		.mk-title {
			padding: 4px 0;
			display: inline-block;
			position: relative;
			.title {
				font-weight: 400;
				font-size: 16px;
				color: #000000;
				z-index: 2;
				position: relative;
			}
			.wave {
				position: absolute;
				bottom: 2px;
				left: 0;
				width: 100%;
				z-index: 1;
			}
		}
		
		.container-scroll {
			display: flex;
			flex-direction: row;
			overflow-x: auto;
			margin-top: 4px;
			
			/* 隐藏滚动条 */
			scrollbar-width: none; 
			&::-webkit-scrollbar {
			  display: none; 
			}
			
			.mk-card-item {
				display: flex;
				flex-direction: column;
				align-items: start;
				width: 188px;
				height: 154px;
				background-color: #ffffff;
				border-radius: 10px;
				margin-right: 8px;
				
				image {
					width: 188px;
					height: 112px;
				}
				text {
					padding: 12px;
					text-align: center;
					font-weight: 500;
					font-size: 12px;
					color: #333333;
				}
			}
		}
	}
</style>