完成好友约战页面

src/components/Guide.vue

@@ -0,0 +1,42 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <image src="../static/shooter.png" mode="widthFix" />
+    <view>
+      <image src="../static/long-bubble.png" mode="widthFix" />
+      <text>{{ title }}</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+}
+.container > image {
+  width: 40vw;
+}
+.container > view {
+  position: relative;
+}
+.container > view > image {
+  position: absolute;
+  top: -10%;
+  left: -7%;
+  width: 75vw;
+}
+.container > view > text {
+  color: #fff;
+  font-size: 14px;
+}
+</style>

src/pages/friend-battle.vue

@@ -1,28 +1,117 @@
 <script setup>
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import Guide from "@/components/Guide.vue";
 </script>
 
 <template>
   <view>
     <AppBackground />
     <Header title="好友约战" />
+    <Guide
+      title="约上朋友开几局，欢乐多，不寂寞，一起练升级更快，早日加入全国排位赛！"
+    />
+    <view class="founded-room">
+      <image src="../static/founded-room.png" mode="widthFix" />
+      <view>
+        <input placeholder="输入房间号" />
+        <button>进入房间</button>
+      </view>
+    </view>
+    <view class="create-room">
+      <image src="../static/battle-bg.png" mode="widthFix" />
+      <view>
+        <image src="../static/avatar.png" mode="widthFix" />
+        <image src="../static/versus.png" mode="widthFix" />
+        <view>
+          <image src="../static/question-mark.png" mode="widthFix" />
+        </view>
+      </view>
+      <button>创建约战房</button>
+    </view>
   </view>
 </template>
 
 <style scoped>
-.back-btn {
-  position: fixed;
-  top: 2rem;
-  left: 2rem;
-  padding: 0.5rem 1rem;
-  background-color: #007aff;
-  color: #fff;
-  border-radius: 5px;
+.founded-room {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 20px 0;
+  background-color: #54431d33;
+  border: 1px solid #54431d;
+  margin: 25px 15px;
+  border-radius: 10px;
+  padding: 15px;
+}
+.founded-room > image {
+  width: 16vw;
+}
+.founded-room > view {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 25px 0;
+  background-color: #fff;
+  border-radius: 30px;
+  width: 100%;
+  overflow: hidden;
+}
+.founded-room > view > input {
+  width: 70%;
+  text-align: center;
   font-size: 14px;
 }
-
-.back-hover {
-  opacity: 0.8;
+.founded-room > view > button {
+  background-color: #fed847;
+  width: 30%;
+  border-radius: 30px;
+  font-size: 14px;
+  padding: 3px 0;
+  font-weight: bold;
+}
+.create-room {
+  position: relative;
+  margin: 25px 15px;
+}
+.create-room > image:first-of-type {
+  position: absolute;
+  width: 100%;
+}
+.create-room > view {
+  margin: 0 30px;
+  padding-top: 30px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.create-room > view > image:first-child {
+  width: 18vw;
+  transform: translateX(40%);
+}
+.create-room > view > image:nth-child(2) {
+  width: 36vw;
+  transform: translateX(55%) translateY(-40px);
+}
+.create-room > view > view:nth-child(3) {
+  width: 18vw;
+  height: 18vw;
+  border-radius: 50%;
+  background-color: #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate(280%, -75px);
+}
+.create-room > view > view:nth-child(3) > image {
+  width: 40%;
+}
+.create-room > button {
+  background-color: #fed847;
+  border-radius: 30px;
+  width: 70%;
+  font-size: 15px;
+  transform: translateY(-110%);
 }
 </style>