宋杰
2 weeks ago
3 changed files with 339 additions and 1 deletions
@ -0,0 +1,310 @@ |
|||
<script setup> |
|||
import { onMounted, ref, computed, onUnmounted } from "vue"; |
|||
import { useRouter } from "vue-router"; |
|||
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"; |
|||
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"; |
|||
import { checkStatusAPI } from "../api/AIxiaocaishen"; |
|||
import BackToHomeButton from "@/views/components/BackToHomeButton.vue"; |
|||
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 noPermissonDialogVisible = ref(false); |
|||
const noPermissonDialogObj = ref({}); |
|||
const goToHomePage = async () => { |
|||
try { |
|||
let params = { |
|||
token: localStorage.getItem("localToken"), |
|||
model: 2, // 深度九大模型的参数值 |
|||
}; |
|||
|
|||
const userAgent = navigator.userAgent; |
|||
let isMobile = |
|||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( |
|||
userAgent |
|||
); |
|||
|
|||
let Client = "pc"; |
|||
|
|||
if (isMobile) { |
|||
if (/iPhone|iPad|iPod/i.test(userAgent)) { |
|||
Client = "ios"; |
|||
} else if (/Android/i.test(userAgent)) { |
|||
Client = "android"; |
|||
} else { |
|||
Client = "android"; // 其他移动设备 |
|||
} |
|||
} |
|||
|
|||
let headers = { |
|||
Client: Client, |
|||
}; |
|||
|
|||
const res = await checkStatusAPI(headers, params); |
|||
if (res.code == 200) { |
|||
// 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab |
|||
sessionStorage.setItem("activeTabAI", "deepNine"); |
|||
sessionStorage.setItem("activeIndexAI", "2"); |
|||
// 设置标记表示从外部页面跳转过来 |
|||
sessionStorage.setItem("fromExternalPage", "true"); |
|||
router.push("/homePage"); |
|||
} else { |
|||
console.log("无权限"); |
|||
noPermissonDialogVisible.value = true; |
|||
noPermissonDialogObj.value.msg = res.msg; |
|||
|
|||
console.log("noPermissonDialogVisible", noPermissonDialogVisible.value); |
|||
console.log("noPermissonDialogObj", noPermissonDialogObj.value); |
|||
} |
|||
} catch (e) { |
|||
console.error("获取权限失败", e); |
|||
} |
|||
}; |
|||
|
|||
const closeNoPermissionDialog = () => { |
|||
noPermissonDialogVisible.value = false; |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div |
|||
ref="pageRef" |
|||
class="homepage" |
|||
:style="{ backgroundImage: `url(${bgImage})` }" |
|||
> |
|||
<BackToHomeButton /> |
|||
|
|||
<div v-if="false"></div> |
|||
<!-- 顶部图标 --> |
|||
<!-- <img class="top-icon" :src="topIcon" alt="顶部图标" /> --> |
|||
<h1 style="color: aliceblue;">深度九大模型</h1> |
|||
<!-- 副标题 --> |
|||
<div class="bottom-icon"> |
|||
<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> |
|||
</div> |
|||
|
|||
<div v-if="noPermissonDialogVisible" class="noPermissionDialog"> |
|||
<div class="noPermissionContent" @click="closeNoPermissionDialog"> |
|||
<div class="noPermissionCloseBtn"> |
|||
<el-icon class="noPermissionIcon"><Close /></el-icon> |
|||
</div> |
|||
{{ noPermissonDialogObj.msg }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.homepage { |
|||
/* background-image: url("@/assets/img/DBQBmodel/bg.png"); */ |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
background-size: cover; |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
/* 顶部标题图 */ |
|||
.top-icon { |
|||
width: 80%; |
|||
max-width: 500px; |
|||
height: auto; |
|||
/* margin-top: 20px; */ |
|||
position: absolute; |
|||
top: 11vh; |
|||
} |
|||
|
|||
.bottom-icon { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: absolute; |
|||
bottom: 10vh; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
align-items: center; |
|||
} |
|||
|
|||
/* 副标题 */ |
|||
.sub-title { |
|||
/* padding-top: 40px; */ |
|||
width: 100%; |
|||
max-width: 350px; |
|||
height: auto; |
|||
/* margin-top: 18rem; */ |
|||
} |
|||
|
|||
/* 中间三个描述图 */ |
|||
.content-text { |
|||
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 { |
|||
width: auto; |
|||
background: none; |
|||
border: none; |
|||
padding: 0; |
|||
cursor: pointer; |
|||
animation: breathing 3s ease-in-out infinite; |
|||
} |
|||
|
|||
@keyframes breathing { |
|||
0% { |
|||
transform: scale(1); |
|||
opacity: 0.8; |
|||
} |
|||
50% { |
|||
transform: scale(1.1); |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: scale(1); |
|||
opacity: 0.8; |
|||
} |
|||
} |
|||
|
|||
.btn-item img { |
|||
width: 200%; |
|||
max-width: 350px; |
|||
height: auto; |
|||
} |
|||
|
|||
.noPermissionDialog { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 15%; |
|||
left: 0; |
|||
right: 0; |
|||
/* margin: auto auto; */ |
|||
color: white; |
|||
} |
|||
|
|||
.noPermissionCloseBtn { |
|||
border-radius: 5px; |
|||
border: 1px solid white; |
|||
background-color: #8621d9; |
|||
padding: 2px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: -10px; |
|||
right: -10px; |
|||
} |
|||
|
|||
.noPermissionContent { |
|||
position: relative; |
|||
border-radius: 5px; |
|||
border: 1px solid white; |
|||
padding: 10px 30px; |
|||
background-color: #261176; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
/* 手机适配 - 小屏幕时保持纵向排列 */ |
|||
@media screen and (max-width: 768px) { |
|||
.homepage { |
|||
width: 100%; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.top-icon { |
|||
margin-top: 12%; |
|||
width: 90%; |
|||
} |
|||
|
|||
.sub-title { |
|||
width: 80%; |
|||
margin-top: 25%; |
|||
} |
|||
|
|||
.content-text { |
|||
flex-direction: column; |
|||
/* 小屏幕时恢复纵向排列 */ |
|||
} |
|||
|
|||
.content-text img { |
|||
width: 70%; |
|||
flex: none; |
|||
/* 取消flex布局 */ |
|||
} |
|||
|
|||
.btn-item img { |
|||
width: 50%; |
|||
/* margin-top: 20px; */ |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue