更新添加图标的样式
This commit is contained in:
parent
f86c26b823
commit
2628e3076c
Binary file not shown.
After Width: | Height: | Size: 730 B |
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue