最新版公众号前端

src/views/Member_bayj.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="home">
+    <nav-bar/>
+    <!-- 图片容器：限制最大高度，确保不挤压按钮区域 -->
+    <div class="bgimg-container" @touchstart="preventDefault" @touchend="preventDefault" @touchmove="preventDefault">
+      <img src="../assets/bayj.webp" alt="背景图片" class="bg-img no-touch" :style="{ display: isImageLoaded ? 'block' : 'none' }">
+      <!-- 加载状态提示（可选） -->
+      <div v-if="!isImageLoaded && !imageLoadError" class="load-tip">加载中...</div>
+    </div>
+    <!-- 按钮容器：固定在下方，确保始终可见 -->
+    <div class="button-container">
+      <div class="button-group">
+        <button class="button" @click="fysq">复印申请</button>
+      </div>
+      <div class="separator"></div>
+      <div class="button-group">
+        <button class="button" @click="wdsq">我的申请</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 脚本部分与之前一致，省略重复代码
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      isImageLoaded: false,
+      imageLoadError: false
+    };
+  },
+  mounted() {
+    this.preloadImage();
+    this.disableImageContextMenu();
+  },
+  methods: { 
+    preloadImage() {
+      const img = new Image();
+      img.src = require('@/assets/bayj.webp');
+      img.onload = () => {
+        this.isImageLoaded = true;
+      };
+      img.onerror = () => {
+        this.imageLoadError = true;
+        console.error('图片加载失败');
+      };
+    },
+    fysq(){
+        this.$router.push({path: "/Bayj_fysq"});
+    },
+    wdsq(){
+      this.$router.push({path: "/Bayj_wdsq"});
+    },
+    preventDefault(e) {
+      e.preventDefault();
+    },
+    disableImageContextMenu() {
+      // 保持原逻辑
+      const images = document.querySelectorAll('.bg-img, .no-touch');
+      images.forEach(img => {
+        img.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });
+        img.addEventListener('touchend', (e) => e.preventDefault(), { passive: false });
+        img.addEventListener('contextmenu', (e) => { e.preventDefault(); return false; });
+        img.addEventListener('mousedown', (e) => { e.preventDefault(); return false; });
+      });
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// 基础变量
+$small-screen: 360px;
+$button-height: 50px; // 按钮容器最小高度，确保不被压缩
+
+.home {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; // 占满整个屏幕高度
+  box-sizing: border-box;
+  padding-bottom: 10px; // 底部预留小间距
+}
+
+// 图片容器：控制高度，确保不挤压按钮
+.bgimg-container {
+  flex: 1; // 占据剩余空间（扣除导航栏和按钮容器高度）
+  width: 100%;
+  max-height: 70vh; // 最大高度不超过屏幕70%，小屏会更小
+  overflow: hidden; // 防止图片超出容器
+  position: relative;
+
+  // 小屏手机进一步限制图片高度
+  @media (max-width: $small-screen) {
+    max-height: 60vh;
+  }
+
+  .bg-img {
+    width: 100%;
+    height: 100%; // 填满容器高度
+    object-fit: contain; // 保持图片比例，完整显示（不会拉伸）
+    object-position: center; // 居中显示
+  }
+
+  .load-tip {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #666;
+    font-size: 14px;
+  }
+}
+
+.no-touch {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  -webkit-user-drag: none;
+}
+
+// 按钮容器：固定最小高度，确保始终完整显示
+.button-container {
+  width: 90%;
+  max-width: 600px;
+  height: 1.4rem;
+  margin: 1rem auto 0; // 水平居中
+  padding: 8px 0;
+  background-color: #0e915c;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  min-height: $button-height; // 最小高度，防止被压缩
+  box-sizing: border-box;
+
+  // 小屏调整宽度和内边距
+  @media (max-width: $small-screen) {
+    width: 95%;
+    padding: 6px 0;
+  }
+}
+
+.button-group {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0 5px;
+}
+
+.button {
+  color: white;
+  font-size: 0.4rem; // 固定基础大小，小屏用媒体查询调整
+  font-weight: bold;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px 0;
+  width: 100%;
+  text-align: center;
+
+  @media (max-width: $small-screen) {
+    font-size: .3rem; // 小屏缩小字体
+    padding: 6px 0;
+  }
+}
+
+.separator {
+  width: 1px;
+  background-color: white;
+  height: 60%; // 相对于按钮容器高度
+}
+</style>