From 61fb71888f06837130bdbc30b03f0d29a560b373 Mon Sep 17 00:00:00 2001
From: no99 <17663930442@163.com>
Date: Sat, 19 Jul 2025 13:11:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E5=9E=8Blogo=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/DBQBmodel.vue     | 110 +++++++++++++++++++++++++-------------------
 src/views/Emotionsmodel.vue | 107 +++++++++++++++++++++++++++---------------
 2 files changed, 131 insertions(+), 86 deletions(-)

diff --git a/src/views/DBQBmodel.vue b/src/views/DBQBmodel.vue
index 39f773b..c02f78c 100644
--- a/src/views/DBQBmodel.vue
+++ b/src/views/DBQBmodel.vue
@@ -1,68 +1,73 @@
 <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'
-
-const router = useRouter()
-const pageRef = ref(null)
-const windowWidth = ref(window.innerWidth)
+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";
+
+const router = useRouter();
+const pageRef = ref(null);
+const windowWidth = ref(window.innerWidth);
 
 // 响应式计算背景图片
 const bgImage = computed(() => {
-  return windowWidth.value > 1024 ? bgImageLarge : bgImageSmall
-})
+  return windowWidth.value > 1024 ? bgImageLarge : bgImageSmall;
+});
 
 // 监听窗口大小变化
 const handleResize = () => {
-  windowWidth.value = window.innerWidth
-}
+  windowWidth.value = window.innerWidth;
+};
 
 onMounted(() => {
-  setHeight(pageRef.value)
-  window.addEventListener('resize', handleResize)
-})
+  setHeight(pageRef.value);
+  window.addEventListener("resize", handleResize);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-})
+  window.removeEventListener("resize", handleResize);
+});
 
 const goToHomePage = () => {
   // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
-  sessionStorage.setItem("activeTabAI", "AIchat")
-  sessionStorage.setItem("activeIndexAI", "0")
-  router.push("/homePage")
-}
+  sessionStorage.setItem("activeTabAI", "AIchat");
+  sessionStorage.setItem("activeIndexAI", "0");
+  router.push("/homePage");
+};
 </script>
 
 <template>
-  <div ref="pageRef" class="homepage" :style="{ backgroundImage: `url(${bgImage})` }">
-    <div v-if="false"> </div>
+  <div
+    ref="pageRef"
+    class="homepage"
+    :style="{ backgroundImage: `url(${bgImage})` }"
+  >
+    <div v-if="false"></div>
     <!-- 顶部图标 -->
     <img class="top-icon" :src="topIcon" alt="顶部图标" />
     <!-- 副标题 -->
-    <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 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>
 </template>
 
@@ -84,8 +89,19 @@ const goToHomePage = () => {
   width: 80%;
   max-width: 500px;
   height: auto;
-  margin-top: 20px;
+  /* margin-top: 20px; */
+  position: absolute;
+  top: 11vh;
+}
 
+.bottom-icon {
+  /* width: 100%; */
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 10vh;
+
+  align-items: center;
 }
 
 /* 副标题 */
@@ -94,7 +110,7 @@ const goToHomePage = () => {
   width: 100%;
   max-width: 350px;
   height: auto;
-  margin-top: 18rem;
+  /* margin-top: 18rem; */
 }
 
 /* 中间三个描述图 */
