diff --git a/src/components/BattleHeader.vue b/src/components/BattleHeader.vue
index 4dbb57d..6ac4c10 100644
--- a/src/components/BattleHeader.vue
+++ b/src/components/BattleHeader.vue
@@ -22,16 +22,61 @@ defineProps({
type: Number,
default: 2,
},
+ showHeader: {
+ type: Boolean,
+ default: true,
+ },
});
-
+
-
+
+
+
+
+ {{ player.name }}
+
+
+
+
+
+
+ {{ player.name }}
+
+
+
+
+
{{ player.name }}
-
-
-
- {{ blueTeam[0].name }}
-
-
-
-
- {{ redTeam[0].name }}
-
-
-
@@ -81,7 +102,6 @@ defineProps({
width: 100%;
position: relative;
margin-bottom: 10px;
- padding-top: 5px;
}
.container > image:first-child {
position: absolute;
@@ -92,24 +112,16 @@ defineProps({
.players {
display: flex;
}
-.players::-webkit-scrollbar {
- width: 0;
- height: 0;
- color: transparent;
-}
.players > view {
width: 50%;
- height: 85px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+ height: 80px;
color: #fff9;
font-size: 12px;
- margin-top: 15px;
overflow: hidden;
position: relative;
- padding-top: 5px;
+ padding-top: 7px;
+ display: flex;
+ justify-content: center;
}
.players > view:first-child {
background-color: #364469;
@@ -119,17 +131,27 @@ defineProps({
}
.players > view > image:last-child {
position: absolute;
- width: 60px;
- right: 0;
- bottom: 0;
+ width: 40px;
+ top: 0;
+ left: 0;
+}
+.players > view > view {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
.players-melee {
display: flex;
- height: 85px;
+ height: 80px;
width: 100%;
- margin-top: 15px;
overflow-x: auto;
}
+.players-melee::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ color: transparent;
+}
.players-melee > view {
display: flex;
flex-direction: column;
@@ -137,7 +159,7 @@ defineProps({
justify-content: center;
color: #fff9;
font-size: 12px;
- padding-top: 5px;
+ padding-top: 7px;
flex: 0 0 auto;
}
.player-name {
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index a53966e..96cc25a 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -69,13 +69,19 @@ const setClipboardData = () => {
>
乱斗模式(3-10人)
-
+ (battleMode = 3)"
+ >
对抗模式(2V2)
- 敬请期待
+
-
+ (battleMode = 4)"
+ >
对抗模式(3V3)
- 敬请期待
+
下一步
@@ -132,13 +138,13 @@ const setClipboardData = () => {
border: 4rpx solid #fff3;
border-color: #fed847;
}
-.battle-close {
+/* .battle-close {
background-color: #8889;
color: #b3b3b3;
}
.battle-close > text:last-child {
font-size: 12px;
-}
+} */
.room-info {
display: flex;
flex-direction: column;
@@ -151,9 +157,6 @@ const setClipboardData = () => {
color: #fff;
margin-bottom: 20px;
}
-.room-info > view:first-child > text:last-child {
- /* color: #fed847; */
-}
.room-info > text {
color: #888686;
font-size: 14px;
diff --git a/src/pages/battle-result.vue b/src/pages/battle-result.vue
index fbb7e43..f1f076e 100644
--- a/src/pages/battle-result.vue
+++ b/src/pages/battle-result.vue
@@ -21,7 +21,8 @@ function exit() {
}
onLoad(async (options) => {
- const myId = user.value.id;
+ // const myId = user.value.id;
+ const myId = 39;
if (options.battleId) {
const result = await getGameAPI(
options.battleId || "BATTLE-1754302650041171466-546"
@@ -86,16 +87,10 @@ const checkBowData = () => {
-
@@ -214,7 +250,7 @@ const checkBowData = () => {
:style="{ marginTop: data.mode === 2 ? '20px' : '20vw' }"
>
-
+
{
.header-team > image {
width: 20vw;
}
-.header-team > view {
+.header-solo {
font-size: 14px;
display: flex;
align-items: flex-end;
}
-.header-team > view > text {
+.header-solo > text {
padding: 5px 20px;
padding-left: 24px;
transform: translateX(15px);
@@ -317,18 +353,6 @@ const checkBowData = () => {
.battle-winner > image:nth-child(3) {
top: 75%;
}
-/* .battle-winner > image:nth-child(2) {
- top: 6vw;
-}
-.battle-winner > text:nth-child(3) {
- font-size: 30px;
- margin-bottom: 5px;
- font-weight: bold;
- color: #fed847;
-}
-.battle-winner > text:nth-child(4) {
- margin-bottom: 10px;
-} */
.battle-e {
width: 100%;
height: 60px;
@@ -340,23 +364,6 @@ const checkBowData = () => {
position: absolute;
width: 100vw;
}
-.battle-e > view:nth-child(2) {
- position: relative;
- overflow: hidden;
- width: 40px;
- height: 40px;
- box-sizing: border-box;
- border-radius: 50%;
-}
-.battle-e > view:nth-child(2) > text {
- font-size: 7px;
- text-align: center;
- width: 100%;
- position: absolute;
- bottom: 0;
- color: #fff;
- padding-bottom: 1px;
-}
.battle-e > text {
position: relative;
font-size: 30px;
@@ -463,4 +470,65 @@ const checkBowData = () => {
.player-title > text:last-child {
font-size: 13px;
}
+.team-avatar {
+ position: relative;
+ overflow: hidden;
+ width: 40px;
+ height: 40px;
+ box-sizing: border-box;
+ border-radius: 50%;
+}
+.team-avatar > text {
+ font-size: 7px;
+ text-align: center;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ color: #fff;
+ padding-bottom: 1px;
+}
+.header-mvp {
+ position: relative;
+ width: 100%;
+}
+.header-mvp > image:first-child {
+ position: absolute;
+ width: 100%;
+}
+.header-mvp > view {
+ display: flex;
+ justify-content: center;
+ transform: translateY(55px);
+}
+.header-mvp > view > view:first-child {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 5vw;
+}
+.header-mvp > view > view:first-child > image {
+ width: 24vw;
+}
+.header-mvp > view > view:first-child > text {
+ color: #fff;
+ font-size: 14px;
+ transform: translateY(-4px) skewY(-6deg);
+}
+.header-mvp > view > view:last-child {
+ display: flex;
+ align-items: center;
+ color: #fff;
+ font-size: 8px;
+ text-align: center;
+ transform: translateY(-16px) skewY(-6deg);
+}
+.header-mvp > view > view:last-child > view {
+ margin-right: 4vw;
+ display: flex;
+ flex-direction: column;
+}
+.header-mvp > view > view:last-child > view > text {
+ margin-top: 4px;
+}
diff --git a/src/pages/battle-room.vue b/src/pages/battle-room.vue
index 90c182d..1f00bd7 100644
--- a/src/pages/battle-room.vue
+++ b/src/pages/battle-room.vue
@@ -6,6 +6,7 @@ import PlayerSeats from "@/components/PlayerSeats.vue";
import Guide from "@/components/Guide.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
+import Avatar from "@/components/Avatar.vue";
import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
@@ -236,11 +237,9 @@ onHide(() => {});
/>
-
+
{{ owner.name }}
+ 创建者
@@ -348,7 +347,7 @@ onHide(() => {});
justify-content: center;
align-items: center;
transform: translateY(-60px);
- color: #fff9;
+ color: #fff;
font-size: 14px;
}
.player > image {
@@ -359,12 +358,19 @@ onHide(() => {});
margin-bottom: 5px;
}
.player > text {
- width: 100px;
+ max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
+.player > text:last-child {
+ color: #000;
+ background-color: #fed847;
+ font-size: 8px;
+ border-radius: 10px;
+ padding: 2px 5px;
+}
.team-mode > view > image:nth-child(2) {
width: 120px;
}
diff --git a/src/pages/friend-battle.vue b/src/pages/friend-battle.vue
index 2ac0916..72dde77 100644
--- a/src/pages/friend-battle.vue
+++ b/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 () => {
一起练升级更快,早日加入全国排位赛!
+
+
+
+ {{ user.nickName }}
+
+
+
+
+ 1111
+ 局
+
+ 约战数量
+
+
+
+ 1111
+ 箭
+
+ 射箭量
+
+
+
+
+
+
+
+ 挑战难度
+
+
+
@@ -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;
+}
diff --git a/src/pages/my-growth.vue b/src/pages/my-growth.vue
index 5e3b87d..44cf06c 100644
--- a/src/pages/my-growth.vue
+++ b/src/pages/my-growth.vue
@@ -3,6 +3,7 @@ import { onMounted } from "vue";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import BowData from "@/components/BowData.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
import ScrollList from "@/components/ScrollList.vue";
import { getBattleListAPI, getPractiseResultListAPI } from "@/apis";
import { meleeAvatarColors } from "@/constants";
@@ -13,8 +14,6 @@ const selectedIndex = ref(0);
const matchList = ref([]);
const battleList = ref([]);
const practiseList = ref([]);
-// const showBowData = ref(false);
-// const arrows = ref([]);
const toMatchDetail = (id) => {
uni.navigateTo({
@@ -82,50 +81,13 @@ const onPractiseLoading = async (page) => {
{{ item.createdAt }}
-
-
-
-
- {{ item.bluePlayers[0].name }}
-
-
-
-
-
-
- {{ item.redPlayers[0].name }}
-
-
-
-
-
-
-
- {{ p.name }}
-
-
+
@@ -204,11 +166,6 @@ const onPractiseLoading = async (page) => {
-
@@ -263,52 +220,6 @@ const onPractiseLoading = async (page) => {
width: 15px;
transform: rotate(180deg);
}
-.player {
- display: flex;
- flex-direction: column;
- align-items: center;
- color: #fff9;
- padding-top: 10px;
- padding-bottom: 5px;
- position: relative;
- flex: 0 0 auto;
-}
-.player > text {
- margin-top: 5px;
- font-size: 12px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- width: 90%;
- text-align: center;
-}
-.player > image:last-child {
- position: absolute;
- width: 60px;
- right: 0;
- bottom: 0;
-}
-.contest-team,
-.contest-melee {
- width: 100%;
- display: flex;
- margin-bottom: 10px;
- overflow-x: auto;
-}
-.contest-melee::-webkit-scrollbar {
- width: 0;
- height: 0;
- color: transparent;
-}
-.contest-team > view {
- width: 50%;
-}
-.contest-team > view:first-child {
- background-color: #364469;
-}
-.contest-team > view:last-child {
- background-color: #692735;
-}
.practice-record {
color: #fff9;
border-bottom: 1px solid #fff9;
diff --git a/src/pages/practise.vue b/src/pages/practise.vue
index d01d146..a725889 100644
--- a/src/pages/practise.vue
+++ b/src/pages/practise.vue
@@ -1,6 +1,12 @@