UI更新

src/pages/friend-battle.vue

@@ -5,6 +5,7 @@ import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
 import CreateRoom from "@/components/CreateRoom.vue";
+import Avatar from "@/components/Avatar.vue";
 import { getRoomAPI, joinRoomAPI, isGamingAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -70,6 +71,36 @@ const onCreateRoom = async () => {
           <text>一起练升级更快，早日加入全国排位赛！</text>
         </view>
       </Guide>
+      <view class="my-data">
+        <view>
+          <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
+          <text>{{ user.nickName }}</text>
+        </view>
+        <view>
+          <view>
+            <view>
+              <text>1111</text>
+              <text>局</text>
+            </view>
+            <text>约战数量</text>
+          </view>
+          <view>
+            <view>
+              <text>1111</text>
+              <text>箭</text>
+            </view>
+            <text>射箭量</text>
+          </view>
+          <view>
+            <view class="stars">
+              <image src="../static/star-full.png" mode="widthFix" />
+              <image src="../static/star-full.png" mode="widthFix" />
+              <image src="../static/star-half.png" mode="widthFix" />
+            </view>
+            <text>挑战难度</text>
+          </view>
+        </view>
+      </view>
       <view class="founded-room">
         <image src="../static/founded-room.png" mode="widthFix" />
         <view>
@@ -114,10 +145,9 @@ const onCreateRoom = async () => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 20px 0;
   background-color: #54431d33;
   border: 1px solid #54431d;
-  margin: 25px 15px;
+  margin: 15px;
   border-radius: 10px;
   padding: 15px;
 }
@@ -128,7 +158,7 @@ const onCreateRoom = async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 25px 0;
+  margin-top: 15px;
   background-color: #fff;
   border-radius: 30px;
   width: 100%;
@@ -153,7 +183,8 @@ const onCreateRoom = async () => {
 }
 .create-room {
   position: relative;
-  margin: 25px 15px;
+  margin: 15px;
+  height: 50vw;
 }
 .create-room > image:first-of-type {
   position: absolute;
@@ -200,4 +231,64 @@ const onCreateRoom = async () => {
   align-items: center;
   color: #fff9;
 }
+.my-data {
+  width: calc(100% - 30px);
+  margin: 15px;
+  margin-top: 0;
+  border-radius: 10px;
+  border: 1px solid #54431d;
+  overflow: hidden;
+  background-color: #54431d33;
+}
+.my-data > view {
+  width: 100%;
+  display: flex;
+  color: #fff9;
+}
+.my-data > view:first-child {
+  width: calc(100% - 30px);
+  align-items: flex-end;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #48494e;
+  margin: 15px;
+  margin-bottom: 0;
+}
+.my-data > view:first-child > text {
+  color: #fff;
+  font-size: 17px;
+  margin-left: 10px;
+}
+.my-data > view:last-child {
+  margin-bottom: 15px;
+}
+.my-data > view:last-child > view {
+  width: 33%;
+  margin-top: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 11px;
+}
+.my-data > view:last-child > view > view {
+  margin-bottom: 5px;
+}
+.my-data > view:last-child > view > view > text:first-child {
+  color: #fff;
+  font-size: 17px;
+  margin-right: 5px;
+  transform: translateY(3px);
+}
+.my-data > view:last-child > view:nth-child(2) {
+  border-left: 1px solid #48494e;
+  border-right: 1px solid #48494e;
+}
+.my-data > view:last-child > view > view {
+  display: flex;
+  align-items: flex-end;
+  height: 20px;
+}
+.stars > image {
+  width: 5vw;
+  margin: 0 1px;
+}
 </style>