增加首页面

src/App.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { useProjectTracking } from './assets/js/useProjectTracking.js'
 const projectRoutes = [
+  '/Selectmodel',
   '/homePage',
   '/AIchat',
   '/AIfind',
-  '/Announcement'
+  '/Announcement',
+   '/DBQBmodel',
+   '/Emotionsmodel'
 ]
 
 // 项目追踪

src/router/index.js

@@ -2,7 +2,12 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
     {
         path: '/',
-        redirect: 'homePage'
+        redirect: 'Selectmodel'
+    },
+    {
+        path: '/Selectmodel',
+        name: 'Selectmodel',
+        component: () => import('@/views/Selectmodel.vue')
     },
     {
         path: '/homePage',
@@ -30,6 +35,16 @@ const routes = [
         path: '/Feedback',
         name: 'Feedback',
         component: () => import('@/views/Feedback.vue'),
+    },
+    {
+        path: '/DBQBmodel',
+        name: 'DBQBmodel',
+        component: () => import('@/views/DBQBmodel.vue'),
+    },
+    {
+        path: '/Emotionsmodel',
+        name: 'Emotionsmodel',
+        component: () => import('@/views/Emotionsmodel.vue'),
     }
 ]
 // 创建路由实例

src/views/DBQBmodel.vue

@@ -0,0 +1,209 @@
+<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 { setHeight } from '@/utils/setHeight'
+
+const router = useRouter()
+const pageRef = ref(null)
+
+onMounted(() => {
+    setHeight(pageRef.value)
+})
+
+const goToHomePage = () => {
+    router.push('/homepage')  // 修改为实际路由
+}
+</script>
+
+<template>
+    <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>
+        <!-- 中间文字 -->
+        <div class="footer-text">
+            数据可计算<br />
+            场景可演绎<br />
+            交易可掌控<br />
+        </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>
+
+    </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;
+}
+
+/* 顶部图标 - 向上调整 */
+.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;
+}
+
+/* 副标题 */
+.sub-title {
+    font-size: 3.1rem;
+    font-weight: 500;
+    margin-top: 0.5rem;
+    font-weight: bold;
+    letter-spacing: 5px;
+}
+
+/* 中间文字 */
+.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;
+}
+
+/* 按钮容器 */
+.buttons-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 100px; /* 向下移动按钮 */
+}
+
+/* 按钮样式 */
+.btn-item {
+  position: relative;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  padding: 20px;
+}
+
+/* 按钮图标 */
+.btn-item img {
+  width: 160px; /* 调整按钮图片大小 */
+  height: 200%;
+}
+
+/* 按钮文字 */
+.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;
+  }
+
+  .btn-text {
+    font-size: 24px; /* 调整手机上的字体大小 */
+  }
+}
+
+/* 响应式 - 平板 */
+@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;
+  }
+
+  .btn-text {
+    font-size: 28px; /* 调整平板上的字体大小 */
+  }
+}
+</style>

src/views/Emotionsmodel.vue

