极简模式时间显示位置异常
This commit is contained in:
parent
b34920f5c0
commit
9c6c7eb4c2
|
@ -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>}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue