43 lines
987 B
Vue
43 lines
987 B
Vue
<template>
|
|
<div @click="$emit('clicked')" class="stack">
|
|
<card-component :text="text[0]" class="c1" :isBlack="false" :class="{hover: showhover}"/>
|
|
<card-component :text="text[1]" class="c2" v-if="this.text.length > 1" :isBlack="false" :class="{hover: showhover}"/>
|
|
<card-component :text="text[2]" class="c3" v-if="this.text.length > 2" :isBlack="false" :class="{hover: showhover}"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
import CardComponent from "./CardComponent.vue";
|
|
@Component({
|
|
components: {CardComponent},
|
|
})
|
|
export default class StackedCards extends Vue {
|
|
@Prop()
|
|
private text!: string[];
|
|
|
|
@Prop()
|
|
private showhover!: boolean;
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.c2{
|
|
position: relative;
|
|
top: -15em;
|
|
left: 0.3em;
|
|
}
|
|
|
|
.c3 {
|
|
position: relative;
|
|
top: -30em;
|
|
left: 0.6em;
|
|
}
|
|
|
|
.stack:hover .hover {
|
|
background-color: #b5b5b5;
|
|
}
|
|
|
|
</style>
|