UI优化

src/components/common/QrViewer.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="inline-flex flex-col items-center justify-center rounded-2xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700 px-6 py-5 space-y-4"
+  >
+    <div class="text-center space-y-1">
+      <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+        微信二维码
+      </h3>
+      <p class="text-xs text-gray-500 dark:text-gray-400">
+        使用微信扫一扫，添加好友
+      </p>
+    </div>
+
+    <div
+      class="relative p-2 rounded-2xl bg-gradient-to-br from-rose-500/10 via-blue-500/5 to-emerald-500/10"
+    >
+      <div
+        class="rounded-2xl overflow-hidden bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-700"
+      >
+        <img
+          src="/wx.jpg"
+          alt="微信二维码"
+          class="w-48 h-48 object-contain"
+        />
+      </div>
+    </div>
+
+    <p class="text-xs text-center text-rose-600 dark:text-rose-400">
+      添加好友时请<span class="font-semibold">备注来意</span>（如：咨询项目 / 商务合作）
+    </p>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>