feat: 添加移动端适配和优化组件样式

refactor: 重构CSS和LESS文件结构
style: 调整搜索页和公共样式
fix: 修复组件图片路径问题
docs: 更新组件文档和注释

component/QR-code-pop/QR-code-pop.js

@@ -0,0 +1,35 @@
+// my-component.js
+// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
+const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue;
+
+// 定义组件（直接使用模板）
+export const QRCodePop = defineComponent({
+    name: "QR-code-pop",
+    props: {},
+
+    setup(props) {
+        let isMobile = ref(false);
+
+        let state = ref(false);
+
+        let valueUrl = ref("");
+
+        onMounted(() => {
+            isMobile.value = window.isMobile;
+
+            const valueA = document.querySelector(".valueA");
+            valueUrl.value = valueA.innerText;
+        });
+
+        const open = () => (state.value = true);
+        const closeGroup = () => (state.value = false);
+
+        const holdback = () => {};
+
+        return { valueUrl, state, isMobile, holdback, closeGroup, open };
+    },
+
+    components: {},
+
+    template: `<div class="QR-code-pop flexflex" v-if="state" @click="closeGroup" @touchmove.stop>    <div class="pop-box flexacenter" @click.stop="holdback">        <img class="pop-title" :src="valueUrl + '/img/welcome-icon.png'">        <div class="pop-wechat-name flexcenter">            <img class="pop-wechat-icon" :src="valueUrl + '/img/wechat-name-icon.png'">            寄托方同学        </div>        <div class="pop-code-box flexcenter">            <div class="pop-code flexcenter">                <img class="pop-code-img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~">            </div>            <div class="pop-text">保存识别二维码</div>        </div>        <img class="pop-bottom1" :src="valueUrl + '/img/bottom2.svg'">        <img class="pop-bottom2" :src="valueUrl + '/img/bottom1.svg'">    </div></div>`,
+});