63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="pixel-card" :class="[sizeClass, { clickable }]">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
size: {
|
||
|
|
type: String,
|
||
|
|
default: 'normal', // 'small', 'normal', 'large'
|
||
|
|
validator: (value) => ['small', 'normal', 'large'].includes(value)
|
||
|
|
},
|
||
|
|
clickable: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const sizeClass = computed(() => `size-${props.size}`)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.pixel-card {
|
||
|
|
background: white;
|
||
|
|
border: var(--pixel-border) solid #000;
|
||
|
|
box-shadow: var(--pixel-shadow);
|
||
|
|
padding: 16px;
|
||
|
|
position: relative;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pixel-card.clickable {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.1s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pixel-card.clickable:hover {
|
||
|
|
transform: translate(-2px, -2px);
|
||
|
|
box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.pixel-card.clickable:active {
|
||
|
|
transform: translate(2px, 2px);
|
||
|
|
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.pixel-card.size-small {
|
||
|
|
padding: 8px;
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pixel-card.size-normal {
|
||
|
|
padding: 16px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pixel-card.size-large {
|
||
|
|
padding: 24px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
</style>
|