gzh/src/views/Member_bayj.vue

<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>