新增深度九大模型前置页面；首页选择模型加入深度九标签；添加深度九的路由；

src/router/index.js

@@ -81,7 +81,14 @@ const routes = [
         path: '/deepNine',
         name: 'deepNine',
         component: () => import('@/views/deepNine.vue'),
-    }   
+    },
+    {
+
+        path: '/deepNineModel',
+        name: 'deepNineModel',
+        component: () => import('@/views/DeepNineModel.vue')
+
+    },
 
 ]
 // 创建路由实例

src/views/DeepNineModel.vue

@@ -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>

src/views/Selectmodel.vue

@@ -20,6 +20,13 @@
         <div class="btn-ball"></div>
         <div class="btn-text btn-text-ai"></div>
       </div>
+      
+      <!-- 深度九大模型模块 -->
+      <div class="btn-item" @click="goToDeepNineModel">
+        <div class="btn-icon btn-deepnine"></div>
+        <div class="btn-ball"></div>
+        <div class="btn-text btn-text-deepnine"></div>
+      </div>
     </div>
 
     <!-- 底部口号与说明 -->
@@ -111,6 +118,9 @@ const goToDBQBmodel = () => {
 const goToEmotionsmodel = () => {
   router.push("/Emotionsmodel");
 };
+const goToDeepNineModel = () => {
+  router.push("/DeepNineModel");
+};
 </script>
 
 <style scoped>
@@ -197,6 +207,13 @@ const goToEmotionsmodel = () => {
   z-index: 3;
 }
 
+.btn-deepnine {
+  height: 150px;
+  width: 100%;
+  background-image: url("@/assets/img/Selectmodel/金轮 拷贝.png");
+  z-index: 3;
+}
+
 .btn-ball {
   height: 150px;
   width: 150%;
@@ -228,6 +245,10 @@ const goToEmotionsmodel = () => {
   background-image: url("@/assets/img/Selectmodel/-s-AI情绪大模型.png");
 }
 
+.btn-text-deepnine {
+  background-image: url("@/assets/img/Selectmodel/-s-AI情绪大模型.png");
+}
+
 /* ===== 底部口号区域 ===== */
 .footer-wrapper {
   /* margin-top: 6vh; */