UI开发

src/components/CreateRoom.vue

@@ -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>