前置页面的图片替换；适配不滚动；

src/views/DBQBmodel.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import bgImageSmall from '@/assets/img/DBQBmodel/-s-bg.png'
-import bgImageLarge from '@/assets/img/DBQBmodel/bg.png'
+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'
@@ -26,43 +26,44 @@ const handleResize = () => {
 }
 
 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 控制 homepage.vue 激活 AiEmotion tab
+  sessionStorage.setItem("activeTabAI", "AIchat")
+  sessionStorage.setItem("activeIndexAI", "0")
+  router.push("/homePage")
 }
 </script>
 
 <template>
-    <div ref="pageRef" class="homepage" :style="{ backgroundImage: `url(${bgImage})` }">
-        <!-- 顶部图标 -->
-        <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>
+  <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>
+
+  </div>
 </template>
 
 <style scoped>
@@ -76,150 +77,97 @@ const goToHomePage = () => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 40px 20px;
-  box-sizing: border-box;
 }
 
 /* 顶部标题图 */
 .top-icon {
-       width: 80%;
+  width: 80%;
   max-width: 500px;
   height: auto;
   margin-top: 20px;
- 
+
 }
 
 /* 副标题 */
 .sub-title {
-    padding-top: 40px;
+  /* padding-top: 40px; */
   width: 100%;
   max-width: 350px;
   height: auto;
-  margin: 30px 0;
+  margin-top: 18rem;
 }
 
 /* 中间三个描述图 */
 .content-text {
-    padding-top: 30px;
-    display: flex;
-    flex-direction: row; /* 改为横向排列 */
-    align-items: center;
-    justify-content: center; /* 添加水平居中 */
-    gap: 23px;
-    margin-bottom: 10px;
-    flex-wrap: wrap; /* 添加换行支持，防止小屏幕溢出 */
+  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; /* 设置最小宽度 */
+  width: 80%;
+  max-width: 300px;
+  height: auto;
+  flex: 1;
+  /* 让图片平均分配空间 */
+  min-width: 200px;
+  /* 设置最小宽度 */
 }
 
 /* 按钮区 */
 .buttons-container {
-    align-items: center;
+  align-items: center;
+
 
-  
 }
+
 .btn-item {
-    height: 300px;
-    width: auto ;
+  width: auto;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
 }
+
 .btn-item img {
   width: 200%;
-  max-width:350px;
-  height: 120px;
+  max-width: 350px;
+  height: auto;
 }
 
 /* 手机适配 - 小屏幕时保持纵向排列 */
