2025-06-15 15:53:57 +08:00
|
|
|
|
<script setup>
|
|
|
|
|
|
import AppBackground from "@/components/AppBackground.vue";
|
|
|
|
|
|
import Avatar from "@/components/Avatar.vue";
|
|
|
|
|
|
import BowTarget from "@/components/BowTarget.vue";
|
|
|
|
|
|
import ScorePanel from "@/components/ScorePanel.vue";
|
|
|
|
|
|
import useStore from "@/store";
|
|
|
|
|
|
import { storeToRefs } from "pinia";
|
|
|
|
|
|
const store = useStore();
|
|
|
|
|
|
const { user } = storeToRefs(store);
|
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
|
show: {
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
default: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
onClose: {
|
|
|
|
|
|
type: Function,
|
|
|
|
|
|
default: () => {},
|
|
|
|
|
|
},
|
|
|
|
|
|
arrows: {
|
|
|
|
|
|
type: Array,
|
|
|
|
|
|
default: () => [],
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
|
|
|
|
|
<AppBackground :type="1" />
|
|
|
|
|
|
<view class="header">
|
|
|
|
|
|
<view>
|
2025-06-17 13:47:33 +08:00
|
|
|
|
<Avatar :src="user.avatar" frame :size="50" />
|
2025-06-15 15:53:57 +08:00
|
|
|
|
<view>
|
|
|
|
|
|
<text>{{ user.nickName }}</text>
|
2025-06-18 02:26:42 +08:00
|
|
|
|
<text>{{ user.lvlName }}</text>
|
2025-06-15 15:53:57 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view @click="onClose">
|
|
|
|
|
|
<image src="../static/close-white.png" mode="widthFix" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view :style="{ width: '100%', marginBottom: '20px' }">
|
2025-06-17 16:02:29 +08:00
|
|
|
|
<BowTarget :scores="arrows" :showLatestArrow="false" />
|
2025-06-15 15:53:57 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="desc">
|
|
|
|
|
|
<text>{{ arrows.length }}</text>
|
|
|
|
|
|
<text>支箭，共</text>
|
|
|
|
|
|
<text>{{ arrows.reduce((a, b) => a + b.ring, 0) }}</text>
|
|
|
|
|
|
<text>环</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<ScorePanel
|
|
|
|
|
|
:rowCount="arrows.length === 12 ? 6 : 9"
|
|
|
|
|
|
:total="arrows.length"
|
|
|
|
|
|
:scores="arrows.map((a) => a.ring)"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</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;
|
|
|
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: calc(100% - 20px);
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.header > view:first-child {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
2025-06-15 20:55:34 +08:00
|
|
|
|
margin-left: 10px;
|
2025-06-15 15:53:57 +08:00
|
|
|
|
}
|
|
|
|
|
|
.header > view:first-child > view:last-child {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
.header > view:first-child > view:last-child > text:last-child {
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
color: #fff9;
|
|
|
|
|
|
background-color: #5f51ff;
|
|
|
|
|
|
padding: 2px 5px;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.header > view:last-child > image {
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.desc {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.desc > text:nth-child(2),
|
|
|
|
|
|
.desc > text:nth-child(4) {
|
|
|
|
|
|
color: #fed847;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
