127 lines
2.7 KiB
Vue
127 lines
2.7 KiB
Vue
<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 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>
|