Skip to content

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

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

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