@@ -124,8 +140,6 @@ const goToHomePage = () => {
 /* 按钮区 */
 .buttons-container {
   align-items: center;
-
-
 }
 
 .btn-item {
diff --git a/src/views/Emotionsmodel.vue b/src/views/Emotionsmodel.vue
index aedb045..832e6c4 100644
--- a/src/views/Emotionsmodel.vue
+++ b/src/views/Emotionsmodel.vue
@@ -4,67 +4,74 @@
     <img class="top-icon" :src="topIcon" alt="顶部图标" />
 
     <!-- 中间图示及说明 -->
-    <div class="content-container">
-      <!-- 副标题 - 只在屏幕宽度小于等于1024px时显示 -->
-      <img v-if="screenWidth <= 1024" class="sub-title" :src="subtitle" alt="四维作战体系" />
-      <!-- 内容图 - 根据屏幕宽度动态切换 -->
-      <img class="content-icon" :src="currentContentIcon" alt="四维情绪" />
-    </div>
-
-    <!-- 按钮区域 -->
-    <div class="buttons-container">
-      <button class="btn-item" @click="goToAiEmotion">
-        <img :src="btnIcon" alt="开启财运" />
-      </button>
+    <div class="bottom-icon">
+      <div class="content-container">
+        <!-- 副标题 - 只在屏幕宽度小于等于1024px时显示 -->
+        <img
+          v-if="screenWidth <= 1024"
+          class="sub-title"
+          :src="subtitle"
+          alt="四维作战体系"
+        />
+        <!-- 内容图 - 根据屏幕宽度动态切换 -->
+        <img class="content-icon" :src="currentContentIcon" alt="四维情绪" />
+      </div>
+
+      <!-- 按钮区域 -->
+      <div class="buttons-container">
+        <button class="btn-item" @click="goToAiEmotion">
+          <img :src="btnIcon" alt="开启财运" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, computed, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { onMounted, ref, computed, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
 // 移除背景图片的导入，改用CSS设置
-import topIcon from '@/assets/img/Emotionsmodel/大标题.png'
-import subtitle from '@/assets/img/Emotionsmodel/-s-标题 拷贝.png'
-import conteniconLarge from '@/assets/img/Emotionsmodel/_s_四维 拷贝.png'
-import conteniconSmall from '@/assets/img/Emotionsmodel/-s-四维.png'
-import btnIcon from '@/assets/img/Emotionsmodel/-s-开启财运.png'
-import { setHeight } from '@/utils/setHeight'
+import topIcon from "@/assets/img/Emotionsmodel/大标题.png";
+import subtitle from "@/assets/img/Emotionsmodel/-s-标题 拷贝.png";
+import conteniconLarge from "@/assets/img/Emotionsmodel/_s_四维 拷贝.png";
+import conteniconSmall from "@/assets/img/Emotionsmodel/-s-四维.png";
+import btnIcon from "@/assets/img/Emotionsmodel/-s-开启财运.png";
+import { setHeight } from "@/utils/setHeight";
 
-const router = useRouter()
-const pageRef = ref(null)
-const screenWidth = ref(window.innerWidth)
+const router = useRouter();
+const pageRef = ref(null);
+const screenWidth = ref(window.innerWidth);
 
 // 根据屏幕宽度选择内容图片
 const currentContentIcon = computed(() => {
-  return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall
-})
+  return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall;
+});
 
 const handleResize = () => {
-  screenWidth.value = window.innerWidth
-}
+  screenWidth.value = window.innerWidth;
+};
 
 onMounted(() => {
-  setHeight(pageRef.value)
-  window.addEventListener('resize', handleResize)
-})
+  setHeight(pageRef.value);
+  window.addEventListener("resize", handleResize);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-})
+  window.removeEventListener("resize", handleResize);
+});
 
 const goToAiEmotion = () => {
   // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
-  sessionStorage.setItem("activeTabAI", "AiEmotion")
-  sessionStorage.setItem("activeIndexAI", "2")
-  router.push("/homePage")
-}
+  sessionStorage.setItem("activeTabAI", "AiEmotion");
+  sessionStorage.setItem("activeIndexAI", "2");
+  router.push("/homePage");
+};
 </script>
 
 <style scoped>
 .homepage {
   min-height: 100vh;
-  background-image: url('@/assets/img/DBQBmodel/电脑背景.png');
+  background-image: url("@/assets/img/DBQBmodel/电脑背景.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -79,6 +86,16 @@ const goToAiEmotion = () => {
   width: 20vw;
   min-width: 300px;
   height: auto;
+  position: absolute;
+  top: 10vh;
+}
+
+.bottom-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  bottom: 0vh;
 }
 
 /* 四维体系整体容器修复 */
@@ -87,6 +104,8 @@ const goToAiEmotion = () => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 80%;
+  height: auto;
 }
 
 /* 副标题 */
@@ -129,11 +148,18 @@ const goToAiEmotion = () => {
   height: auto;
 }
 
+@media (max-width: 1024px) {
+  /* 四维体系整体容器修复 */
+  .content-container {
+    width: 60%;
+    height: auto;
+  }
+}
 /* 手机适配 */
 @media (max-width: 768px) {
   .homepage {
     min-height: 100vh;
-    background-image: url('@/assets/img/DBQBmodel/手机背景.png');
+    background-image: url("@/assets/img/DBQBmodel/手机背景.png");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -153,6 +179,11 @@ const goToAiEmotion = () => {
     margin-top: -2vh;
   }
 
+/* 四维体系整体容器修复 */
+  .content-container {
+    width: 80%;
+    height: auto;
+  }
   .content-icon {
     width: 87%;
   }