细节调整
This commit is contained in:
@@ -186,4 +186,11 @@ button::after {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.user-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -77,7 +77,7 @@ watch(
|
||||
/>
|
||||
<view v-if="rank > 3" class="rank-view">{{ rank }}</view>
|
||||
<image
|
||||
:src="src"
|
||||
:src="src || '../static/user-icon.png'"
|
||||
mode="widthFix"
|
||||
:style="{
|
||||
width: size + 'px',
|
||||
|
||||
@@ -52,19 +52,19 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const showRoundTips = ref(false);
|
||||
const startCount = ref(false);
|
||||
// const startCount = ref(false);
|
||||
const prevLength = ref(0);
|
||||
const timer = ref(null);
|
||||
|
||||
watch(
|
||||
() => props.start,
|
||||
(newVal) => {
|
||||
startCount.value = newVal;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
// watch(
|
||||
// () => props.start,
|
||||
// (newVal) => {
|
||||
// startCount.value = newVal;
|
||||
// },
|
||||
// {
|
||||
// immediate: true,
|
||||
// }
|
||||
// );
|
||||
|
||||
watch(
|
||||
() => props.scores,
|
||||
@@ -174,7 +174,7 @@ const simulShoot2 = async () => {
|
||||
? 'green'
|
||||
: 'red',
|
||||
}"
|
||||
>{{ bow.ring }}</view
|
||||
>{{ index + 1 }}</view
|
||||
>
|
||||
</block>
|
||||
<block v-for="(bow, index) in blueScores" :key="index">
|
||||
@@ -205,7 +205,7 @@ const simulShoot2 = async () => {
|
||||
<text :style="{ color: '#fff', wordBreak: 'break-all' }">{{
|
||||
scores.length ? scores[scores.length - 1] : ""
|
||||
}}</text>
|
||||
<StartCountdown :start="startCount" />
|
||||
<!-- <StartCountdown :start="startCount" /> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -46,6 +46,9 @@ onShow(() => {
|
||||
const backToGame = debounce(async () => {
|
||||
const result = await getCurrentGameAPI();
|
||||
});
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -62,7 +65,7 @@ const backToGame = debounce(async () => {
|
||||
<slot></slot>
|
||||
</view>
|
||||
<ScreenHint :show="showHint">
|
||||
<view v-if="hintType === 1" class="back-to-game">
|
||||
<view v-if="hintType === 1" class="tip-content">
|
||||
<text>您还有正在进行中的对局,是否进入</text>
|
||||
<view>
|
||||
<button hover-class="none" @click="backToGame">进入</button>
|
||||
@@ -71,6 +74,16 @@ const backToGame = debounce(async () => {
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="hintType === 2" class="tip-content">
|
||||
<text>离开比赛可能会导致比赛失败,</text>
|
||||
<text>确认离开吗?</text>
|
||||
<view>
|
||||
<button hover-class="none" @click="goBack">离开比赛</button>
|
||||
<button hover-class="none" @click="() => (showHint = false)">
|
||||
继续比赛
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
</view>
|
||||
</template>
|
||||
@@ -86,7 +99,7 @@ const backToGame = debounce(async () => {
|
||||
justify-content: space-between;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.back-to-game {
|
||||
.tip-content {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -95,14 +108,17 @@ const backToGame = debounce(async () => {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
.back-to-game > view {
|
||||
.tip-content > text {
|
||||
text-align: center;
|
||||
}
|
||||
.tip-content > view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 50rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.back-to-game > view > button {
|
||||
.tip-content > view > button {
|
||||
padding: 12px;
|
||||
border-radius: 20px;
|
||||
background-color: #fff6;
|
||||
@@ -110,7 +126,7 @@ const backToGame = debounce(async () => {
|
||||
width: 45%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.back-to-game > view > button:first-child {
|
||||
.tip-content > view > button:first-child {
|
||||
background-color: #fed847;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@@ -30,18 +30,29 @@ onMounted(() => {
|
||||
<image src="../static/back.png" mode="widthFix" />
|
||||
</view>
|
||||
<view>
|
||||
<block v-if="'凹造型,感知距离,小试牛刀'.indexOf(title) === -1">
|
||||
<block
|
||||
v-if="
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
|
||||
"
|
||||
>
|
||||
<text>{{ title }}</text>
|
||||
</block>
|
||||
<block v-if="title && '凹造型,感知距离,小试牛刀'.indexOf(title) !== -1">
|
||||
<block
|
||||
v-if="
|
||||
title &&
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
|
||||
"
|
||||
>
|
||||
<view class="first-try-steps">
|
||||
<text :class="title === '凹造型' ? 'current-step' : ''">凹造型</text>
|
||||
<text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
|
||||
<text>-</text>
|
||||
<text :class="title === '感知距离' ? 'current-step' : ''"
|
||||
<text :class="title === '-感知距离' ? 'current-step' : ''"
|
||||
>感知距离</text
|
||||
>
|
||||
<text>-</text>
|
||||
<text :class="title === '小试牛刀' ? 'current-step' : ''"
|
||||
<text :class="title === '-小试牛刀' ? 'current-step' : ''"
|
||||
>小试牛刀</text
|
||||
>
|
||||
</view>
|
||||
@@ -87,5 +98,6 @@ onMounted(() => {
|
||||
.current-step {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -133,7 +133,7 @@ const rowCount = new Array(6).fill(0);
|
||||
display: flex;
|
||||
}
|
||||
.container > view:nth-child(2) > view text {
|
||||
width: 32px;
|
||||
width: 36px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
@@ -146,13 +146,13 @@ const rowCount = new Array(6).fill(0);
|
||||
}
|
||||
.container > view:nth-child(3) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.container > view:nth-child(3) > text:first-child {
|
||||
width: 40px;
|
||||
}
|
||||
.container > view:nth-child(3) > text:last-child {
|
||||
width: 60px;
|
||||
.container > view:nth-child(3) > text {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -62,7 +62,7 @@ watch(
|
||||
}
|
||||
if (!oldVal && newVal === true) {
|
||||
remain.value = props.total;
|
||||
setTimeout(() => {
|
||||
// setTimeout(() => {
|
||||
timer.value = setInterval(() => {
|
||||
if (remain.value > 0) {
|
||||
remain.value--;
|
||||
@@ -70,7 +70,7 @@ watch(
|
||||
props.onTimeIsUp();
|
||||
}
|
||||
}, 1000);
|
||||
}, 3000);
|
||||
// }, 3000);
|
||||
} else {
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
}
|
||||
|
||||
@@ -64,19 +64,27 @@ onUnmounted(() => {
|
||||
<BowPower :power="power" />
|
||||
</view>
|
||||
</Guide>
|
||||
<view class="user-row">
|
||||
<Avatar :src="user.avatar" :size="35" />
|
||||
<BowPower :power="power" />
|
||||
</view>
|
||||
<image
|
||||
class="text-bg"
|
||||
src="https://api.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="warnning-text" v-if="distance > 0">
|
||||
<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>
|
||||
<Avatar :src="user.avatar" :size="35" />
|
||||
<view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
|
||||
模拟射箭
|
||||
</view>
|
||||
@@ -92,6 +100,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.text-bg {
|
||||
width: 100%;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
.warnning-text {
|
||||
position: fixed;
|
||||
@@ -100,8 +109,9 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 54vw;
|
||||
left: calc(50% - 27vw);
|
||||
top: 30%;
|
||||
top: 34%;
|
||||
}
|
||||
.warnning-text > text {
|
||||
width: 60vw;
|
||||
@@ -113,6 +123,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
margin-top: -27vw;
|
||||
position: relative;
|
||||
}
|
||||
.debug-text {
|
||||
position: fixed;
|
||||
|
||||
@@ -305,6 +305,14 @@ const setClipboardData = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const onBack = () => {
|
||||
if (battleId.value) {
|
||||
uni.$showHint(2);
|
||||
} else {
|
||||
showModal.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
});
|
||||
@@ -318,11 +326,7 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container
|
||||
title="对战"
|
||||
:onBack="() => (showModal = true)"
|
||||
:bgType="battleId ? 1 : 0"
|
||||
>
|
||||
<Container title="对战" :onBack="onBack" :bgType="battleId ? 1 : 0">
|
||||
<view class="standby-phase" v-if="step === 1">
|
||||
<Guide>
|
||||
<view class="battle-guide">
|
||||
|
||||
@@ -83,16 +83,16 @@ onUnmounted(() => {
|
||||
const nextStep = async () => {
|
||||
if (step.value === 0) {
|
||||
step.value = 1;
|
||||
title.value = "凹造型";
|
||||
title.value = "-凹造型";
|
||||
} else if (step.value === 1) {
|
||||
// btnDisabled.value = true;
|
||||
step.value = 2;
|
||||
title.value = "感知距离";
|
||||
title.value = "-感知距离";
|
||||
} else if (step.value === 2) {
|
||||
step.value = 3;
|
||||
title.value = "小试牛刀";
|
||||
title.value = "-小试牛刀";
|
||||
} else if (step.value === 3) {
|
||||
title.value = "新手试炼场";
|
||||
title.value = "小试牛刀";
|
||||
await createPractise(total);
|
||||
scores.value = [];
|
||||
step.value = 4;
|
||||
@@ -208,7 +208,7 @@ const onClose = () => {
|
||||
/>
|
||||
<TestDistance v-if="step === 2" :guide="false" />
|
||||
<view
|
||||
class="infos"
|
||||
class="user-row"
|
||||
v-if="step === 4"
|
||||
:style="{ marginBottom: step === 2 ? '40px' : '0' }"
|
||||
>
|
||||
@@ -256,15 +256,4 @@ const onClose = () => {
|
||||
width: calc(100% - 20px);
|
||||
margin: 0 10px;
|
||||
}
|
||||
.infos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.infos > text {
|
||||
font-size: 20px;
|
||||
color: #fed847;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -152,7 +152,9 @@ const comingSoon = () => {
|
||||
<image v-if="i === 3" src="../static/champ3.png" />
|
||||
<view v-if="i > 3">{{ i }}</view>
|
||||
<image
|
||||
:src="rankData.rank[i - 1].avatar"
|
||||
:src="
|
||||
rankData.rank[i - 1].avatar || '../static/user-icon.png'
|
||||
"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -12,7 +12,6 @@ import SButton from "@/components/SButton.vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import Matching from "@/components/Matching.vue";
|
||||
import SModal from "@/components/SModal.vue";
|
||||
import TestDistance from "@/components/TestDistance.vue";
|
||||
import { matchGameAPI, readyGameAPI } from "@/apis";
|
||||
import { MESSAGETYPES, getMessageTypeName } from "@/constants";
|
||||
@@ -36,7 +35,6 @@ const players = ref([]);
|
||||
const playersScores = ref({});
|
||||
const halfTimeTip = ref(false);
|
||||
const onComplete = ref(null);
|
||||
const showModal = ref(false);
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.battleId) {
|
||||
@@ -143,7 +141,7 @@ async function onReceiveMessage(messages = []) {
|
||||
}
|
||||
const onBack = () => {
|
||||
if (battleId.value) {
|
||||
showModal.value = true;
|
||||
uni.$showHint(2);
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
@@ -176,7 +174,7 @@ onUnmounted(() => {
|
||||
:tips="tips"
|
||||
:total="countDown"
|
||||
/>
|
||||
<view v-if="start" class="infos">
|
||||
<view v-if="start" class="user-row">
|
||||
<Avatar :src="user.avatar" :size="35" />
|
||||
<BowPower :power="power" />
|
||||
</view>
|
||||
@@ -219,13 +217,6 @@ onUnmounted(() => {
|
||||
:onComplete="onComplete"
|
||||
/>
|
||||
</block>
|
||||
<SModal :show="showModal" :onClose="() => (showModal = false)">
|
||||
<view class="modal">
|
||||
<view class="modal" :style="{ color: '#fff9' }"
|
||||
>排位赛进行过程无法退出</view
|
||||
>
|
||||
</view>
|
||||
</SModal>
|
||||
</view>
|
||||
<view :style="{ marginBottom: '20px' }">
|
||||
<SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
|
||||
@@ -238,13 +229,6 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.infos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.half-time-tip {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -95,7 +95,7 @@ onUnmounted(() => {
|
||||
:start="start"
|
||||
:total="120"
|
||||
/>
|
||||
<view class="infos">
|
||||
<view class="user-row">
|
||||
<Avatar :src="user.avatar" :size="35" />
|
||||
<BowPower :power="power" />
|
||||
</view>
|
||||
@@ -126,11 +126,4 @@ onUnmounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.infos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -93,7 +93,7 @@ onUnmounted(() => {
|
||||
:tips="`请连续射箭${total}支`"
|
||||
:total="120"
|
||||
/>
|
||||
<view class="infos">
|
||||
<view class="user-row">
|
||||
<Avatar :src="user.avatar" :size="35" />
|
||||
<BowPower :power="power" />
|
||||
</view>
|
||||
@@ -131,11 +131,4 @@ onUnmounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.infos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -39,7 +39,6 @@ const handleSelect = (index) => {
|
||||
|
||||
const onScrollView = (e) => {
|
||||
headerColor.value = e.detail.scrollTop > 100 ? "orange" : "";
|
||||
console.log(1111, e.detail);
|
||||
};
|
||||
|
||||
const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
|
||||
|
||||
@@ -262,7 +262,7 @@ const toRankListPage = () => {
|
||||
/>
|
||||
<view v-if="index > 2">{{ index + 1 }}</view>
|
||||
<image
|
||||
:src="item.avatar"
|
||||
:src="item.avatar || '../static/user-icon.png'"
|
||||
mode="widthFix"
|
||||
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
|
||||
/>
|
||||
|
||||
@@ -12,7 +12,6 @@ import BattleFooter from "@/components/BattleFooter.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
import Matching from "@/components/Matching.vue";
|
||||
import SModal from "@/components/SModal.vue";
|
||||
import RoundEndTip from "@/components/RoundEndTip.vue";
|
||||
import TestDistance from "@/components/TestDistance.vue";
|
||||
import { matchGameAPI, readyGameAPI } from "@/apis";
|
||||
@@ -43,7 +42,6 @@ const redPoints = ref(0);
|
||||
const bluePoints = ref(0);
|
||||
const showRoundTip = ref(false);
|
||||
const onComplete = ref(null);
|
||||
const showModal = ref(false);
|
||||
const isFinalShoot = ref(false);
|
||||
|
||||
onLoad(async (options) => {
|
||||
@@ -172,7 +170,7 @@ async function onReceiveMessage(messages = []) {
|
||||
}
|
||||
const onBack = () => {
|
||||
if (battleId.value) {
|
||||
showModal.value = true;
|
||||
uni.$showHint(2);
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
@@ -248,11 +246,6 @@ onUnmounted(() => {
|
||||
:onComplete="onComplete"
|
||||
/>
|
||||
</block>
|
||||
<SModal :show="showModal" :onClose="() => (showModal = false)">
|
||||
<view class="modal" :style="{ color: '#fff9' }"
|
||||
>排位赛进行过程无法退出</view
|
||||
>
|
||||
</SModal>
|
||||
</view>
|
||||
<view :style="{ marginBottom: '20px' }">
|
||||
<SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
|
||||
|
||||
Reference in New Issue
Block a user