laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加2v2页面

Browse Source
This commit is contained in:
kron
2025-08-13 16:44:25 +08:00
parent 5709035d4b
commit f388270fff
18 changed files with 779 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/pages/battle-room.vue
View File

@@ -17,7 +17,12 @@ const room = ref({});
const roomNumber = ref("");
const owner = ref({});
const opponent = ref({});
const players = ref([]);
const players = ref([
{ name: "player1", team: 1 },
{ name: "player2", team: 0 },
{ name: "player3", team: 2 },
{ name: "player4", team: 1 },
]);
const showModal = ref(false);
const battleType = ref(0);
@@ -225,6 +230,8 @@ onHide(() => {});
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">弓箭手们，人都到齐了吗?</text>
<text v-if="battleType === 1">1v1比赛即将开始! </text>
<text v-if="battleType === 3">2v2比赛即将开始! </text>
<text v-if="battleType === 4">3v3比赛即将开始! </text>
<text v-if="battleType === 2">大乱斗即将开始! </text>
</view>
<view @click="setClipboardData">复制房间号</view>
@@ -263,6 +270,41 @@ onHide(() => {});
:total="room.count || 10"
:players="players"
/>
<view class="all-players">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png"
mode="widthFix"
/>
<image src="../static/title-2v2.png" mode="widthFix" />
<view>
<view v-for="(item, index) in players" :key="index">
<Avatar :src="item.avatar" :size="36" />
<text v-if="index === 0">创建者</text>
</view>
</view>
</view>
<view class="choose-side">
<view>
<view v-for="i in 3" :key="i" class="choose-side-left-item">
<button hover-class="none">
<image src="../static/close-grey.png" mode="widthFix" />
</button>
<text class="truncate">23232323232</text>
<Avatar :size="36" />
</view>
</view>
<view>
<view v-for="i in 3" :key="i" class="choose-side-right-item">
<button hover-class="none">
<image src="../static/add-grey.png" mode="widthFix" />
</button>
<text class="truncate">22222</text>
<button hover-class="none">
<image src="../static/close-grey.png" mode="widthFix" />
</button>
</view>
</view>
</view>
<view>
<SButton
v-if="user.id === owner.id && battleType === 1"
@@ -408,4 +450,144 @@ onHide(() => {});
border-radius: 20px;
position: relative;
}
.all-players {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
height: 83vw;
}
.all-players > image:first-child {
position: absolute;
width: 100%;
}
.all-players > image:nth-child(2) {
width: 25vw;
position: relative;
}
.all-players > view {
position: relative;
width: 42vw;
height: 42vw;
margin-top: 7vw;
}
.all-players > view > view {
position: absolute;
left: 50%;
top: 50%;
}
/* 4个头像 - 正方形排列 */
.all-players > view > view:nth-child(1):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw)
rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw)
rotate(120deg);
}
.all-players > view > view:nth-child(3):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw)
rotate(210deg);
}
.all-players > view > view:nth-child(4):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw)
rotate(300deg);
}
/* 6个头像 - 六边形排列 */
.all-players > view > view:nth-child(1):nth-last-child(6) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw)
rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(5) {
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw)
rotate(90deg);
}
.all-players > view > view:nth-child(3):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw)
rotate(150deg);
}
.all-players > view > view:nth-child(4):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw)
rotate(210deg);
}
.all-players > view > view:nth-child(5):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw)
rotate(270deg);
}
.all-players > view > view:nth-child(6):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw)
rotate(330deg);
}
.all-players > view > view > text {
position: absolute;
background-color: #fed847;
font-size: 8px;
border-radius: 10px;
padding: 1px 0px;
bottom: -20%;
left: calc(50% - 15px);
width: 30px;
text-align: center;
}
.choose-side {
display: flex;
}
.choose-side > view {
width: 50%;
}
.choose-side > view:first-child > view {
background: linear-gradient(270deg, #6a1212 0%, rgba(74, 0, 0, 0) 100%);
}
.choose-side > view:last-child > view {
background: linear-gradient(270deg, rgba(13, 0, 74, 0) 0%, #172a86 100%);
}
.choose-side-left-item,
.choose-side-right-item {
display: flex;
align-items: center;
color: #fff;
border-radius: 12px;
padding: 10px;
align-items: center;
margin: 10px 5px;
position: relative;
}
.choose-side-left-item {
justify-content: flex-end;
}
.choose-side-left-item > text,
.choose-side-right-item > text {
margin: 10px;
max-width: 100px;
}
.choose-side-left-item > button:first-child,
.choose-side-right-item > button:last-child {
position: absolute;
top: 0;
}
.choose-side-left-item > button:first-child > image,
.choose-side-right-item > button:last-child > image {
width: 28px;
}
.choose-side-left-item > button:first-child {
left: 0;
}
.choose-side-right-item > button:last-child {
right: 0;
}
.choose-side-left-item > button:last-child,
.choose-side-right-item > button:first-child {
background-color: #fff;
border-radius: 50%;
width: 38px;
height: 38px;
display: flex;
justify-content: center;
align-items: center;
}
.choose-side-left-item > button:last-child > image,
.choose-side-right-item > button:first-child > image {
width: 18px;
}
</style>