173 lines
3.9 KiB
Vue
173 lines
3.9 KiB
Vue
<script setup>
|
||
import { ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import Container from "@/components/Container.vue";
|
||
import BattleHeader from "@/components/BattleHeader.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
|
||
const id = ref("");
|
||
const type = ref("");
|
||
const data = {
|
||
blueTeam: {
|
||
name: "选手1",
|
||
avatar: "../static/avatar.png",
|
||
arrows: [4, 6, 2],
|
||
score: 1,
|
||
},
|
||
redTeam: {
|
||
name: "选手2",
|
||
avatar: "../static/avatar.png",
|
||
arrows: [4, 6, 2],
|
||
score: 1,
|
||
},
|
||
};
|
||
const result = ref([
|
||
{
|
||
round: 1,
|
||
...data,
|
||
},
|
||
{
|
||
round: 2,
|
||
...data,
|
||
},
|
||
{
|
||
round: 3,
|
||
...data,
|
||
},
|
||
{
|
||
round: 4,
|
||
...data,
|
||
},
|
||
{
|
||
round: 5,
|
||
...data,
|
||
},
|
||
]);
|
||
|
||
onLoad((options) => {
|
||
type.value = options.type;
|
||
id.value = options.id;
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="详情">
|
||
<view class="container">
|
||
<BattleHeader
|
||
:blueTeam="[
|
||
{ name: '选手1', avatar: '../static/avatar.png', winner: true },
|
||
]"
|
||
:redTeam="[{ name: '选手2', avatar: '../static/avatar.png' }]"
|
||
/>
|
||
<view class="score-header">
|
||
<text>决金箭轮（环数）</text>
|
||
<view>
|
||
<text>查看靶纸</text>
|
||
<image src="../static/back.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="score-row">
|
||
<view>
|
||
<Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
|
||
<text>9环</text>
|
||
<text>10环</text>
|
||
<text>7环</text>
|
||
</view>
|
||
<image src="../static/winner-badge.png" mode="widthFix" />
|
||
</view>
|
||
<view class="score-row" :style="{ marginBottom: '5px' }">
|
||
<view>
|
||
<Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
|
||
<text>9环</text>
|
||
<text>10环</text>
|
||
<text>7环</text>
|
||
</view>
|
||
</view>
|
||
<view v-for="(item, index) in result" :key="index">
|
||
<view class="score-header">
|
||
<text>第{{ item.round }}轮</text>
|
||
<view>
|
||
<text>查看靶纸</text>
|
||
<image src="../static/back.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="score-row">
|
||
<view>
|
||
<Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
|
||
<text>9环</text>
|
||
<text>10环</text>
|
||
<text>7环</text>
|
||
</view>
|
||
<view>
|
||
<text :style="{ color: '#64BAFF' }">18环</text>
|
||
<text>得分 +1</text>
|
||
</view>
|
||
</view>
|
||
<view class="score-row" :style="{ marginBottom: '5px' }">
|
||
<view>
|
||
<Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
|
||
<text>9环</text>
|
||
<text>10环</text>
|
||
<text>7环</text>
|
||
</view>
|
||
<view>
|
||
<text :style="{ color: '#FF6767' }">18环</text>
|
||
<text>得分 +1</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view :style="{ height: '20px' }"></view>
|
||
</view>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.score-header,
|
||
.score-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px;
|
||
color: #fff9;
|
||
font-size: 15px;
|
||
border-bottom: 1px solid #fff3;
|
||
}
|
||
.score-header > text:first-child {
|
||
color: #fed847;
|
||
}
|
||
.score-header > view:last-child {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.score-header > view:last-child > image {
|
||
margin-left: 5px;
|
||
width: 15px;
|
||
height: 15px;
|
||
transform: rotate(180deg);
|
||
margin-top: -2px;
|
||
}
|
||
.score-row > view {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.score-row > view:first-child > text {
|
||
margin-left: 20px;
|
||
color: #fff;
|
||
display: block;
|
||
width: 30px;
|
||
}
|
||
.score-row > image:last-child {
|
||
width: 40px;
|
||
}
|
||
.score-row > view:last-child {
|
||
padding-right: 5px;
|
||
}
|
||
.score-row > view:last-child > text:last-child {
|
||
margin-left: 20px;
|
||
}
|
||
</style>
|