53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<v-list-tile avatar>
|
||
|
|
<v-list-tile-avatar :color="color">
|
||
|
|
<span class="headline font-weight-bold white--text">{{ dbentry.cost }}</span>
|
||
|
|
</v-list-tile-avatar>
|
||
|
|
|
||
|
|
<v-list-tile-content>
|
||
|
|
<v-list-tile-title class="body-2">{{ dbentry.name }}</v-list-tile-title>
|
||
|
|
<v-list-tile-sub-title>{{ serial }}</v-list-tile-sub-title>
|
||
|
|
</v-list-tile-content>
|
||
|
|
|
||
|
|
<v-list-tile-avatar>
|
||
|
|
<span class="subheading">{{ count }}</span>
|
||
|
|
</v-list-tile-avatar>
|
||
|
|
</v-list-tile>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Card',
|
||
|
|
|
||
|
|
props: {
|
||
|
|
count: Number,
|
||
|
|
serial: String,
|
||
|
|
dbentry: Object
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
color() {
|
||
|
|
switch (this.dbentry.element.toLowerCase()) {
|
||
|
|
case 'fire':
|
||
|
|
return '#d41'
|
||
|
|
case 'ice':
|
||
|
|
return '#7ac'
|
||
|
|
case 'wind':
|
||
|
|
return '#596'
|
||
|
|
case 'earth':
|
||
|
|
return '#db1'
|
||
|
|
case 'lightning':
|
||
|
|
return '#859'
|
||
|
|
case 'water':
|
||
|
|
return '#57a'
|
||
|
|
case 'light':
|
||
|
|
return '#888'
|
||
|
|
case 'dark':
|
||
|
|
default:
|
||
|
|
return '#333'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|