样式优化

src/components/CreateRoom.vue

@@ -67,12 +67,6 @@ const setClipboardData = () => {
       >
         <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': true, 'battle-choosen': battleMode === 3 }"
         @click="() => (battleMode = 3)"
@@ -87,6 +81,12 @@ const setClipboardData = () => {
         <text>对抗模式（3V3）</text>
         <!-- <text>敬请期待</text> -->
       </view>
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
+        @click="() => (battleMode = 2)"
+      >
+        <text>乱斗模式（3-10人）</text>
+      </view>
     </view>
     <SButton v-if="step === 1" :onClick="createRoom">下一步</SButton>
     <view v-if="step === 2" class="room-info">

src/components/Guide.vue

@@ -23,7 +23,7 @@ const bubbleTypes = [
       <image
         v-if="!noBg"
         :src="bubbleTypes[type]"
-        :style="{ top: type === 2 ? '-6%' : '-12%' }"
+        :style="{ top: type === 2 ? '-6%' : '-13%' }"
         mode="widthFix"
       />
       <slot />
@@ -55,6 +55,6 @@ const bubbleTypes = [
 }
 .container > view {
   color: #fff;
-  font-size: 14px;
+  font-size: 28rpx;
 }
 </style>

src/components/TestDistance.vue

@@ -78,18 +78,9 @@ onBeforeUnmount(() => {
 <template>
   <view class="container">
     <Guide v-show="guide">
-      <view
-        :style="{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingRight: '10px',
-        }"
-      >
-        <view :style="{ display: 'flex', flexDirection: 'column' }">
-          <text :style="{ color: '#fed847' }">请确保站距达到5米</text>
-          <text>低于5米的射箭无效</text>
-        </view>
+      <view class="guide-tips">
+        <text>请确保站距达到5米</text>
+        <text>低于5米的射箭无效</text>
       </view>
     </Guide>
     <view class="test-area">