diff --git a/src/pages/friend-battle.vue b/src/pages/friend-battle.vue
index 698524a..62e2fd7 100644
--- a/src/pages/friend-battle.vue
+++ b/src/pages/friend-battle.vue
@@ -98,8 +98,10 @@ onLoad(async (options) => {
   <Container title="好友约战" :showBackToGame="true">
     <view :style="{ width: '100%', height: '100%' }">
       <GuideTwo>
-        <text :style="{color: 'rgba(255,217,71,0.8)'}">约上朋友开几局，欢乐多，不寂寞</text>
-        <text>一起练升级更快，早日加入全国排位赛！</text>
+        <view class="guide-tips">
+          <text class="guide-tips__main">约上朋友开几局，欢乐多，不寂寞</text>
+          <text class="guide-tips__sub">一起练升级更快，早日加入全国排位赛！</text>
+        </view>
       </GuideTwo>
       <view class="my-data">
         <view>
@@ -171,6 +173,24 @@ onLoad(async (options) => {
 </template>
 
 <style scoped>
+.guide-tips {
+  display: flex;
+  flex-direction: column;
+  padding-left: 112rpx;
+  width: 100%;
+}
+.guide-tips__main {
+  font-weight: 400;
+  font-size: 26rpx;
+  color: rgba(255, 217, 71, 0.8);
+}
+.guide-tips__sub {
+  font-weight: 400;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 6rpx;
+}
+
 .founded-room {
   display: flex;
   flex-direction: column;