AIxiaocaishen/src/views/Emotionsmodel.vue

<template>
  <div
    ref="pageRef"
    class="homepage"
    :style="{ backgroundImage: `url(${bgImage})` }"
  >
    <!-- 顶部图标 -->
    <img class="top-icon" :src="topIcon" alt="顶部图标" />

    <!-- 中间图示及说明 -->
      <!-- 副标题 -->
     <div class="content-container" >
    <img class="sub-title" :src="subtitle" alt="四维作战体系" />
    <img class="content-icon" :src="contenicon" alt="四维情绪" />
      </div>

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

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import bgImage from '@/assets/img/Emotionsmodel/-s-bg.png'
import topIcon from '@/assets/img/Emotionsmodel/大标题.png'
import subtitle from '@/assets/img/Emotionsmodel/-s-标题 拷贝.png'
import contenicon 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)

onMounted(() => {
  setHeight(pageRef.value)
})


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

<style scoped>
.homepage {
  /* width: 100vw; */
  /* min-height: 100vh; */
  background-image: url('@/assets/img/Emotionsmodel/-s-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  text-align: center;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 顶部图标 */
.top-icon {
  width: 40vw;
  max-width: 300px;
  height: auto;
  margin-top: 5vh;
}

/* 四维体系整体容器修复 */
.content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

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

/* 内容图 */
.content-icon {
  width: 90%;
  max-width: 520px;
  height: auto;
  margin-top: 10px;
}

/* 按钮区域 */
.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: 220px;
  max-width: 80vw;
  height: auto;
  padding-top: 30px;
}

/* 平板适配 */
@media (max-width: 1024px) {
  .top-icon {
    margin-top: 80px;
    width: 30vh;
    max-width: 300vh;
  }
 .content-container {
    margin-top: 60px;
     flex-direction: column;
     justify-content: center;
  align-items: center
  }

  .sub-title {
    width: 95%;
    max-width: 420px;
  }

  .content-icon {
    width: 95%;
    max-width: 460px;
  }

  .btn-item img {
    width: 400px;
  }
}

/* 手机适配 */
@media (max-width: 600px) {
  .top-icon {
    width: 80vw;
    margin-top: -1vh;
  }

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

  .content-icon {
    width: 95%;
    margin-top: -1vh;
  }

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

  .btn-item img {
    margin-bottom: 4vh;
    width: 300px;
  }
}

@media (max-width: 400px) {
  .btn-item img {
    width: 120px;
  }
}

</style>