feat(admin,api,player): 结算预览分页、统计图表与返水限额
完善结算计算与预览 API(含后端分页),加强管理端结算/返水/权限,并优化玩家端投注单与队徽展示。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
121
apps/player/src/components/TeamEmblem.vue
Normal file
121
apps/player/src/components/TeamEmblem.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { teamFlagUrl } from '../utils/teamFlag';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
teamCode?: string;
|
||||
teamName?: string;
|
||||
logoUrl?: string | null;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}>(),
|
||||
{ size: 'md' },
|
||||
);
|
||||
|
||||
const useCustomLogo = computed(() => Boolean(props.logoUrl?.trim()));
|
||||
const src = computed(() =>
|
||||
teamFlagUrl(props.teamCode, props.teamName, props.logoUrl),
|
||||
);
|
||||
const failed = ref(false);
|
||||
|
||||
function onError() {
|
||||
failed.value = true;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.teamCode, props.teamName, props.logoUrl] as const,
|
||||
() => {
|
||||
failed.value = false;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img
|
||||
v-if="src && !failed"
|
||||
:src="src"
|
||||
alt=""
|
||||
class="team-emblem"
|
||||
:class="[`team-emblem--${size}`, { 'team-emblem--logo': useCustomLogo }]"
|
||||
loading="lazy"
|
||||
@error="onError"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="team-emblem team-emblem--placeholder"
|
||||
:class="`team-emblem--${size}`"
|
||||
aria-hidden="true"
|
||||
>⚽</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.team-emblem {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.team-emblem--sm {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.team-emblem--md {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.team-emblem--lg {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
/* 国旗:横向比例 + 铺满 */
|
||||
.team-emblem:not(.team-emblem--logo) {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.team-emblem--sm:not(.team-emblem--logo) {
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.team-emblem--md:not(.team-emblem--logo) {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.team-emblem--lg:not(.team-emblem--logo) {
|
||||
width: 54px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* 队徽:正方形容器 + 完整显示 */
|
||||
.team-emblem--logo {
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.team-emblem--placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.55;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.team-emblem--sm.team-emblem--placeholder {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.team-emblem--md.team-emblem--placeholder {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.team-emblem--lg.team-emblem--placeholder {
|
||||
font-size: 22px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user