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-06-25 00:09:53 +08:00
parent 6e25124a27
commit 0e73648d6c
14 changed files with 138 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/battle-result.vue
View File

@@ -54,6 +54,7 @@ const checkBowData = () => {
});
}
};
const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
</script>
<template>
@@ -126,7 +127,11 @@ const checkBowData = () => {
mode="widthFix"
/>
<view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
<Avatar :src="player.avatar" :size="36" />
<Avatar
:src="player.avatar"
:size="36"
:borderColor="topThreeColors[index] || ''"
/>
<view class="player-title">
<text>{{ player.name }}</text>
<text>钻石三级</text>

2
src/pages/be-vip.vue
View File

@@ -29,7 +29,7 @@ const onPay = () => {
<Container title="会员说明">
<view v-if="user.id" class="header">
<view>
<Avatar :src="user.avatar" :size="35" :border="true" />
<Avatar :src="user.avatar" :size="35" />
<text class="truncate">{{ user.nickName }}</text>
</view>
<text>5月5号到期</text>

32
src/pages/first-try.vue
View File

@@ -10,8 +10,7 @@ import ScorePanel from "@/components/ScorePanel.vue";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import StartCountdown from "@/components/StartCountdown.vue";
import { createPractiseAPI, getHomeData } from "@/apis";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
@@ -32,7 +31,6 @@ const stepButtonTexts = [
"退出新手试炼",
];
const title = ref("新手试炼场");
const startCount = ref(false);
const start = ref(false);
const practiseResult = ref({});
const power = ref(0);
@@ -42,11 +40,6 @@ const createPractise = async (arrows) => {
const result = await createPractiseAPI(arrows);
};
const onStart = () => {
start.value = true;
scores.value = [];
};
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
@@ -92,13 +85,11 @@ const nextStep = async () => {
title.value = "小试牛刀";
} else if (step.value === 3) {
title.value = "新手试炼场";
scores.value = [];
await createPractise(total);
scores.value = [];
step.value = 4;
startCount.value = true;
start.value = true;
} else if (step.value === 5) {
// const result = await getHomeData();
// if (result.user) updateUser(result.user);
uni.navigateBack({
delta: 1,
});
@@ -121,7 +112,7 @@ const onClose = () => {
:type="
step === 2
? 2
: step === 5 || (step === 1 && user.nickName.length > 6)
: step === 5 || (step === 0 && user.nickName.length > 6)
? 1
: 0
"
@@ -155,7 +146,6 @@ const onClose = () => {
<text
>反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
>
<!-- 这行是占位用的 -->
<text :style="{ opacity: 0 }">新手试炼场通关啦，优秀！</text>
</view>
</view>
@@ -193,13 +183,15 @@ const onClose = () => {
:total="100"
:start="start"
/>
<view class="infos" v-if="step === 4">
<Avatar :src="user.avatar" :size="35" />
<view class="infos" v-if="step === 2 || step === 4">
<text v-if="step === 2">大人，请射箭</text>
<Avatar v-if="step === 4" :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
<BowTarget
:start="start"
:avatar="step === 2 ? user.avatar : ''"
:power="step === 2 ? power : 0"
:power="step !== 2 ? power : 0"
:debug="step === 2"
v-if="step === 2 || step === 4"
:currentRound="step === 4 ? scores.length : 0"
@@ -228,7 +220,6 @@ const onClose = () => {
:result="practiseResult"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<StartCountdown :start="startCount" :onFinish="onStart" />
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
@@ -253,4 +244,9 @@ const onClose = () => {
padding: 0 15px;
padding-top: 15px;
}
.infos > text {
font-size: 20px;
color: #fed847;
margin-bottom: 50px;
}
</style>

47
src/pages/index.vue
View File

@@ -74,10 +74,14 @@ const comingSoon = () => {
icon: "none",
});
};
const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
</script>
<template>
<view class="root-container" :style="{ paddingTop: isIos ? '45px' : '40px' }">
<view
class="root-container"
:style="{ paddingTop: isIos ? '86rpx' : '70rpx' }"
>
<AppBackground />
<UserHeader showRank :onSignin="() => (showModal = true)" />
<view class="container">
@@ -106,7 +110,6 @@ const comingSoon = () => {
<image src="../static/a3@2x.png" mode="widthFix" />
</view>
</view>
<view class="ranking-section">
<image src="../static/a4@2x.png" mode="widthFix" />
<button
@@ -116,12 +119,16 @@ const comingSoon = () => {
></button>
<view class="ranking-players">
<img src="../static/juezhanbang.png" mode="widthFix" />
<view class="divide-line"></view>
<view class="player-avatars">
<view
v-for="i in 6"
:key="i"
class="player-avatar"
:style="{ zIndex: 6 - i }"
:style="{
zIndex: 6 - i,
borderColor: topThreeColors[i - 1] || '#000',
}"
>
<image v-if="i === 1" src="../static/champ1.png" />
<image v-if="i === 2" src="../static/champ2.png" />
@@ -277,7 +284,7 @@ const comingSoon = () => {
.ranking-players > image:first-child {
width: 28%;
margin-right: 10px;
transform: translateX(-10px);
}
.player-avatars {
@@ -285,13 +292,20 @@ const comingSoon = () => {
align-items: center;
}
.divide-line {
width: 1px;
height: 35px;
background-color: #80808033;
margin-right: 8px;
}
.player-avatar,
.more-players {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: -10px;
border: 1px solid white;
border: 1px solid #000;
position: relative;
}
@@ -299,18 +313,18 @@ const comingSoon = () => {
.player-avatar > view:first-child {
position: absolute;
top: -10px;
left: 10px;
width: 18px;
height: 18px;
left: 12px;
width: 16px;
height: 16px;
}
.player-avatar > view:first-child {
border-radius: 50%;
background: #777777;
text-align: center;
font-size: 11px;
line-height: 20px;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 18px;
width: 18px;
height: 18px;
}
.player-avatar > image:last-child {
width: 100%;
@@ -320,15 +334,14 @@ const comingSoon = () => {
.more-players {
background: rgba(255, 255, 255, 0.2);
border: none;
font-size: 10px;
font-size: 9px;
line-height: 40px;
display: flex;
justify-content: flex-end;
text-align: center;
z-index: -1;
}
.more-players > text {
margin-right: 4px;
margin-left: 4px;
}
.region-stats {

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

@@ -135,7 +135,7 @@ const checkBowData = () => {
</view>
<view class="score-row">
<view>
<Avatar :src="round.blue.avatar" :size="25" :borderColor="1" />
<Avatar :src="round.blue.avatar" :size="25" borderColor="#64BAFF" />
<text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
{{ arrow.ring }}环
</text>
@@ -149,7 +149,7 @@ const checkBowData = () => {
</view>
<view class="score-row">
<view>
<Avatar :src="round.red.avatar" :size="25" :borderColor="2" />
<Avatar :src="round.red.avatar" :size="25" borderColor="#FF6767" />
<text v-for="(arrow, index2) in round.red.arrows" :key="index2">
{{ arrow.ring }}环
</text>

14
src/pages/practise-one.vue
View File

@@ -8,7 +8,6 @@ import ScoreResult from "@/components/ScoreResult.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import StartCountdown from "@/components/StartCountdown.vue";
import { createPractiseAPI, getHomeData } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
@@ -17,7 +16,6 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateUser } = store;
const startCount = ref(false);
const start = ref(false);
const showScore = ref(false);
const scores = ref([]);
@@ -30,13 +28,7 @@ const onReady = async () => {
await createPractiseAPI(total);
currentRound.value = 0;
scores.value = [];
startCount.value = true;
};
const onStart = () => {
start.value = true;
scores.value = [];
currentRound.value = 0;
};
async function onReceiveMessage(messages = []) {
@@ -95,6 +87,7 @@ onUnmounted(() => {
<BowPower :power="power" />
</view>
<BowTarget
:start="start"
:totalRound="start ? total / 4 : 0"
:currentRound="currentRound"
:scores="scores"
@@ -115,12 +108,9 @@ onUnmounted(() => {
:result="practiseResult"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<StartCountdown :start="startCount" :onFinish="onStart" />
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="!startCount" :onClick="onReady">
准备好了，直接开始
</SButton>
<SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
</view>
</Container>
</template>

14
src/pages/practise-two.vue
View File

@@ -8,7 +8,6 @@ import ScoreResult from "@/components/ScoreResult.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import StartCountdown from "@/components/StartCountdown.vue";
import { createPractiseAPI, getHomeData } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
@@ -17,7 +16,6 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateUser } = store;
const startCount = ref(false);
const start = ref(false);
const showScore = ref(false);
const scores = ref([]);
@@ -30,13 +28,7 @@ const onReady = async () => {
await createPractiseAPI(total);
currentRound.value = 0;
scores.value = [];
startCount.value = true;
};
const onStart = () => {
start.value = true;
scores.value = [];
currentRound.value = 0;
};
async function onReceiveMessage(messages = []) {
@@ -88,6 +80,7 @@ onUnmounted(() => {
<BowPower :power="power" />
</view>
<BowTarget
:start="start"
:totalRound="start ? total : 0"
:currentRound="currentRound"
:scores="scores"
@@ -115,12 +108,9 @@ onUnmounted(() => {
:result="practiseResult"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<StartCountdown :start="startCount" :onFinish="onStart" />
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="!startCount" :onClick="onReady"
>准备好了，直接开始</SButton
>
<SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
</view>
</Container>
</template>

4
src/pages/team-bow-data.vue
View File

@@ -100,7 +100,9 @@ const onClickTab = (index) => {
<view class="score-row" v-for="(player, index) in players" :key="index">
<Avatar
:src="player.avatar"
:borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
:borderColor="
data.bluePlayers[player.playerId] ? '#64BAFF' : '#FF6767'
"
/>
<view
v-if="selected === 0"