极简模式时间显示位置异常

This commit is contained in:
expdsn 2024-11-19 18:44:41 +08:00
parent b34920f5c0
commit 9c6c7eb4c2
2 changed files with 28 additions and 15 deletions

View File

@ -42,14 +42,21 @@ export default defineComponent({
<div <div
class={clsx( class={clsx(
'absolute z-20 shadow-text tracking-widest font-normal transition-all ', 'absolute z-20 shadow-text tracking-widest font-normal transition-all ',
layout.isCompact ? 'text-[13px] flex z-20 items-center pointer-events-none gap-x-2' : 'h-[110px]' layout.isCompact && !layout.state.simple
? 'text-[13px] flex z-20 items-center pointer-events-none gap-x-2'
: 'h-[110px]'
)} )}
style={{ style={{
color: 'white', color: 'white',
transitionDuration: '.4s', transitionDuration: '.4s',
left: layout.isCompact ? '20px' : '50%', left: layout.isCompact && !layout.state.simple ? '20px' : '50%',
top: layout.isCompact ? '20px' : layout.state.simple ? '100px' : '50px', top:
transform: layout.isCompact ? '' : 'translate(-50%,0)' layout.isCompact && !layout.state.simple
? '20px'
: layout.state.simple
? '100px'
: '50px',
transform: layout.isCompact && !layout.state.simple ? '' : 'translate(-50%,0)'
}} }}
> >
<Transition> <Transition>
@ -58,7 +65,7 @@ export default defineComponent({
<div <div
class={ class={
'transition-all ' + 'transition-all ' +
(layout.isCompact (layout.isCompact && !layout.state.simple
? 'text-[1.2rem] leading-[1.4rem]' ? 'text-[1.2rem] leading-[1.4rem]'
: 'text-[8vh] leading-[4rem]') : 'text-[8vh] leading-[4rem]')
} }
@ -70,7 +77,7 @@ export default defineComponent({
<div <div
class={ class={
'transition-all ' + 'transition-all ' +
(layout.isCompact (layout.isCompact && !layout.state.simple
? 'text-[1.2rem] leading-[1.4rem]' ? 'text-[1.2rem] leading-[1.4rem]'
: 'text-[8vh] leading-[4rem]') : 'text-[8vh] leading-[4rem]')
} }
@ -84,26 +91,32 @@ export default defineComponent({
? settings.state.simpleModeShowString.includes('showDate') && ( ? settings.state.simpleModeShowString.includes('showDate') && (
<div <div
class={ class={
'flex items-center gap-4 ' + (layout.isCompact ? 'text-[1.2rem]' : 'justify-center mt-4') 'flex items-center gap-4 ' +
(layout.isCompact && !layout.state.simple
? 'text-[1.2rem]'
: 'justify-center mt-4')
} }
> >
{settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>} {settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}
<Transition> <Transition>
{!layout.isCompact && settings.state.timeOptions.includes('week') && ( {!(layout.isCompact && !layout.state.simple) &&
settings.state.timeOptions.includes('week') && (
<div>{info.value.dayWeek}</div> <div>{info.value.dayWeek}</div>
)} )}
</Transition> </Transition>
<Transition> <Transition>
{!layout.isCompact && settings.state.timeOptions.includes('lunal') && ( {!(layout.isCompact && !layout.state.simple) &&
<div>{info.value.day}</div> settings.state.timeOptions.includes('lunal') && <div>{info.value.day}</div>}
)}
</Transition> </Transition>
</div> </div>
) )
: settings.state!.showTime && ( : settings.state!.showTime && (
<div <div
class={ class={
'flex items-center gap-4 ' + (layout.isCompact ? ' text-[1.2rem]' : 'mt-4 justify-center') 'flex items-center gap-4 ' +
(layout.isCompact && !layout.state.simple
? ' text-[1.2rem]'
: 'mt-4 justify-center')
} }
> >
{settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>} {settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}

View File

@ -23,7 +23,7 @@ export default defineComponent(
props.isMini props.isMini
? {} ? {}
: { : {
top: layout.isCompact ? '50px' : layout.state.simple ? '230px' : '172px', top: layout.isCompact && !layout.state.simple ? '50px' : layout.state.simple ? '230px' : '172px',
width: settings.state.searchWidth + 'rem' width: settings.state.searchWidth + 'rem'
} }
} }