112 lines
2.5 KiB
Vue
112 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import QRCode from "@/components/QRCode.vue";
|
|
import {computed, reactive} from "vue";
|
|
|
|
const {
|
|
layout, color,
|
|
message1, message2,
|
|
message3, message4,
|
|
} = defineProps([
|
|
'layout', 'color',
|
|
'message1', 'message2',
|
|
'message3', 'message4',
|
|
])
|
|
const layout1Class = computed(() => ({
|
|
hidden: layout !== 'layout1',
|
|
layout1: layout === 'layout1',
|
|
}))
|
|
const layout2Class = computed(() => ({
|
|
hidden: layout !== 'layout2',
|
|
layout2: layout === 'layout2',
|
|
}))
|
|
const layout3Class = computed(() => ({
|
|
hidden: layout !== 'layout3',
|
|
layout3: layout === 'layout3',
|
|
}))
|
|
const layout4Class = computed(() => ({
|
|
hidden: layout !== 'layout4',
|
|
layout4: layout === 'layout4',
|
|
}))
|
|
</script>
|
|
<template>
|
|
<div class="sticker">
|
|
<QRCode class="qr-code"></QRCode>
|
|
<div class="content">
|
|
<div v-bind:class="layout1Class">
|
|
<div class="message">{{ message1 }}</div>
|
|
</div>
|
|
<div v-bind:class="layout2Class">
|
|
<div class="message">{{ message1 }}</div>
|
|
<div class="message">{{ message2 }}</div>
|
|
</div>
|
|
<div v-bind:class="layout3Class">
|
|
<div class="message">{{ message1 }}</div>
|
|
<div class="message">{{ message2 }}</div>
|
|
<div class="message">message3</div>
|
|
</div>
|
|
<div v-bind:class="layout4Class">
|
|
<div class="message">{{ message1 }}</div>
|
|
<div class="message">{{ message2 }}</div>
|
|
<div class="message">{{ message3 }}</div>
|
|
<div class="message">{{ message4 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.message {
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
.qr-code {
|
|
height: 100%;
|
|
}
|
|
.sticker {
|
|
aspect-ratio: 6 / 1;
|
|
background-color: v-bind(color);
|
|
display: flex;
|
|
overflow: hidden;
|
|
.content {
|
|
padding: 5px;
|
|
width: 100%;
|
|
> div > div {
|
|
outline: 1px solid #CCC;
|
|
}
|
|
.layout1 {
|
|
font-size: 140%;
|
|
height: 100%;
|
|
> div {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.layout2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 70%;
|
|
gap: 5px;
|
|
height: 100%;
|
|
> div {
|
|
flex: auto 1 0;
|
|
}
|
|
}
|
|
.layout3 {
|
|
display: flex;
|
|
gap: 5px;
|
|
height: 100%;
|
|
> div {
|
|
width: 33%;
|
|
}
|
|
}
|
|
.layout4 {
|
|
/* TODO: overflow issue. Turn on outline to see. */
|
|
display: grid;
|
|
font-size: 70%;
|
|
grid-template-columns: 50% 50%;
|
|
gap: 5px;
|
|
//grid-auto-rows: minmax(100px, auto);
|
|
//grid-auto-rows: auto;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|