|
|
|
@ -1,8 +1,8 @@ |
|
|
|
<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 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' |
|
|
|
@ -26,43 +26,44 @@ const handleResize = () => { |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
setHeight(pageRef.value) |
|
|
|
window.addEventListener('resize', handleResize) |
|
|
|
setHeight(pageRef.value) |
|
|
|
window.addEventListener('resize', handleResize) |
|
|
|
}) |
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
window.removeEventListener('resize', handleResize) |
|
|
|
window.removeEventListener('resize', handleResize) |
|
|
|
}) |
|
|
|
|
|
|
|
const goToHomePage = () => { |
|
|
|
// 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab |
|
|
|
sessionStorage.setItem("activeTabAI", "AIchat") |
|
|
|
sessionStorage.setItem("activeIndexAI", "0") |
|
|
|
router.push("/homePage") |
|
|
|
// 设置 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 ref="pageRef" class="homepage" :style="{ backgroundImage: `url(${bgImage})` }"> |
|
|
|
<div v-if="false"> </div> |
|
|
|
<!-- 顶部图标 --> |
|
|
|
<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> |
|
|
|
@ -76,150 +77,97 @@ const goToHomePage = () => { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
padding: 40px 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
/* 顶部标题图 */ |
|
|
|
.top-icon { |
|
|
|
width: 80%; |
|
|
|
width: 80%; |
|
|
|
max-width: 500px; |
|
|
|
height: auto; |
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* 副标题 */ |
|
|
|
.sub-title { |
|
|
|
padding-top: 40px; |
|
|
|
/* padding-top: 40px; */ |
|
|
|
width: 100%; |
|
|
|
max-width: 350px; |
|
|
|
height: auto; |
|
|
|
margin: 30px 0; |
|
|
|
margin-top: 18rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 中间三个描述图 */ |
|
|
|
.content-text { |
|
|
|
padding-top: 30px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; /* 改为横向排列 */ |
|
|
|
align-items: center; |
|
|
|
justify-content: center; /* 添加水平居中 */ |
|
|
|
gap: 23px; |
|
|
|
margin-bottom: 10px; |
|
|
|
flex-wrap: wrap; /* 添加换行支持，防止小屏幕溢出 */ |
|
|
|
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; /* 设置最小宽度 */ |
|
|
|
width: 80%; |
|
|
|
max-width: 300px; |
|
|
|
height: auto; |
|
|
|
flex: 1; |
|
|
|
/* 让图片平均分配空间 */ |
|
|
|
min-width: 200px; |
|
|
|
/* 设置最小宽度 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮区 */ |
|
|
|
.buttons-container { |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.btn-item { |
|
|
|
height: 300px; |
|
|
|
width: auto ; |
|
|
|
width: auto; |
|
|
|
background: none; |
|
|
|
border: none; |
|
|
|
padding: 0; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-item img { |
|
|
|
width: 200%; |
|
|
|
max-width:350px; |
|
|
|
height: 120px; |
|
|
|
max-width: 350px; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
/* 手机适配 - 小屏幕时保持纵向排列 */ |
|
|
|
@media screen and (max-width: 600px) { |
|
|
|
.homepage { |
|
|
|
padding: 20px 10px; |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
.top-icon { |
|
|
|
margin-top: 6rem; |
|
|
|
margin-top: 12%; |
|
|
|
width: 90%; |
|
|
|
} |
|
|
|
|
|
|
|
.sub-title { |
|
|
|
width: 80%; |
|
|
|
margin: 20px 0; |
|
|
|
margin-top: 25%; |
|
|
|
} |
|
|
|
|
|
|
|
.content-text { |
|
|
|
flex-direction: column; /* 小屏幕时恢复纵向排列 */ |
|
|
|
flex-direction: column; |
|
|
|
/* 小屏幕时恢复纵向排列 */ |
|
|
|
} |
|
|
|
|
|
|
|
.content-text img { |
|
|
|
width: 70%; |
|
|
|
flex: none; /* 取消flex布局 */ |
|
|
|
flex: none; |
|
|
|
/* 取消flex布局 */ |
|
|
|
} |
|
|
|
|
|
|
|
.btn-item img { |
|
|
|
width: 300px; |
|
|
|
width: 50%; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 平板适配 */ |
|
|
|
@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> |
|
|
|
|
宋杰
5 days ago
