35 lines
980 B
Vue
35 lines
980 B
Vue
<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>
|