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

UI调整

Browse Source
This commit is contained in:
kron
2025-08-22 11:51:52 +08:00
parent 17e463a884
commit 3be6a5ef04
8 changed files with 140 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/BattleHeader.vue
View File

@@ -46,17 +46,18 @@ defineProps({
v-for="(player, index) in blueTeam"
:key="index"
:style="{
margin: blueTeam.length === 2 ? '0 12px' : '0 6px',
margin: blueTeam.length === 2 ? '0 -5px' : '0 6px',
width: `${100 / blueTeam.length - blueTeam.length * 3}%`,
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 1"
src="../static/winner-badge.png"
mode="widthFix"
class="left-winner-badge"
/>
</view>
<view>
@@ -64,17 +65,18 @@ defineProps({
v-for="(player, index) in redTeam"
:key="index"
:style="{
margin: redTeam.length === 2 ? '0 12px' : '0 6px',
margin: redTeam.length === 2 ? '0 -5px' : '0 6px',
width: `${100 / redTeam.length - redTeam.length * 3}%`,
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 0"
src="../static/winner-badge.png"
mode="widthFix"
class="right-winner-badge"
/>
</view>
</view>
@@ -93,7 +95,7 @@ defineProps({
>
<Avatar
:src="player.avatar"
:rankLvl="player.rankLvl"
:rankLvl="showRank ? undefined : player.rankLvl"
:size="40"
:rank="showRank ? index + 1 : 0"
/>
@@ -120,12 +122,12 @@ defineProps({
}
.players > view {
width: 50%;
height: 80px;
height: 75px;
color: #fff9;
font-size: 12px;
overflow: hidden;
position: relative;
padding-top: 7px;
padding-top: 5px;
display: flex;
justify-content: center;
}
@@ -135,13 +137,6 @@ defineProps({
.players > view:last-child {
background-color: #692735;
}
.players > view > image:last-child {
position: absolute;
width: 50px;
top: -10%;
left: -5%;
transform: rotate(-12deg);
}
.players > view > view {
display: flex;
flex-direction: column;
@@ -170,11 +165,25 @@ defineProps({
flex: 0 0 auto;
}
.player-name {
margin-top: 5px;
margin-top: 3px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.left-winner-badge {
position: absolute;
width: 50px;
top: -12%;
left: -5%;
transform: rotate(-12deg);
}
.right-winner-badge {
position: absolute;
width: 50px;
top: -12%;
right: -5%;
transform: rotate(36deg);
}
</style>

7
src/components/BowTarget.vue
View File

@@ -205,13 +205,14 @@ onMounted(() => {
<style scoped>
.container {
width: calc(100% - 30px);
width: calc(100vw - 30px);
height: calc(100vw - 30px);
padding: 0px 15px;
position: relative;
}
.target {
position: relative;
margin: 10px;
padding: 10px;
}
.e-value {
position: absolute;
@@ -254,7 +255,7 @@ onMounted(() => {
border: 1px solid #fff;
z-index: 1;
color: #fff;
font-size: 2.2vw;
font-size: 2.1vw;
box-sizing: border-box;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
display: flex;

1
src/components/PlayerSeats.vue
View File

@@ -65,6 +65,7 @@ const seats = new Array(props.total).fill(1);
}
.players > view > image:nth-child(2) {
width: 40px;
height: 40px;
min-height: 40px;
margin: 0 10px;
border: 1px solid #fff;

156
src/components/TestDistance.vue
View File

@@ -15,12 +15,33 @@ const props = defineProps({
type: Boolean,
default: true,
},
isBattle: {
type: Boolean,
default: false,
},
});
const arrow = ref({});
const power = ref(0);
const distance = ref(0);
const debugInfo = ref("");
const showsimul = ref(false);
const count = ref(15);
const timer = ref(null);
const updateTimer = (value) => {
count.value = Math.round(value);
};
onMounted(() => {
timer.value = setInterval(() => {
if (count.value > 0) count.value -= 1;
else clearInterval(timer.value);
}, 1000);
uni.$on("update-timer", updateTimer);
});
onUnmounted(() => {
if (timer.value) clearInterval(timer.value);
uni.$off("update-timer", updateTimer);
});
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
@@ -52,7 +73,7 @@ onUnmounted(() => {
<template>
<view class="container">
<Guide v-if="guide">
<Guide v-show="guide">
<view
:style="{
display: 'flex',
@@ -67,34 +88,41 @@ onUnmounted(() => {
</view>
</view>
</Guide>
<view class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
<image
class="text-bg"
src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
mode="widthFix"
/>
<view class="warnning-text">
<block v-if="distance > 0">
<text>当前距离{{ distance }}米</text>
<text v-if="distance >= 5">已达到距离要求</text>
<text v-else>请调整站位</text>
</block>
<block v-else>
<text>请射箭，测试站距</text>
</block>
</view>
<!-- <view class="debug-text">{{ debugInfo }}</view> -->
<view>
<view
<view class="test-area">
<image
class="text-bg"
src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
mode="widthFix"
/>
<button
class="simul"
@click="simulShoot"
:style="{ color: '#fff' }"
hover-class="none"
v-if="showsimul"
>
模拟射箭
</button>
<view class="warnning-text">
<block v-if="distance > 0">
<text>当前距离{{ distance }}米</text>
<text v-if="distance >= 5">已达到距离要求</text>
<text v-else>请调整站位</text>
</block>
<block v-else>
<text>请射箭，测试站距</text>
</block>
</view>
<view class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
</view>
<view v-if="isBattle" class="ready-timer">
<image src="../static/test-tip.png" mode="widthFix" />
<view>
<text>具体正式比赛还有</text>
<text>{{ count }}</text>
<text>秒</text>
</view>
</view>
</view>
@@ -103,41 +131,69 @@ onUnmounted(() => {
<style scoped>
.container {
width: 100vw;
display: flex;
flex-direction: column;
max-height: 70vh;
}
.text-bg {
width: 100%;
transform: translateY(-50px);
}
.warnning-text {
position: absolute;
color: #fed847;
font-size: 30px;
.ready-timer {
display: flex;
flex-direction: column;
align-items: center;
width: 54vw;
left: calc(50% - 27vw);
top: 34%;
transform: translateY(-10vw);
}
.ready-timer > image:first-child {
width: 40%;
}
.ready-timer > view {
width: 80%;
height: 45px;
background-color: #545454;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-8vw);
color: #bebebe;
font-size: 15px;
}
.ready-timer > view > text:nth-child(2) {
color: #fed847;
font-size: 20px;
width: 22px;
text-align: center;
}
.test-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 112vw;
position: relative;
}
.test-area > view:last-child {
padding: 15px;
width: calc(100% - 30px);
}
.text-bg {
width: 100%;
position: absolute;
top: -14.4%;
left: 0;
}
.warnning-text {
color: #fed847;
font-size: 27px;
display: flex;
flex-direction: column;
justify-content: center;
height: 40%;
}
.warnning-text > text {
width: 70vw;
text-align: center;
}
.container > view:last-child {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin-top: -40vw;
position: relative;
}
.debug-text {
position: fixed;
left: calc(50% - 45vw);
top: 66%;
.simul {
position: absolute;
color: #fff;
font-size: 14px;
right: 10px;
}
</style>

4
src/pages/melee-match.vue
View File

@@ -5,7 +5,6 @@ import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import Timer from "@/components/Timer.vue";
import PlayerScore from "@/components/PlayerScore.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
@@ -193,7 +192,7 @@ onHide(() => {
<Container :title="title" :bgType="1" :onBack="onBack">
<view class="container">
<BattleHeader v-if="!start" :players="players" />
<TestDistance v-if="!start" :guide="false" />
<TestDistance v-if="!start" :guide="false" :isBattle="true" />
<ShootProgress
:show="start"
:start="start && startCount"
@@ -223,7 +222,6 @@ onHide(() => {
:scores="playersScores[player.id] || []"
/>
</view>
<Timer v-if="!start" />
<ScreenHint
:show="halfTimeTip"
mode="small"

2
src/pages/my-growth.vue
View File

@@ -86,6 +86,7 @@ const onPractiseLoading = async (page) => {
:blueTeam="item.bluePlayers"
:redTeam="item.redPlayers"
:winner="item.winner"
:showRank="item.mode === 2"
:showHeader="false"
/>
</view>
@@ -106,6 +107,7 @@ const onPractiseLoading = async (page) => {
:blueTeam="item.bluePlayers"
:redTeam="item.redPlayers"
:winner="item.winner"
:showRank="item.mode === 2"
:showHeader="false"
/>
</view>

6
src/pages/team-battle.vue
View File

@@ -6,7 +6,6 @@ import BattleHeader from "@/components/BattleHeader.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import Timer from "@/components/Timer.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import SButton from "@/components/SButton.vue";
@@ -301,10 +300,10 @@ onHide(() => {
</script>
<template>
<Container :bgType="3" :onBack="onBack">
<Container :bgType="start ? 3 : 1" :onBack="onBack">
<view class="container">
<BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
<TestDistance v-if="!start" :guide="false" />
<TestDistance v-if="!start" :guide="false" :isBattle="true" />
<view v-if="start" class="players-row">
<TeamAvatars
:team="blueTeam"
@@ -334,7 +333,6 @@ onHide(() => {
:goldenRound="goldenRound"
:power="power"
/>
<Timer v-if="!start" />
<ScreenHint
:show="showRoundTip"
:onClose="() => (showRoundTip = false)"

BIN
src/static/test-tip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB