UI细节调整
This commit is contained in:
@@ -198,6 +198,5 @@ button::after {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
>
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user