135 lines
2.9 KiB
Vue
135 lines
2.9 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import BowTarget from "@/components/BowTarget.vue";
|
|
import Avatar from "@/components/Avatar.vue";
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
onClose: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
});
|
|
const selected = ref(0);
|
|
const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"];
|
|
</script>
|
|
|
|
<template>
|
|
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
|
<view>
|
|
<text>1v1排位赛</text>
|
|
<view @click="onClose">
|
|
<image src="../static/close-white.png" mode="widthFix" />
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
@click="() => (selected = index)"
|
|
:class="selected === index ? 'selected-tab' : ''"
|
|
>
|
|
{{ tab }}
|
|
</view>
|
|
</view>
|
|
<view :style="{ width: '95%' }">
|
|
<BowTarget />
|
|
</view>
|
|
<view class="score-row">
|
|
<Avatar src="../static/avatar.png" :borderColor="1" />
|
|
<view
|
|
v-for="(score, index) in [7, 9, 7, 3, 8]"
|
|
:key="index"
|
|
class="score-item"
|
|
:style="{ width: '13vw', height: '13vw' }"
|
|
>
|
|
{{ score }}
|
|
</view>
|
|
</view>
|
|
<view class="score-row">
|
|
<Avatar src="../static/avatar.png" :borderColor="2" />
|
|
<view
|
|
v-for="(score, index) in [7, 9, 7, 3, 8]"
|
|
:key="index"
|
|
class="score-item"
|
|
:style="{ width: '13vw', height: '13vw' }"
|
|
>
|
|
{{ score }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
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: 40px 0;
|
|
color: #fff;
|
|
position: relative;
|
|
font-size: 20px;
|
|
}
|
|
.container > view:first-child > view:last-child {
|
|
position: absolute;
|
|
right: 5px;
|
|
top:32px;
|
|
}
|
|
.container > view:first-child > view:last-child > image {
|
|
width: 40px;
|
|
}
|
|
.container > view:nth-child(2) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
color: #fff9;
|
|
padding-left: 15px;
|
|
}
|
|
.container > view:nth-child(2) > view {
|
|
border: 1px solid #fff9;
|
|
border-radius: 20px;
|
|
padding: 7px 10px;
|
|
margin: 0 5px;
|
|
font-size: 14px;
|
|
}
|
|
.selected-tab {
|
|
background-color: #fed847;
|
|
border-color: #fed847 !important;
|
|
color: #000;
|
|
}
|
|
.score-row {
|
|
margin: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.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-left: 10px;
|
|
}
|
|
</style>
|