Commit fe961549 authored by 董政锦's avatar 董政锦

style: 皇冠位置调整;

parent d54c5fa8
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, computed, 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";
......@@ -31,9 +31,9 @@ const imageUrls = {
fireworks: cssAssetUrl("game1/fireworks.png"),
guan1: cssAssetUrl("game1/guan1.png"),
pai1: cssAssetUrl("game4/pai1.svg"),
guan2: cssAssetUrl("game1/guan2.png"),
guan2: cssAssetUrl("game1/guan3.png"),
pai2: cssAssetUrl("game4/pai2.svg"),
guan3: cssAssetUrl("game1/guan3.png"),
guan3: cssAssetUrl("game1/guan2.png"),
pai3: cssAssetUrl("game4/pai3.svg"),
rankIcon: cssAssetUrl("game1/no-icon.png"),
avatarAnimation: cssAssetUrl("avatar_animation.png"),
......@@ -112,6 +112,22 @@ const horses = ref<Horse[]>([]);
const isGameRunning = ref(false);
const showResult = ref(false);
const finalRankList = ref<RankItem[]>([]);
/** 补齐占位的完整 10 人排名列表 */
const fullRankList = computed<RankItem[]>(() => {
const result: RankItem[] = [];
for (let i = 0; i < 10; i++) {
result.push(
finalRankList.value[i] ?? {
rank: i + 1,
userid: `empty-${i}`,
nickname: "虚位以待",
avatar: "",
score: 0,
},
);
}
return result;
});
/** 倒计时结束后才为 true,控制背景动画和马匹渲染 */
const gameStarted = ref(false);
......@@ -366,18 +382,7 @@ const renderAvatar = (item: any) => {
// 获取 podium 上三名选手(不足补空)
const podiumPlayers = (): RankItem[] => {
const result: RankItem[] = [];
for (let i = 0; i < 3; i++) {
result.push(
finalRankList.value[i] ?? {
rank: i + 1,
userid: `empty-${i}`,
nickname: "虚位以待",
avatar: "",
score: 0,
},
);
}
const result = fullRankList.value.slice(0, 3);
// 按 podium 视觉顺序:2 1 3
return [result[1]!, result[0]!, result[2]!];
};
......@@ -447,14 +452,14 @@ defineExpose({
<div class="avatar" :style="renderAvatar(item)"></div>
<div class="nickname">{{ item.nickname }}</div>
<div class="guan"></div>
<div class="pai"></div>
<!-- <div class="pai"></div> -->
</div>
</div>
<!-- 第4-10名 rank-container -->
<div class="rank-container">
<div
v-for="(item, index) in finalRankList.slice(3, 10)"
v-for="(item, index) in fullRankList.slice(3, 10)"
:key="item.userid || `rank-${index}`"
>
<div class="no-icon">{{ index + 4 }}</div>
......@@ -653,9 +658,9 @@ defineExpose({
.podium {
background: v-bind("imageUrls.podium") no-repeat center;
width: 1347px;
height: 269px;
height: 412px;
position: absolute;
top: 427px;
top: 294px;
left: 287px;
z-index: 1;
}
......@@ -691,16 +696,16 @@ defineExpose({
/* 第1名 (中间) */
.rank-no1 {
.gu-burst { left: 580px; top: -200px; }
.gu-burst { left: 605px; top: -235px; }
.avatar {
width: 120px; height: 120px; border-radius: 60px;
position: absolute; left: 610px; top: -136px;
position: absolute; left: 610px; top: -141pxpx;
}
.nickname {
width: 167px; height: 46px;
background: #FFCF44; color: white;
text-align: center; line-height: 46px;
position: absolute; left: 590px; top: -25px;
position: absolute; left: 590px; top: -32px;
z-index: 1; border-radius: 23px;
}
.guan {
......@@ -717,22 +722,22 @@ defineExpose({
/* 第2名 (左边) */
.rank-no2 {
.gu-burst { left: 140px; top: -170px; }
.gu-burst { left: 318px; top: 111px; }
.avatar {
width: 120px; height: 120px; border-radius: 60px;
position: absolute; left: 180px; top: -110px;
position: absolute; left: 333px; top: -17px;
}
.nickname {
width: 167px; height: 46px;
background: #CA9600; color: white;
text-align: center; line-height: 46px;
position: absolute; left: 157px; top: 2px;
position: absolute; top: 95px;left: 309px;
z-index: 1; border-radius: 23px;
}
.guan {
background: v-bind("imageUrls.guan2") no-repeat center;
width: 96px; height: 96px;
position: absolute; left: 134px; top: -144px;
position: absolute; left: 289px; top: -54px;
}
.pai {
background: v-bind("imageUrls.pai2") no-repeat center;
......@@ -743,22 +748,22 @@ defineExpose({
/* 第3名 (右边) */
.rank-no3 {
.gu-burst { left: 1020px; top: -170px; }
.gu-burst { left: 931px; top: -73px; }
.avatar {
width: 120px; height: 120px; border-radius: 60px;
position: absolute; left: 1046px; top: -110px;
position: absolute; left: 920px; top: 25px;
}
.nickname {
width: 167px; height: 46px;
background: #E2E2E2; color: #AFAFAF;
text-align: center; line-height: 46px;
position: absolute; left: 1028px; top: 2px;
position: absolute; left: 897px; top: 136px;
z-index: 1; border-radius: 23px;
}
.guan {
background: v-bind("imageUrls.guan3") no-repeat center;
width: 96px; height: 96px;
position: absolute; left: 1003px; top: -146px;
position: absolute; left: 877px; top: -14px;
}
.pai {
background: v-bind("imageUrls.pai3") no-repeat center;
......
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