Merge branch 'hongxilin/hotfix-20250625101643-手机输入法弹出输入框上浮' into ds

6 days ago · b4dd9958d0
2 changed files with 45 additions and 53 deletions
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="cn">
+<html lang="cn" style="min-height: 100vh !important;">

 <head>
  <meta charset="UTF-8" />
@ -11,8 +11,8 @@
  <title>AI小财神</title>
 </head>

-<body style="margin: 0px; padding: 0px;">
-  <div id="app"></div>
+<body style="margin: 0px; padding: 0px; min-height: 100vh !important;">
+  <div id="app" style="min-height: 100vh !important;"></div>
  <script type="module" src="/src/main.js"></script>
 </body>

--- a/src/views/Selectmodel.vue
+++ b/src/views/Selectmodel.vue
@ -1,8 +1,8 @@
 <template>
  <div class="homepage">
    <!-- 顶部主图背景 -->
-    <div class="main-icon"></div>
-
+    <!-- <div class="main-icon"></div> -->
+    <img class="main-icon" :src="robot" alt="AI小财神" />
    <!-- 按钮区域 -->
    <div class="buttons-container">
      <!-- 夺宝奇兵模块 -->
@ -29,13 +29,16 @@
 </template>

 <script setup>
-import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { setHeight } from '@/utils/setHeight'
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { setHeight } from "@/utils/setHeight";
 import { useDataStore } from "@/store/dataList.js";
 const { getQueryVariable, setActiveTabIndex } = useDataStore();
-const router = useRouter()
-const pageRef = ref(null)
+
+import robot from "@/assets/img/Selectmodel/-s-机器人.png";
+
+const router = useRouter();
+const pageRef = ref(null);

 onMounted(() => {
  // setHeight(pageRef.value)
@ -48,26 +51,27 @@ onMounted(() => {
      "localToken",
      decodeURIComponent(String(getQueryVariable("token")))
    );
-})
+});

 const goToDBQBmodel = () => {
-  router.push("/DBQBmodel")
-}
+  router.push("/DBQBmodel");
+};
 const goToEmotionsmodel = () => {
-  router.push('/Emotionsmodel')
-}
+  router.push("/Emotionsmodel");
+};
 </script>

 <style scoped>
 .homepage {
+  /* height: 100vh; */
  /* width: 100vw; */
  /* min-height: 100vh; */
-  background-color: #000cfc;
-  background-image: url('@/assets/img/Selectmodel/-s-bg.png');
-  background-size: cover;
+  /* background-color: #000cfc; */
+  background-image: url("@/assets/img/Selectmodel/-s-bg.png");
+  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
  display: flex;
  flex-direction: column;
  align-items: center;
@ -76,15 +80,11 @@ const goToEmotionsmodel = () => {
 }

 .main-icon {
-  width: 90vw;
-  max-width: 280px;
-  height: 90vw;
-  max-height: 280px;
-  background-image: url('@/assets/img/Selectmodel/-s-机器人.png');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin-top: 10vh;
+  max-width: 350px;
+  width: 28vw;
+  /* max-width: 280px; */
+  height: auto;
+  margin-top: calc(600px - 30vw);
 }

 /* ===== 默认（PC端）按钮区域 ===== */
@ -117,20 +117,20 @@ const goToEmotionsmodel = () => {
 .btn-dbqb {
  height: 150px;
  width: 100%;
-  background-image: url('@/assets/img/Selectmodel/-s-夺宝奇兵logo.png');
+  background-image: url("@/assets/img/Selectmodel/-s-夺宝奇兵logo.png");
 }

 .btn-ai {
  height: 150px;
  width: 100%;
-  background-image: url('@/assets/img/Selectmodel/金轮 拷贝.png');
+  background-image: url("@/assets/img/Selectmodel/金轮 拷贝.png");
 }

 .btn-ball {
  height: 150px;
  width: 150%;
  margin-top: -30px;
-  background-image: url('@/assets/img/Selectmodel/球.png');
+  background-image: url("@/assets/img/Selectmodel/球.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
@ -150,11 +150,11 @@ const goToEmotionsmodel = () => {
 }

 .btn-text-dbqb {
-  background-image: url('@/assets/img/Selectmodel/-s-夺宝奇兵大模型.png');
+  background-image: url("@/assets/img/Selectmodel/-s-夺宝奇兵大模型.png");
 }

 .btn-text-ai {
-  background-image: url('@/assets/img/Selectmodel/-s-AI情绪大模型.png');
+  background-image: url("@/assets/img/Selectmodel/-s-AI情绪大模型.png");
 }

 /* ===== 底部口号区域 ===== */
@ -170,7 +170,7 @@ const goToEmotionsmodel = () => {
  width: 100vh;
  max-width: 100vh;
  height: 9vh;
-  background-image: url('@/assets/img/Selectmodel/智能体.png');
+  background-image: url("@/assets/img/Selectmodel/智能体.png");
  background-size: 100% 100%;
  background-size: contain;
  background-repeat: no-repeat;
@ -182,7 +182,7 @@ const goToEmotionsmodel = () => {
  max-width: 360px;
  height: 30px;
  margin-bottom: 60px;
-  background-image: url('@/assets/img/Selectmodel/-s-弘历团队.png');
+  background-image: url("@/assets/img/Selectmodel/-s-弘历团队.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
@ -191,18 +191,17 @@ const goToEmotionsmodel = () => {
 /* 手机适配 */
@media screen and (max-width: 600px) {
  .homepage {
-    height: auto;
+    /* height: auto; */
    /* 解决底部留白 */
-    width: 100%;
+    /* width: 100%; */
+    min-height: 100%;
+    background-size: 100% 100%;
    overflow-x: hidden;
  }

  .main-icon {
-    margin-top: 20rem;
-    width: 60vw;
-    max-width: 200px;
-    height: 60vw;
-    max-height: 200px;
+    margin-top: 350px;
+    /* width: 9rem; */
  }

  .buttons-container {
@ -254,22 +253,16 @@ const goToEmotionsmodel = () => {
    height: 24px;
    margin-top: 10px;
  }
-
 }

 /* 平板适配 */
-@media screen and (min-width: 600px) and (max-width: 1024px) {
-  .homepage {
+@media screen and (min-width: 601px) and (max-width: 1024px) {
+  /* .homepage {
    height: 120vh;
-  }
+  } */

  .main-icon {
-    padding-top:18rem;
-    margin-top: 17rem;
-    width: 75vw;
-    max-width: 500px;
-    height: 75vw;
-    max-height: 500px;
+    margin-top: calc(650px - 30vw);
  }

  .btn-item {
@ -285,7 +278,6 @@ const goToEmotionsmodel = () => {
  }

  .btn-text {
-
    height: 90px;
    width: 100%;
    top: 70%;