-@media screen and (max-width: 600px) {
-  .homepage {
-    padding: 20px 10px;
-  }
-
+@media screen and (max-width: 768px) {
   .top-icon {
-    margin-top: 6rem;
+    margin-top: 12%;
     width: 90%;
   }
 
   .sub-title {
     width: 80%;
-    margin: 20px 0;
+    margin-top: 25%;
   }
 
   .content-text {
-    flex-direction: column; /* 小屏幕时恢复纵向排列 */
+    flex-direction: column;
+    /* 小屏幕时恢复纵向排列 */
   }
 
   .content-text img {
     width: 70%;
-    flex: none; /* 取消flex布局 */
+    flex: none;
+    /* 取消flex布局 */
   }
 
   .btn-item img {
-    width: 300px;
+    width: 50%;
+    margin-top: 20px;
   }
 }
-
-/* 平板适配 */
-@media screen and (min-width: 601px) and (max-width: 1024px) {
-    .homepage {
-        background-position: center 20%;
-    }
-    .top-icon {
-        margin-top: 190px;
-        width: 100%;
-  
-    }
-
-    .sub-title {
-        width: 85%;
-    }
-
-    .content-text {
-        flex-direction: row; /* 平板及以上保持横向排列 */
-    }
-
-    .content-text img {
-        width: 30%; /* 调整宽度适应横向布局 */
-        max-width: 250px;
-    }
-
-    .btn-item img {
-        width: 300px;
-    }
-}
-
-/* 桌面端适配 */
-@media screen and (min-width: 1025px) {
-    .content-text img {
-        width: 25%; /* 桌面端进一步调整宽度 */
-        max-width: 280px;
-    }
-    /* 顶部标题图 */
-.top-icon {
-     width: 35vw;
-    max-width: 500vw;
-    height: auto;
-    margin-top: 8vw;
- 
-}
-}
-@media screen and (min-width: 1024px) and (max-width: 2000px){
-    /* 顶部标题图 */
-.top-icon {
-     width: 50vw;
-    max-width: 500vw;
-    height: auto;
-    margin-top: 15vw;
- 
-}
-}
 </style>
-

src/views/Emotionsmodel.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="pageRef"
-    class="homepage"
-  >
+  <div ref="pageRef" class="homepage">
     <!-- 顶部图标 -->
     <img class="top-icon" :src="topIcon" alt="顶部图标" />
 
@@ -66,62 +63,22 @@ const goToAiEmotion = () => {
 
 <style scoped>
 .homepage {
-  /* width: 100vw; */
   min-height: 100vh;
-  /* 默认使用小屏背景 */
-  background-image: url('@/assets/img/DBQBmodel/-s-bg.png');
+  background-image: url('@/assets/img/DBQBmodel/电脑背景.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
-  padding: 20px;
-  box-sizing: border-box;
-  color: white;
-  text-align: center;
-  font-family: 'Microsoft YaHei', sans-serif;
-}
-@media (min-width: 1025px) and (max-width: 1900px){
-  
-/* 顶部图标 */
-.top-icon {
-    width: 20vw;
-    min-width: 300px;
-    height: auto;
-    margin-top: 10vw !important;
-    margin-bottom: 2vw;
-}
-  .content-icon {
-width: 80% !important;
-    min-width: 300px;
-    height: auto;
-    margin-top: 50px !important;
-    margin-bottom: 20px !important;
-}
-.btn-item img {
-  width: 220px;
-    min-width: 40vw !important;
-  height: auto;
-  margin-top: 10px !important;
-}
-}
-/* 大屏幕使用大背景图 */
-@media screen and (min-width: 1025px) {
-  .homepage {
-    background-image: url('@/assets/img/DBQBmodel/bg.png');
-  }
 }
 
 /* 顶部图标 */
 .top-icon {
-    width: 20vw;
-    min-width: 300px;
-    height: auto;
-    margin-top: 2vw;
-    margin-bottom: 2vw;
+  width: 20vw;
+  min-width: 300px;
+  height: auto;
 }
 
 /* 四维体系整体容器修复 */
@@ -130,7 +87,6 @@ width: 80% !important;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 40px;
 }
 
 /* 副标题 */
@@ -143,10 +99,8 @@ width: 80% !important;
 
 /* 内容图 */
 .content-icon {
-width: 100%;
-    min-width: 400px;
-    height: auto;
-    margin-top: 10px;
+  width: 100%;
+  height: auto;
 }
 
 /* 按钮区域 */
@@ -171,43 +125,24 @@ width: 100%;
 }
 
 .btn-item img {
-  width: 220px;
-    min-width: 20vw;
+  width: 60%;
   height: auto;
-  padding-top: 30px;
 }
 
-/* 平板适配 */
-@media (max-width: 1024px) {
-  .top-icon {
-    margin-top: 80px;
-    width: 30vh;
-    max-width: 300vh;
-  }
- .content-container {
-    margin-top: 60px;
-     flex-direction: column;
-     justify-content: center;
-  align-items: center
-  }
-
-  .sub-title {
-    width: 95%;
-    max-width: 420px;
-  }
-
-  .content-icon {
-    width: 95%;
-    max-width: 460px;
+/* 手机适配 */
+@media (max-width: 768px) {
+  .homepage {
+    min-height: 100vh;
+    background-image: url('@/assets/img/DBQBmodel/手机背景.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
   }
 
-  .btn-item img {
-    width: 400px;
-  }
-}
-
-/* 手机适配 */
-@media (max-width: 600px) {
   .top-icon {
     width: 80vw;
     margin-top: -1vh;
@@ -219,8 +154,7 @@ width: 100%;
   }
 
   .content-icon {
-    width: 95%;
-    margin-top: -1vh;
+    width: 87%;
   }
 
   .buttons-container {
@@ -229,15 +163,8 @@ width: 100%;
   }
 
   .btn-item img {
-    margin-bottom: 4vh;
-    width: 300px;
-  }
-}
-
-@media (max-width: 400px) {
-  .btn-item img {
-    width: 120px;
+    width: 50%;
+    height: auto;
   }
 }
-
 </style>

src/views/Selectmodel.vue

@@ -2,6 +2,7 @@
   <div class="homepage">
     <!-- 顶部主图背景 -->
     <!-- <div class="main-icon"></div> -->
+
     <img class="main-icon" :src="robot" alt="AI小财神" />
     <!-- 按钮区域 -->
     <div class="buttons-container">
@@ -25,6 +26,7 @@
       <div class="footer-text1"></div>
       <div class="footer-text2"></div>
     </div>
+
   </div>
 </template>
 
@@ -35,7 +37,7 @@ import { setHeight } from "@/utils/setHeight";
 import { useDataStore } from "@/store/dataList.js";
 const { getQueryVariable, setActiveTabIndex } = useDataStore();
 
-import robot from "@/assets/img/Selectmodel/-s-机器人.png";
+import robot from "@/assets/img/Selectmodel/机器人 拷贝.png";
 
 const router = useRouter();
 const pageRef = ref(null);
@@ -63,20 +65,20 @@ const goToEmotionsmodel = () => {
 
 <style scoped>
 .homepage {
-  /* height: 100vh; */
-  /* width: 100vw; */
-  /* min-height: 100vw; */
-  /* background-color: #000cfc; */
   background-image: url("@/assets/img/Selectmodel/bg.png");
-  background-size: 100%;
+  background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  width: 100vw;
+  height: 100vh;
+  /* min-height: 100vh; */
   /* overflow-x: hidden; */
   display: flex;
   flex-direction: column;
   align-items: center;
-  box-sizing: border-box;
-  text-align: center;
+  /* box-sizing: border-box;
+  text-align: center; */
+  background-attachment: fixed
 }
 
 .main-icon {
@@ -84,17 +86,20 @@ const goToEmotionsmodel = () => {
   width: 28vw;
   /* max-width: 280px; */
   height: auto;
-  margin-top:39vw;
+  position: absolute;
+  top: 20vh;
 }
 
 /* ===== 默认（PC端）按钮区域 ===== */
 .buttons-container {
-  margin-top: 4vh;
+  margin-top: 8vh;
   display: flex;
-  gap: 50vw;
+  gap: 30vw;
   justify-content: center;
   align-items: flex-end;
   flex-wrap: nowrap;
+  position: absolute;
+  top: 40vh;
 }
 
 .btn-item {
@@ -159,29 +164,32 @@ const goToEmotionsmodel = () => {
 
 /* ===== 底部口号区域 ===== */
 .footer-wrapper {
-  margin-top: 6vh;
+  /* margin-top: 6vh; */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5vh;
+  position: absolute;
+  bottom: 20px;
 }
 
 .footer-text1 {
-  width: 200vw;
-  max-width: 200vw;
+  /* width: 200vw; */
+  /* max-width: 200vw; */
   height: 6vw;
   background-image: url("@/assets/img/Selectmodel/智能体 拷贝.png");
   background-size: 100% 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
+  width: 100vw;
 }
 
 .footer-text2 {
   width: 70vw;
   max-width: 360px;
   height: 30px;
-  margin-bottom: 60px;
+  /* margin-bottom: 60px; */
   background-image: url("@/assets/img/Selectmodel/-s-弘历团队.png");
   background-size: contain;
   background-repeat: no-repeat;
@@ -189,9 +197,9 @@ const goToEmotionsmodel = () => {
 }
 
 /* 手机适配 */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 768px) {
   .homepage {
-    background-image: url("@/assets/img/Selectmodel/-s-bg.png");
+    background-image: url("@/assets/img/Selectmodel/手机bg.png");
     /* height: auto; */
     /* 解决底部留白 */
     /* width: 100%; */
@@ -201,12 +209,15 @@ const goToEmotionsmodel = () => {
   }
 
   .main-icon {
-    margin-top: 350px;
-    /* width: 9rem; */
+    background-image: url("@/assets/img/Selectmodel/机器人手机.png");
+    width: 70%;
+    height: auto;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
 
   .buttons-container {
-    margin-top: 80px;
+    margin-top: 8rem;
     gap: 10vw;
     position: relative;
     flex-wrap: nowrap;
@@ -258,24 +269,23 @@ const goToEmotionsmodel = () => {
 }
 
 /* 平板适配 */
-@media screen and (min-width: 601px) and (max-width: 1024px) {
+/* @media screen and (min-width: 769px) and (max-width: 1024px) {
   .homepage {
-    background-image: url("@/assets/img/Selectmodel/-s-bg.png");
+    background-image: url("@/assets/img/Selectmodel/手机bg.png");
   }
 
-  .main-icon {
-    margin-top: calc(650px - 30vw);
-  }
 
   .btn-item {
     padding-top: 20px;
     width: 300vw;
     position: relative;
   }
-.buttons-container{
-  gap:30vw;
-  margin-top: 5vh;
-}
+
+  .buttons-container {
+    gap: 30vw;
+    margin-top: 5vh;
+  }
+
   .btn-icon,
   .btn-ball {
     height: 100px;
@@ -289,52 +299,5 @@ const goToEmotionsmodel = () => {
     left: 50%;
     transform: translate(-50%, -50%);
   }
-
-  .footer-text1 {
-    background-image: url("@/assets/img/Selectmodel/智能体.png");
-    width: 100vw;
-    max-width: 900px;
-    height: 200px;
-  }
-
-  .footer-text2 {
-    padding-top: 30px;
-    height: 26px;
-  }
-}
-
-/* 大屏幕适配 - 背景图铺满整个屏幕 */
-@media screen and (min-width: 1025px) {
-  .homepage {
-    background-size: cover;
-    min-height: 100vh;
-    width: 100vw;
-    overflow-x: hidden;
-  }
-  
-  .main-icon {
-    margin-top:46rem;
-    width: calc(20vw + 100px);
-    max-width: 300px;
-    min-width: 300px;
-  }
-  
-  /* 隐藏滚动条 */
-  body {
-    overflow-x: hidden;
-  }
-  
-  html, body {
-    width: 100%;
-    max-width: 100vw;
-  }
-}
-@media screen and (min-width: 1025px) and (max-width: 1700px){
-  .main-icon {
-  max-width: 350px;
-  width: 28vw;
-  height: auto;
-  margin-top:40rem;
-} 
-}
+} */
 </style>