<template>
	<el-row>
		<el-col :span="24">
			<el-carousel :height="height" motion-blur>
				<el-carousel-item v-for="item in state.item" :key="item">
					<el-image  :src="item.img" fit="fill" />
				</el-carousel-item>
			</el-carousel>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const props = defineProps({
	height: {
		type: String,
		default: '300px',
	},
})
const state = reactive({
	item:[
		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
	]
})
</script>
<style scoped>
:deep(.el-image){
	border-radius: 10px;
}
</style>
