|
|
@ -127,14 +127,26 @@ const calculatePaths = () => { |
|
|
|
const isMobile = window.innerWidth <= 768; |
|
|
|
|
|
|
|
// 计算曲线突出的程度(根据容器宽度调整) |
|
|
|
const curveOffset = isMobile ? containerWidth * 0.15 : containerWidth * 0.1; |
|
|
|
// PC端使用更大的弯曲度,使曲线更圆润,呈现四分之一圆的形状 |
|
|
|
const curveOffset = isMobile ? containerWidth * 0.15 : containerWidth * 0.25; |
|
|
|
|
|
|
|
// 计算控制点(左边向左突出,右边向右突出) |
|
|
|
const leftControlX = topLeft.x - curveOffset; // 左边控制点向左偏移 |
|
|
|
const leftControlY = (topLeft.y + bottom.y) / 2; |
|
|
|
|
|
|
|
const rightControlX = topRight.x + curveOffset; // 右边控制点向右偏移 |
|
|
|
const rightControlY = (topRight.y + bottom.y) / 2; |
|
|
|
// 计算控制点 |
|
|
|
if (isMobile) { |
|
|
|
// 移动端保持原来的计算方式 |
|
|
|
var leftControlX = topLeft.x - curveOffset; |
|
|
|
var leftControlY = (topLeft.y + bottom.y) / 2; |
|
|
|
|
|
|
|
var rightControlX = topRight.x + curveOffset; |
|
|
|
var rightControlY = (topRight.y + bottom.y) / 2; |
|
|
|
} else { |
|
|
|
// PC端使用四分之一圆形状的控制点计算 |
|
|
|
// 对于四分之一圆,控制点应位于起点和终点连线的垂直和水平位置 |
|
|
|
var leftControlX = topLeft.x; |
|
|
|
var leftControlY = bottom.y; |
|
|
|
|
|
|
|
var rightControlX = topRight.x; |
|
|
|
var rightControlY = bottom.y; |
|
|
|
} |
|
|
|
|
|
|
|
// 创建路径字符串 |
|
|
|
pathData.leftPath = `M ${topLeft.x} ${topLeft.y} Q ${leftControlX} ${leftControlY} ${bottom.x} ${bottom.y}`; |
|
|
@ -246,8 +258,8 @@ const goToDeepNineModel = () => { |
|
|
|
stroke: #409eff; |
|
|
|
stroke-width: 2; |
|
|
|
fill: none; |
|
|
|
stroke-dasharray: 5, 5; |
|
|
|
animation: dash 1s linear infinite; |
|
|
|
stroke-dasharray: none; |
|
|
|
animation: none; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes dash { |
|
|
|