flykhan
/
kos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对战页面添加用户指示标签

This commit is contained in:
flykhan 2023-03-12 10:43:08 +08:00
parent 2b273a6ba6
commit 38bcba6bdf
2 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/components/UserIndicator.vue Normal file
View File

@ -0,0 +1,59 @@
// 用户指示标签
<template>
<div class="playground">
<div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">
<div style="color: #4876ec; ">
左下角: {{ $store.state.user.username }}
&ensp;
<img :src="$store.state.user.photo" alt="" class="pk_photo">
</div>
<div style="color: #f94848;">
右上角:{{ $store.state.pk.opponent_username }}
&ensp;
<img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
</div>
</div>
<div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">
<div style="color: #4876ec;">
左下角: {{ $store.state.pk.opponent_username }}
&ensp;
<img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
</div>
<div style="color: #f94848;">
右上角:{{ $store.state.user.username }}
&ensp;
<img :src="$store.state.user.photo" alt="" class="pk_photo">
</div>
</div>
</div>
</template>
<script>
</script>
<style scoped>
.playground {
/* 60% 浏览器宽度, 70% 浏览器高度 */
width: 40vw;
/* 背景色 */
/* background: lightblue; */
/* 距上边距40px,左右居中 */
margin: 10px auto;
}
.user_state_config {
text-align: center;
color: white;
font-size: 30;
font-weight: 600;
margin-top: auto;
display: flex;
justify-content: space-evenly;
}
.pk_photo {
border-radius: 50%;
width: 3vw;
}
</style>

5
web/src/views/pk/PkIndexView.vue
View File

@ -1,5 +1,6 @@
<template>
<PlayGround v-if="$store.state.pk.status === 'playing'" />
<UserIndicator v-if="$store.state.pk.status === 'playing'" />
<MatchGround v-else-if="$store.state.pk.status === 'matching'" />
<ResultBoard v-if="$store.state.pk.loser !== 'none'" />
</template>
@ -8,6 +9,7 @@
import PlayGround from "../../components/PlayGround.vue";
import MatchGround from "../../components/MatchGround.vue";
import ResultBoard from "../../components/ResultBoard.vue";
import UserIndicator from "../../components/UserIndicator.vue"
// onMounted 用于组件被挂载时, onUnmounted 用于组件被解除挂载时
import { onMounted, onUnmounted } from "vue";
@ -18,7 +20,8 @@ export default {
components: {
PlayGround,
MatchGround,
ResultBoard
ResultBoard,
UserIndicator
},
// 创建前后端连接:当当前页面组件被加载时,建立连接,故使用 onMounted 函数
setup() {