создание qr-кода

src/components/create/CreateSection.vue

@@ -0,0 +1,44 @@
+<template>
+  <section :class="{ 'active-section': isActive }" ref="section">
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { watch, useTemplateRef } from 'vue'
+
+const props = defineProps<{ isActive: boolean }>()
+
+const sectionRef = useTemplateRef('section')
+
+// плавная прокрутка при активации секции
+watch(
+  () => props.isActive,
+  (isActive) => {
+    if (isActive) {
+      sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
+    }
+  },
+)
+</script>
+
+<style scoped>
+section {
+  opacity: 0.1;
+  transition: opacity 0.5s;
+  pointer-events: none;
+}
+
+section {
+  border-top: 1px solid silver;
+  padding-top: 1em;
+}
+section:first-of-type {
+  border-top: none;
+}
+
+section.active-section {
+  opacity: 1;
+  pointer-events: all;
+}
+</style>