更新添加图标的样式

This commit is contained in:
expdsn 2024-10-17 18:54:46 +08:00
parent f86c26b823
commit 2628e3076c
2 changed files with 19 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 730 B

View File

@ -43,17 +43,24 @@ const ItemButton = defineComponent({
ctx.emit('click') ctx.emit('click')
}} }}
class={ class={
'py-2 px-4 mb-2 rounded-lg text-sm cursor-pointer transition-all ' + 'py-4 px-4 mb-2 rounded text-sm cursor-pointer transition-all relative ' +
(isGame.value (isGame.value
? props.active ? props.active
? 'bg-[#626471] text-[#f7a94e]' ? 'bg-[#626471] text-[#f7a94e]'
: 'hover:text-[#f7a94e] text-[#b4b5bb]' : 'hover:text-[#f7a94e] hover:bg-white/20 text-[#b4b5bb]'
: props.active : props.active
? 'bg-white text-black/80 shadow' ? 'bg-white text-black/80 shadow'
: 'hover:text-black/80 hover:bg-white text-black/50') : 'hover:text-black/80 hover:bg-white text-black/50')
} }
> >
<OhVueIcon name={props.name} /> {props.active && (
<img
src="/icons/work_add_main_checked.png"
class={'absolute h left-0 top-1/2 -translate-y-1/2 w-[8px] h-[34px]'}
></img>
)}
<OhVueIcon name={props.name} class={"ml-1"} />
<span class="ml-2">{props.label}</span> <span class="ml-2">{props.label}</span>
</div> </div>
) )
@ -69,12 +76,18 @@ export default defineComponent(() => {
const addTo = ref(layout.state.currentPage) const addTo = ref(layout.state.currentPage)
provide(AddToToken, addTo) provide(AddToToken, addTo)
return () => ( return () => (
<div class={clsx('w-full h-full relative flex', isGame.value && 'bg-[#2c2e3e]')}> <div
class={clsx('w-full h-full relative flex p-[6px]', isGame.value && 'bg-[#2c2e3e]')}
style={{
backgroundImage: `url('/bg/gameModel.png')`,
backgroundSize: '100% 100%'
}}
>
<ThemeProvider dark={isGame.value}> <ThemeProvider dark={isGame.value}>
<div <div
class={ class={
'w-[220px] h-full relative z-10 pt-[100px] ' + 'w-[220px] h-full relative z-10 pt-[100px] rounded-2xl ' +
(isGame.value ? 'pl-8 pr-2 rounded-xl' : 'bg-white/60 l backdrop-blur px-4') (isGame.value ? 'pl-8 pr-2 bg-[#424b5d4d]' : 'bg-white/60 l backdrop-blur px-4')
} }
> >
<ItemButton <ItemButton