diff --git a/src/assets/img/DBQBmodel/-s-bg.png b/src/assets/img/DBQBmodel/-s-bg.png
new file mode 100644
index 0000000..c4763cb
Binary files /dev/null and b/src/assets/img/DBQBmodel/-s-bg.png differ
diff --git a/src/assets/img/DBQBmodel/-s-交易可掌控.png b/src/assets/img/DBQBmodel/-s-交易可掌控.png
new file mode 100644
index 0000000..b51a43d
Binary files /dev/null and b/src/assets/img/DBQBmodel/-s-交易可掌控.png differ
diff --git a/src/assets/img/DBQBmodel/-s-场景可预演.png b/src/assets/img/DBQBmodel/-s-场景可预演.png
new file mode 100644
index 0000000..6ac848b
Binary files /dev/null and b/src/assets/img/DBQBmodel/-s-场景可预演.png differ
diff --git a/src/assets/img/DBQBmodel/-s-开启财运.png b/src/assets/img/DBQBmodel/-s-开启财运.png
new file mode 100644
index 0000000..0f0f08c
Binary files /dev/null and b/src/assets/img/DBQBmodel/-s-开启财运.png differ
diff --git a/src/assets/img/DBQBmodel/-s-数据可计算.png b/src/assets/img/DBQBmodel/-s-数据可计算.png
new file mode 100644
index 0000000..8ee2530
Binary files /dev/null and b/src/assets/img/DBQBmodel/-s-数据可计算.png differ
diff --git a/src/assets/img/DBQBmodel/-s-构建场景.png b/src/assets/img/DBQBmodel/-s-构建场景.png
new file mode 100644
index 0000000..8838602
Binary files /dev/null and b/src/assets/img/DBQBmodel/-s-构建场景.png differ
diff --git a/src/assets/img/DBQBmodel/大标题.png b/src/assets/img/DBQBmodel/大标题.png
new file mode 100644
index 0000000..9e36897
Binary files /dev/null and b/src/assets/img/DBQBmodel/大标题.png differ
diff --git a/src/assets/img/Emotionsmodel/-s-bg.png b/src/assets/img/Emotionsmodel/-s-bg.png
new file mode 100644
index 0000000..c4763cb
Binary files /dev/null and b/src/assets/img/Emotionsmodel/-s-bg.png differ
diff --git a/src/assets/img/Emotionsmodel/-s-四维.png b/src/assets/img/Emotionsmodel/-s-四维.png
new file mode 100644
index 0000000..83bb46d
Binary files /dev/null and b/src/assets/img/Emotionsmodel/-s-四维.png differ
diff --git a/src/assets/img/Emotionsmodel/-s-开启财运.png b/src/assets/img/Emotionsmodel/-s-开启财运.png
new file mode 100644
index 0000000..0f0f08c
Binary files /dev/null and b/src/assets/img/Emotionsmodel/-s-开启财运.png differ
diff --git a/src/assets/img/Emotionsmodel/-s-标题 拷贝.png b/src/assets/img/Emotionsmodel/-s-标题 拷贝.png
new file mode 100644
index 0000000..647d3ee
Binary files /dev/null and b/src/assets/img/Emotionsmodel/-s-标题 拷贝.png differ
diff --git a/src/assets/img/Emotionsmodel/大标题.png b/src/assets/img/Emotionsmodel/大标题.png
new file mode 100644
index 0000000..e1fba1b
Binary files /dev/null and b/src/assets/img/Emotionsmodel/大标题.png differ
diff --git a/src/assets/img/Selectmodel/-s-AI情绪大模型.png b/src/assets/img/Selectmodel/-s-AI情绪大模型.png
new file mode 100644
index 0000000..f4ead06
Binary files /dev/null and b/src/assets/img/Selectmodel/-s-AI情绪大模型.png differ
diff --git a/src/assets/img/Selectmodel/-s-bg.png b/src/assets/img/Selectmodel/-s-bg.png
new file mode 100644
index 0000000..6ad1f00
Binary files /dev/null and b/src/assets/img/Selectmodel/-s-bg.png differ
diff --git a/src/assets/img/Selectmodel/-s-夺宝奇兵logo.png b/src/assets/img/Selectmodel/-s-夺宝奇兵logo.png
new file mode 100644
index 0000000..b14bb89
Binary files /dev/null and b/src/assets/img/Selectmodel/-s-夺宝奇兵logo.png differ
diff --git a/src/assets/img/Selectmodel/-s-夺宝奇兵大模型.png b/src/assets/img/Selectmodel/-s-夺宝奇兵大模型.png
new file mode 100644
index 0000000..cd18cc5
Binary files /dev/null and b/src/assets/img/Selectmodel/-s-夺宝奇兵大模型.png differ
diff --git a/src/assets/img/Selectmodel/-s-弘历团队.png b/src/assets/img/Selectmodel/-s-弘历团队.png
new file mode 100644
index 0000000..2047a8c
Binary files /dev/null and b/src/assets/img/Selectmodel/-s-弘历团队.png differ
diff --git a/src/assets/img/Selectmodel/-s-情绪大模型logo.png b/src/assets/img/Selectmodel/-s-情绪大模型logo.png
new file mode 100644
index 0000000..da869ce
Binary files /dev/null and b/src/assets/img/Selectmodel/-s-情绪大模型logo.png differ
diff --git a/src/assets/img/Selectmodel/-s-机器人.png b/src/assets/img/Selectmodel/-s-机器人.png
new file mode 100644
index 0000000..69857dd
Binary files /dev/null and b/src/assets/img/Selectmodel/-s-机器人.png differ
diff --git a/src/assets/img/Selectmodel/智能体.png b/src/assets/img/Selectmodel/智能体.png
new file mode 100644
index 0000000..5aad699
Binary files /dev/null and b/src/assets/img/Selectmodel/智能体.png differ
diff --git a/src/assets/img/Selectmodel/球.png b/src/assets/img/Selectmodel/球.png
new file mode 100644
index 0000000..3f95b53
Binary files /dev/null and b/src/assets/img/Selectmodel/球.png differ
diff --git a/src/assets/img/Selectmodel/球2.png b/src/assets/img/Selectmodel/球2.png
new file mode 100644
index 0000000..3f95b53
Binary files /dev/null and b/src/assets/img/Selectmodel/球2.png differ
diff --git a/src/assets/img/Selectmodel/金轮 拷贝.png b/src/assets/img/Selectmodel/金轮 拷贝.png
new file mode 100644
index 0000000..00931b3
Binary files /dev/null and b/src/assets/img/Selectmodel/金轮 拷贝.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 472ef2a..f545bd4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,14 +12,17 @@ const routes = [
     {
         path: '/homePage',
         name: 'homePage',
-        component: () => import('@/views/homePage.vue')
+        component: () => import('@/views/homePage.vue'),
+        children: [
+            {name: 'AiEmotion', path: '/AiEmotion', component: () => import('@/views/AiEmotion.vue')}
+        ]
     },
-    {
-        path: '/AIchat',
-        name: 'AIchat',
-        component: () => import('@/views/AIchat.vue'),
-        meta: { title: 'AI对话' }
-    }, 
+    // {
+    //     path: '/AIchat',
+    //     name: 'AIchat',
+    //     component: () => import('@/views/AIchat.vue'),
+    //     meta: { title: 'AI对话' }
+    // }, 
     {
         path: '/AIfind',
         name: 'AIfind',
@@ -36,11 +39,11 @@ const routes = [
         name: 'Feedback',
         component: () => import('@/views/Feedback.vue'),
     },
-    {
-        path: '/AiEmotion',
-        name: 'AiEmotion',
-        component: () => import('@/views/AiEmotion.vue')//AI情绪大模型页面
-    },
+    // {
+    //     path: '/AiEmotion',
+    //     name: 'AiEmotion',
+    //     component: () => import('@/views/AiEmotion.vue')//AI情绪大模型页面
+    // },
     {
 
         path: '/DBQBmodel',
diff --git a/src/views/DBQBmodel.vue b/src/views/DBQBmodel.vue
index 1de2f29..dc52241 100644
--- a/src/views/DBQBmodel.vue
+++ b/src/views/DBQBmodel.vue
@@ -1,9 +1,13 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import bgImage from '@/assets/img/homePage/bk.png'
-import topIcon from '@/assets/img/homePage/AIicon.png'
-import btnIcon from '@/assets/img/homePage/count-box.png'
+import bgImage from '@/assets/img/DBQBmodel/-s-bg.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'
 
 const router = useRouter()
@@ -14,7 +18,10 @@ onMounted(() => {
 })
 
 const goToHomePage = () => {
-    router.push('/homepage')  // 修改为实际路由
+    // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
+    sessionStorage.setItem("activeTabAI", "AIchat")
+    sessionStorage.setItem("activeIndexAI", "0")
+    router.push("/homePage")
 }
 </script>
 
@@ -22,188 +29,137 @@ const goToHomePage = () => {
     <div ref="pageRef" class="homepage" :style="{ backgroundImage: `url(${bgImage})` }">
         <!-- 顶部图标 -->
         <img class="top-icon" :src="topIcon" alt="顶部图标" />
-        <!-- 主标题 -->
-        <div class="main-title">夺宝奇兵大模型</div>
         <!-- 副标题 -->
-        <div class="sub-title">构建场景化交易</div>
+        <img class="sub-title" :src="subtitle" alt="构建场景化交易" />
         <!-- 中间文字 -->
-        <div class="footer-text">
-            数据可计算<br />
-            场景可演绎<br />
-            交易可掌控<br />
+        <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="src\assets\img\homePage\count-box.png" alt="按钮图片" />
-    <span class="btn-text">开启财运</span>
-  </button>
-</div>
+            <button class="btn-item" @click="goToHomePage">
+                <img :src="btnIcon" alt="按钮图片" />
+            </button>
+        </div>
 
     </div>
 </template>
 
 <style scoped>
 .homepage {
-    width: 100vw;
-    height: 100vh;
-    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;
-    box-sizing: border-box;
-    padding: 0 20px;
+  width: 100vw;
+  min-height: 100vh;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 20px;
+  box-sizing: border-box;
 }
 
-/* 顶部图标 - 向上调整 */
+/* 顶部标题图 */
 .top-icon {
-    width: 140px;
-    height: 140px;
-    margin-top: 50px;
-    /* 向上调整图标位置 */
-}
-
-/* 主标题 */
-.main-title {
-    margin-top: 1.5rem;
-    font-size: 4rem;
-    font-weight: bold;
-    text-align: center;
-    letter-spacing: 7px;
+  width: 80%;
+  max-width: 500px;
+  height: auto;
+  margin-top: 20px;
 }
 
 /* 副标题 */
 .sub-title {
-    font-size: 3.1rem;
-    font-weight: 500;
-    margin-top: 0.5rem;
-    font-weight: bold;
-    letter-spacing: 5px;
+    padding-top: 40px;
+  width: 100%;
+  max-width: 350px;
+  height: auto;
+  margin: 30px 0;
 }
 
-/* 中间文字 */
-.footer-text {
-    font-size: 40px;
-    line-height: 1.6;
-    max-width: 320px;
-    margin-top: 3%;
-    white-space: pre-line;
-    user-select: none;
-    text-align: center;
-    font-weight: bold;
-    line-height: 4.5rem;
+/* 中间三个描述图 */
+.content-text {
+    padding-top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 23px;
+  margin-bottom: 10px;
+}
+.content-text img {
+  width: 80%;
+  max-width: 300px;
+  height: auto;
 }
 
-/* 按钮容器 */
+/* 按钮区 */
 .buttons-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 100px; /* 向下移动按钮 */
-}
+    align-items: center;
 
-/* 按钮样式 */
+  
+}
 .btn-item {
-  position: relative;
-  background-color: transparent;
+    height: 300px;
+    width: auto ;
+  background: none;
   border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  padding: 0;
   cursor: pointer;
-  text-align: center;
-  padding: 20px;
 }
-
-/* 按钮图标 */
 .btn-item img {
-  width: 160px; /* 调整按钮图片大小 */
-  height: 200%;
+  width: 200%;
+  max-width:350px;
+  height: 120px;
 }
 
-/* 按钮文字 */
-.btn-text {
-  position: absolute;
-  font-size: 30px; /* 设置文字大小 */
-  color: #eccf27; /* 设置黄色字体 */
-  font-weight: bold;
-  letter-spacing: 2px; /* 设置字母间距 */
-  text-align: center; /* 文字居中 */
-  z-index: 1; /* 确保文字显示在按钮图片上 */
-}
-/* 响应式 - 手机 */
+/* 手机适配 */
 @media screen and (max-width: 600px) {
-    .top-icon {
-        width: 100px;
-        height: 100px;
-        margin-bottom: 20px;
-    }
-
-    .main-title {
-        font-size: 40px;
-    }
-
-    .sub-title {
-        font-size: 30px;
-        margin-top: 0.5rem;
-    }
-
-    .footer-text {
-        font-size: 30px;
-        max-width: 260px;
-        margin-top: 40px;
-        line-height: 3.5rem;
-    }
-
-     .btn-item img {
-    width: 130px;
+  .homepage {
+    padding: 20px 10px;
+  }
+
+  .top-icon {
+    margin-top: 6rem;
+    width: 90%;
+  }
+
+  .sub-title {
+    width: 80%;
+    margin: 20px 0;
   }
 
-  .btn-text {
-    font-size: 24px; /* 调整手机上的字体大小 */
+  .content-text img {
+    width: 70%;
+  }
+
+  .btn-item img {
+    width: 300px;
   }
 }
 
-/* 响应式 - 平板 */
+/* 平板适配 */
 @media screen and (min-width: 601px) and (max-width: 1024px) {
-    .top-icon {
-        width: 120px;
-        height: 120px;
-        margin-bottom: 25px;
-    }
-
-    .footer-text {
-        font-size: 40px;
-        max-width: 260px;
-        margin-top: 40px;
-        line-height: 3.5rem;
-    }
-
-    .main-title {
-        font-size: 40px;
-    }
-
-    .sub-title {
-        font-size: 35px;
-        margin-top: 0.5rem;
-    }
-
-     .btn-item img {
-    width: 140px;
+    .homepage {
+   background-position: center 20%;
+  }
+  .top-icon {
+    margin-top: 190px;
+    width: 100%;
+  }
+
+  .sub-title {
+    width: 85%;
   }
 
-  .btn-text {
-    font-size: 28px; /* 调整平板上的字体大小 */
+  .content-text img {
+    width: 80%;
+  }
+
+  .btn-item img {
+    width: 300px;
   }
 }
 </style>
+
diff --git a/src/views/Emotionsmodel.vue b/src/views/Emotionsmodel.vue
index 1d55935..03c46aa 100644
--- a/src/views/Emotionsmodel.vue
+++ b/src/views/Emotionsmodel.vue
@@ -7,41 +7,30 @@
     <!-- 顶部图标 -->
     <img class="top-icon" :src="topIcon" alt="顶部图标" />
 
-    <!-- 主标题 -->
-    <div class="main-title">AI情绪大模型</div>
-
-    <!-- 左侧竖排标题 -->
-    <div class="vertical-title">四维作战体系</div>
-
     <!-- 中间图示及说明 -->
-    <div class="content-box">
-      <div class="content-text">
-        情绪套利<br />
-        情绪推演<br />
-        情绪解码<br />
-        情绪监控<br />
-      </div>
-    </div>
-    <div class="summary-text">
-        重新定义智能投资时代的炒股法则！
+      <!-- 副标题 -->
+     <div class="content-container" >
+    <img class="sub-title" :src="subtitle" alt="四维作战体系" />
+    <img class="content-icon" :src="contenicon" alt="四维情绪" />
       </div>
 
     <!-- 按钮区域 -->
     <div class="buttons-container">
-      <button class="btn-item" @click="goToHomePage">
+      <button class="btn-item" @click="goToAiEmotion">
         <img :src="btnIcon" alt="开启财运" />
-        <span class="btn-text">开启财运</span>
       </button>
     </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 topIcon from '@/assets/img/homePage/AIicon.png'
-import btnIcon from '@/assets/img/homePage/count-box.png'
+import bgImage from '@/assets/img/Emotionsmodel/-s-bg.png'
+import topIcon from '@/assets/img/Emotionsmodel/大标题.png'
+import subtitle from '@/assets/img/Emotionsmodel/-s-标题 拷贝.png'
+import contenicon from '@/assets/img/Emotionsmodel/-s-四维.png'
+import btnIcon from '@/assets/img/Emotionsmodel/-s-开启财运.png'
 import { setHeight } from '@/utils/setHeight'
 
 const router = useRouter()
@@ -51,163 +40,156 @@ onMounted(() => {
   setHeight(pageRef.value)
 })
 
-const goToHomePage = () => {
-  router.push('/homepage')
+
+const goToAiEmotion = () => {
+  // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
+  sessionStorage.setItem("activeTabAI", "AiEmotion")
+  sessionStorage.setItem("activeIndexAI", "2")
+  router.push("/homePage")
 }
 </script>
 
 <style scoped>
 .homepage {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url('@/assets/img/Emotionsmodel/-s-bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  min-height: 100vh;  /* 确保页面最小高度为视口高度 */
-  position: relative;
-  padding: 20px;
-  box-sizing: border-box;
-  font-family: 'Microsoft YaHei', sans-serif;
-  color: white;
+
   display: flex;
   flex-direction: column;
-  justify-content: space-between; /* 保证元素间的适当空间 */
+  justify-content: space-evenly;
   align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+  color: white;
+  text-align: center;
+  font-family: 'Microsoft YaHei', sans-serif;
 }
 
 /* 顶部图标 */
 .top-icon {
-  width: 100px;
+  width: 40vw;
+  max-width: 300px;
   height: auto;
-  margin-top: 60px;
+  margin-top: 5vh;
 }
 
-/* 主标题 */
-.main-title {
-  margin-top: 30px;
-  font-size: 60px;
-  font-weight: bold;
-  text-align: center;
-  letter-spacing: 7px;
-}
-
-/* 左侧竖排 */
-.vertical-title {
-  position: absolute;
-  left: 200px;
-  top: 400px;
-  writing-mode: vertical-rl;
-  font-size: 45px;
-  font-weight: bold;
-  letter-spacing: 4px;
-  text-align: center;
-}
-
-/* 内容区块 */
-.content-box {
-  margin-top: 70px;
-  text-align: center;
-  line-height: 3;
+/* 四维体系整体容器修复 */
+.content-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
 }
 
-.content-text {
-  font-size: 40px;
-  font-weight: bold;
-  margin-bottom: 12px;
+/* 副标题 */
+.sub-title {
+  width: 90%;
+  max-width: 480px;
+  height: auto;
+  margin-top: 30px;
 }
 
-.summary-text {
-  margin-top: 50px;
-  font-size: 20px;
-  color: white;
-  letter-spacing: 4px;
+/* 内容图 */
+.content-icon {
+  width: 90%;
+  max-width: 520px;
+  height: auto;
+  margin-top: 10px;
 }
 
-/* 按钮 */
+/* 按钮区域 */
 .buttons-container {
-  margin-top: auto; /* 自动推到最底部 */
-  margin-bottom: 40px;
+  margin-top: auto;
+  margin-bottom: 3vh;
   display: flex;
   justify-content: center;
+  align-items: center;
   width: 100%;
 }
 
 .btn-item {
-  margin-top: 30px;
-  background-color: transparent;
+  background: none;
   border: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
   cursor: pointer;
+  transition: transform 0.3s ease;
 }
 
-.btn-item img {
-  width: 160px;
-  height: 4rem;
+.btn-item:hover {
+  transform: scale(1.05);
 }
 
-.btn-text {
-  margin-top: 5px;
-  position: absolute;
-  font-size: 30px; /* 设置文字大小 */
-  color: #eccf27; /* 设置黄色字体 */
-  font-weight: bold;
-  letter-spacing: 2px; /* 设置字母间距 */
-  z-index: 1;
+.btn-item img {
+  width: 220px;
+  max-width: 80vw;
+  height: auto;
+  padding-top: 30px;
 }
 
-/* 响应式适配 */
-@media (max-width: 768px) {
+/* 平板适配 */
+@media (max-width: 1024px) {
   .top-icon {
-    width: 80px;
+    margin-top: 80px;
+    width: 30vh;
+    max-width: 300vh;
   }
-  .main-title {
-    font-size: 30px;
+ .content-container {
+    margin-top: 60px;
+     flex-direction: column;
+     justify-content: center;
+  align-items: center
   }
-  .vertical-title {
-    font-size: 16px;
-    top: 100px;
-    left: 30px;
-    letter-spacing: 17px; 
-  }
-  .content-text {
-    font-size: 25px;
-    letter-spacing: 4px;
+
+  .sub-title {
+    width: 95%;
+    max-width: 420px;
   }
-  .summary-text {
-    font-size: 12px;
+
+  .content-icon {
+    width: 95%;
+    max-width: 460px;
   }
+
   .btn-item img {
-    width: 130px;
-  }
-  .btn-text {
-    font-size: 16px;
+    width: 400px;
   }
 }
 
-@media (max-width: 480px) {
-  .main-title {
-    font-size: 30px;
+/* 手机适配 */
+@media (max-width: 600px) {
+  .top-icon {
+    width: 80vw;
+    margin-top: -1vh;
   }
-  .vertical-title {
-    font-size: 20px;
-    left: 50px;
-    top: 380px;
-    letter-spacing: 17px;
+
+  .sub-title {
+    width: 95%;
+    margin-top: -2vh;
   }
-  .content-text {
-    margin-top: -10px;
-    font-size: 20px;
+
+  .content-icon {
+    width: 95%;
+    margin-top: -1vh;
   }
-  .summary-text {
-    font-size: 11px;
+
+  .buttons-container {
+    margin-top: 4vh;
+    margin-bottom: 4vh;
   }
-  .buttons-container{
-    margin-top: -10px;
+
+  .btn-item img {
+    margin-bottom: 4vh;
+    width: 300px;
   }
+}
+
+@media (max-width: 400px) {
   .btn-item img {
     width: 120px;
-    height: 2rem;
   }
 }
 
diff --git a/src/views/Selectmodel.vue b/src/views/Selectmodel.vue
index 8799d36..6c7dc50 100644
--- a/src/views/Selectmodel.vue
+++ b/src/views/Selectmodel.vue
@@ -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>
\ No newline at end of file