101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<template>
|
|
<div class="toning-result">
|
|
<template v-if="sendMode == 'openingToningResult'">
|
|
<div class="text">
|
|
{{
|
|
result == 1 || result == 3
|
|
? Lang[Type].odd
|
|
: result == 0 || result == 2 || result == 4
|
|
? Lang[Type].even
|
|
: ""
|
|
}}
|
|
</div>
|
|
<span class="round" :class="{ red: result == 3 || result == 4 }"></span>
|
|
<span class="round" :class="{ red: result == 3 || result == 4 }"></span>
|
|
<span
|
|
class="round"
|
|
:class="{ red: result == 2 || result == 3 || result == 4 }"
|
|
></span>
|
|
<span
|
|
class="round"
|
|
:class="[
|
|
{ red: result == 1 || result == 2 || result == 4 },
|
|
{ black: result == 0 || result == 3 }
|
|
]"
|
|
>
|
|
{{ result }}
|
|
</span>
|
|
<div class="text">
|
|
{{
|
|
result == 0 || result == 1
|
|
? Lang[Type].small
|
|
: result == 3 || result == 4
|
|
? Lang[Type].big
|
|
: ""
|
|
}}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex"
|
|
export default {
|
|
name: "toningResult",
|
|
props: {
|
|
result: {
|
|
type: Number,
|
|
default: null
|
|
},
|
|
sendMode: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
Lang: (state) => state.config.$lang,
|
|
Type: (state) => state.config.$Type
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.toning-result {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: rotateX(0deg);
|
|
.text {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0 0.2rem;
|
|
color: #ddd;
|
|
}
|
|
.round {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 1rem;
|
|
background: #ddd;
|
|
margin: 0 0.3rem;
|
|
line-height: 1rem;
|
|
text-align: center;
|
|
font-size: 0.55rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
&.black {
|
|
color: #222;
|
|
}
|
|
&.red {
|
|
background: #fe8365;
|
|
}
|
|
}
|
|
}
|
|
</style>
|