@@ -0,0 +1,214 @@
+<template>
+  <div
+    ref="pageRef"
+    class="homepage"
+    :style="{ backgroundImage: `url(${bgImage})` }"
+  >
+    <!-- 顶部图标 -->
+    <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>
+
+    <!-- 按钮区域 -->
+    <div class="buttons-container">
+      <button class="btn-item" @click="goToHomePage">
+        <img :src="btnIcon" alt="开启财运" />
+        <span class="btn-text">开启财运</span>
+      </button>
+    </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 { setHeight } from '@/utils/setHeight'
+
+const router = useRouter()
+const pageRef = ref(null)
+
+onMounted(() => {
+  setHeight(pageRef.value)
+})
+
+const goToHomePage = () => {
+  router.push('/homepage')
+}
+</script>
+
+<style scoped>
+.homepage {
+  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; /* 保证元素间的适当空间 */
+  align-items: center;
+}
+
+/* 顶部图标 */
+.top-icon {
+  width: 100px;
+  height: auto;
+  margin-top: 60px;
+}
+
+/* 主标题 */
+.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-text {
+  font-size: 40px;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+
+.summary-text {
+  margin-top: 50px;
+  font-size: 20px;
+  color: white;
+  letter-spacing: 4px;
+}
+
+/* 按钮 */
+.buttons-container {
+  margin-top: auto; /* 自动推到最底部 */
+  margin-bottom: 40px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.btn-item {
+  margin-top: 30px;
+  background-color: transparent;
+  border: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.btn-item img {
+  width: 160px;
+  height: 4rem;
+}
+
+.btn-text {
+  margin-top: 5px;
+  position: absolute;
+  font-size: 30px; /* 设置文字大小 */
+  color: #eccf27; /* 设置黄色字体 */
+  font-weight: bold;
+  letter-spacing: 2px; /* 设置字母间距 */
+  z-index: 1;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .top-icon {
+    width: 80px;
+  }
+  .main-title {
+    font-size: 30px;
+  }
+  .vertical-title {
+    font-size: 16px;
+    top: 100px;
+    left: 30px;
+    letter-spacing: 17px; 
+  }
+  .content-text {
+    font-size: 25px;
+    letter-spacing: 4px;
+  }
+  .summary-text {
+    font-size: 12px;
+  }
+  .btn-item img {
+    width: 130px;
+  }
+  .btn-text {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .main-title {
+    font-size: 30px;
+  }
+  .vertical-title {
+    font-size: 20px;
+    left: 50px;
+    top: 380px;
+    letter-spacing: 17px;
+  }
+  .content-text {
+    margin-top: -10px;
+    font-size: 20px;
+  }
+  .summary-text {
+    font-size: 11px;
+  }
+  .buttons-container{
+    margin-top: -10px;
+  }
+  .btn-item img {
+    width: 120px;
+    height: 2rem;
+  }
+}
+
+</style>

src/views/Selectmodel.vue

@@ -0,0 +1,210 @@
+
+<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'
+
+const router = useRouter()
+const pageRef = ref(null)
+
+// 适配高度，mounted 后调用自定义方法动态设置页面高度
+onMounted(() => {
+  setHeight(pageRef.value)
+})
+
+// 点击跳转方法
+const goToDBQBmodel = () => {
+  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;
+  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;
+}
+
+/* 主标题 */
+.main-title {
+  font-size: 60px;
+  font-weight: bold;
+  margin-bottom: 250px;
+  letter-spacing: 4px;
+}
+
+/* 两个按钮容器横排，间距适中 */
+.buttons-container {
+  display: flex;
+  gap: 60px; /* 增加按钮之间的间距 */
+  margin-bottom: 40px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* 单个按钮样式 */
+.btn-item {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 200px; /* 按钮宽度 */
+  height: 240px; /* 按钮高度 */
+  user-select: none;
+  transition: transform 0.2s ease;
+  margin-top: 50px;
+}
+.btn-item:hover {
+  transform: scale(1.05);
+}
+
+/* 按钮图标 */
+.btn-item img {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  margin-bottom: 12px; /* 图片与文字间距 */
+}
+
+/* 按钮文字 */
+.btn-text {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 2px; /* 字母间距 */
+}
+
+/* 底部文字，行间距 */
+.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; /* 给文字添加红色边框 */
+}
+
+.footer-text2 {
+  padding-top: 90px;
+  max-width: 500px;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+/* 响应式 - 手机屏幕 */
+@media screen and (max-width: 600px) {
+  .main-title {
+    font-size: 30px;
+  }
+
+  .buttons-container {
+    gap: 30px;
+  }
+
+  .btn-item {
+    width: 150px;
+    height: 180px;
+  }
+
+  .btn-item img {
+    width: 80px;
+    height: 80px;
+  }
+
+  .btn-text {
+    font-size: 16px;
+  }
+
+  .footer-text {
+    font-size: 25px;
+    max-width: 300px;
+  }
+
+  .footer-text2 {
+    font-size: 18px;
+    max-width: 300px;
+  }
+}
+
+/* 响应式 - 平板屏幕 */
+@media screen and (min-width: 601px) and (max-width: 1024px) {
+  .main-title {
+    font-size: 70px;
+  }
+
+  .buttons-container {
+    gap: 50px;
+  }
+
+  .btn-item {
+    width: 350px;
+    height: 300px;
+  }
+
+  .btn-item img {
+    width: 100px;
+    height: 100px;
+  }
+
+  .btn-text {
+    font-size: 18px;
+  }
+
+  .footer-text {
+    font-size: 40px;
+    max-width: 500px;
+  }
+
+  .footer-text2 {
+    font-size: 25px;
+  }
+}
+
+
+</style>

src/views/homePage.vue

@@ -462,7 +462,7 @@ onMounted(async () => {
   // updateAppHeight();
 })
 </script>
-
+      
 <template>
   <div class="homepage" id="testId">
     <el-container v-if="!dataStore.isFeedback">