79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script setup>
|
|
import { NText, NEl } from 'naive-ui'
|
|
import { TbPlus } from 'vue-icons-plus/tb'
|
|
|
|
defineProps({
|
|
preset: { type: Object, required: true },
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NEl class="preset-card">
|
|
<div v-if="preset.key === 'blank'" class="preset-blank">
|
|
<TbPlus :size="26" />
|
|
</div>
|
|
<div v-else class="preset-thumb">
|
|
<span v-for="(col, i) in preset.thumbnail" :key="i" class="thumb-chip">{{ col }}</span>
|
|
</div>
|
|
<NText class="preset-title">{{ preset.label }}</NText>
|
|
<NText depth="3" class="preset-desc">{{ preset.description }}</NText>
|
|
</NEl>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.preset-card {
|
|
border: 1px solid var(--n-border-color, rgba(255,255,255,.1));
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
cursor: pointer;
|
|
transition: border-color .15s, transform .15s;
|
|
background: var(--n-card-color);
|
|
height: 100%;
|
|
}
|
|
.preset-card:hover {
|
|
border-color: var(--primary-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
.preset-blank {
|
|
height: 84px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--primary-color);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--primary-color) 8%, transparent);
|
|
margin-bottom: 10px;
|
|
}
|
|
.preset-thumb {
|
|
height: 84px;
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: flex-start;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--primary-color) 6%, transparent);
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.thumb-chip {
|
|
font-size: 9px;
|
|
line-height: 1.2;
|
|
padding: 3px 5px;
|
|
border-radius: 4px;
|
|
background: var(--n-card-color);
|
|
color: var(--n-text-color-3, #888);
|
|
white-space: nowrap;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.06);
|
|
}
|
|
.preset-title {
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
.preset-desc {
|
|
display: block;
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|