From 7915774bde3c928514b1b3200f397b3215464627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= <better_sj@126.com>
Date: Sun, 28 Sep 2025 17:13:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E6=8B=A9=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=B8=83=E5=B1=80=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Selectmodel.vue | 195 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 169 insertions(+), 26 deletions(-)

diff --git a/src/views/Selectmodel.vue b/src/views/Selectmodel.vue
index 4edd027..c68a942 100644
--- a/src/views/Selectmodel.vue
+++ b/src/views/Selectmodel.vue
@@ -7,25 +7,35 @@
     <img class="main-icon" :src="robot" alt="AI小财神" />
     <!-- 按钮区域 -->
     <div class="buttons-container">
-      <!-- 夺宝奇兵模块 -->
-      <div class="btn-item" @click="goToDBQBmodel">
-        <div class="btn-icon btn-dbqb"></div>
-        <div class="btn-ball"></div>
-        <div class="btn-text btn-text-dbqb"></div>
-      </div>
-
-      <!-- AI情绪模块 -->
-      <div class="btn-item" @click="goToEmotionsmodel">
-        <div class="btn-icon btn-ai"></div>
-        <div class="btn-ball"></div>
-        <div class="btn-text btn-text-ai"></div>
+      <!-- 第一行：夺宝奇兵模块和AI情绪模块 -->
+      <div class="first-row">
+        <div class="btn-item" @click="goToDBQBmodel" ref="topLeftBtn">
+          <div class="btn-icon btn-dbqb"></div>
+          <div class="btn-ball"></div>
+          <div class="btn-text btn-text-dbqb"></div>
+        </div>
+
+        <div class="btn-item" @click="goToEmotionsmodel" ref="topRightBtn">
+          <div class="btn-icon btn-ai"></div>
+          <div class="btn-ball"></div>
+          <div class="btn-text btn-text-ai"></div>
+        </div>
       </div>
       
-      <!-- 深度九大模型模块 -->
-      <div class="btn-item" @click="goToDeepNineModel">
-        <div class="btn-icon btn-deepnine"></div>
-        <div class="btn-ball"></div>
-        <div class="btn-text btn-text-deepnine"></div>
+      <!-- 连接线SVG -->
+      <svg class="connection-lines" ref="svgContainer" width="100%" height="100px" preserveAspectRatio="none">
+        <!-- 连接线上面两个模块到下面模块的曲线 -->
+        <path v-if="pathData.leftPath" :d="pathData.leftPath" class="connection-line" />
+        <path v-if="pathData.rightPath" :d="pathData.rightPath" class="connection-line" />
+      </svg>
+      
+      <!-- 第二行：深度九大模型模块 -->
+      <div class="second-row">
+        <div class="btn-item" @click="goToDeepNineModel" ref="bottomBtn">
+          <div class="btn-icon btn-deepnine"></div>
+          <div class="btn-ball"></div>
+          <div class="btn-text btn-text-deepnine"></div>
+        </div>
       </div>
     </div>
 
@@ -38,7 +48,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { setHeight } from "@/utils/setHeight";
 import { useDataStore } from "@/store/dataList.js";
@@ -49,6 +59,18 @@ import { useAppBridge } from "@/assets/js/useAppBridge.js";
 const router = useRouter();
 const pageRef = ref(null);
 
