71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="area">
|
|
<Box class="card" :pose="isVisible ? 'visible' : 'hidden'">
|
|
?
|
|
</Box>
|
|
</div>
|
|
<template v-for="item, index in items" >
|
|
<div class="item" :key="item.id">
|
|
{{ index }} {{ item.title }} {{ item.artist }} {{ item.duration }}
|
|
<button :disabled="item.disabled" @click="orderItem(item)">Order</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
import posed from "vue-pose";
|
|
import domain from "@/domain/domain";
|
|
|
|
@Component({
|
|
components: {
|
|
Box: posed.div({
|
|
visible: { rotateY: 180, transition: { duration: 300 } },
|
|
hidden: { rotateY: 0, transition: { duration: 300 } }
|
|
})
|
|
}
|
|
})
|
|
export default class CardComponent extends Vue {
|
|
private isVisible: boolean;
|
|
public data() {
|
|
return { isVisible: this.isVisible, items: domain.musicCatalog.get() };
|
|
}
|
|
public mounted() {
|
|
setInterval(() => {
|
|
this.isVisible = !this.isVisible;
|
|
}, 1000);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.area {
|
|
transform-style: preserve-3d;
|
|
perspective: 500px;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin:0 auto;
|
|
}
|
|
|
|
.card {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #14D790;
|
|
box-shadow: 0 0 5px 0.5px #444;
|
|
color:#fff;
|
|
font-size: 90px;
|
|
text-align: center;
|
|
}
|
|
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #54E365;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
</style>
|