generated from VLADIMIR/template_frontend
67 lines
1.1 KiB
Vue
67 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import VueQrcode from '@chenfengyuan/vue-qrcode';
|
|
import MessagePaper from './MessagePaper.vue';
|
|
|
|
interface QROptions {
|
|
width?: number;
|
|
margin?: number;
|
|
color?: {
|
|
dark: string;
|
|
light: string;
|
|
};
|
|
}
|
|
const qrOptions = ref<QROptions>({
|
|
width: 200,
|
|
margin: 1,
|
|
color: {
|
|
dark: '#303030',
|
|
light: '#f0f0f0'
|
|
}
|
|
});
|
|
|
|
interface Props {
|
|
qrurl: string
|
|
team: string
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<MessagePaper>
|
|
<div class="qr">
|
|
<div class="team-name">
|
|
{{ team }}
|
|
</div>
|
|
<VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
|
|
<div class="message">
|
|
Пора решать загадку
|
|
</div>
|
|
</div>
|
|
</MessagePaper>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.qr {
|
|
text-align: center;
|
|
width: 200px;
|
|
}
|
|
|
|
.qr-code {
|
|
margin: 12px 0;
|
|
box-shadow: 0px 3px 15px rgb(98, 98, 98);
|
|
}
|
|
|
|
.team-name {
|
|
margin: 10px 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.message {
|
|
margin: 7px 0;
|
|
}
|
|
</style>
|