+// 添加引用
+const topLeftBtn = ref(null);
+const topRightBtn = ref(null);
+const bottomBtn = ref(null);
+const svgContainer = ref(null);
+
+// 路径数据
+const pathData = reactive({
+  leftPath: '',
+  rightPath: ''
+});
+
 onMounted(() => {
   // setHeight(pageRef.value)
   const isPhone =
@@ -68,8 +90,51 @@ onMounted(() => {
   // );
 
   getUserInfo();
+  
+  // 计算连接线路径
+  calculatePaths();
+  
+  // 窗口大小改变时重新计算
+  window.addEventListener('resize', calculatePaths);
 });
 
+// 获取元素中心点位置
+const getElementCenter = (el) => {
+  if (!el) return { x: 0, y: 0 };
+  
+  const rect = el.getBoundingClientRect();
+  const containerRect = svgContainer.value.getBoundingClientRect();
+  
+  return {
+    x: rect.left + rect.width / 2 - containerRect.left,
+    y: rect.top + rect.height / 2 - containerRect.top
+  };
+};
+
+// 计算SVG路径
+const calculatePaths = () => {
+  nextTick(() => {
+    if (!topLeftBtn.value || !topRightBtn.value || !bottomBtn.value || !svgContainer.value) {
+      return;
+    }
+    
+    const topLeft = getElementCenter(topLeftBtn.value);
+    const topRight = getElementCenter(topRightBtn.value);
+    const bottom = getElementCenter(bottomBtn.value);
+    
+    // 计算控制点（用于创建曲线效果）
+    const leftControlX = (topLeft.x + bottom.x) / 2;
+    const leftControlY = (topLeft.y + bottom.y) / 2 - 30;
+    
+    const rightControlX = (topRight.x + bottom.x) / 2;
+    const rightControlY = (topRight.y + bottom.y) / 2 - 30;
+    
+    // 创建路径字符串
+    pathData.leftPath = `M ${topLeft.x} ${topLeft.y} Q ${leftControlX} ${leftControlY} ${bottom.x} ${bottom.y}`;
+    pathData.rightPath = `M ${topRight.x} ${topRight.y} Q ${rightControlX} ${rightControlY} ${bottom.x} ${bottom.y}`;
+  });
+};
+
 // 获取token的核心函数
 const fnGetToken = () => {
   console.log('进入fnGetToken')
@@ -139,6 +204,7 @@ const goToDeepNineModel = () => {
   /* box-sizing: border-box;
   text-align: center; */
   background-attachment: fixed;
+  justify-content: center;
 }
 
 .main-icon {
@@ -152,15 +218,54 @@ const goToDeepNineModel = () => {
 
 /* ===== 默认（PC端）按钮区域 ===== */
 .buttons-container {
-  margin-top: 8vh;
+  margin-top: 4vh;
+  position: absolute;
+  z-index: 5;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.connection-lines {
+  width: 60vw;
+  height: 100px;
+  position: relative;
+  z-index: 1;
+  margin: 0 auto;
+}
+
+.connection-line {
+  stroke: #409eff;
+  stroke-width: 2;
+  fill: none;
+  stroke-dasharray: 5, 5;
+  animation: dash 1s linear infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+
+/* 第一行：夺宝奇兵模块和AI情绪模块 */
+.first-row {
   display: flex;
+  justify-content: center;
   gap: 30vw;
+  margin-bottom: 0;
+  position: relative;
+  z-index: 2;
+}
+
+/* 第二行：深度九大模型模块 */
+.second-row {
+  display: flex;
   justify-content: center;
-  align-items: flex-end;
-  flex-wrap: nowrap;
-  position: absolute;
-  top: 40vh;
-  z-index: 5;
+  position: relative;
+  z-index: 2;
+  margin-top: -30px;
 }
 
 .btn-item {
@@ -305,9 +410,47 @@ const goToDeepNineModel = () => {
 
   .buttons-container {
     margin-top: 8rem;
-    gap: 10vw;
     position: relative;
-    flex-wrap: nowrap;
+    width: 100%;
+  }
+  
+  .connection-lines {
+    width: 80vw;
+    height: 80px;
+  }
+  
+  .connection-line {
+    stroke-width: 1.5;
+  }
+  
+  .first-row {
+    gap: 10vw;
+    margin-bottom: 0;
+  }
+  
+  .second-row {
+    margin-top: -20px;
+  }
+  
+  /* 手机端倒三角布局 */
+  .buttons-container .btn-item:nth-child(2),
+  .buttons-container .btn-item:nth-child(3) {
+    margin-top: 0;
+  }
+  
+  .buttons-container .btn-item:nth-child(2) {
+    align-self: flex-end;
+  }
+  
+  .buttons-container .btn-item:nth-child(3) {
+    margin-left: 10vw;
+    align-self: flex-start;
+    margin-top: -150px; /* 负值使第三个按钮与第二个按钮在同一行 */
+  }
+  
+  .buttons-container .btn-item:first-child {
+    margin-top: 8vh;
+    align-self: center;
   }
 
   .btn-item {