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>