feat: 新增抱团组件和申请助手弹窗组件

新增huddle-box和helper-pop组件,包含相关图片资源和样式调整
修复item-mj组件中itemBottom导入错误
优化移动端样式适配
更新sectionV2页面引入新组件
补充公共样式和动画效果
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-19 19:04:34 +08:00
parent 7e830d9dcb
commit acf03efaf0
34 changed files with 2788 additions and 288 deletions

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