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

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
class={clsx(
'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={{
color: 'white',
transitionDuration: '.4s',
left: layout.isCompact ? '20px' : '50%',
top: layout.isCompact ? '20px' : layout.state.simple ? '100px' : '50px',
transform: layout.isCompact ? '' : 'translate(-50%,0)'
left: layout.isCompact && !layout.state.simple ? '20px' : '50%',
top:
layout.isCompact && !layout.state.simple
? '20px'
: layout.state.simple
? '100px'
: '50px',
transform: layout.isCompact && !layout.state.simple ? '' : 'translate(-50%,0)'
}}
>
<Transition>
@ -58,7 +65,7 @@ export default defineComponent({
<div
class={
'transition-all ' +
(layout.isCompact
(layout.isCompact && !layout.state.simple
? 'text-[1.2rem] leading-[1.4rem]'
: 'text-[8vh] leading-[4rem]')
}
@ -70,7 +77,7 @@ export default defineComponent({
<div
class={
'transition-all ' +
(layout.isCompact
(layout.isCompact && !layout.state.simple
? 'text-[1.2rem] leading-[1.4rem]'
: 'text-[8vh] leading-[4rem]')
}
@ -84,26 +91,32 @@ export default defineComponent({
? settings.state.simpleModeShowString.includes('showDate') && (
<div
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>}
<Transition>
{!layout.isCompact && settings.state.timeOptions.includes('week') && (
<div>{info.value.dayWeek}</div>
)}
{!(layout.isCompact && !layout.state.simple) &&
settings.state.timeOptions.includes('week') && (
<div>{info.value.dayWeek}</div>
)}
</Transition>
<Transition>
{!layout.isCompact && settings.state.timeOptions.includes('lunal') && (
<div>{info.value.day}</div>
)}
{!(layout.isCompact && !layout.state.simple) &&
settings.state.timeOptions.includes('lunal') && <div>{info.value.day}</div>}
</Transition>
</div>
)
: settings.state!.showTime && (
<div
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>}

View File

@ -23,7 +23,7 @@ export default defineComponent(
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'
}
}