A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
refactor: 重构CSS和LESS文件结构
style: 调整搜索页和公共样式
fix: 修复组件图片路径问题
docs: 更新组件文档和注释
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-23 19:13:01 +08:00
parent 2fd55c3e61
commit 826700970d
26 changed files with 2130 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
component/helper-pop/helper-pop.js
View File

@@ -12,8 +12,13 @@ export const helperPop = defineComponent({
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);
@@ -21,10 +26,10 @@ export const helperPop = defineComponent({
const holdback = () => {};
return { state, isMobile, holdback, closeGroup, open };
return { valueUrl, state, isMobile, holdback, closeGroup, open };
},
components: {},
template: `<div class="helper-pop flexflex" v-if="state" @click="closeGroup" @touchmove.prevent> <div class="helper-box flexacenter" @click.stop="holdback"> <img class="cross-grey" @click.stop="closeGroup" src="../../img/cross-grey.png" alt=""> <img class="helper-text helper-text1" src="../../img/apply-for-name.png" alt=""> <div class="helper-box-box flexflex"> <div class="helper-QRcode-box flexcenter"> <img class="left-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="left-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="right-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="right-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="helper-QRcode-img" src="https://u.gter.net/assistantwxqrcode.png" alt=""> </div> <span class="helper-box-text">长按识别二维码</span> </div> <img class="helper-bottom" src="../../img/helper-bottom-yellow.svg" alt=""> <img class="helper-bottom" src="../../img/helper-bottom-blue.svg" alt=""> </div></div>`,
template: `<div class="helper-pop flexflex" v-if="state" @click="closeGroup" @touchmove.prevent> <div class="helper-box flexacenter" @click.stop="holdback"> <img class="cross-grey" @click.stop="closeGroup" :src="valueUrl + '/img/cross-grey.png'" alt=""> <img class="helper-text helper-text1" :src="valueUrl + '/img/apply-for-name.png'" alt=""> <div class="helper-box-box flexflex"> <div class="helper-QRcode-box flexcenter"> <img class="left-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt=""> <img class="left-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt=""> <img class="right-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt=""> <img class="right-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt=""> <img class="helper-QRcode-img" src="https://u.gter.net/assistantwxqrcode.png" alt=""> </div> <span class="helper-box-text">保存识别二维码</span> </div> <img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-yellow.svg'" alt=""> <img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-blue.svg'" alt=""> </div></div>`,
});

18
component/helper-pop/helper-pop.txt
View File

@@ -1,18 +1,18 @@
<div class="helper-pop flexflex" v-if="state" @click="closeGroup" @touchmove.prevent>
<div class="helper-box flexacenter" @click.stop="holdback">
<img class="cross-grey" @click.stop="closeGroup" src="../../img/cross-grey.png" alt="">
<img class="helper-text helper-text1" src="../../img/apply-for-name.png" alt="">
<img class="cross-grey" @click.stop="closeGroup" :src="valueUrl + '/img/cross-grey.png'" alt="">
<img class="helper-text helper-text1" :src="valueUrl + '/img/apply-for-name.png'" alt="">
<div class="helper-box-box flexflex">
<div class="helper-QRcode-box flexcenter">
<img class="left-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
<img class="left-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
<img class="right-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
<img class="right-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
<img class="left-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
<img class="left-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
<img class="right-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
<img class="right-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
<img class="helper-QRcode-img" src="https://u.gter.net/assistantwxqrcode.png" alt="">
</div>
<span class="helper-box-text">长按识别二维码</span>
<span class="helper-box-text">保存识别二维码</span>
</div>
<img class="helper-bottom" src="../../img/helper-bottom-yellow.svg" alt="">
<img class="helper-bottom" src="../../img/helper-bottom-blue.svg" alt="">
<img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-yellow.svg'" alt="">
<img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-blue.svg'" alt="">
</div>
</div>