Browse Source

深度九大模型主页面样式调整;选择模型页面连接线调整。

milestone-20250924-接入大财神工作流
宋杰 1 week ago
parent
commit
8276ab9292
  1. 30
      src/views/DeepNineModel.vue
  2. 19
      src/views/Selectmodel.vue

30
src/views/DeepNineModel.vue

@ -3,10 +3,6 @@ import { onMounted, ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import bgImageSmall from "@/assets/img/DBQBmodel/手机背景.png"; import bgImageSmall from "@/assets/img/DBQBmodel/手机背景.png";
import bgImageLarge 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 btnIcon from "@/assets/img/DBQBmodel/-s-开启财运.png";
import { setHeight } from "@/utils/setHeight"; import { setHeight } from "@/utils/setHeight";
import { checkStatusAPI } from "../api/AIxiaocaishen"; import { checkStatusAPI } from "../api/AIxiaocaishen";
@ -105,12 +101,12 @@ const closeNoPermissionDialog = () => {
<img class="top-title" src="https://d31zlh4on95l9h.cloudfront.net/images/9441f6f0979c2775d0bd916516aa0cc3.png" alt="顶部标题" /> <img class="top-title" src="https://d31zlh4on95l9h.cloudfront.net/images/9441f6f0979c2775d0bd916516aa0cc3.png" alt="顶部标题" />
<!-- 副标题 --> <!-- 副标题 -->
<div class="bottom-icon"> <div class="bottom-icon">
<img class="sub-title" :src="subtitle" alt="构建场景化交易" />
<img class="sub-title" src="https://d31zlh4on95l9h.cloudfront.net/images/882069c172b9289b66fa129ddd6b7080.png" alt="构建场景化交易" />
<!-- 中间文字 --> <!-- 中间文字 -->
<div class="content-text"> <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=" 交易可掌控" />
<img class="content-text1" src="https://d31zlh4on95l9h.cloudfront.net/images/b4e973540ca5fc090185adad7996fb0c.png" alt=" 趋势衰竭预警" />
<img class="content-text2" src="https://d31zlh4on95l9h.cloudfront.net/images/d6b39fcbc81af17708aa8d0baa2e2561.png" alt=" 精准择时信号" />
<img class="content-text3" src="https://d31zlh4on95l9h.cloudfront.net/images/1a790a8ed8346a3ac4b0773647cfd27b.png" alt=" 资金流向确认" />
</div> </div>
<!-- 底部按钮 --> <!-- 底部按钮 -->
@ -148,22 +144,22 @@ const closeNoPermissionDialog = () => {
/* 顶部标题图 */ /* 顶部标题图 */
.top-icon { .top-icon {
width: 15%;
width: 10%;
max-width: 500px; max-width: 500px;
height: auto; height: auto;
/* margin-top: 20px; */ /* margin-top: 20px; */
position: absolute; position: absolute;
top: 5vh;
top: 3vh;
} }
/* 顶部标题 */ /* 顶部标题 */
.top-title { .top-title {
width: 35%;
width: 90%;
max-width: 500px; max-width: 500px;
height: auto; height: auto;
/* margin-top: 20px; */ /* margin-top: 20px; */
position: absolute; position: absolute;
top: 30vh;
top: 25vh;
} }
@ -178,13 +174,13 @@ const closeNoPermissionDialog = () => {
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
gap: 2rem;
} }
/* 副标题 */ /* 副标题 */
.sub-title { .sub-title {
/* padding-top: 40px; */ /* padding-top: 40px; */
width: 100%;
max-width: 350px;
width: 25%;
height: auto; height: auto;
/* margin-top: 18rem; */ /* margin-top: 18rem; */
} }
@ -293,8 +289,10 @@ const closeNoPermissionDialog = () => {
} }
.top-icon { .top-icon {
margin-top: 12%;
width: 90%;
/* margin-top: 15%; */
width: 30%;
position: absolute;
top: 13vh;
} }
.sub-title { .sub-title {

19
src/views/Selectmodel.vue

@ -122,12 +122,19 @@ const calculatePaths = () => {
const topRight = getElementCenter(topRightBtn.value); const topRight = getElementCenter(topRightBtn.value);
const bottom = getElementCenter(bottomBtn.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}`; 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 { .buttons-container .btn-item:first-child {
margin-top: 8vh;
/* margin-top: 8vh; */
align-self: center; align-self: center;
} }

Loading…
Cancel
Save