forked from opentiny/tiny-vue
105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<template>
|
|
<tiny-carousel height="300px" arrow="always" indicator-position="outside">
|
|
<tiny-carousel-item class="carousel-item-demo" v-for="(item, pos) in cardData" :key="item">
|
|
<template #default>
|
|
<div v-for="num in cardData.length" :key="num">
|
|
<div v-if="num === pos + 1" :class="['card-dsp']">
|
|
<tiny-card
|
|
v-for="(child, childIndex) in item.children"
|
|
:key="childIndex"
|
|
:title="child.cardTitle"
|
|
:type="child.cardType"
|
|
:src="child.cardSrc"
|
|
custom-class="card-demo"
|
|
@click="curIndex = childIndex"
|
|
:status="curIndex === childIndex ? 'success' : ''"
|
|
>
|
|
<div>{{ child.content }}</div>
|
|
</tiny-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</tiny-carousel-item>
|
|
</tiny-carousel>
|
|
</template>
|
|
|
|
<script>
|
|
import { Carousel, CarouselItem, Card } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyCarousel: Carousel,
|
|
TinyCarouselItem: CarouselItem,
|
|
TinyCard: Card
|
|
},
|
|
data() {
|
|
return {
|
|
curIndex: 0,
|
|
cardData: [
|
|
{
|
|
children: [
|
|
{
|
|
cardTitle: '1-1',
|
|
cardType: 'text',
|
|
cardSrc: '',
|
|
content: '1-1-content'
|
|
},
|
|
{
|
|
cardTitle: '1-2',
|
|
cardType: 'image',
|
|
cardSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
|
|
content: '1-2-content'
|
|
},
|
|
{
|
|
cardTitle: '1-3',
|
|
cardType: 'logo',
|
|
cardSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
|
|
content: '1-3-content'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
children: [
|
|
{
|
|
cardTitle: '2-1',
|
|
cardType: 'text',
|
|
cardSrc: '',
|
|
content: '1-1-content'
|
|
},
|
|
{
|
|
cardTitle: '2-2',
|
|
cardType: 'image',
|
|
cardSrc: `/static/images/dsj.png`,
|
|
content: '1-2-content'
|
|
},
|
|
{
|
|
cardTitle: '2-3',
|
|
cardType: 'logo',
|
|
cardSrc: `/static/images/user-head.png`,
|
|
content: '1-3-content'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card-dsp {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.mb {
|
|
margin-bottom: 20px;
|
|
}
|
|
.card-demo {
|
|
width: 30%;
|
|
height: 300px;
|
|
}
|
|
.card-demo:hover {
|
|
border-color: #1476ff;
|
|
}
|
|
</style>
|