更改首页三个页面pc端的图片并适配

src/views/DBQBmodel.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import bgImage from '@/assets/img/DBQBmodel/-s-bg.png'
+import bgImageSmall from '@/assets/img/DBQBmodel/-s-bg.png'
+import bgImageLarge from '@/assets/img/DBQBmodel/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'
@@ -12,9 +13,25 @@ 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
+})
+
+// 监听窗口大小变化
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
 
 onMounted(() => {
     setHeight(pageRef.value)
+    window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
 })
 
 const goToHomePage = () => {
@@ -50,6 +67,7 @@ const goToHomePage = () => {
 
 <style scoped>
 .homepage {
+  /* background-image: url("@/assets/img/DBQBmodel/bg.png"); */
   /* width: 100vw; */
   min-height: 100vh;
   background-size: cover;
@@ -64,10 +82,11 @@ const goToHomePage = () => {
 
 /* 顶部标题图 */
 .top-icon {
-  width: 80%;
+       width: 80%;
   max-width: 500px;
   height: auto;
   margin-top: 20px;
+ 
 }
 
 /* 副标题 */
@@ -82,16 +101,20 @@ const goToHomePage = () => {
 /* 中间三个描述图 */
 .content-text {
     padding-top: 30px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 23px;
-  margin-bottom: 10px;
+    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;
+    width: 80%;
+    max-width: 300px;
+    height: auto;
+    flex: 1; /* 让图片平均分配空间 */
+    min-width: 200px; /* 设置最小宽度 */
 }
 
 /* 按钮区 */
@@ -114,7 +137,7 @@ const goToHomePage = () => {
   height: 120px;
 }
 
-/* 手机适配 */
+/* 手机适配 - 小屏幕时保持纵向排列 */
 @media screen and (max-width: 600px) {
   .homepage {
     padding: 20px 10px;
@@ -130,8 +153,13 @@ const goToHomePage = () => {
     margin: 20px 0;
   }
 
+  .content-text {
+    flex-direction: column; /* 小屏幕时恢复纵向排列 */
+  }
+
   .content-text img {
     width: 70%;
+    flex: none; /* 取消flex布局 */
   }
 
   .btn-item img {
@@ -142,24 +170,56 @@ const goToHomePage = () => {
 /* 平板适配 */
 @media screen and (min-width: 601px) and (max-width: 1024px) {
     .homepage {
-   background-position: center 20%;
-  }
-  .top-icon {
-    margin-top: 190px;
-    width: 100%;
-  }
+        background-position: center 20%;
+    }
+    .top-icon {
+        margin-top: 190px;
+        width: 100%;
+  
+    }
 
-  .sub-title {
-    width: 85%;
-  }
+    .sub-title {
+        width: 85%;
+    }
 
-  .content-text img {
-    width: 80%;
-  }
+    .content-text {
+        flex-direction: row; /* 平板及以上保持横向排列 */
+    }
 
-  .btn-item img {
-    width: 300px;
-  }
+    .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

@@ -2,17 +2,17 @@
   <div
     ref="pageRef"
     class="homepage"
-    :style="{ backgroundImage: `url(${bgImage})` }"
   >
     <!-- 顶部图标 -->
     <img class="top-icon" :src="topIcon" alt="顶部图标" />
 
     <!-- 中间图示及说明 -->
-      <!-- 副标题 -->
-     <div class="content-container" >
-    <img class="sub-title" :src="subtitle" alt="四维作战体系" />
-    <img class="content-icon" :src="contenicon" alt="四维情绪" />
-      </div>
+    <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">
@@ -20,26 +20,41 @@
         <img :src="btnIcon" alt="开启财运" />
       </button>
     </div>
-    </div>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import bgImage from '@/assets/img/Emotionsmodel/-s-bg.png'
+// 移除背景图片的导入，改用CSS设置
 import topIcon from '@/assets/img/Emotionsmodel/大标题.png'
 import subtitle from '@/assets/img/Emotionsmodel/-s-标题 拷贝.png'
-import contenicon 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 currentContentIcon = computed(() => {
+  return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall
+})
+
+const handleResize = () => {
+  screenWidth.value = window.innerWidth
+}
 
 onMounted(() => {
   setHeight(pageRef.value)
+  window.addEventListener('resize', handleResize)
 })
 
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
 
 const goToAiEmotion = () => {
   // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
@@ -53,7 +68,8 @@ const goToAiEmotion = () => {
 .homepage {
   /* width: 100vw; */
   min-height: 100vh;
-  background-image: url('@/assets/img/Emotionsmodel/-s-bg.png');
+  /* 默认使用小屏背景 */
+  background-image: url('@/assets/img/DBQBmodel/-s-bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -68,13 +84,44 @@ const goToAiEmotion = () => {
   text-align: center;
   font-family: 'Microsoft YaHei', sans-serif;
 }
-
+@media (min-width: 1025px) and (max-width: 1900px){
+  
 /* 顶部图标 */
 .top-icon {
-  width: 40vw;
-  max-width: 300px;
+    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: 5vh;
+  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;
 }
 
 /* 四维体系整体容器修复 */
@@ -96,10 +143,10 @@ const goToAiEmotion = () => {
 
 /* 内容图 */
 .content-icon {
-  width: 90%;
-  max-width: 520px;
-  height: auto;
-  margin-top: 10px;
+width: 100%;
+    min-width: 400px;
+    height: auto;
+    margin-top: 10px;
 }
 
 /* 按钮区域 */
@@ -125,7 +172,7 @@ const goToAiEmotion = () => {
 
 .btn-item img {
   width: 220px;
-  max-width: 80vw;
+    min-width: 20vw;
   height: auto;
   padding-top: 30px;
 }

src/views/Selectmodel.vue

@@ -67,7 +67,7 @@ const goToEmotionsmodel = () => {
   /* width: 100vw; */
   /* min-height: 100vw; */
   /* background-color: #000cfc; */
-  background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/49a45ea0e9ff44e9a965cc1de8059a77.png");
+  background-image: url("@/assets/img/Selectmodel/bg.png");
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -170,7 +170,7 @@ const goToEmotionsmodel = () => {
   width: 200vw;
   max-width: 200vw;
   height: 6vw;
-  background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/3e36a5a3d676f86e022f7cd41a2fa0a6.png");
+  background-image: url("@/assets/img/Selectmodel/智能体 拷贝.png");
   background-size: 100% 100%;
   background-size: contain;
   background-repeat: no-repeat;