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

35
component/QR-code-pop/QR-code-pop.js Normal file
View File

@@ -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>`,
});

17
component/QR-code-pop/QR-code-pop.txt Normal file
View File

@@ -0,0 +1,17 @@
<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>

35
component/group-pop/group-pop.js Normal file
View File

@@ -0,0 +1,35 @@
// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue;
// 定义组件（直接使用模板）
export const groupPop = defineComponent({
name: "group-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="group-pop" v-if="state" @click="closeGroup"> <img class="bj" @click.stop="holdback" :src="valueUrl + '/img/huddle-bj.jpg'"> <img class="QRCode" @click.stop="holdback" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~"></div>`,
});

4
component/group-pop/group-pop.txt Normal file
View File

@@ -0,0 +1,4 @@
<div class="group-pop" v-if="state" @click="closeGroup">
<img class="bj" @click.stop="holdback" :src="valueUrl + '/img/huddle-bj.jpg'">
<img class="QRCode" @click.stop="holdback" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~">
</div>

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>

9
component/huddle-box/huddle-box.js
View File

@@ -12,8 +12,13 @@ export const huddleBox = 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 huddleBox = defineComponent({
const holdback = () => {};
return { state, isMobile, holdback, closeGroup, open };
return { valueUrl, state, isMobile, holdback, closeGroup, open };
},
components: {},
template: `<div class="huddle-box" @click="closeGroup" v-if="state"> <div class="box flexflex" @click.stop="holdback"> <img class="bj" src="../../img/group-bj.svg" alt=""> <img class="bj-bottom" src="../../img/group-bottom.png" alt=""> <img class="top" src="../../img/group-top.png" alt=""> <img class="title" src="../../img/group-title.png" alt=""> <div class="text">抱团 / 信息共享 / 互助申学</div> <div class="case flexflex"> <div class="QRcode flexcenter"> <img class="img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" alt=""> </div> <div class="hint flexcenter"> <img class="img img-left" src="../../img/group-arrows.png" alt=""> <span class="hint-text">添加寄托葱哥进群</span> <img class="img" src="../../img/group-arrows.png" alt=""> </div> </div> </div> </div>`,
template: `<div class="huddle-box" @click="closeGroup" v-if="state"> <div class="box flexflex" @click.stop="holdback"> <img class="bj" :src="valueUrl + '/img/group-bj.svg'" alt=""> <img class="bj-bottom" :src="valueUrl + '/img/group-bottom.png'" alt=""> <img class="top" :src="valueUrl + '/img/group-top.png'" alt=""> <img class="title" :src="valueUrl + '/img/group-title.png'" alt=""> <div class="text">抱团 / 信息共享 / 互助申学</div> <div class="case flexflex"> <div class="QRcode flexcenter"> <img class="img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" alt=""> </div> <div class="hint flexcenter"> <img class="img img-left" :src="valueUrl + '/img/group-arrows.png'" alt=""> <span class="hint-text">添加寄托葱哥进群</span> <img class="img" :src="valueUrl + '/img/group-arrows.png'" alt=""> </div> </div> </div> </div>`,
});

12
component/huddle-box/huddle-box.txt
View File

@@ -1,18 +1,18 @@
<div class="huddle-box" @click="closeGroup" v-if="state">
<div class="box flexflex" @click.stop="holdback">
<img class="bj" src="../../img/group-bj.svg" alt="">
<img class="bj-bottom" src="../../img/group-bottom.png" alt="">
<img class="top" src="../../img/group-top.png" alt="">
<img class="title" src="../../img/group-title.png" alt="">
<img class="bj" :src="valueUrl + '/img/group-bj.svg'" alt="">
<img class="bj-bottom" :src="valueUrl + '/img/group-bottom.png'" alt="">
<img class="top" :src="valueUrl + '/img/group-top.png'" alt="">
<img class="title" :src="valueUrl + '/img/group-title.png'" alt="">
<div class="text">抱团 / 信息共享 / 互助申学</div>
<div class="case flexflex">
<div class="QRcode flexcenter">
<img class="img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" alt="">
</div>
<div class="hint flexcenter">
<img class="img img-left" src="../../img/group-arrows.png" alt="">
<img class="img img-left" :src="valueUrl + '/img/group-arrows.png'" alt="">
<span class="hint-text">添加寄托葱哥进群</span>
<img class="img" src="../../img/group-arrows.png" alt="">
<img class="img" :src="valueUrl + '/img/group-arrows.png'" alt="">
</div>
</div>
</div>

2
component/item-offer/item-offer.js
View File

@@ -31,5 +31,5 @@ export const itemOffer = defineComponent({
itemHead,
},
template: `<div class="item-box item-offer"> <item-head :itemdata="item" :page="page"></item-head> <a class="school flexacenter" :href="item.url" target="_blank"> <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" /> <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div> </a> <a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank"> <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div> <div class="value flex1 one-line-display">{{ item.data.professional }}</div> </a> <a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank"> <div class="key">项目</div> <div class="value flex1 one-line-display">{{ item.data.project }}</div> </a> <a class="info flexacenter" :href="item.url" target="_blank"> {{ item.data.semester }} <div class="line"></div> {{ item.data.degree }} <div class="line"></div> <div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div> </a> <a class="message" v-if="item.content" :href="item.url" target="_blank">{{ item.content }}</a> <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
template: `<div class="item-box item-offer"> <item-head :itemdata="item" :page="page"></item-head> <a class="school flexacenter" :href="item.url" target="_blank"> <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" /> <div class="text flex1 one-line-display-v2">{{ item.data.schoolname }}</div> </a> <a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank"> <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div> <div class="value flex1 one-line-display-v2">{{ item.data.professional }}</div> </a> <a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank"> <div class="key">项目</div> <div class="value flex1 one-line-display-v2">{{ item.data.project }}</div> </a> <a class="info flexacenter" :href="item.url" target="_blank"> {{ item.data.semester }} <div class="line"></div> {{ item.data.degree }} <div class="line"></div> <div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div> </a> <a class="message" v-if="item.content" :href="item.url" target="_blank">{{ item.content }}</a> <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
});

6
component/item-offer/item-offer.txt
View File

@@ -2,17 +2,17 @@
<item-head :itemdata="item" :page="page"></item-head>
<a class="school flexacenter" :href="item.url" target="_blank">
<img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" />
<div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>
<div class="text flex1 one-line-display-v2">{{ item.data.schoolname }}</div>
</a>
<a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank">
<div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div>
<div class="value flex1 one-line-display">{{ item.data.professional }}</div>
<div class="value flex1 one-line-display-v2">{{ item.data.professional }}</div>
</a>
<a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank">
<div class="key">项目</div>
<div class="value flex1 one-line-display">{{ item.data.project }}</div>
<div class="value flex1 one-line-display-v2">{{ item.data.project }}</div>
</a>
<a class="info flexacenter" :href="item.url" target="_blank">