|
|
|
@ -1,210 +1,286 @@ |
|
|
|
<template> |
|
|
|
<div class="homepage"> |
|
|
|
<!-- 顶部主图背景 --> |
|
|
|
<div class="main-icon"></div> |
|
|
|
|
|
|
|
<!-- 按钮区域 --> |
|
|
|
<div class="buttons-container"> |
|
|
|
<!-- 夺宝奇兵模块 --> |
|
|
|
<div class="btn-item" @click="goToDBQBmodel"> |
|
|
|
<div class="btn-icon btn-dbqb"></div> |
|
|
|
<div class="btn-ball"></div> |
|
|
|
<div class="btn-text btn-text-dbqb"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- AI情绪模块 --> |
|
|
|
<div class="btn-item" @click="goToEmotionsmodel"> |
|
|
|
<div class="btn-icon btn-ai"></div> |
|
|
|
<div class="btn-ball"></div> |
|
|
|
<div class="btn-text btn-text-ai"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 底部口号与说明 --> |
|
|
|
<div class="footer-wrapper"> |
|
|
|
<div class="footer-text1"></div> |
|
|
|
<div class="footer-text2"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { onMounted, ref } from 'vue' |
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
import bgImage from '../assets/img/homePage/bk.png' |
|
|
|
import btnIcon from '../assets/img/homePage/AIicon.png' |
|
|
|
import { setHeight } from '../utils/setHeight' |
|
|
|
import { setHeight } from '@/utils/setHeight' |
|
|
|
|
|
|
|
const router = useRouter() |
|
|
|
const pageRef = ref(null) |
|
|
|
|
|
|
|
// 适配高度，mounted 后调用自定义方法动态设置页面高度 |
|
|
|
onMounted(() => { |
|
|
|
setHeight(pageRef.value) |
|
|
|
}) |
|
|
|
|
|
|
|
// 点击跳转方法 |
|
|
|
const goToDBQBmodel = () => { |
|
|
|
router.push('/DBQBmodel') // 请根据项目实际路由修改 |
|
|
|
router.push('/DBQBmodel') |
|
|
|
} |
|
|
|
const goToEmotionsmodel = () => { |
|
|
|
router.push('/Emotionsmodel') |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div |
|
|
|
ref="pageRef" |
|
|
|
class="homepage" |
|
|
|
:style="{ backgroundImage: `url(${bgImage})` }" |
|
|
|
> <!-- 主标题 --> |
|
|
|
<div class="main-title">AI小财神</div> |
|
|
|
<div class="buttons-container"> |
|
|
|
<div class="btn-item" @click="goToDBQBmodel"> |
|
|
|
<img :src="btnIcon" alt="夺宝奇兵大模型" /> |
|
|
|
<div class="btn-text">夺宝奇兵大模型</div> |
|
|
|
</div> |
|
|
|
<div class="btn-item" @click="goToEmotionsmodel"> |
|
|
|
<img :src="btnIcon" alt="AI情绪大模型" /> |
|
|
|
<div class="btn-text">AI情绪大模型</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="footer-text"> |
|
|
|
弘历炒股大模型<br /> |
|
|
|
真正用AI炒股的时代来了<br /> |
|
|
|
</div> |
|
|
|
<div class="footer-text2">弘历智链研发团队荣耀出品</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.homepage { |
|
|
|
/* 背景图全屏覆盖 */ |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
min-height: 100vh; |
|
|
|
background-color: #000cfc; |
|
|
|
background-image: url('@/assets/img/Selectmodel/-s-bg.png'); |
|
|
|
background-size: cover; |
|
|
|
background-position: center; |
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
|
|
/* flex布局，居中内容 */ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
/* 文字颜色白色，适应深色背景 */ |
|
|
|
color: white; |
|
|
|
text-align: center; |
|
|
|
padding: 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 主标题 */ |
|
|
|
.main-title { |
|
|
|
font-size: 60px; |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 250px; |
|
|
|
letter-spacing: 4px; |
|
|
|
.main-icon { |
|
|
|
width: 90vw; |
|
|
|
max-width: 280px; |
|
|
|
height: 280px; |
|
|
|
background-image: url('@/assets/img/Selectmodel/-s-机器人.png'); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
margin-top: 10vh; |
|
|
|
} |
|
|
|
|
|
|
|
/* 两个按钮容器横排，间距适中 */ |
|
|
|
/* ===== 默认（PC端）按钮区域 ===== */ |
|
|
|
.buttons-container { |
|
|
|
margin-top: 5vh; |
|
|
|
display: flex; |
|
|
|
gap: 60px; /* 增加按钮之间的间距 */ |
|
|
|
margin-bottom: 40px; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 30vw; |
|
|
|
justify-content: center; |
|
|
|
align-items: flex-end; |
|
|
|
flex-wrap: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
/* 单个按钮样式 */ |
|
|
|
.btn-item { |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
width: 200px; /* 按钮宽度 */ |
|
|
|
height: 240px; /* 按钮高度 */ |
|
|
|
user-select: none; |
|
|
|
transition: transform 0.2s ease; |
|
|
|
margin-top: 50px; |
|
|
|
width: 90vw; |
|
|
|
max-width: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-icon { |
|
|
|
/* height: 80px; |
|
|
|
width: 100%; */ |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
.btn-item:hover { |
|
|
|
transform: scale(1.05); |
|
|
|
|
|
|
|
.btn-dbqb { |
|
|
|
height: 150px; |
|
|
|
width: 100%; |
|
|
|
background-image: url('@/assets/img/Selectmodel/-s-夺宝奇兵logo.png'); |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮图标 */ |
|
|
|
.btn-item img { |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
object-fit: contain; |
|
|
|
margin-bottom: 12px; /* 图片与文字间距 */ |
|
|
|
.btn-ai { |
|
|
|
height: 150px; |
|
|
|
width: 100%; |
|
|
|
background-image: url('@/assets/img/Selectmodel/金轮 拷贝.png'); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-ball { |
|
|
|
height: 150px; |
|
|
|
width: 150%; |
|
|
|
margin-top: -30px; |
|
|
|
background-image: url('@/assets/img/Selectmodel/球.png'); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮文字 */ |
|
|
|
.btn-text { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 600; |
|
|
|
letter-spacing: 2px; /* 字母间距 */ |
|
|
|
height: 200px; |
|
|
|
width: 150%; |
|
|
|
position: absolute; |
|
|
|
bottom: -20px; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 底部文字，行间距 */ |
|
|
|
.footer-text { |
|
|
|
font-size: 40px; |
|
|
|
line-height: 1.5; |
|
|
|
max-width: 500px; |
|
|
|
user-select: none; |
|
|
|
white-space: pre-line; /* 支持换行 */ |
|
|
|
margin-top: -20px; |
|
|
|
font-weight: bold; |
|
|
|
text-shadow: 2px 2px 5px red; /* 给文字添加红色边框 */ |
|
|
|
.btn-text-dbqb { |
|
|
|
background-image: url('@/assets/img/Selectmodel/-s-夺宝奇兵大模型.png'); |
|
|
|
} |
|
|
|
.btn-text-ai { |
|
|
|
background-image: url('@/assets/img/Selectmodel/-s-AI情绪大模型.png'); |
|
|
|
} |
|
|
|
|
|
|
|
/* ===== 底部口号区域 ===== */ |
|
|
|
.footer-wrapper { |
|
|
|
margin-top: 6vh; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
gap: 5vh; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-text1 { |
|
|
|
width: 100vh; |
|
|
|
max-width: 100vh; |
|
|
|
height: 9vh; |
|
|
|
background-image: url('@/assets/img/Selectmodel/智能体.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-text2 { |
|
|
|
padding-top: 90px; |
|
|
|
max-width: 500px; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 20px; |
|
|
|
width: 70vw; |
|
|
|
max-width: 360px; |
|
|
|
height: 30px; |
|
|
|
margin-bottom: 60px; |
|
|
|
background-image: url('@/assets/img/Selectmodel/-s-弘历团队.png'); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 响应式 - 手机屏幕 */ |
|
|
|
/* 手机适配 */ |
|
|
|
@media screen and (max-width: 600px) { |
|
|
|
.main-title { |
|
|
|
font-size: 30px; |
|
|
|
.homepage { |
|
|
|
height: auto; /* 解决底部留白 */ |
|
|
|
width: 100%; |
|
|
|
overflow-x: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.main-icon { |
|
|
|
margin-top: 350px; |
|
|
|
width: 9rem; |
|
|
|
height: 10rem; |
|
|
|
} |
|
|
|
|
|
|
|
.buttons-container { |
|
|
|
gap: 30px; |
|
|
|
margin-top: 80px; |
|
|
|
gap: 10vw; |
|
|
|
position: relative; |
|
|
|
flex-wrap: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-item { |
|
|
|
width: 150px; |
|
|
|
height: 180px; |
|
|
|
width: 40vw; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
padding-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-item img { |
|
|
|
width: 80px; |
|
|
|
.btn-icon { |
|
|
|
height: 80px; |
|
|
|
margin-bottom: -10px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-text { |
|
|
|
font-size: 16px; |
|
|
|
.btn-ball { |
|
|
|
height: 80px; |
|
|
|
margin-top: -10px; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-text { |
|
|
|
font-size: 25px; |
|
|
|
max-width: 300px; |
|
|
|
.btn-text { |
|
|
|
position: absolute; |
|
|
|
bottom: 45px; |
|
|
|
width: 90%; |
|
|
|
height: 40px; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-text2 { |
|
|
|
font-size: 18px; |
|
|
|
max-width: 300px; |
|
|
|
} |
|
|
|
.footer-text1 { |
|
|
|
width: 100vw; |
|
|
|
height: 60px; |
|
|
|
margin-top: 10px; |
|
|
|
background-size: 100% 100%; /* 保证全宽显示 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 响应式 - 平板屏幕 */ |
|
|
|
@media screen and (min-width: 601px) and (max-width: 1024px) { |
|
|
|
.main-title { |
|
|
|
font-size: 70px; |
|
|
|
.footer-text2 { |
|
|
|
width: 70vw; |
|
|
|
height: 24px; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.buttons-container { |
|
|
|
gap: 50px; |
|
|
|
} |
|
|
|
/* 平板适配 */ |
|
|
|
@media screen and (min-width: 601px) and (max-width: 1024px) { |
|
|
|
.homepage { |
|
|
|
height: 120vh; |
|
|
|
} |
|
|
|
.main-icon { |
|
|
|
margin-top: 50%; |
|
|
|
width: 50vw; |
|
|
|
height: 50vw; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-item { |
|
|
|
width: 350px; |
|
|
|
height: 300px; |
|
|
|
padding-top: 20px; |
|
|
|
width: 300vw; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-item img { |
|
|
|
width: 100px; |
|
|
|
.btn-icon, |
|
|
|
.btn-ball { |
|
|
|
height: 100px; |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-text { |
|
|
|
font-size: 18px; |
|
|
|
|
|
|
|
height: 90px; |
|
|
|
width: 100%; |
|
|
|
top: 70%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
|
|
|
|
.footer-text { |
|
|
|
font-size: 40px; |
|
|
|
max-width: 500px; |
|
|
|
.footer-text1 { |
|
|
|
width: 100vw; |
|
|
|
max-width: 900px; |
|
|
|
height: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
.footer-text2 { |
|
|
|
font-size: 25px; |
|
|
|
padding-top: 30px; |
|
|
|
height: 26px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
dongqian
4 weeks ago
