193 lines
4.3 KiB
Vue
193 lines
4.3 KiB
Vue
<script setup>
|
||
import { ref, watch } from "vue";
|
||
import BowTarget from "@/components/BowTarget.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
const scores = ref([]);
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
onClose: {
|
||
type: Function,
|
||
default: () => {},
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
watch(
|
||
() => props.data,
|
||
(value) => {
|
||
const mine = value.players.find((p) => p.playerId === user.value.id);
|
||
if (mine && mine.arrowHistory) {
|
||
scores.value = mine.arrowHistory;
|
||
}
|
||
},
|
||
{ deep: true, immediate: true }
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
||
<view>
|
||
<text>5人大乱斗</text>
|
||
<view @click="onClose">
|
||
<image src="../static/close-white.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="rank-rows">
|
||
<view v-for="(player, index) in data.players" :key="index">
|
||
<image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
|
||
<image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
|
||
<image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
|
||
<view v-if="index > 2" class="rank-view">{{ index + 1 }}</view>
|
||
<Avatar :src="player.avatar" :size="24" />
|
||
<text
|
||
>积分
|
||
{{
|
||
player.totalScore > 0 ? "+" + player.totalScore : player.totalScore
|
||
}}分</text
|
||
>
|
||
<text>{{ player.totalRings }}环</text>
|
||
<text v-for="(arrow, index2) in player.arrowHistory" :key="index2">
|
||
{{ arrow.ringScore }}环
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view :style="{ width: '95%' }">
|
||
<BowTarget :scores="scores" />
|
||
</view>
|
||
<view class="score-text"
|
||
><text :style="{ color: '#fed847' }">12</text>支箭，共<text
|
||
:style="{ color: '#fed847' }"
|
||
>100</text
|
||
>环</view
|
||
>
|
||
<view class="score-row">
|
||
<view
|
||
v-for="(score, index) in scores"
|
||
:key="index"
|
||
class="score-item"
|
||
:style="{ width: '13vw', height: '13vw' }"
|
||
>
|
||
{{ score.ringScore }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: #232323;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10;
|
||
}
|
||
.container > view:first-child {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px 0;
|
||
color: #fff;
|
||
position: relative;
|
||
font-size: 20px;
|
||
}
|
||
.container > view:first-child > view:last-child {
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 25px;
|
||
}
|
||
.container > view:first-child > view:last-child > image {
|
||
width: 40px;
|
||
}
|
||
.score-text {
|
||
width: 100%;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.score-row {
|
||
margin: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.score-item {
|
||
background-image: url("../static/score-bg.png");
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
color: #fed847;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 24px;
|
||
margin: 3px;
|
||
}
|
||
.rank-rows {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
border-top: 1px solid #fff3;
|
||
}
|
||
.rank-rows > view {
|
||
width: clac(100% - 20px);
|
||
color: #fff9;
|
||
border-bottom: 1px solid #fff3;
|
||
padding: 7px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
overflow-x: auto;
|
||
}
|
||
.rank-rows > view::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
.rank-rows > view > image:first-child,
|
||
.rank-rows > view > view:first-child {
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
margin-right: 10px;
|
||
flex: 0 0 auto;
|
||
}
|
||
.rank-rows > view > view:first-child {
|
||
background-color: #6d6d6d;
|
||
border-radius: 50%;
|
||
}
|
||
.rank-rows > view > text {
|
||
margin-left: 10px;
|
||
flex: 0 0 auto;
|
||
display: block;
|
||
width: 25px;
|
||
}
|
||
.rank-rows > view > text:nth-child(3) {
|
||
width: 80px;
|
||
}
|
||
.rank-rows > view > text:nth-child(4) {
|
||
color: #fed847;
|
||
padding-right: 10px;
|
||
border-right: 1px solid #fff3;
|
||
width: 32px;
|
||
}
|
||
</style>
|