xinkeaboard/xinkeaboard-promotion-portal/src/views/Home.vue

<template>
  <div class="promotion-portal">
    <div
      class="promotion-portal-top"
      ref="topRef"
      :style="{ height: topHeight + 'px', backgroundImage: `url(${AiBgImage})` }"
    >
      <div class="promotion-portal-top__wrapper">
        <TopContent></TopContent>
      </div>
    </div>
    <div
      class="promotion-portal-tab record"
      ref="tab1Ref"
      :style="{ height: tab1Height + 'px', backgroundImage: `url(${Tab1Image})` }"
    ></div>
    <div
      class="promotion-portal-tab cando"
      ref="tab2Ref"
      :style="{ height: tab2Height + 'px', backgroundImage: `url(${Tab2Image})` }"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import TopContent from '@/components/TopContent.vue';
import AiBgImage from '@/assets/images/ai-bg.png';
import Tab1Image from '@/assets/images/record.png';
import Tab2Image from '@/assets/images/cando.png';

const topRef = ref<HTMLElement | null>(null);
const tab1Ref = ref<HTMLElement | null>(null);
const tab2Ref = ref<HTMLElement | null>(null);

const topHeight = ref(0);
const tab1Height = ref(0);
const tab2Height = ref(0);

function setHeight(refEl: HTMLElement | null, imgUrl: string, heightRef: typeof topHeight) {
  if (!refEl) return;
  const img = new Image();
  img.src = imgUrl;
  img.onload = () => {
    const ratio = img.height / img.width;
    heightRef.value = refEl.offsetWidth * ratio;
  };
}

function setRem() {
  const baseSize = 16; // 基准字体大小
  const designWidth = 1920; // 设计稿宽度
  const scale = window.innerWidth / designWidth;
  document.documentElement.style.fontSize = baseSize * scale + 'px';
}

setRem();

function updateAllHeights() {
  setHeight(topRef.value, AiBgImage, topHeight);
  setHeight(tab1Ref.value, Tab1Image, tab1Height);
  setHeight(tab2Ref.value, Tab2Image, tab2Height);
}

onMounted(() => {
  updateAllHeights();
  window.addEventListener('resize', updateAllHeights);
  window.addEventListener('resize', setRem);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateAllHeights);
  window.addEventListener('resize', setRem);
});
</script>

<style lang="scss" scoped>
.promotion-portal {
  width: 100%;
  overflow: auto;

  &-top,
  &-tab {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 或 cover，根据你需求 */
    transition: height 0.1s;
  }

  &-top {
    position: relative;
    &__wrapper {
      position: absolute;
      top: 2rem;
      left: 16.25rem;
      width: 41rem;
      height: 34rem;
      overflow: auto;
    }
  }

  &-tab.record {
    /* backgroundImage 由绑定 style 设置 */
  }

  &-tab.cando {
    /* backgroundImage 由绑定 style 设置 */
  }
}
</style>