UI开发
This commit is contained in:
kron
102
src/components/BattleFooter.vue
Normal file
102
src/components/BattleFooter.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import CoachComment from "@/components/CoachComment.vue";
|
||||
defineProps({
|
||||
blueTeam: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
redTeam: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const showComment = ref(false);
|
||||
setTimeout(() => {
|
||||
showComment.value = true;
|
||||
}, 2000);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image src="../static/battle-header.png" mode="widthFix" />
|
||||
<view class="players">
|
||||
<view>
|
||||
<view v-for="(score, index) in blueTeam" :key="index">
|
||||
<text>Round {{ index + 1 }}</text>
|
||||
<view>
|
||||
<text>{{ score }}</text>
|
||||
<text>环</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-for="(score, index) in redTeam" :key="index">
|
||||
<text>Round {{ index + 1 }}</text>
|
||||
<view>
|
||||
<text>{{ score }}</text>
|
||||
<text>环</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<CoachComment :show="showComment" :onClose="() => (showComment = false)">
|
||||
第三轮射击结束
|
||||
</CoachComment>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.container > image:first-child {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -10px;
|
||||
}
|
||||
.players {
|
||||
display: flex;
|
||||
}
|
||||
.players > view {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.players > view:first-child {
|
||||
background-color: #364469;
|
||||
}
|
||||
.players > view:last-child {
|
||||
background-color: #692735;
|
||||
}
|
||||
.players > view > view {
|
||||
width: 85%;
|
||||
padding: 5px 20px;
|
||||
margin-bottom: 5px;
|
||||
background-image: url("../static/row-bg.png");
|
||||
background-size: 90% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.players > view > view > text {
|
||||
font-size: 14px;
|
||||
}
|
||||
.players > view > view > view:last-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.players > view > view > view:last-child > text:first-child {
|
||||
font-size: 20px;
|
||||
color: #fed847;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
86
src/components/BattleHeader.vue
Normal file
86
src/components/BattleHeader.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
isMelee: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image
|
||||
:src="`../static/battle-header${isMelee ? '-melee' : ''}.png`"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view v-if="isMelee" class="players-melee">
|
||||
<view></view>
|
||||
</view>
|
||||
<view v-if="!isMelee" class="players">
|
||||
<view>
|
||||
<view class="avatar">
|
||||
<image src="../static/avatar-frame.png" mode="widthFix" />
|
||||
<image src="../static/avatar.png" mode="widthFix" />
|
||||
</view>
|
||||
<text>选手1</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="avatar">
|
||||
<image src="../static/avatar-frame.png" mode="widthFix" />
|
||||
<image src="../static/avatar.png" mode="widthFix" />
|
||||
</view>
|
||||
<text>选手2</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container > image:first-child {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -10px;
|
||||
}
|
||||
.players {
|
||||
display: flex;
|
||||
}
|
||||
.players > view {
|
||||
width: 50%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff9;
|
||||
font-size: 14px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.players > view:first-child {
|
||||
background-color: #364469;
|
||||
}
|
||||
.players > view:last-child {
|
||||
background-color: #692735;
|
||||
}
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.avatar > image:first-child {
|
||||
position: absolute;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
.avatar > image {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
28
src/components/BowPower.vue
Normal file
28
src/components/BowPower.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
power: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image src="../static/b-power.png" mode="widthFix" />
|
||||
<view>电量{{ power }}%</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #b9b9b9;
|
||||
font-size: 13px;
|
||||
}
|
||||
.container > image {
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup>
|
||||
import BowPower from "@/components/BowPower.vue";
|
||||
defineProps({
|
||||
totalRound: {
|
||||
type: Number,
|
||||
@@ -30,18 +31,14 @@ defineProps({
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text v-if="debug" class="header-tips">大人，请射箭</text>
|
||||
<image v-if="!debug" :src="avatar" mode="widthFix" />
|
||||
<view>
|
||||
<image src="../static/b-power.png" mode="widthFix" />
|
||||
<view>电量{{ power }}%</view>
|
||||
</view>
|
||||
<text v-if="!tips && totalRound > 0">{{
|
||||
<!-- <text v-if="debug" class="header-tips">大人，请射箭</text> -->
|
||||
<text v-if="totalRound > 0" class="round-count">{{
|
||||
currentRound + "/" + totalRound
|
||||
}}</text>
|
||||
<BowPower v-if="power > 0" :power="power" />
|
||||
</view>
|
||||
<image src="../static/bow-target.png" mode="widthFix" />
|
||||
<view v-if="debug" class="footer">
|
||||
<view v-if="avatar" class="footer">
|
||||
<image :src="avatar" mode="widthFix" />
|
||||
</view>
|
||||
<text v-if="tips">{{ tips }}</text>
|
||||
@@ -50,40 +47,26 @@ defineProps({
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
width: calc(100% - 30px);
|
||||
padding: 15px;
|
||||
margin: 15px;
|
||||
}
|
||||
.container > image {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.header > image:first-child {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.header > view:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #b9b9b9;
|
||||
}
|
||||
.header > view:nth-child(2) > image {
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.header > text:nth-child(3) {
|
||||
position: absolute;
|
||||
.round-count {
|
||||
font-size: 20px;
|
||||
color: #fed847;
|
||||
top: 75px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.header-tips {
|
||||
font-size: 20px;
|
||||
|
||||
@@ -42,6 +42,7 @@ const props = defineProps({
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.container > view:first-child {
|
||||
display: flex;
|
||||
|
||||
126
src/components/CreateRoom.vue
Normal file
126
src/components/CreateRoom.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
const props = defineProps({});
|
||||
|
||||
const battleMode = ref(1);
|
||||
const step = ref(1);
|
||||
|
||||
const toBattleRoom = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/battle-room",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<view v-if="!warnning" class="container">
|
||||
<image
|
||||
v-if="step === 1"
|
||||
src="../static/choose-battle-mode.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view v-if="step === 1" class="create-options">
|
||||
<view
|
||||
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 1 }"
|
||||
@click="() => (battleMode = 1)"
|
||||
>
|
||||
<text>对抗模式（1V1）</text>
|
||||
</view>
|
||||
<view
|
||||
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
|
||||
@click="() => (battleMode = 2)"
|
||||
>
|
||||
<text>乱斗模式（3-10人）</text>
|
||||
</view>
|
||||
<view class="battle-btn battle-close">
|
||||
<text>对抗模式（2V2）</text>
|
||||
<text>敬请期待</text>
|
||||
</view>
|
||||
<view class="battle-btn battle-close">
|
||||
<text>对抗模式（3V3）</text>
|
||||
<text>敬请期待</text>
|
||||
</view>
|
||||
</view>
|
||||
<SButton v-if="step === 1" :onClick="() => (step = 2)">下一步</SButton>
|
||||
<view v-if="step === 2" class="room-info">
|
||||
<view>
|
||||
<text>房间号：</text>
|
||||
<text>3245</text>
|
||||
</view>
|
||||
<SButton width="60vw" :onClick="toBattleRoom">进入房间</SButton>
|
||||
<text>30分钟无人进入则房间无效</text>
|
||||
<view>复制房间信息邀请朋友进入</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container > image:first-child {
|
||||
width: 45%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.create-options {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.battle-btn {
|
||||
width: 45%;
|
||||
height: 55px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #fff3;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.battle-choosen {
|
||||
color: #fed847;
|
||||
border-color: #fed847;
|
||||
}
|
||||
.battle-close {
|
||||
background-color: #8889;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.battle-close > text:last-child {
|
||||
font-size: 12px;
|
||||
}
|
||||
.room-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
}
|
||||
.room-info > view:first-child {
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.room-info > view:first-child > text:last-child {
|
||||
color: #fed847;
|
||||
}
|
||||
.room-info > text {
|
||||
color: #888686;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.room-info > view:last-child {
|
||||
color: #287fff;
|
||||
margin: 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,10 @@ defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
noBg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -12,6 +16,7 @@ defineProps({
|
||||
<image src="../static/shooter.png" mode="widthFix" />
|
||||
<view>
|
||||
<image
|
||||
v-if="!noBg"
|
||||
:src="
|
||||
tall ? '../static/long-bubble-tall.png' : '../static/long-bubble.png'
|
||||
"
|
||||
|
||||
86
src/components/PlayerScore.vue
Normal file
86
src/components/PlayerScore.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
avatar: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
scores: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const rowCount = new Array(6).fill(0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image :src="avatar" mode="widthFix" />
|
||||
<text>{{ name }}</text>
|
||||
<view>
|
||||
<view>
|
||||
<view v-for="(_, index) in rowCount" :key="index">
|
||||
<text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-for="(_, index) in rowCount" :key="index">
|
||||
<text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text>{{ scores.reduce((last, next) => last + next) }}环</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: calc(100% - 75px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #fff3;
|
||||
margin: 10px 0;
|
||||
margin-left: 40px;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
color: #fff9;
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.container > image:first-child {
|
||||
width: 30px;
|
||||
border: 1px solid #fff3;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.container > text:nth-child(2) {
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.container > view:nth-child(3) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.container > view:nth-child(3) > view {
|
||||
display: flex;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.container > view:nth-child(3) > view text {
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
.container > view:nth-child(3) > view:first-child {
|
||||
border-bottom: 1px solid #fff3;
|
||||
}
|
||||
.container > text:nth-child(4) {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
122
src/components/PlayersRow.vue
Normal file
122
src/components/PlayersRow.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
avatar: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
blueTeam: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
redTeam: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image v-if="avatar" class="avatar" :src="avatar" mode="widthFix" />
|
||||
<view v-if="!avatar" :style="{ height: 20 + blueTeam.length * 20 + 'px' }">
|
||||
<view
|
||||
v-for="(item, index) in blueTeam"
|
||||
:key="index"
|
||||
:style="{
|
||||
top: index * 20 + 'px',
|
||||
zIndex: blueTeam.length - index,
|
||||
left: 0,
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="avatar"
|
||||
:src="item.avatar"
|
||||
mode="widthFix"
|
||||
:style="{
|
||||
borderColor: index === 0 ? '#5fadff' : '#fff',
|
||||
}"
|
||||
/>
|
||||
<text
|
||||
:style="{
|
||||
color: index === 0 ? '#5fadff' : '#fff',
|
||||
fontSize: index === 0 ? 16 : 12 + 'px',
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="!avatar"
|
||||
:style="{
|
||||
height: 20 + blueTeam.length * 20 + 'px',
|
||||
}"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in blueTeam"
|
||||
:key="index"
|
||||
:style="{
|
||||
top: index * 20 + 'px',
|
||||
zIndex: blueTeam.length - index,
|
||||
right: 0,
|
||||
}"
|
||||
>
|
||||
<text
|
||||
:style="{
|
||||
color: index === 0 ? '#ff6060' : '#fff',
|
||||
fontSize: index === 0 ? 16 : 12 + 'px',
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<image
|
||||
class="avatar"
|
||||
:src="item.avatar"
|
||||
mode="widthFix"
|
||||
:style="{
|
||||
borderColor: index === 0 ? '#ff6060' : '#fff',
|
||||
}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: calc(100% - 30px);
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.container > view {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.container > view > view {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.container > view > view > text {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.red-avatar {
|
||||
border: 1px solid #ff6060;
|
||||
}
|
||||
.blue-avatar {
|
||||
border: 1px solid #5fadff;
|
||||
}
|
||||
</style>
|
||||
82
src/components/SModal.vue
Normal file
82
src/components/SModal.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
const showContent = ref(false);
|
||||
watch(
|
||||
() => props.show,
|
||||
(newValue) => {
|
||||
setTimeout(() => {
|
||||
showContent.value = newValue;
|
||||
}, 100);
|
||||
}
|
||||
);
|
||||
const closeModal = () => {
|
||||
showContent.value = false;
|
||||
setTimeout(() => {
|
||||
props.onClose();
|
||||
}, 300);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container" v-if="show" :style="{ opacity: show ? 1 : 0 }">
|
||||
<view
|
||||
class="modal-content"
|
||||
:style="{ transform: `translateY(${showContent ? '0%' : '100%'})` }"
|
||||
>
|
||||
<image src="../static/modal-content-bg.png" mode="widthFix" />
|
||||
<view class="close-btn" @click="closeModal">
|
||||
<image src="../static/close-yellow.png" mode="widthFix" />
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #00000099;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
transform: translateY(100%);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
.modal-content > image:first-child {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.close-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.close-btn > image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
@@ -7,9 +7,12 @@ const props = defineProps({
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 90,
|
||||
},
|
||||
});
|
||||
let barColor = "#fed847";
|
||||
if (props.tips.includes("红队")) barColor = "#FF6060";
|
||||
if (props.tips.includes("蓝队")) barColor = "#5FADFF";
|
||||
const remain = ref(0);
|
||||
onMounted(() => {
|
||||
remain.value = props.total;
|
||||
@@ -31,7 +34,13 @@ onMounted(() => {
|
||||
</button>
|
||||
</view>
|
||||
<view>
|
||||
<view :style="{ width: `${((total - remain) / total) * 100}%` }" />
|
||||
<view
|
||||
:style="{
|
||||
width: `${((total - remain) / total) * 100}%`,
|
||||
backgroundColor: barColor,
|
||||
right: tips.includes('红队') ? 0 : 'unset',
|
||||
}"
|
||||
/>
|
||||
<text>剩余{{ remain }}秒</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -73,7 +82,6 @@ onMounted(() => {
|
||||
.container > view:last-child > view {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
background-color: #fed847;
|
||||
border-radius: 20px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user