You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
7.2 KiB
340 lines
7.2 KiB
<template>
|
|
<div class="homepage">
|
|
<!-- 顶部主图背景 -->
|
|
<!-- <div class="main-icon"></div> -->
|
|
<img class="main-icon" :src="robot" alt="AI小财神" />
|
|
<!-- 按钮区域 -->
|
|
<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 { setHeight } from "@/utils/setHeight";
|
|
import { useDataStore } from "@/store/dataList.js";
|
|
const { getQueryVariable, setActiveTabIndex } = useDataStore();
|
|
|
|
import robot from "@/assets/img/Selectmodel/-s-机器人.png";
|
|
|
|
const router = useRouter();
|
|
const pageRef = ref(null);
|
|
|
|
onMounted(() => {
|
|
// setHeight(pageRef.value)
|
|
const isPhone =
|
|
/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(
|
|
navigator.userAgent
|
|
);
|
|
!isPhone &&
|
|
localStorage.setItem(
|
|
"localToken",
|
|
decodeURIComponent(String(getQueryVariable("token")))
|
|
);
|
|
});
|
|
|
|
const goToDBQBmodel = () => {
|
|
router.push("/DBQBmodel");
|
|
};
|
|
const goToEmotionsmodel = () => {
|
|
router.push("/Emotionsmodel");
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.homepage {
|
|
/* height: 100vh; */
|
|
/* width: 100vw; */
|
|
/* min-height: 100vw; */
|
|
/* background-color: #000cfc; */
|
|
background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/49a45ea0e9ff44e9a965cc1de8059a77.png");
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
/* overflow-x: hidden; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-icon {
|
|
max-width: 350px;
|
|
width: 28vw;
|
|
/* max-width: 280px; */
|
|
height: auto;
|
|
margin-top:39vw;
|
|
}
|
|
|
|
/* ===== 默认（PC端）按钮区域 ===== */
|
|
.buttons-container {
|
|
margin-top: 4vh;
|
|
display: flex;
|
|
gap: 50vw;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.btn-item {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 90vw;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.btn-icon {
|
|
/* height: 80px;
|
|
width: 100%; */
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.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-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 {
|
|
height: 200px;
|
|
width: 150%;
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.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: 200vw;
|
|
max-width: 200vw;
|
|
height: 6vw;
|
|
background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/3e36a5a3d676f86e022f7cd41a2fa0a6.png");
|
|
background-size: 100% 100%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.footer-text2 {
|
|
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) {
|
|
.homepage {
|
|
background-image: url("@/assets/img/Selectmodel/-s-bg.png");
|
|
/* height: auto; */
|
|
/* 解决底部留白 */
|
|
/* width: 100%; */
|
|
min-height: 100%;
|
|
background-size: 100% 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.main-icon {
|
|
margin-top: 350px;
|
|
/* width: 9rem; */
|
|
}
|
|
|
|
.buttons-container {
|
|
margin-top: 80px;
|
|
gap: 10vw;
|
|
position: relative;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.btn-item {
|
|
width: 40vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.btn-icon {
|
|
height: 80px;
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
.btn-ball {
|
|
height: 80px;
|
|
margin-top: -10px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-text {
|
|
position: absolute;
|
|
bottom: 45px;
|
|
width: 90%;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.footer-text1 {
|
|
background-image: url("@/assets/img/Selectmodel/智能体.png");
|
|
width: 100vw;
|
|
height: 60px;
|
|
margin-top: 10px;
|
|
background-size: 100% 100%;
|
|
/* 保证全宽显示 */
|
|
}
|
|
|
|
.footer-text2 {
|
|
width: 70vw;
|
|
height: 24px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
/* 平板适配 */
|
|
@media screen and (min-width: 601px) and (max-width: 1024px) {
|
|
.homepage {
|
|
background-image: url("@/assets/img/Selectmodel/-s-bg.png");
|
|
}
|
|
|
|
.main-icon {
|
|
margin-top: calc(650px - 30vw);
|
|
}
|
|
|
|
.btn-item {
|
|
padding-top: 20px;
|
|
width: 300vw;
|
|
position: relative;
|
|
}
|
|
.buttons-container{
|
|
gap:30vw;
|
|
margin-top: 5vh;
|
|
}
|
|
.btn-icon,
|
|
.btn-ball {
|
|
height: 100px;
|
|
width: 300px;
|
|
}
|
|
|
|
.btn-text {
|
|
height: 90px;
|
|
width: 100%;
|
|
top: 70%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.footer-text1 {
|
|
background-image: url("@/assets/img/Selectmodel/智能体.png");
|
|
width: 100vw;
|
|
max-width: 900px;
|
|
height: 200px;
|
|
}
|
|
|
|
.footer-text2 {
|
|
padding-top: 30px;
|
|
height: 26px;
|
|
}
|
|
}
|
|
|
|
/* 大屏幕适配 - 背景图铺满整个屏幕 */
|
|
@media screen and (min-width: 1025px) {
|
|
.homepage {
|
|
background-size: cover;
|
|
min-height: 100vh;
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.main-icon {
|
|
margin-top:46rem;
|
|
width: calc(20vw + 100px);
|
|
max-width: 300px;
|
|
min-width: 300px;
|
|
}
|
|
|
|
/* 隐藏滚动条 */
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1025px) and (max-width: 1700px){
|
|
.main-icon {
|
|
max-width: 350px;
|
|
width: 28vw;
|
|
height: auto;
|
|
margin-top:40rem;
|
|
}
|
|
}
|
|
</style>
|