diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue index 40fc1ff..9a03fcb 100644 --- a/src/components/BowTarget.vue +++ b/src/components/BowTarget.vue @@ -102,11 +102,11 @@ watch( function calcRealX(num) { const len = 20.4 + num; - return `calc(${(len / 40.8) * 100}% - 8px)`; + return `calc(${(len / 40.8) * 100}% - 6px)`; } function calcRealY(num) { const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num; - return `calc(${(len / 40.8) * 100}% - 8px)`; + return `calc(${(len / 40.8) * 100}% - 6px)`; } const simulShoot = async () => { if (device.value.deviceId) await simulShootAPI(device.value.deviceId); @@ -144,7 +144,27 @@ const simulShoot2 = async () => { >{{ blueScores[blueScores.length - 1].ring }} - {{ bow.ring }} + - { left: calcRealX(bow.x), top: calcRealY(bow.y), }" - /> + /> --> + {{ bow.ring }} @@ -198,7 +232,7 @@ const simulShoot2 = async () => { } .target { position: relative; - padding: 10px; + margin: 10px; } .e-value { position: absolute; @@ -229,9 +263,17 @@ const simulShoot2 = async () => { } .hit { position: absolute; - width: 16px; - height: 16px; + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid #fff; z-index: 1; + color: #fff; + font-size: 8px; + text-align: center; + line-height: 12px; + transition: all 0.3s ease; + box-sizing: border-box; } .header { width: 100%; diff --git a/src/static/bow-target.png b/src/static/bow-target.png index 1334155..a175ed6 100644 Binary files a/src/static/bow-target.png and b/src/static/bow-target.png differ