UI优化

src/components/CreateRoom.vue

@@ -84,9 +84,11 @@ const setClipboardData = () => {
         <text>房间号：</text>
         <text>{{ roomNumber }}</text>
       </view>
-      <SButton width="60vw" :onClick="enterRoom">进入房间</SButton>
+      <view class="copy-room-number" @click="setClipboardData"
+        >复制房间信息邀请朋友进入</view
+      >
+      <SButton width="70vw" :onClick="enterRoom">进入房间</SButton>
       <text>30分钟无人进入则房间无效</text>
-      <view @click="setClipboardData">复制房间信息邀请朋友进入</view>
     </view>
   </view>
 </template>
@@ -148,7 +150,7 @@ const setClipboardData = () => {
   margin-bottom: 20px;
 }
 .room-info > view:first-child > text:last-child {
-  color: #fed847;
+  /* color: #fed847; */
 }
 .room-info > text {
   color: #888686;
@@ -160,4 +162,13 @@ const setClipboardData = () => {
   margin: 20px 0;
   font-size: 14px;
 }
+.copy-room-number {
+  width: calc(70vw - 20px);
+  color: #fed847;
+  border: 1px solid #fed847;
+  padding: 10px;
+  text-align: center;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
 </style>

src/pages/battle-room.vue

@@ -295,6 +295,15 @@ const exitRoom = async () => {
   uni.navigateBack();
 };
 
+const setClipboardData = () => {
+  uni.setClipboardData({
+    data: roomNumber.value,
+    success() {
+      uni.showToast({ title: "复制成功" });
+    },
+  });
+};
+
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
@@ -315,9 +324,13 @@ onUnmounted(() => {
   >
     <view class="standby-phase" v-if="step === 1">
       <Guide>
+        <view class="battle-guide">
           <view :style="{ display: 'flex', flexDirection: 'column' }">
-          <text :style="{ color: '#fed847' }">人都到齐了吗？</text>
-          <text>天赋异禀的弓箭手们，比赛即将开始！</text>
+            <text :style="{ color: '#fed847' }">弓箭手们，人都到齐了吗?</text>
+            <text v-if="room.battleType === 1">1v1比赛即将开始! </text>
+            <text v-if="room.battleType === 2">大乱斗即将开始! </text>
+          </view>
+          <view @click="setClipboardData">邀请好友</view>
         </view>
       </Guide>
       <view v-if="room.battleType === 1" class="team-mode">
@@ -412,7 +425,11 @@ onUnmounted(() => {
       />
     </view>
     <Timer :seq="timerSeq" />
-    <ScreenHint :show="showRoundTip" :onClose="() => (showRoundTip = false)">
+    <ScreenHint
+      :show="showRoundTip"
+      :onClose="() => (showRoundTip = false)"
+      :mode="isFinalShoot ? 'tall' : 'normal'"
+    >
       <RoundEndTip
         :isFinal="isFinalShoot"
         :round="currentRound - 1"
@@ -485,7 +502,7 @@ onUnmounted(() => {
 }
 .team-mode {
   width: calc(100vw - 30px);
-  height: 107vw;
+  height: 125vw;
   margin: 15px;
 }
 .team-mode > image:first-child {
@@ -547,4 +564,17 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
 }
+.battle-guide {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.battle-guide > view:last-child {
+  color: #fed847;
+  border: 1px solid #fed847;
+  margin-right: 10px;
+  padding: 5px 12px;
+  border-radius: 20px;
+  position: relative;
+}
 </style>