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/-s-bg.png'
import bgImageLarge from '@/assets/img/DBQBmodel/bg.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})` }">
        <!-- 顶部图标 -->
        <img class="top-icon" :src="topIcon" alt="顶部图标" />
        <!-- 副标题 -->
        <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>
</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;
  padding: 40px 20px;
  box-sizing: border-box;
}

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

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

/* 中间三个描述图 */
.content-text {
    padding-top: 30px;
    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 {
    height: 300px;
    width: auto ;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.btn-item img {
  width: 200%;
  max-width:350px;
  height: 120px;
}

/* 手机适配 - 小屏幕时保持纵向排列 */
@media screen and (max-width: 600px) {
  .homepage {
    padding: 20px 10px;
  }

  .top-icon {
    margin-top: 6rem;
    width: 90%;
  }

  .sub-title {
    width: 80%;
    margin: 20px 0;
  }

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

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

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

/* 平板适配 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .homepage {
        background-position: center 20%;
    }
    .top-icon {
        margin-top: 190px;
        width: 100%;
  
    }

    .sub-title {
        width: 85%;
    }

    .content-text {
        flex-direction: row; /* 平板及以上保持横向排列 */
    }

    .content-text img {
        width: 30%; /* 调整宽度适应横向布局 */
        max-width: 250px;
    }

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

/* 桌面端适配 */
@media screen and (min-width: 1025px) {
    .content-text img {
        width: 25%; /* 桌面端进一步调整宽度 */
        max-width: 280px;
    }
    /* 顶部标题图 */
.top-icon {
     width: 35vw;
    max-width: 500vw;
    height: auto;
    margin-top: 8vw;
 
}
}
@media screen and (min-width: 1024px) and (max-width: 2000px){
    /* 顶部标题图 */
.top-icon {
     width: 50vw;
    max-width: 500vw;
    height: auto;
    margin-top: 15vw;
 
}
}
</style>