diff --git a/src/views/DeepNineModel.vue b/src/views/DeepNineModel.vue index 57889c4..7860674 100644 --- a/src/views/DeepNineModel.vue +++ b/src/views/DeepNineModel.vue @@ -3,10 +3,6 @@ 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 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"; import { checkStatusAPI } from "../api/AIxiaocaishen"; @@ -105,12 +101,12 @@ const closeNoPermissionDialog = () => { 顶部标题
- 构建场景化交易 + 构建场景化交易
-  数据可计算 -  场景可预演 -  交易可掌控 +  趋势衰竭预警 +  精准择时信号 +  资金流向确认
@@ -148,22 +144,22 @@ const closeNoPermissionDialog = () => { /* 顶部标题图 */ .top-icon { - width: 15%; + width: 10%; max-width: 500px; height: auto; /* margin-top: 20px; */ position: absolute; - top: 5vh; + top: 3vh; } /* 顶部标题 */ .top-title { - width: 35%; + width: 90%; max-width: 500px; height: auto; /* margin-top: 20px; */ position: absolute; - top: 30vh; + top: 25vh; } @@ -178,13 +174,13 @@ const closeNoPermissionDialog = () => { right: 0; margin: 0 auto; align-items: center; + gap: 2rem; } /* 副标题 */ .sub-title { /* padding-top: 40px; */ - width: 100%; - max-width: 350px; + width: 25%; height: auto; /* margin-top: 18rem; */ } @@ -293,8 +289,10 @@ const closeNoPermissionDialog = () => { } .top-icon { - margin-top: 12%; - width: 90%; + /* margin-top: 15%; */ + width: 30%; + position: absolute; + top: 13vh; } .sub-title { diff --git a/src/views/Selectmodel.vue b/src/views/Selectmodel.vue index 1592432..a38b612 100644 --- a/src/views/Selectmodel.vue +++ b/src/views/Selectmodel.vue @@ -122,12 +122,19 @@ const calculatePaths = () => { 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; + // 获取SVG容器宽度,用于计算曲线突出程度 + const containerWidth = svgContainer.value.getBoundingClientRect().width; + const isMobile = window.innerWidth <= 768; - const rightControlX = (topRight.x + bottom.x) / 2; - const rightControlY = (topRight.y + bottom.y) / 2 - 30; + // 计算曲线突出的程度(根据容器宽度调整) + const curveOffset = isMobile ? containerWidth * 0.15 : containerWidth * 0.1; + + // 计算控制点(左边向左突出,右边向右突出) + const leftControlX = topLeft.x - curveOffset; // 左边控制点向左偏移 + const leftControlY = (topLeft.y + bottom.y) / 2; + + const rightControlX = topRight.x + curveOffset; // 右边控制点向右偏移 + const rightControlY = (topRight.y + bottom.y) / 2; // 创建路径字符串 pathData.leftPath = `M ${topLeft.x} ${topLeft.y} Q ${leftControlX} ${leftControlY} ${bottom.x} ${bottom.y}`; @@ -449,7 +456,7 @@ const goToDeepNineModel = () => { } .buttons-container .btn-item:first-child { - margin-top: 8vh; + /* margin-top: 8vh; */ align-self: center; }