AIxiaocaishen/src/views/Emotionsmodel.vue

<template>
  <div ref="pageRef" class="homepage">
    <!-- 顶部图标 -->
    <img class="top-icon" :src="topIcon" alt="顶部图标" />

    <!-- 中间图示及说明 -->
    <div class="bottom-icon">
      <div class="content-container">
        <!-- 副标题 - 只在屏幕宽度小于等于1024px时显示 -->
        <img
          v-if="screenWidth <= 1024"
          class="sub-title"
          :src="subtitle"
          alt="四维作战体系"
        />
        <!-- 内容图 - 根据屏幕宽度动态切换 -->
        <img class="content-icon" :src="currentContentIcon" alt="四维情绪" />
      </div>

      <!-- 按钮区域 -->
      <div class="buttons-container">
        <button class="btn-item" @click="goToAiEmotion">
          <img :src="btnIcon" alt="开启财运" />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router";
// 移除背景图片的导入，改用CSS设置
import topIcon from "@/assets/img/Emotionsmodel/大标题.png";
import subtitle from "@/assets/img/Emotionsmodel/-s-标题 拷贝.png";
import conteniconLarge from "@/assets/img/Emotionsmodel/_s_四维 拷贝.png";
import conteniconSmall from "@/assets/img/Emotionsmodel/-s-四维.png";
import btnIcon from "@/assets/img/Emotionsmodel/-s-开启财运.png";
import { setHeight } from "@/utils/setHeight";

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

// 根据屏幕宽度选择内容图片
const currentContentIcon = computed(() => {
  return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall;
});

const handleResize = () => {
  screenWidth.value = window.innerWidth;
};

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

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

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

<style scoped>
.homepage {
  min-height: 100vh;
  background-image: url("@/assets/img/DBQBmodel/电脑背景.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

/* 顶部图标 */
.top-icon {
  width: 20vw;
  min-width: 300px;
  height: auto;
  position: absolute;
  top: 10vh;
}

.bottom-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 0vh;
}

/* 四维体系整体容器修复 */
.content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: auto;
}

/* 副标题 */
.sub-title {
  width: 90%;
  max-width: 480px;
  height: auto;
  margin-top: 30px;
}

/* 内容图 */
.content-icon {
  width: 100%;
  height: auto;
}

/* 按钮区域 */
.buttons-container {
  margin-top: auto;
  margin-bottom: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.btn-item {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.btn-item:hover {
  transform: scale(1.05);
}

.btn-item img {
  width: 60%;
  height: auto;
}

@media (max-width: 1024px) {
  /* 四维体系整体容器修复 */
  .content-container {
    width: 60%;
    height: auto;
  }
}
/* 手机适配 */
@media (max-width: 768px) {
  .homepage {
    min-height: 100vh;
    background-image: url("@/assets/img/DBQBmodel/手机背景.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  .top-icon {
    width: 80vw;
    margin-top: -1vh;
  }

  .sub-title {
    width: 95%;
    margin-top: -2vh;
  }

/* 四维体系整体容器修复 */
  .content-container {
    width: 80%;
    height: auto;
  }
  .content-icon {
    width: 87%;
  }

  .buttons-container {
    margin-top: 4vh;
    margin-bottom: 4vh;
  }

  .btn-item img {
    width: 50%;
    height: auto;
  }
}
</style>