AIxiaocaishen/src/views/DBQBmodel.vue

<script setup>
import { onMounted, ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import bgImageSmall from "@/assets/img/DBQBmodel/手机背景.png";
import bgImageLarge from "@/assets/img/DBQBmodel/电脑背景.png";
import topIcon from "@/assets/img/DBQBmodel/大标题.png";
import subtitle from "@/assets/img/DBQBmodel/-s-构建场景.png";
import text1 from "@/assets/img/DBQBmodel/-s-数据可计算.png";
import text2 from "@/assets/img/DBQBmodel/-s-场景可预演.png";
import text3 from "@/assets/img/DBQBmodel/-s-交易可掌控.png";
import btnIcon from "@/assets/img/DBQBmodel/-s-开启财运.png";
import { setHeight } from "@/utils/setHeight";

const router = useRouter();
const pageRef = ref(null);
const windowWidth = ref(window.innerWidth);

// 响应式计算背景图片
const bgImage = computed(() => {
  return windowWidth.value > 1024 ? bgImageLarge : bgImageSmall;
});

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => {
  setHeight(pageRef.value);
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const goToHomePage = () => {
  // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
  sessionStorage.setItem("activeTabAI", "AIchat");
  sessionStorage.setItem("activeIndexAI", "0");
  router.push("/homePage");
};
</script>

<template>
  <div
    ref="pageRef"
    class="homepage"
    :style="{ backgroundImage: `url(${bgImage})` }"
  >
    <div v-if="false"></div>
    <!-- 顶部图标 -->
    <img class="top-icon" :src="topIcon" alt="顶部图标" />
    <!-- 副标题 -->
    <div class="bottom-icon">
      <img class="sub-title" :src="subtitle" alt="构建场景化交易" />
      <!-- 中间文字 -->
      <div class="content-text">
        <img class="content-text1" :src="text1" alt=" 数据可计算" />
        <img class="content-text2" :src="text2" alt=" 场景可预演" />
        <img class="content-text3" :src="text3" alt=" 交易可掌控" />
      </div>

      <!-- 底部按钮 -->
      <div class="buttons-container">
        <button class="btn-item" @click="goToHomePage">
          <img :src="btnIcon" alt="按钮图片" />
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.homepage {
  /* background-image: url("@/assets/img/DBQBmodel/bg.png"); */
  /* width: 100vw; */
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部标题图 */
.top-icon {
  width: 80%;
  max-width: 500px;
  height: auto;
  /* margin-top: 20px; */
  position: absolute;
  top: 11vh;
}

.bottom-icon {
  /* width: 100%; */
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 10vh;

  align-items: center;
}

/* 副标题 */
.sub-title {
  /* padding-top: 40px; */
  width: 100%;
  max-width: 350px;
  height: auto;
  /* margin-top: 18rem; */
}

/* 中间三个描述图 */
.content-text {
  display: flex;
  flex-direction: row;
  /* 改为横向排列 */
  align-items: center;
  justify-content: center;
  /* 添加水平居中 */
  gap: 23px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  /* 添加换行支持，防止小屏幕溢出 */
}

.content-text img {
  width: 80%;
  max-width: 300px;
  height: auto;
  flex: 1;
  /* 让图片平均分配空间 */
  min-width: 200px;
  /* 设置最小宽度 */
}

/* 按钮区 */
.buttons-container {
  align-items: center;
}

.btn-item {
  width: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-item img {
  width: 200%;
  max-width: 350px;
  height: auto;
}

/* 手机适配 - 小屏幕时保持纵向排列 */
@media screen and (max-width: 768px) {
  .top-icon {
    margin-top: 12%;
    width: 90%;
  }

  .sub-title {
    width: 80%;
    margin-top: 25%;
  }

  .content-text {
    flex-direction: column;
    /* 小屏幕时恢复纵向排列 */
  }

  .content-text img {
    width: 70%;
    flex: none;
    /* 取消flex布局 */
  }

  .btn-item img {
    width: 50%;
    margin-top: 20px;
  }
}
</style>