UI流程完善

src/pages/friend-battle.vue

@@ -2,6 +2,7 @@
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
+import SButton from "@/components/SButton.vue";
 </script>
 
 <template>
@@ -30,7 +31,9 @@ import Guide from "@/components/Guide.vue";
           <image src="../static/question-mark.png" mode="widthFix" />
         </view>
       </view>
-      <button>创建约战房</button>
+      <view>
+        <SButton width="70%" :rounded="30">创建约战房</SButton>
+      </view>
     </view>
   </view>
 </template>
@@ -74,6 +77,7 @@ import Guide from "@/components/Guide.vue";
   font-size: 14px;
   padding: 3px 0;
   font-weight: bold;
+  color: #000;
 }
 .create-room {
   position: relative;
@@ -111,13 +115,7 @@ import Guide from "@/components/Guide.vue";
 .create-room > view > view:nth-child(3) > image {
   width: 40%;
 }
-.create-room > button {
-  background-color: #fed847;
-  border-radius: 30px;
-  margin: 0 auto;
-  width: 70%;
-  font-size: 15px;
+.create-room > view:last-child {
   transform: translateY(-110%);
-  padding: 15px 0;
 }
 </style>