laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式更新

Browse Source
This commit is contained in:
kron
2026-01-06 09:08:56 +08:00
parent f7c24680cb
commit 60f4b3370c
5 changed files with 47 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/BowTargetEdit.vue
View File

@@ -28,6 +28,7 @@ const dragStartPos = ref({ x: 0, y: 0 });
const capsuleHeight = ref(0);
const scale = ref(1);
const scrollTop = ref(0);
const selected = ref(null);
let lastMoveTime = 0;
// 点击靶纸创建新的点
@@ -160,39 +161,42 @@ const getNewPos = () => {
return { left: "calc(50% - 12px)", bottom: "-12px" };
};
const setEditArrow = (data) => {
selected.value = data;
// if (data === null) {
// arrow.value = null;
// scale.value = 1;
// scrollTop.value = 0;
// return;
// }
// if (props.id === 7 || props.id === 9) {
// scale.value = 1.4;
// const viewportH = rect.value.width; // 容器高度等于宽度（100vw）
// const contentH = scale.value * rect.value.width; // 内容高度
// const clickYInContainer = contentH * data.y - rect.value.top;
// let target = clickYInContainer * scale.value - viewportH / 2;
// target = Math.max(0, Math.min(contentH - viewportH, target));
// setTimeout(() => {
// scrollTop.value = target > 180 ? target + 10 : target;
// }, 200);
// }
// arrow.value = {
// ...data,
// x: data.x * scale.value,
// y: data.y * scale.value,
// };
};
onMounted(async () => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top - 9;
const result = await getElementRect(".container");
rect.value = result;
uni.$on("set-edit-arrow", (data) => {
if (data === null) {
arrow.value = null;
scale.value = 1;
scrollTop.value = 0;
return;
}
if (props.id === 7 || props.id === 9) {
scale.value = 1.4;
const viewportH = rect.value.width; // 容器高度等于宽度（100vw）
const contentH = scale.value * rect.value.width; // 内容高度
const clickYInContainer = contentH * data.y - rect.value.top;
let target = clickYInContainer * scale.value - viewportH / 2;
target = Math.max(0, Math.min(contentH - viewportH, target));
setTimeout(() => {
scrollTop.value = target > 180 ? target + 10 : target;
}, 200);
}
arrow.value = {
...data,
x: data.x * scale.value,
y: data.y * scale.value,
};
});
uni.$on("set-edit-arrow", setEditArrow);
});
onBeforeUnmount(() => {
uni.$off("set-edit-arrow");
uni.$off("set-edit-arrow", setEditArrow);
});
</script>
@@ -220,7 +224,9 @@ onBeforeUnmount(() => {
<view
v-for="(arrow, index) in arrows"
:key="index"
class="arrow-point"
:class="`arrow-point ${
selected !== null && index === selected ? 'selected-arrow-point' : ''
}`"
:style="{
left: (arrow.x !== undefined ? arrow.x : 0) * 100 + '%',
top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
@@ -411,4 +417,15 @@ onBeforeUnmount(() => {
height: 115px;
background-color: #ff000055;
}
.selected-arrow-point .point {
background: linear-gradient(180deg, #ffdaa6 0%, #e9a333 100%) !important;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.18);
animation: duang 0.35s ease-out;
}
@keyframes duang {
0% { transform: translate(-50%, -50%) scale(0.7); }
45% { transform: translate(-50%, -50%) scale(1.4); }
70% { transform: translate(-50%, -50%) scale(0.9); }
100% { transform: translate(-50%, -50%) scale(1); }
}
</style>

2
src/components/PointRankItem.vue
View File

@@ -89,7 +89,7 @@ const onClick = async () => {
}
.rank-item > text:nth-child(1) {
width: 52rpx;
font-size: 30rpx;
font-size: 28rpx;
color: #333333;
text-align: center;
}