Skip to content

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

style: 旧皇冠样式；

parent 01d3642f
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 50 deletions
frontend-large/src/pages/game5/Game5.vue
View file @ f8a0758e
...@@ -182,7 +182,7 @@ onUnmounted(() => { ...@@ -182,7 +182,7 @@ onUnmounted(() => {
</script> </script>
<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" /> <Rank2 v-else :rank-list="rankPlayers" @next="nextRoundWithMusic" />
......
frontend-large/src/pages/game5/views/Rank2View.vue
View file @ f8a0758e
...@@ -14,18 +14,18 @@ const emit = defineEmits<{ ...@@ -14,18 +14,18 @@ const emit = defineEmits<{
const FINAL_RANK_LIMIT = 10; const FINAL_RANK_LIMIT = 10;
const imageUrls = { const imageUrls = {
bg: cssAssetUrl('game1/bg.png'), bg: cssAssetUrl('game5/bg.svg'),
logo: cssAssetUrl('game1/logo.png'), logo: cssAssetUrl('game1/logo.png'),
title: cssAssetUrl('game1/title3.png'), title: cssAssetUrl('game1/title3.png'),
title2: cssAssetUrl('game1/title4.png'), title2: cssAssetUrl('game1/title4.png'),
podium: cssAssetUrl('game1/podium.png'), podium: cssAssetUrl('game5/podium.webp'),
fireworks: cssAssetUrl('game1/fireworks.png'), fireworks: cssAssetUrl('game1/fireworks.png'),
avatar: cssAssetUrl('avatar.png'), avatar: cssAssetUrl('avatar.png'),
guan1: cssAssetUrl('game1/guan1.png'), guan1: cssAssetUrl('game1/guan1.png'),
pai1: cssAssetUrl('game1/pai1.png'), pai1: cssAssetUrl('game1/pai1.png'),
guan2: cssAssetUrl('game1/guan2.png'), guan2: cssAssetUrl('game1/guan3.png'),
pai2: cssAssetUrl('game1/pai2.png'), pai2: cssAssetUrl('game1/pai2.png'),
guan3: cssAssetUrl('game1/guan3.png'), guan3: cssAssetUrl('game1/guan2.png'),
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'),
...@@ -68,7 +68,7 @@ const renderAvatar = (item: any | null) => { ...@@ -68,7 +68,7 @@ const renderAvatar = (item: any | null) => {
<div class="bg"> <div class="bg">
<div class="img-logo"></div> <div class="img-logo"></div>
<div class="img-title"></div> <div class="img-title"></div>
<div class="img-title2"></div> <!-- <div class="img-title2"></div> -->
<div class="podium"> <div class="podium">
<div class="rank-no1"> <div class="rank-no1">
...@@ -77,7 +77,7 @@ const renderAvatar = (item: any | null) => { ...@@ -77,7 +77,7 @@ const renderAvatar = (item: any | null) => {
</div> </div>
<div class="nickname">{{ list[0]?.nickname }}</div> <div class="nickname">{{ list[0]?.nickname }}</div>
<div class="guan"></div> <div class="guan"></div>
<div class="pai"></div> <!-- <div class="pai"></div> -->
</div> </div>
<div class="rank-no2"> <div class="rank-no2">
<div class="gu-burst"></div> <div class="gu-burst"></div>
...@@ -85,7 +85,7 @@ const renderAvatar = (item: any | null) => { ...@@ -85,7 +85,7 @@ const renderAvatar = (item: any | null) => {
</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">
<div class="gu-burst"></div> <div class="gu-burst"></div>
...@@ -93,7 +93,7 @@ const renderAvatar = (item: any | null) => { ...@@ -93,7 +93,7 @@ const renderAvatar = (item: any | null) => {
</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>
...@@ -153,11 +153,11 @@ const renderAvatar = (item: any | null) => { ...@@ -153,11 +153,11 @@ const renderAvatar = (item: any | null) => {
.podium { .podium {
background: v-bind('imageUrls.podium') no-repeat center; background: v-bind('imageUrls.podium') no-repeat center;
width: 1347px; width: 1920px;
height: 269px; height: 800px;
position: absolute; position: absolute;
top: 427px; bottom: 0px;
left: 287px; /* left: 287px; */
.gu-burst { .gu-burst {
width: 200px; width: 200px;
...@@ -177,8 +177,8 @@ const renderAvatar = (item: any | null) => { ...@@ -177,8 +177,8 @@ const renderAvatar = (item: any | null) => {
position: relative; position: relative;
.gu-burst { .gu-burst {
left: 580px; left: 899px;
top: -200px; top: 3px;
} }
.avatar { .avatar {
...@@ -187,20 +187,23 @@ const renderAvatar = (item: any | null) => { ...@@ -187,20 +187,23 @@ const renderAvatar = (item: any | null) => {
height: 120px; height: 120px;
border-radius: 60px; border-radius: 60px;
position: absolute; position: absolute;
left: 610px; left: 906px;
top: -136px; top: 76px;
} }
.nickname { .nickname {
width: 167px; width: 220px;
height: 46px; height: 52px;
background: #FFCF44; background: linear-gradient(0deg, #FFBF5A 0%, #FFE47A 100%);
color: white; border-radius: 26px;
border: 1px solid #FFF9DC;
font-size: 30px;
color: #4B1A14;
text-align: center; text-align: center;
line-height: 46px; line-height: 46px;
position: absolute; position: absolute;
left: 590px; left: 856px;
top: -25px; top: 190px;
z-index: 1; z-index: 1;
border-radius: 23px; border-radius: 23px;
} }
...@@ -210,8 +213,8 @@ const renderAvatar = (item: any | null) => { ...@@ -210,8 +213,8 @@ const renderAvatar = (item: any | null) => {
width: 64px; width: 64px;
height: 64px; height: 64px;
position: absolute; position: absolute;
left: 580px; left: 877px;
top: -153px top: 61px;
} }
.pai { .pai {
...@@ -228,8 +231,8 @@ const renderAvatar = (item: any | null) => { ...@@ -228,8 +231,8 @@ const renderAvatar = (item: any | null) => {
position: relative; position: relative;
.gu-burst { .gu-burst {
left: 140px; left: 504px;
top: -170px; top: 23px;
} }
.avatar { .avatar {
...@@ -238,20 +241,23 @@ const renderAvatar = (item: any | null) => { ...@@ -238,20 +241,23 @@ const renderAvatar = (item: any | null) => {
height: 120px; height: 120px;
border-radius: 60px; border-radius: 60px;
position: absolute; position: absolute;
left: 180px; left: 512px;
top: -110px; top: 109px;
} }
.nickname { .nickname {
width: 167px;
height: 46px;
background: #CA9600;
color: white;
text-align: center; text-align: center;
line-height: 46px; /* 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;
position: absolute; position: absolute;
left: 157px; left: 461px;
top: 2px; top: 221px;
z-index: 1; z-index: 1;
border-radius: 23px; border-radius: 23px;
} }
...@@ -261,8 +267,8 @@ const renderAvatar = (item: any | null) => { ...@@ -261,8 +267,8 @@ const renderAvatar = (item: any | null) => {
width: 96px; width: 96px;
height: 96px; height: 96px;
position: absolute; position: absolute;
left: 134px; left: 469px;
top: -144px; top: 70px;
} }
.pai { .pai {
...@@ -279,8 +285,8 @@ const renderAvatar = (item: any | null) => { ...@@ -279,8 +285,8 @@ const renderAvatar = (item: any | null) => {
position: relative; position: relative;
.gu-burst { .gu-burst {
left: 1020px; left: 1261px;
top: -170px; top: 15px;
} }
.avatar { .avatar {
...@@ -289,20 +295,23 @@ const renderAvatar = (item: any | null) => { ...@@ -289,20 +295,23 @@ const renderAvatar = (item: any | null) => {
height: 120px; height: 120px;
border-radius: 60px; border-radius: 60px;
position: absolute; position: absolute;
left: 1046px; left: 1286px;
top: -110px; top: 108px;
} }
.nickname { .nickname {
width: 167px; width: 220px;
height: 46px; height: 52px;
background: #E2E2E2; background: linear-gradient(0deg, #F3AE76 0%, #F9CDA3 100%);
color: #AFAFAF; border-radius: 26px;
border: 1px solid #FEFEFD;
font-size: 30px;
color: #6F3A0E;
text-align: center; text-align: center;
line-height: 46px; line-height: 46px;
position: absolute; position: absolute;
left: 1028px; left: 1240px;
top: 2px; top: 221px;
z-index: 1; z-index: 1;
border-radius: 23px; border-radius: 23px;
} }
...@@ -312,8 +321,8 @@ const renderAvatar = (item: any | null) => { ...@@ -312,8 +321,8 @@ const renderAvatar = (item: any | null) => {
width: 96px; width: 96px;
height: 96px; height: 96px;
position: absolute; position: absolute;
left: 1003px; left: 1241px;
top: -146px; top: 70px;
} }
.pai { .pai {
......
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