mirror of
https://github.com/setube/ogame-vue-ts.git
synced 2026-05-12 07:55:11 +08:00
refactor: 优化ResourceIcon样式及兼容性
将ResourceIcon根元素由div改为span,调整样式为inline-block和shrink-0,提升布局灵活性。颜色由渐变改为纯色背景,增强在Android WebView等环境下的显示兼容性。尺寸样式增加min-width/min-height,确保图标不被压缩。
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="[colors[type], sizes[size], 'rounded shadow-sm']" />
|
<span :class="[colors[type], sizes[size], 'inline-block rounded shrink-0']" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -8,21 +8,22 @@
|
|||||||
size?: 'sm' | 'md' | 'lg'
|
size?: 'sm' | 'md' | 'lg'
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
withDefaults(defineProps<Props>(), {
|
||||||
size: 'md'
|
size: 'md'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 使用纯色背景,在 Android WebView 中更可靠
|
||||||
const colors = {
|
const colors = {
|
||||||
metal: 'bg-gradient-to-br from-slate-400 to-slate-600',
|
metal: 'bg-slate-500',
|
||||||
crystal: 'bg-gradient-to-br from-cyan-400 to-blue-600',
|
crystal: 'bg-cyan-500',
|
||||||
deuterium: 'bg-gradient-to-br from-green-400 to-emerald-600',
|
deuterium: 'bg-green-500',
|
||||||
darkMatter: 'bg-gradient-to-br from-purple-600 to-indigo-900',
|
darkMatter: 'bg-purple-700',
|
||||||
energy: 'bg-gradient-to-br from-yellow-400 to-orange-500'
|
energy: 'bg-yellow-500'
|
||||||
}
|
}
|
||||||
|
|
||||||
const sizes = {
|
const sizes = {
|
||||||
sm: 'w-3 h-3',
|
sm: 'w-3 h-3 min-w-3 min-h-3',
|
||||||
md: 'w-4 h-4',
|
md: 'w-4 h-4 min-w-4 min-h-4',
|
||||||
lg: 'w-5 h-5'
|
lg: 'w-5 h-5 min-w-5 min-h-5'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user