<template><div class="page-container"><div class="m-title">轮播图</div><el-carousel height="400px" :autoplay="true"><el-carousel-item v-for="(item, index) in carouselList" :key="index"><div class="m-item"><cl-linev-if="item.line?.id":id="item.line.id + nanoid()":list="item.line.list"width="400px"height="400px"></cl-line><cl-piev-if="item.pie?.id":id="item.pie?.id + nanoid()":list="item.pie?.list"width="400px"height="400px"></cl-pie><cl-barv-if="item.bar?.id":id="item.bar?.id + nanoid()":list="item.bar?.list"width="400px"height="400px"></cl-bar></div></el-carousel-item></el-carousel></div>
</template><script lang="ts" setup>
import { onMounted } from 'vue'
import { nanoid } from 'nanoid'let carouselList = [{line: {id: 'line-1',list: [{ value: 1048, name: 'Mon' },{ value: 735, name: 'Tue' },{ value: 580, name: 'Wed' },{ value: 484, name: 'Thu' },{ value: 300, name: 'Fri' },],},pie: {id: 'pie-1',list: [{ value: 1048, name: 'Mon' },{ value: 735, name: 'Tue' },{ value: 580, name: 'Wed' },{ value: 484, name: 'Thu' },{ value: 300, name: 'Fri' },],},bar: {id: 'bar-1',list: [{ value: 1048, name: 'Mon' },{ value: 735, name: 'Tue' },{ value: 580, name: 'Wed' },{ value: 484, name: 'Thu' },{ value: 300, name: 'Fri' },],},},{line: {id: 'line-2',list: [{ value: 50, name: 'Mon' },{ value: 735, name: 'Tue' },{ value: 580, name: 'Wed' },{ value: 484, name: 'Thu' },{ value: 300, name: 'Fri' },],},},
]onMounted(async () => {})
</script><style scoped>
.m-title {font-size: 20px;color: 333;font-weight: bold;padding: 10px;
}
.m-item {background: #fff;height: 100%;display: flex;justify-content: space-between;
}
</style>
人工智能学习网站
https://chat.xutongbao.top