Merge branch 'ds' of http://39.101.133.168:8807/hongxilin/AIxiaocaishen into ds
ds_hxl
-
BINsrc/assets/img/DBQBmodel/-s-bg.png
-
BINsrc/assets/img/DBQBmodel/-s-交易可掌控.png
-
BINsrc/assets/img/DBQBmodel/-s-场景可预演.png
-
BINsrc/assets/img/DBQBmodel/-s-开启财运.png
-
BINsrc/assets/img/DBQBmodel/-s-数据可计算.png
-
BINsrc/assets/img/DBQBmodel/-s-构建场景.png
-
BINsrc/assets/img/DBQBmodel/大标题.png
-
BINsrc/assets/img/Emotionsmodel/-s-bg.png
-
BINsrc/assets/img/Emotionsmodel/-s-四维.png
-
BINsrc/assets/img/Emotionsmodel/-s-开启财运.png
-
BINsrc/assets/img/Emotionsmodel/-s-标题 拷贝.png
-
BINsrc/assets/img/Emotionsmodel/大标题.png
-
BINsrc/assets/img/Selectmodel/-s-AI情绪大模型.png
-
BINsrc/assets/img/Selectmodel/-s-bg.png
-
BINsrc/assets/img/Selectmodel/-s-夺宝奇兵logo.png
-
BINsrc/assets/img/Selectmodel/-s-夺宝奇兵大模型.png
-
BINsrc/assets/img/Selectmodel/-s-弘历团队.png
-
BINsrc/assets/img/Selectmodel/-s-情绪大模型logo.png
-
BINsrc/assets/img/Selectmodel/-s-机器人.png
-
BINsrc/assets/img/Selectmodel/智能体.png
-
BINsrc/assets/img/Selectmodel/球.png
-
BINsrc/assets/img/Selectmodel/球2.png
-
BINsrc/assets/img/Selectmodel/金轮 拷贝.png
-
27src/router/index.js
-
246src/views/DBQBmodel.vue
-
230src/views/Emotionsmodel.vue
-
314src/views/Selectmodel.vue
After Width: 750 | Height: 1624 | Size: 1.4 MiB |
After Width: 329 | Height: 89 | Size: 32 KiB |
After Width: 329 | Height: 89 | Size: 32 KiB |
After Width: 503 | Height: 175 | Size: 47 KiB |
After Width: 329 | Height: 89 | Size: 32 KiB |
After Width: 537 | Height: 152 | Size: 73 KiB |
After Width: 636 | Height: 306 | Size: 99 KiB |
After Width: 750 | Height: 1624 | Size: 1.4 MiB |
After Width: 722 | Height: 641 | Size: 510 KiB |
After Width: 503 | Height: 175 | Size: 47 KiB |
After Width: 750 | Height: 80 | Size: 45 KiB |
After Width: 557 | Height: 399 | Size: 185 KiB |
After Width: 252 | Height: 58 | Size: 9.2 KiB |
After Width: 750 | Height: 1624 | Size: 1.5 MiB |
After Width: 185 | Height: 101 | Size: 30 KiB |
After Width: 292 | Height: 58 | Size: 10 KiB |
After Width: 450 | Height: 51 | Size: 22 KiB |
After Width: 142 | Height: 156 | Size: 33 KiB |
After Width: 244 | Height: 249 | Size: 90 KiB |
After Width: 750 | Height: 114 | Size: 36 KiB |
After Width: 300 | Height: 191 | Size: 63 KiB |
After Width: 300 | Height: 191 | Size: 63 KiB |
After Width: 161 | Height: 156 | Size: 46 KiB |
@ -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-ai { |
|||
height: 150px; |
|||
width: 100%; |
|||
background-image: url('@/assets/img/Selectmodel/金轮 拷贝.png'); |
|||
} |
|||
|
|||
/* 按钮图标 */ |
|||
.btn-item img { |
|||
width: 120px; |
|||
height: 120px; |
|||
object-fit: contain; |
|||
margin-bottom: 12px; /* 图片与文字间距 */ |
|||
.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> |
|||
} |
|||
</style> |