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; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center;
} }
</style> </style>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -198,6 +198,7 @@ async function onReceiveMessage(messages = []) {
} }
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) { if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (room.value.battleType === 1) { if (room.value.battleType === 1) {
if (currentShooterId.value !== msg.userId) {
scores.value = []; scores.value = [];
blueScores.value = []; blueScores.value = [];
seq.value += 1; seq.value += 1;
@@ -209,6 +210,7 @@ async function onReceiveMessage(messages = []) {
} }
} }
} }
}
if (msg.constructor === MESSAGETYPES.ShootResult) { if (msg.constructor === MESSAGETYPES.ShootResult) {
if (room.value.battleType === 1) { if (room.value.battleType === 1) {
const isRed = redTeam.value.find((item) => item.id === msg.userId); const isRed = redTeam.value.find((item) => item.id === msg.userId);
@@ -400,8 +402,10 @@ onUnmounted(() => {
:key="index" :key="index"
:name="player.name" :name="player.name"
:avatar="player.avatar" :avatar="player.avatar"
:scores="playersScores[player.id]" :scores="playersScores[player.id] || []"
:done="playersScores[player.id].length === 12" :done="
playersScores[player.id] && playersScores[player.id].length === 12
"
/> />
</view> </view>
<Timer :seq="timerSeq" /> <Timer :seq="timerSeq" />

View File

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

View File

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

View File

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

View File

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

View File

@@ -89,6 +89,7 @@ async function onReceiveMessage(messages = []) {
totalRounds.value = msg.groupUserStatus.config.maxRounds; totalRounds.value = msg.groupUserStatus.config.maxRounds;
} }
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) { if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (currentShooterId.value !== msg.userId) {
scores.value = []; scores.value = [];
blueScores.value = []; blueScores.value = [];
seq.value += 1; seq.value += 1;
@@ -99,6 +100,7 @@ async function onReceiveMessage(messages = []) {
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}`; tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}`;
} }
} }
}
if (msg.constructor === MESSAGETYPES.ShootResult) { if (msg.constructor === MESSAGETYPES.ShootResult) {
const isRed = redTeam.value.find((item) => item.id === msg.userId); const isRed = redTeam.value.find((item) => item.id === msg.userId);
if (isRed) { if (isRed) {