diff --git a/src/views/Ranking/Couple/GamePlay/components/signIn.vue b/src/views/Ranking/Couple/GamePlay/components/signIn.vue index 6f934de..8e5ecb6 100644 --- a/src/views/Ranking/Couple/GamePlay/components/signIn.vue +++ b/src/views/Ranking/Couple/GamePlay/components/signIn.vue @@ -203,41 +203,51 @@ const arrows = computed(() => { // 为相邻的签到项之间添加箭头 for (let i = 0; i < items.length - 1; i++) { + // 检测是否为阿拉伯语环境 + const isRTL = currentLangType.value === 'ar' + // 这是一个示例箭头位置配置,需要根据实际布局调整 switch (i) { case 0: // 第1天 -> 第2天 arrowList.push({ - style: 'top: 10.6%; left: calc(50%); transform: translateX(-50%);', + style: isRTL + ? 'top: 10.6%; right: calc(50%);transform: scaleX(-1) translateX(-50%)' // RTL 版本 - 位置改为right + : 'top: 10.6%; left: calc(50%); transform: translateX(-50%);', // LTR 版本 }) break case 1: // 第2天 -> 第3天 arrowList.push({ - style: - 'top: calc(10.6% * 2 + 4.5vw); left: 75%; transform: translateX(-50%) rotate(90deg);', + style: isRTL + ? 'top: calc(10.6% * 2 + 4.5vw); right: 70%; transform: scaleX(-1) rotate(90deg);' // RTL 版本 - 使用right + : 'top: calc(10.6% * 2 + 4.5vw); left: 75%; transform: translateX(-50%) rotate(90deg);', // LTR 版本 }) break case 2: // 第3天 -> 第4天 arrowList.push({ - style: - 'top: calc(10.6% * 3 + 4.5vw + 5.5vw); left: 50%; transform: translateX(-50%) rotate(180deg);', + style: isRTL + ? 'top: calc(10.6% * 3 + 4.5vw + 5.5vw); right: 50%; transform: scaleX(-1) translateX(-50%) rotate(180deg);' // RTL 版本 - 使用right + : 'top: calc(10.6% * 3 + 4.5vw + 5.5vw); left: 50%; transform: translateX(-50%) rotate(180deg);', // LTR 版本 }) break case 3: // 第4天 -> 第5天 arrowList.push({ - style: - 'top: calc(10.6% * 4 + 4.5vw * 2 + 4vw); left: 25%; transform: translateX(-50%) rotate(90deg);', + style: isRTL + ? 'top: calc(10.6% * 4 + 4.5vw * 2 + 4vw); right: 70%; transform: scaleX(-1) rotate(90deg);' // RTL 版本 - 使用right + : 'top: calc(10.6% * 4 + 4.5vw * 2 + 4vw); left: 25%; transform: translateX(-50%) rotate(90deg);', // LTR 版本 }) break case 4: // 第5天 -> 第6天 arrowList.push({ - style: - 'top: calc(10.6% * 5 + 4.5vw * 2 + 4vw * 2); left: 50%; transform: translateX(-50%);', + style: isRTL + ? 'top: calc(10.6% * 5 + 4.5vw * 2 + 4vw * 2); right: 50%; transform: scaleX(-1) translateX(-50%);' // RTL 版本 - 使用right + : 'top: calc(10.6% * 5 + 4.5vw * 2 + 4vw * 2); left: 50%; transform: translateX(-50%);', // LTR 版本 }) break case 5: // 第6天 -> 第7天 arrowList.push({ - style: - 'top: calc(10.6% * 6 + 4.5vw * 3 + 4vw * 2); left: 75%; transform: translateX(-50%) rotate(90deg);', + style: isRTL + ? 'top: calc(10.6% * 6 + 4.5vw * 3 + 4vw * 2); right: 70%; transform: scaleX(-1) rotate(90deg);' // RTL 版本 - 使用right + : 'top: calc(10.6% * 6 + 4.5vw * 3 + 4vw * 2); left: 75%; transform: translateX(-50%) rotate(90deg);', // LTR 版本 }) break }