Skip to content

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

style: game5 PC 样式调整；

parent 3443ee05
Show whitespace changes
Inline Side-by-side
Showing with 136 additions and 166 deletions
frontend-large/src/pages/game5/Game5.vue
View file @ 97f29ab3
......@@ -184,8 +184,8 @@ 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" -->
<Rank1 v-else ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic"
<Rank1 v-else-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic"
@next="nextRoundWithMusic" />
<!-- <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>
frontend-large/src/pages/game5/views/Rank1View.vue
View file @ 97f29ab3
......@@ -2,7 +2,7 @@
import { ref, watch, onMounted, onUnmounted } from "vue";
import DesignStage from "../../../components/DesignStage.vue";
import type Player from "@/commons/player.ts";
import { $is_run_local } from "@/commons/utils.ts";
import { $format_str, $is_run_local } from "@/commons/utils.ts";
import { cssAssetUrl, assetUrl } from "@/commons/assets.ts";
const props = defineProps<{
......@@ -24,16 +24,13 @@ const imageUrls = {
bg: cssAssetUrl("game5/bg.svg"),
logo: cssAssetUrl("game1/logo.png"),
title: cssAssetUrl("game5/title3.webp"),
titleRank: cssAssetUrl("game1/title-rank.png"),
rankNo4: cssAssetUrl("game1/no4.png"),
rankNo1: cssAssetUrl("game1/no1.png"),
rankNo2: cssAssetUrl("game1/no2.png"),
rankNo3: cssAssetUrl("game1/no3.png"),
rankIcon: cssAssetUrl("game1/no-icon.png"),
rankNo1Icon: cssAssetUrl("game1/no1-icon.png"),
rankNo2Icon: cssAssetUrl("game1/no2-icon.png"),
rankNo3Icon: cssAssetUrl("game1/no3-icon.png"),
avatar: assetUrl("avatar.png"),
rankNo4: cssAssetUrl("game6/no4.png"),
rankNo1: cssAssetUrl("game6/no1.png"),
rankNo2: cssAssetUrl("game6/no2.png"),
rankNo3: cssAssetUrl("game6/no3.png"),
avatar: cssAssetUrl("avatar-yellow.png"),
avatarAnimation: cssAssetUrl("avatar-yellow_animation.png"),
rankContainer: cssAssetUrl("game6/rank-container.png"),
};
// ========== 马匹相关 ==========
......@@ -247,20 +244,40 @@ defineExpose({
});
// ========== 头像渲染 ==========
const avatarStyle = (item: Player) => {
const avatar = item.avatar || imageUrls.avatar;
const renderAvatar = (item: any | null) => {
if (item && item.avatar) {
return `background: url("${String(item.avatar).replace(/"/g, '\\"')}") center / cover no-repeat;`
}
return `background: ${imageUrls.avatar} center / cover no-repeat;`
}
// ========== rank icon 样式 ==========
const rankIcon = (index: number) => {
const icons = [
imageUrls.rankNo1,
imageUrls.rankNo2,
imageUrls.rankNo3,
];
let w = 42;
let h = 47;
let l = -20;
let t = -20;
if (index <= 2) {
w = 65;
h = 48;
l = -30;
t = -20;
}
return {
backgroundImage: `url("${avatar}")`,
background: `${icons[index] ?? imageUrls.rankNo4} center / cover no-repeat`,
width: w + 'px',
height: h + 'px',
left: l + 'px',
top: t + 'px',
lineHeight: h + 'px',
color: index <= 2 ? 'white' : '#CC7F36',
};
};
// ========== rank item 样式 class ==========
const rankItemClass = (index: number) => {
if (index === 0) return "rank-top-1";
if (index === 1) return "rank-top-2";
if (index === 2) return "rank-top-3";
return "";
};
</script>
<template>
......@@ -271,28 +288,22 @@ const rankItemClass = (index: number) => {
<div class="img-logo"></div>
<div class="img-title"></div>
<!-- 排名列表 -->
<!-- <div class="rank-container">
<div class="rank-txt"></div>
<div class="rank-list">
<TransitionGroup name="rank">
<div
v-for="(item, index) in list"
:key="playerKey(item, index)"
:class="[
'rank-item',
rankItemClass(index),
rankEffects[playerKey(item, index)] || '',
]"
>
<div class="rank-icon">{{ index + 1 }}</div>
<div class="rank-avatar" :style="avatarStyle(item)"></div>
<div class="rank-nickname">{{ item.nickname }}</div>
<div class="rank-score">{{ item.score }}</div>
<div class="rank-container">
<div v-for="(item, index) in list" :key="playerKey(item, index)">
<div>
<div class="rank-icon" :style="rankIcon(index)">{{ index + 1 }}</div>
<div class="rank-item">
<div>
<div class="img-avatar-container">
<div class="img-avatar" :style="`${renderAvatar(item)}`"></div>
</div>
<div class="txt-nickname">{{ $format_str(item.nickname, 12) }}</div>
<div class="txt-score">{{ item.score }}</div>
</div>
</div>
</div>
</div>
</TransitionGroup>
</div>
</div> -->
<!-- 底部跑道背景（倒计时结束后滚动） -->
<div class="runway-track">
......@@ -364,136 +375,95 @@ const rankItemClass = (index: number) => {
z-index: 20;
}
/* ========== 排名容器 ========== */
/* ========== 排名容器 (game6 风格水平布局) ========== */
.rank-container {
width: 503px;
height: 810px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
background: v-bind("imageUrls.rankContainer") center / cover no-repeat;
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
align-items: center;
column-gap: 42px;
box-sizing: border-box;
padding: 30px;
width: 1832px;
height: 244px;
position: absolute;
left: 50%;
top: 210px;
transform: translateX(-50%);
left: 44px;
top: 280px;
z-index: 10;
overflow: hidden;
}
.rank-txt {
background: v-bind("imageUrls.titleRank");
width: 304px;
height: 40px;
margin: 10px auto auto auto;
}
.rank-list {
> div {
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
> div {
box-sizing: border-box;
width: 100%;
height: 100%;
background: #A10A06;
border-radius: 5px;
position: relative;
}
.rank-item {
background: v-bind("imageUrls.rankNo4");
width: 468px;
height: 68px;
margin: 6px auto 0 auto;
display: grid;
grid-template-columns: 95px 68px 1fr 100px;
align-items: center;
color: #e00000;
.rank-icon {
position: absolute;
color: #CC7F36;
font-weight: bold;
}
}
}
}
.rank-item.rank-top-1 {
background: v-bind("imageUrls.rankNo1");
}
.img-avatar-container {
position: relative;
margin: 0 auto;
width: 90px;
height: 90px;
border-radius: 36px;
top: 18px;
}
.rank-item.rank-top-2 {
background: v-bind("imageUrls.rankNo2");
}
.img-avatar-container::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: v-bind("imageUrls.avatarAnimation");
animation: avatar-rotate 10s linear infinite;
}
.rank-item.rank-top-3 {
background: v-bind("imageUrls.rankNo3");
}
.img-avatar {
width: 80px;
height: 80px;
border-radius: 40px;
position: absolute;
left: 6px;
top: 5px;
}
.rank-icon {
background: v-bind("imageUrls.rankIcon") center / cover no-repeat;
width: 40px;
height: 40px;
margin: auto auto auto 20px;
.txt-nickname {
position: absolute;
bottom: 40px;
text-align: center;
color: white;
font-weight: bold;
font-size: 22px;
line-height: 40px;
}
.rank-item.rank-top-1 .rank-icon {
background: v-bind("imageUrls.rankNo1Icon") center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
.rank-item.rank-top-2 .rank-icon {
background: v-bind("imageUrls.rankNo2Icon") center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
.rank-item.rank-top-3 .rank-icon {
background: v-bind("imageUrls.rankNo3Icon") center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
.rank-avatar {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 48px;
height: 48px;
border-radius: 24px;
margin-left: 10px;
}
.rank-nickname {
text-indent: 10px;
}
.rank-score {
text-align: right;
margin-right: 30px;
}
/* ========== 过渡动画 ========== */
.rank-move {
transition: transform 0.45s ease;
}
.rank-enter-active,
.rank-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
}
width: 100%;
color: #F9EBCB;
}
.rank-leave-active {
.txt-score {
position: absolute;
left: 17px;
}
.rank-enter-from,
.rank-leave-to {
opacity: 0;
transform: translateY(90px);
}
.rank-item.up,
.rank-item.new {
animation: rank-up-flash 0.8s ease;
bottom: 5px;
text-align: center;
width: 100%;
color: #F9EBCB;
}
}
.rank-item.down {
animation: rank-down-flash 0.8s ease;
@keyframes avatar-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ========== 底部跑道背景 ========== */
......@@ -532,7 +502,7 @@ const rankItemClass = (index: number) => {
width: 330px;
height: 300px;
will-change: transform;
z-index: 5;
z-index: 15;
}
.horse-wrapper.horse-lane-top {
......
frontend-large/src/pages/game5/views/Rank2View.vue
View file @ 97f29ab3
......@@ -16,8 +16,8 @@ const FINAL_RANK_LIMIT = 10;
const imageUrls = {
bg: cssAssetUrl('game5/bg.svg'),
logo: cssAssetUrl('game1/logo.png'),
title: cssAssetUrl('game1/title3.png'),
title2: cssAssetUrl('game1/title4.png'),
title: cssAssetUrl('game5/title.webp'),
title2: cssAssetUrl('game5/title2.webp'),
podium: cssAssetUrl('game5/podium.webp'),
fireworks: cssAssetUrl('game1/fireworks.png'),
avatar: cssAssetUrl('game5/avatar.webp'),
......@@ -69,7 +69,7 @@ const renderAvatar = (item: any | null) => {
<div class="bg">
<div class="img-logo"></div>
<div class="img-title"></div>
<!-- <div class="img-title2"></div> -->
<div class="img-title2"></div>
<div class="podium">
<div class="rank-no1">
......@@ -137,11 +137,11 @@ const renderAvatar = (item: any | null) => {
}
.img-title {
background: v-bind('imageUrls.title');
background: v-bind('imageUrls.title')no-repeat center;
width: 967px;
height: 122px;
margin: 0 auto;
margin-top: 37px;
margin-top: 44px;
}
.img-title2 {
......@@ -149,7 +149,7 @@ const renderAvatar = (item: any | null) => {
width: 457px;
height: 57px;
margin: 0 auto;
margin-top: 37px;
margin-top: 12px;
}
.podium {
......
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