gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [디자인QA] 이벤트 네비게이션 항목 스타일 수정

Browse Source
This commit is contained in:
clkim
2025-11-28 16:00:30 +09:00
parent e5f0bf7992
commit 8cdd55ddf2
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
layers/components/layouts/EventNavigation.vue
View File

@@ -99,12 +99,14 @@ onMounted(async () => {
@apply flex flex-col gap-4 w-[180px] h-full overflow-y-scroll rounded-[20px] p-4 pr-1 bg-[rgba(25,25,25,0.5)] shadow-[0_2px_4px_0_rgba(0,0,0,0.06)] backdrop-blur-[25px] transition-opacity duration-300 ease-in-out; @apply flex flex-col gap-4 w-[180px] h-full overflow-y-scroll rounded-[20px] p-4 pr-1 bg-[rgba(25,25,25,0.5)] shadow-[0_2px_4px_0_rgba(0,0,0,0.06)] backdrop-blur-[25px] transition-opacity duration-300 ease-in-out;
} }
.item-thumbnail { .item-thumbnail {
@apply overflow-hidden relative w-[148px] h-[75px] rounded-[10px] @apply overflow-hidden relative w-[148px] h-[75px] rounded-[10px] bg-[#333333]
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:rounded-[10px] before:border-[1px] before:border-white/[0.08] after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-[10px] after:border-[1px] after:border-[rgba(255,255,255,0.08)] after:transition-all after:duration-300 after:ease-in-out;
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-[lightgray]/50; }
.item-thumbnail img {
@apply opacity-50 transition-opacity duration-300 ease-in-out;
} }
.item-title { .item-title {
@apply block mt-2 text-center text-[#ebebeb] text-[14px] font-normal leading-[20px] tracking-[-0.42px] opacity-50; @apply block mt-2 text-center text-[#FFF] text-[14px] font-normal leading-[20px] tracking-[-0.42px] opacity-50 transition-opacity duration-300 ease-in-out;
} }
.btn-control { .btn-control {
@apply absolute top-3 right-[-40px] bg-black/20 shadow-[0_1.667px_3.333px_0_rgba(0,0,0,0.06)] backdrop-blur-[12.5px] rotate-180 @apply absolute top-3 right-[-40px] bg-black/20 shadow-[0_1.667px_3.333px_0_rgba(0,0,0,0.06)] backdrop-blur-[12.5px] rotate-180
@@ -121,12 +123,20 @@ onMounted(async () => {
@apply pointer-events-none opacity-0; @apply pointer-events-none opacity-0;
} }
.router-link-active .item-thumbnail,
.item-link:hover .item-thumbnail { .item-link:hover .item-thumbnail {
@apply before:border-[var(--primary)] after:opacity-0; @apply after:border-[rgba(255,255,255,1)];
}
.router-link-active .item-thumbnail {
@apply after:border-[var(--primary)] !important;
}
.router-link-active .item-thumbnail img,
.item-link:hover .item-thumbnail img {
@apply opacity-100;
} }
.router-link-active .item-title,
.item-link:hover .item-title { .item-link:hover .item-title {
@apply opacity-100;
}
.router-link-active .item-title {
@apply text-[var(--primary)] opacity-100; @apply text-[var(--primary)] opacity-100;
} }
</style> </style>

2
layers/components/layouts/Main.vue
View File

@@ -60,8 +60,6 @@ const setupSeoMeta = (metaTag: PageDataMetaTag) => {
}) })
} }
provide('pinToMain', pinToMain)
// 메타 태그 설정 감시 // 메타 태그 설정 감시
watchEffect(() => { watchEffect(() => {
if (shouldShowMetaTag.value && props.pageData?.meta_tag_json) { if (shouldShowMetaTag.value && props.pageData?.meta_tag_json) {