UI细节调整

This commit is contained in:
kron
2025-06-28 12:03:33 +08:00
parent 9f29a92d3d
commit 72f3013795
12 changed files with 62 additions and 45 deletions

View File

@@ -198,6 +198,5 @@ button::after {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
</style>

View File

@@ -241,6 +241,7 @@ const simulShoot = async () => {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: -10px;
}
.header > image:first-child {
width: 40px;
@@ -262,6 +263,7 @@ const simulShoot = async () => {
min-height: 40px;
max-height: 40px;
border-radius: 50%;
border: 1px solid #fff;
}
.container > text {
width: 100%;
@@ -269,7 +271,6 @@ const simulShoot = async () => {
text-align: center;
line-height: 40px;
display: block;
margin-top: 20px;
}
.simul {
position: absolute;

View File

@@ -36,11 +36,11 @@ onMounted(() => {
<block v-else>
<view class="first-try-steps">
<text :class="title === '凹造型' ? 'current-step' : ''">凹造型</text>
<text></text>
<text>-</text>
<text :class="title === '感知距离' ? 'current-step' : ''"
>感知距离</text
>
<text></text>
<text>-</text>
<text :class="title === '小试牛刀' ? 'current-step' : ''"
>小试牛刀</text
>

View File

@@ -94,9 +94,11 @@ defineProps({
.container {
width: calc(100% - 30px);
margin: 15px;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.container > view {
width: 50%;

View File

@@ -40,7 +40,7 @@ const timer = ref(null);
onMounted(() => {
timer.value = setInterval(() => {
bgIndex.value = bgIndex.value === 0 ? 1 : 0;
}, 500);
}, 200);
});
onUnmounted(() => {
if (timer.value) {
@@ -89,7 +89,7 @@ onUnmounted(() => {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 5vw;
margin: 0 4vw;
position: relative;
padding: 1vw 0;
}

View File

@@ -132,7 +132,7 @@ onUnmounted(() => {
text-align: center;
background-color: #ffffff80;
border-radius: 20px;
margin-top: -14px;
margin-top: -20px;
font-size: 12px;
height: 20px;
line-height: 20px;

View File

@@ -198,14 +198,16 @@ async function onReceiveMessage(messages = []) {
}
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (room.value.battleType === 1) {
scores.value = [];
blueScores.value = [];
seq.value += 1;
currentShooterId.value = msg.userId;
if (redTeam.value[0].id === currentShooterId.value) {
tips.value = `请红队射箭-第${roundsName[currentRound.value]}`;
} else {
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}`;
if (currentShooterId.value !== msg.userId) {
scores.value = [];
blueScores.value = [];
seq.value += 1;
currentShooterId.value = msg.userId;
if (redTeam.value[0].id === currentShooterId.value) {
tips.value = `请红队射箭-第${roundsName[currentRound.value]}`;
} else {
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}`;
}
}
}
}
@@ -400,8 +402,10 @@ onUnmounted(() => {
:key="index"
:name="player.name"
:avatar="player.avatar"
:scores="playersScores[player.id]"
:done="playersScores[player.id].length === 12"
:scores="playersScores[player.id] || []"
:done="
playersScores[player.id] && playersScores[player.id].length === 12
"
/>
</view>
<Timer :seq="timerSeq" />

View File

@@ -190,7 +190,11 @@ const onClose = () => {
:total="100"
:start="start"
/>
<view class="infos" v-if="step === 2 || step === 4">
<view
class="infos"
v-if="step === 2 || step === 4"
:style="{ marginBottom: step === 2 ? '40px' : '0' }"
>
<text v-if="step === 2">大人请射箭</text>
<Avatar v-if="step === 4" :src="user.avatar" :size="35" />
<BowPower :power="power" />
@@ -198,7 +202,6 @@ const onClose = () => {
<BowTarget
:start="start"
:avatar="step === 2 ? user.avatar : ''"
:power="start ? 0 : power"
:debug="step === 2"
v-if="step === 2 || step === 4"
:currentRound="step === 4 ? scores.length : 0"
@@ -248,11 +251,10 @@ const onClose = () => {
align-items: center;
justify-content: space-between;
padding: 0 15px;
padding-top: 15px;
padding-top: 20px;
}
.infos > text {
font-size: 20px;
color: #fed847;
margin-bottom: 50px;
}
</style>

View File

@@ -158,8 +158,10 @@ onUnmounted(() => {
:key="index"
:name="player.name"
:avatar="player.avatar"
:scores="playersScores[player.id]"
:done="playersScores[player.id].length === 12"
:scores="playersScores[player.id] || []"
:done="
playersScores[player.id] && playersScores[player.id].length === 12
"
/>
</view>
<Timer :seq="timerSeq" :callBack="readyToGo" />

View File

@@ -1,17 +1,17 @@
<script setup>
import { ref, onMounted } from "vue";
import Avatar from "@/components/Avatar.vue";
import { getRankListAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, rankData } = storeToRefs(store);
const isIos = ref(true);
const selectedIndex = ref(0);
const rankData = ref({});
onMounted(async () => {
const deviceInfo = uni.getDeviceInfo();
isIos.value = deviceInfo.osName === "ios";
const rankList = await getRankListAPI();
rankData.value = rankList;
});
const handleSelect = (index) => {
@@ -111,15 +111,16 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
</view>
<view class="my-rank-data">
<image src="../static/modal-content-bg.png" mode="widthFix" />
<text>123</text>
<Avatar src="../static/avatar.png" />
<text>{{ user.ranking }}</text>
<Avatar :src="user.avatar" />
<view class="rank-item-content">
<text>打酱油大声路过</text>
<text>钻石3级20</text>
<text class="truncate">{{ user.nickName }}</text>
<text>{{ user.lvlName }}20</text>
</view>
<text class="rank-item-integral"
><text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>9999</text
><text
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>{{ user.scores }}</text
></text
>
</view>
@@ -227,6 +228,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
color: #fff;
font-size: 14px;
margin-bottom: 3px;
width: 120px;
}
.rank-list-item > text:last-child {
margin-right: 10px;

View File

@@ -74,7 +74,7 @@ const toRankListPage = () => {
<view class="my-data">
<view>
<text>段位</text>
<text :style="{ color: '#83CDFF' }">砖石 III</text>
<text :style="{ color: '#83CDFF' }">{{ user.lvlName }}</text>
</view>
<view>
<text>赛季平均环数</text>
@@ -82,7 +82,7 @@ const toRankListPage = () => {
</view>
<view>
<text>赛季胜率</text>
<text :style="{ color: '#FF507E' }">52%</text>
<text :style="{ color: '#FF507E' }">{{ user.avg_win }}%</text>
</view>
</view>
<view class="rank-type">
@@ -177,7 +177,7 @@ const toRankListPage = () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<text>{{ rankData.rank[index].name }}</text>
<text class="truncate">{{ rankData.rank[index].name }}</text>
<text>钻石三级20场</text>
</view>
<text>{{ rankData.rank[index].totalScore }}<text>分</text></text>
@@ -218,7 +218,9 @@ const toRankListPage = () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<text>{{ rankData.ringRank[index].name }}</text>
<text class="truncate">{{
rankData.ringRank[index].name
}}</text>
<text>钻石三级20场</text>
</view>
<text
@@ -431,6 +433,7 @@ const toRankListPage = () => {
.rank-item > view:nth-child(3) > text:first-child {
color: #fff9;
font-size: 14px;
width: 120px;
}
.rank-item > view:nth-child(3) > text:last-child {
color: #fff4;

View File

@@ -89,14 +89,16 @@ async function onReceiveMessage(messages = []) {
totalRounds.value = msg.groupUserStatus.config.maxRounds;
}
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
scores.value = [];
blueScores.value = [];
seq.value += 1;
currentShooterId.value = msg.userId;
if (redTeam.value[0].id === currentShooterId.value) {
tips.value = `请红队射箭-第${roundsName[currentRound.value]}`;
} else {
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}`;
if (currentShooterId.value !== msg.userId) {
scores.value = [];
blueScores.value = [];
seq.value += 1;
currentShooterId.value = msg.userId;
if (redTeam.value[0].id === currentShooterId.value) {
tips.value = `请红队射箭-第${roundsName[currentRound.value]}`;
} else {
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}`;
}
}
}
if (msg.constructor === MESSAGETYPES.ShootResult) {