Skip to content

F
fc-minigame
Commit 3b34f232 authored by 董政锦's avatar 董政锦
Browse files
Options

feat: game4 第3个页面结果页完成；

parent f8a0758e
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 45 deletions
frontend-large/src/pages/game5/Game5.vue
View file @ 3b34f232
......@@ -184,6 +184,7 @@ onUnmounted(() => {
<template>
<Loading v-if="screen === '!loading'" :players="loadingPlayers" :player-count="playerCount"
@start="startGameWithMusic" />
<Rank1 v-else-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" />
<Rank2 v-else :rank-list="rankPlayers" @next="nextRoundWithMusic" />
<!-- <Rank1 v-else-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" /> -->
<Rank1 v-else ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" />
<!-- <Rank2 v-else :rank-list="rankPlayers" @next="nextRoundWithMusic" /> -->
</template>
frontend-large/src/pages/game5/views/Rank2View.vue
View file @ 3b34f232
......@@ -20,7 +20,8 @@ const imageUrls = {
title2: cssAssetUrl('game1/title4.png'),
podium: cssAssetUrl('game5/podium.webp'),
fireworks: cssAssetUrl('game1/fireworks.png'),
avatar: cssAssetUrl('avatar.png'),
avatar: cssAssetUrl('game5/avatar.webp'),
guan: cssAssetUrl('game5/guan.webp'),
guan1: cssAssetUrl('game1/guan1.png'),
pai1: cssAssetUrl('game1/pai1.png'),
guan2: cssAssetUrl('game1/guan3.png'),
......@@ -29,7 +30,7 @@ const imageUrls = {
pai3: cssAssetUrl('game1/pai3.png'),
rankIcon: cssAssetUrl('game1/no-icon.png'),
avatarAnimation: cssAssetUrl('avatar_animation.png'),
next: cssAssetUrl('game1/next-1.png'),
next: cssAssetUrl('game5/next-1.webp'),
};
const emptyPlayer = (index: number): Player => ({
......@@ -58,7 +59,7 @@ watch(
const renderAvatar = (item: any | null) => {
if (item && item.avatar) {
return `background: url('${item.avatar}') center / cover no-repeat;`
}
}
return `background: v-bind('imageUrls.avatar') center / cover no-repeat;`
}
</script>
......@@ -84,7 +85,7 @@ const renderAvatar = (item: any | null) => {
<div class="avatar" :style="`${renderAvatar(list[1])}`">
</div>
<div class="nickname">{{ list[1]?.nickname }}</div>
<div class="guan"></div>
<!-- <div class="guan"></div> -->
<!-- <div class="pai"></div> -->
</div>
<div class="rank-no3">
......@@ -92,7 +93,7 @@ const renderAvatar = (item: any | null) => {
<div class="avatar" :style="`${renderAvatar(list[2])}`">
</div>
<div class="nickname">{{ list[2]?.nickname }}</div>
<div class="guan"></div>
<!-- <div class="guan"></div> -->
<!-- <div class="pai"></div> -->
</div>
</div>
......@@ -177,8 +178,8 @@ const renderAvatar = (item: any | null) => {
position: relative;
.gu-burst {
left: 899px;
top: 3px;
left: 861px;
top: -72px;
}
.avatar {
......@@ -192,13 +193,13 @@ const renderAvatar = (item: any | null) => {
}
.nickname {
width: 220px;
height: 52px;
background: linear-gradient(0deg, #FFBF5A 0%, #FFE47A 100%);
border-radius: 26px;
border: 1px solid #FFF9DC;
font-size: 30px;
color: #4B1A14;
width: 220px;
height: 52px;
background: linear-gradient(0deg, #FFBF5A 0%, #FFE47A 100%);
border-radius: 26px;
border: 1px solid #FFF9DC;
font-size: 30px;
color: #4B1A14;
text-align: center;
line-height: 46px;
position: absolute;
......@@ -209,12 +210,18 @@ color: #4B1A14;
}
.guan {
background: v-bind('imageUrls.guan1');
/* background: v-bind('imageUrls.guan1');
width: 64px;
height: 64px;
position: absolute;
left: 877px;
top: 61px;
top: 61px; */
background: v-bind('imageUrls.guan');
width: 969px;
height: 238px;
position: absolute;
left: 482px;
top: -13px;
}
.pai {
......@@ -231,30 +238,31 @@ color: #4B1A14;
position: relative;
.gu-burst {
left: 504px;
top: 23px;
left: 456px;
top: -26px;
}
.avatar {
background: v-bind('imageUrls.avatar') center / cover no-repeat;
width: 120px;
height: 120px;
width: 144px;
height: 144px;
border-radius: 60px;
position: absolute;
left: 512px;
top: 109px;
left: 491.1px;
top: 74px;
}
.nickname {
text-align: center;
/* line-height: 46px; */
width: 220px;
height: 52px;
background: linear-gradient(0deg, #AEA6A7 0%, #EAE4DF 100%);
border-radius: 26px;
border: 1px solid #FFFFFF;
font-size: 30px;
color: #383636;
height: 52px;
background: linear-gradient(0deg, #AEA6A7 0%, #EAE4DF 100%);
border-radius: 26px;
border: 1px solid #FFFFFF;
font-size: 30px;
color: #383636;
position: absolute;
left: 461px;
top: 221px;
......@@ -286,27 +294,27 @@ color: #383636;
.gu-burst {
left: 1261px;
top: 15px;
top: -37px;
}
.avatar {
background: v-bind('imageUrls.avatar') center / cover no-repeat;
width: 120px;
height: 120px;
width: 144px;
height: 144px;
border-radius: 60px;
position: absolute;
left: 1286px;
top: 108px;
left: 1300px;
top: 74px;
}
.nickname {
width: 220px;
height: 52px;
background: linear-gradient(0deg, #F3AE76 0%, #F9CDA3 100%);
border-radius: 26px;
border: 1px solid #FEFEFD;
font-size: 30px;
color: #6F3A0E;
width: 220px;
height: 52px;
background: linear-gradient(0deg, #F3AE76 0%, #F9CDA3 100%);
border-radius: 26px;
border: 1px solid #FEFEFD;
font-size: 30px;
color: #6F3A0E;
text-align: center;
line-height: 46px;
position: absolute;
......@@ -388,7 +396,7 @@ color: #6F3A0E;
width: 60px;
height: 60px;
border-radius: 30px;
background: v-bind('imageUrls.avatar');
background: v-bind('imageUrls.avatar') center / cover no-repeat;
}
.txt-nickname {
......@@ -403,9 +411,9 @@ color: #6F3A0E;
position: absolute;
bottom: 100px;
left: 820px;
width: 316px;
height: 105px;
cursor: pointer;
background: v-bind('imageUrls.next') center / cover no-repeat;
width: 318px;
height: 95px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment