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

refactor: 푸터 테일윈드 수정

Browse Source
This commit is contained in:
“hyeonggkim”
2025-09-11 14:54:34 +09:00
parent 859890a9f6
commit 301de68aa5
1 changed files with 16 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
layers/components/layout/default/Footer.vue
View File

@@ -4,7 +4,7 @@
<div class="menu-area"> <div class="menu-area">
<ul class="flex items-center flex-wrap gap-1.5 md:gap-0"> <ul class="flex items-center flex-wrap gap-1.5 md:gap-0">
<li v-for="(footerMenuItem, index) in footerLinks" :key="index" <li v-for="(footerMenuItem, index) in footerLinks" :key="index"
class="footer-menu-item"> class="text-sm md:text-xs md:tracking-tight relative">
<NuxtLink <NuxtLink
:to="footerMenuItem.link" :to="footerMenuItem.link"
:target="footerMenuItem.target" :target="footerMenuItem.target"
@@ -19,21 +19,21 @@
</ul> </ul>
</div> </div>
<div class="rating-area"> <div class="flex mt-2.5 md:flex-col md:mt-1.5">
<img :src="footerData.dev_ci_url" alt="게임등급" class="rating-image" /> <img :src="footerData.dev_ci_url" alt="게임등급" class="w-41 h-14 md:w-34 md:h-12 md:order-1" />
<dl class="rating-info"> <dl class="grid grid-cols-[110px_auto_110px_auto] w-full max-w-[490px] ml-5 border-t border-l border-gray-600 tracking-tight md:grid-cols-[66px_auto_84px_auto] md:max-w-[358px] md:m-0 md:mb-2.5">
<dt class="rating-label">게임명</dt> <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">게임명</dt>
<dd class="rating-value">{{ footerData.game_rating_info.title }}</dd> <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.title }}</dd>
<dt class="rating-label">상호</dt> <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">상호</dt>
<dd class="rating-value">{{ footerData.game_rating_info.company_name }}</dd> <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.company_name }}</dd>
<dt class="rating-label">이용등급</dt> <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">이용등급</dt>
<dd class="rating-value">{{ footerData.game_rating_info.reg_no }}</dd> <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.reg_no }}</dd>
<dt class="rating-label">등급분류번호</dt> <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">등급분류번호</dt>
<dd class="rating-value">{{ footerData.game_rating_info.rating_grade }}</dd> <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.rating_grade }}</dd>
<dt class="rating-label">제작년월일</dt> <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">제작년월일</dt>
<dd class="rating-value">{{ footerData.game_rating_info.prod_date }}</dd> <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.prod_date }}</dd>
<dt class="rating-label">신고(등록)번호</dt> <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">신고(등록)번호</dt>
<dd class="rating-value">{{ footerData.game_rating_info.rating_class_no }}</dd> <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.rating_class_no }}</dd>
</dl> </dl>
</div> </div>
@@ -156,53 +156,4 @@ const footerData = ref({
</script> </script>
<style scoped> <style scoped>
.footer-menu-item {
@apply text-sm md:text-xs md:tracking-tight relative;
}
.footer-menu-item:not(:first-child)::before {
content: '';
@apply inline-block bg-gray-400 h-2 w-px mx-1.5 mt-1 align-top;
}
@media (min-width: 768px) {
.footer-menu-item:nth-of-type(5)::before {
display: none;
}
}
@media (max-width: 411px) {
.footer-menu-item {
@apply th:text-xs;
}
}
@media (max-width: 321px) {
.footer-menu-item {
@apply th:text-[14px];
}
}
/* Rating Area Styles */
.rating-area {
@apply flex mt-2.5 md:flex-col md:mt-1.5;
}
.rating-image {
@apply w-41 h-14 md:w-34 md:h-12 md:order-1;
}
.rating-info {
@apply grid grid-cols-[110px_auto_110px_auto] w-full max-w-[490px] ml-5
border-t border-l border-gray-600 tracking-tight
md:grid-cols-[66px_auto_84px_auto] md:max-w-[358px] md:m-0 md:mb-2.5;
}
.rating-label {
@apply p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5;
}
.rating-value {
@apply p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5;
}
</style> </style>