feat: 新增抱团组件和申请助手弹窗组件
新增huddle-box和helper-pop组件，包含相关图片资源和样式调整 修复item-mj组件中itemBottom导入错误 优化移动端样式适配 更新sectionV2页面引入新组件 补充公共样式和动画效果
This commit is contained in:
DESKTOP-RQ919RC\Pc
30
component/helper-pop/helper-pop.js
Normal file
30
component/helper-pop/helper-pop.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue;
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const helperPop = defineComponent({
|
||||
name: "item-bottom",
|
||||
props: {},
|
||||
|
||||
setup(props) {
|
||||
let isMobile = ref(false);
|
||||
|
||||
let state = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
isMobile.value = window.isMobile;
|
||||
});
|
||||
|
||||
const open = () => (state.value = true);
|
||||
const closeGroup = () => (state.value = false);
|
||||
|
||||
const holdback = () => {};
|
||||
|
||||
return { 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>`,
|
||||
});
|
||||
18
component/helper-pop/helper-pop.txt
Normal file
18
component/helper-pop/helper-pop.txt
Normal file
@@ -0,0 +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="">
|
||||
<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>
|
||||
30
component/huddle-box/huddle-box.js
Normal file
30
component/huddle-box/huddle-box.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// my-component.js
|
||||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||||
const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue;
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const huddleBox = defineComponent({
|
||||
name: "item-bottom",
|
||||
props: {},
|
||||
|
||||
setup(props) {
|
||||
let isMobile = ref(false);
|
||||
|
||||
let state = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
isMobile.value = window.isMobile;
|
||||
});
|
||||
|
||||
const open = () => (state.value = true);
|
||||
const closeGroup = () => (state.value = false);
|
||||
|
||||
const holdback = () => {};
|
||||
|
||||
return { 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>`,
|
||||
});
|
||||
19
component/huddle-box/huddle-box.txt
Normal file
19
component/huddle-box/huddle-box.txt
Normal file
@@ -0,0 +1,19 @@
|
||||
<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>
|
||||
@@ -5,7 +5,7 @@ const { defineComponent, ref, defineAsyncComponent } = Vue;
|
||||
// const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js"));
|
||||
// const { itemHead } = await import(withVer("../item-head/item-head.js"));
|
||||
const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));
|
||||
const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemHead));
|
||||
const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
|
||||
|
||||
// 定义组件（直接使用模板）
|
||||
export const itemMj = defineComponent({
|
||||
|
||||
Reference in New Issue
Block a user