<template>
	<view class="container">
		<ModuleTitle :title="recommendTheme.themeName" />
		<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>
	import ModuleTitle from '@/components/ModuleTitle/index.vue'
	import { defineProps } from 'vue'
	const props = defineProps({
		recommendTheme: {
			type: Object,
			default: {}
		}
	})

</script>

<style lang="scss" scoped>
	.container {		
		
		.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>