完成获胜页面UI和一些优化

src/pages/battle-result.vue

@@ -0,0 +1,121 @@
+<script setup></script>
+
+<template>
+  <view class="container">
+    <image class="tag" src="../static/winner-yellow.png" mode="widthFix" />
+    <view>
+      <image src="../static/battle-result.png" mode="widthFix" />
+    </view>
+    <view>
+      <image src="../static/shining-bg.png" mode="widthFix" />
+      <image src="../static/throphy.png" mode="widthFix" />
+      <text>蓝队获胜</text>
+      <text>强势登顶，荣耀加冕</text>
+    </view>
+    <view>
+      <image src="../static/row-yellow-bg.png" mode="widthFix" />
+      <text>经验 +20</text>
+    </view>
+    <text>你是朋友中的佼佼者哦</text>
+    <view>
+      <view>查看靶纸</view>
+      <view>退出</view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.tag {
+  position: absolute;
+  width: 32vw;
+  top: 0;
+  right: 0;
+}
+.container > view {
+  position: relative;
+}
+.container > view:nth-child(2) {
+  width: 80%;
+  margin: 10px;
+}
+.container > view:nth-child(2) > image {
+  width: 20vw;
+}
+.container > view:nth-child(3) {
+  width: 100%;
+  height: 38%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  color: #fff9;
+  font-size: 14px;
+}
+.container > view:nth-child(3) > image {
+  position: absolute;
+  width: 100vw;
+  top: 0;
+  left: 0;
+}
+.container > view:nth-child(3) > image:nth-child(2) {
+  top: 6vw;
+}
+.container > view:nth-child(3) > text:nth-child(3) {
+  font-size: 30px;
+  margin: 10px;
+  font-weight: bold;
+  color: #fed847;
+}
+.container > view:nth-child(4) {
+  width: 100%;
+  height: 60px;
+  margin: 20px 0;
+}
+.container > view:nth-child(4) > image {
+  position: absolute;
+  width: 100vw;
+  top: 45%;
+}
+.container > view:nth-child(4) > text {
+  position: absolute;
+  width: 100%;
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+  top: 54%;
+}
+.container > text:nth-child(5) {
+  margin: 50px 0;
+  font-size: 14px;
+  color: #fed847;
+  width: 100%;
+  text-align: center;
+}
+.container > view:nth-child(6) {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.container > view:nth-child(6) > view {
+  width: 36%;
+  margin: 0 10px;
+  background-color: #fed847;
+  border-radius: 20px;
+  padding: 10px 0;
+  text-align: center;
+}
+.container > view:nth-child(6) > view:last-child {
+  color: #fff;
+  background-color: #757575;
+}
+</style>