From ead1905c998a05fa8cde6f8eba3bc6bd092ab85c Mon Sep 17 00:00:00 2001 From: jiwangyihao Date: Tue, 3 Jun 2025 00:34:07 +0800 Subject: [PATCH] feat: add footer section with community information and QR code - Implemented a new footer in app.vue that includes: - Community description and purpose. - A QR code for joining the user group. - Responsive design adjustments for the QR code size. - Added a new SVG icon for the QR code in assets/icons/qrcode-3.svg. Co-authored-by: Sylvanysc --- app.vue | 69 ++++++++++++-- assets/icons/qrcode-3.svg | 183 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 247 insertions(+), 5 deletions(-) create mode 100644 assets/icons/qrcode-3.svg diff --git a/app.vue b/app.vue index 1a28c93..2a7a7c9 100644 --- a/app.vue +++ b/app.vue @@ -32,10 +32,10 @@ const handleScrollOrResize = () => { .lastScrollTop; const clientHeight = scrollPanel.value?.$el.clientHeight; if (path.value === "/") { - sProgress.value = - 1 - - range(0, 1, scrollTop / clientHeight) + - 1 - + sProgress.value = + 1 - + range(0, 1, scrollTop / clientHeight) + + 1 - Math.abs(range(-1, 1, scrollTop / clientHeight - 6)); return; } @@ -49,6 +49,18 @@ onMounted(() => { mounted.value = true; }); }); + +const qrWidth = ref(0); + +onMounted(() => { + const qrEl = document.querySelector("footer .flex:nth-child(3) svg"); + if (qrEl) { + qrEl.addEventListener("resize", () => { + qrWidth.value = qrEl.getBoundingClientRect().height; + }); + qrWidth.value = qrEl.getBoundingClientRect().height; + } +}); diff --git a/assets/icons/qrcode-3.svg b/assets/icons/qrcode-3.svg new file mode 100644 index 0000000..81b136e --- /dev/null +++ b/assets/icons/qrcode-3.svg @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file