forked from mns/mini-skamja
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<template>
|
||
<div class="qr-container">
|
||
<h1 class="qr-title">QR-код</h1>
|
||
<canvas ref="qrCanvas" class="qr-code"></canvas>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QRCode from 'qrcode';
|
||
|
||
export default {
|
||
name: 'QRPage',
|
||
data() {
|
||
return {
|
||
qrText: 'http://192.168.88.153:8106/',
|
||
};
|
||
},
|
||
mounted() {
|
||
this.generateQR();
|
||
},
|
||
methods: {
|
||
async generateQR() {
|
||
try {
|
||
await QRCode.toCanvas(this.$refs.qrCanvas, this.qrText, {
|
||
width: 500,
|
||
});
|
||
} catch (error) {
|
||
console.error('Ошибка при генерации QR-кода:', error);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.qr-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100vh;
|
||
text-align: center;
|
||
}
|
||
|
||
.qr-title {
|
||
font-family: 'Arial', sans-serif; /* Шрифт */
|
||
font-size: 2.5rem; /* Размер текста */
|
||
color: #333; /* Цвет текста */
|
||
font-weight: bold; /* Жирный текст */
|
||
text-transform: uppercase; /* Все буквы заглавные */
|
||
margin-bottom: 0px; /* Отступ снизу */
|
||
}
|
||
|
||
.qr-code {
|
||
margin-top: 20px;
|
||
border: 1px solid #ccc;
|
||
}
|
||
</style> |