<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.path" 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:[]
})

function init() {

}
onMounted(()=>{
	frontRequest.get("/api/slides/page").then(res =>{
			state.item = res.data.list
	})
})

</script>
<style scoped>
:deep(.el-image){
	border-radius: 10px;
}
</style>
