细节调整
This commit is contained in:
@@ -107,7 +107,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="header" v-if="totalRound > 0 || power">
|
<view class="header" v-if="totalRound > 0">
|
||||||
<text v-if="totalRound > 0" class="round-count">{{
|
<text v-if="totalRound > 0" class="round-count">{{
|
||||||
(currentRound > totalRound ? totalRound : currentRound) +
|
(currentRound > totalRound ? totalRound : currentRound) +
|
||||||
"/" +
|
"/" +
|
||||||
|
|||||||
@@ -19,10 +19,6 @@ const props = defineProps({
|
|||||||
type: Function,
|
type: Function,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
editMode: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const rect = ref({});
|
const rect = ref({});
|
||||||
@@ -31,6 +27,7 @@ const isDragging = ref(false);
|
|||||||
const dragStartPos = ref({ x: 0, y: 0 });
|
const dragStartPos = ref({ x: 0, y: 0 });
|
||||||
const capsuleHeight = ref(0);
|
const capsuleHeight = ref(0);
|
||||||
const scale = ref(1);
|
const scale = ref(1);
|
||||||
|
const scrollTop = ref(0);
|
||||||
let lastMoveTime = 0;
|
let lastMoveTime = 0;
|
||||||
|
|
||||||
// 点击靶纸创建新的点
|
// 点击靶纸创建新的点
|
||||||
@@ -43,7 +40,14 @@ const onClick = async (e) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (props.id === 7 || props.id === 9) {
|
if (props.id === 7 || props.id === 9) {
|
||||||
|
// 放大并通过滚动将点击位置置于视窗中心
|
||||||
scale.value = 1.5;
|
scale.value = 1.5;
|
||||||
|
const viewportH = rect.value.width; // 容器高度等于宽度(100vw)
|
||||||
|
const contentH = scale.value * rect.value.width; // 内容高度
|
||||||
|
const clickYInContainer = e.detail.y - rect.value.top;
|
||||||
|
let target = clickYInContainer * scale.value - viewportH / 2;
|
||||||
|
target = Math.max(0, Math.min(contentH - viewportH, target));
|
||||||
|
scrollTop.value = Math.round(target);
|
||||||
}
|
}
|
||||||
const newArrow = {
|
const newArrow = {
|
||||||
x: (e.detail.x - 6) * scale.value,
|
x: (e.detail.x - 6) * scale.value,
|
||||||
@@ -75,12 +79,14 @@ const confirmAdd = () => {
|
|||||||
}
|
}
|
||||||
arrow.value = null;
|
arrow.value = null;
|
||||||
scale.value = 1;
|
scale.value = 1;
|
||||||
|
scrollTop.value = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 删除箭矢
|
// 删除箭矢
|
||||||
const deleteArrow = () => {
|
const deleteArrow = () => {
|
||||||
arrow.value = null;
|
arrow.value = null;
|
||||||
scale.value = 1;
|
scale.value = 1;
|
||||||
|
scrollTop.value = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 开始拖拽 - 同样修复坐标获取
|
// 开始拖拽 - 同样修复坐标获取
|
||||||
@@ -156,8 +162,10 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view
|
<scroll-view
|
||||||
:style="{ overflowY: editMode ? 'auto' : 'hidden' }"
|
scroll-y
|
||||||
|
scroll-with-animation
|
||||||
|
:scroll-top="scrollTop"
|
||||||
class="container"
|
class="container"
|
||||||
@tap="onClick"
|
@tap="onClick"
|
||||||
@touchmove="onDrag"
|
@touchmove="onDrag"
|
||||||
@@ -168,9 +176,7 @@ onMounted(async () => {
|
|||||||
:style="{
|
:style="{
|
||||||
width: scale * 100 + 'vw',
|
width: scale * 100 + 'vw',
|
||||||
height: scale * 100 + 'vw',
|
height: scale * 100 + 'vw',
|
||||||
transform: `translate(${(100 - scale * 100) / 2}vw,${
|
transform: `translateX(${(100 - scale * 100) / 2}vw)`,
|
||||||
(100 - scale * 100) / 2
|
|
||||||
}vw) translateY(${scale > 1 ? 16.7 : 0}%)`,
|
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<image :src="src" mode="widthFix" />
|
<image :src="src" mode="widthFix" />
|
||||||
@@ -228,7 +234,7 @@ onMounted(async () => {
|
|||||||
</view>
|
</view>
|
||||||
</movable-view>
|
</movable-view>
|
||||||
</movable-area>
|
</movable-area>
|
||||||
</view>
|
</scroll-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -175,7 +175,6 @@ const targetTypeName = computed(() => {
|
|||||||
:id="targetId"
|
:id="targetId"
|
||||||
:src="targetSrc"
|
:src="targetSrc"
|
||||||
:arrows="arrows.filter((item) => item.x && item.y)"
|
:arrows="arrows.filter((item) => item.x && item.y)"
|
||||||
:editMode="false"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view :style="{ transform: 'translateY(-60rpx)' }">
|
<view :style="{ transform: 'translateY(-60rpx)' }">
|
||||||
|
|||||||
@@ -230,7 +230,6 @@ onShareTimeline(async () => {
|
|||||||
:id="targetId"
|
:id="targetId"
|
||||||
:src="targetSrc"
|
:src="targetSrc"
|
||||||
:arrows="arrows.filter((item) => item.x && item.y)"
|
:arrows="arrows.filter((item) => item.x && item.y)"
|
||||||
:editMode="false"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view :style="{ transform: 'translateY(-60rpx)' }">
|
<view :style="{ transform: 'translateY(-60rpx)' }">
|
||||||
|
|||||||
@@ -29,7 +29,6 @@ const goldenRound = ref(0);
|
|||||||
const currentRedPoint = ref(0);
|
const currentRedPoint = ref(0);
|
||||||
const currentBluePoint = ref(0);
|
const currentBluePoint = ref(0);
|
||||||
const totalRounds = ref(0);
|
const totalRounds = ref(0);
|
||||||
const power = ref(0);
|
|
||||||
const scores = ref([]);
|
const scores = ref([]);
|
||||||
const blueScores = ref([]);
|
const blueScores = ref([]);
|
||||||
const redTeam = ref([]);
|
const redTeam = ref([]);
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ function createWebSocket(token, onMessage) {
|
|||||||
}
|
}
|
||||||
const { battleInfo } = msg;
|
const { battleInfo } = msg;
|
||||||
uni.setStorageSync("current-battle", battleInfo);
|
uni.setStorageSync("current-battle", battleInfo);
|
||||||
console.log("----battleInfo", battleInfo);
|
// console.log("----battleInfo", battleInfo);
|
||||||
if (battleInfo.config.mode === 1) {
|
if (battleInfo.config.mode === 1) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/team-battle?battleId=${battleInfo.id}&gameMode=${battleInfo.config.battleMode}`,
|
url: `/pages/team-battle?battleId=${battleInfo.id}&gameMode=${battleInfo.config.battleMode}`,
|
||||||
|
|||||||
Reference in New Issue
Block a user