uppdate
This commit is contained in:
@@ -14,16 +14,16 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
|
||||
</head>
|
||||
|
||||
<body class="bg-[#f4f4f4] min-w-[1440px]">
|
||||
<body class="bg-[#f4f4f4]">
|
||||
|
||||
<!-- ===================== HEADER ===================== -->
|
||||
<header class="w-full flex flex-col items-center bg-white relative z-50" style="min-width:1440px">
|
||||
<header class="w-full flex flex-col items-center bg-white relative z-50">
|
||||
|
||||
<!-- Slogan Bar -->
|
||||
<div class="w-full relative h-8 flex items-center px-[120px] overflow-hidden" style="background:#c00060">
|
||||
<div class="w-full relative h-8 flex items-center overflow-hidden" style="background:#c00060">
|
||||
<img src="image/header_slogan_bg.png" alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover pointer-events-none" />
|
||||
<div class="relative flex items-center justify-between w-[1200px] mx-auto">
|
||||
<div class="layout-container relative flex items-center justify-between">
|
||||
<div class="flex items-center gap-[22px]">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="image/icon_certificate.svg" alt="" class="w-5 h-5" />
|
||||
@@ -44,22 +44,23 @@
|
||||
</div>
|
||||
|
||||
<!-- Main Header -->
|
||||
<div class="w-full bg-[#e4057c] h-[68px] flex items-center px-[120px]">
|
||||
<div class="flex items-center gap-9 w-[1200px] mx-auto">
|
||||
<!-- Logo -->
|
||||
<div class="h-[54px] w-[79px] relative shrink-0">
|
||||
<img src="image/logo_miq.png" alt="MIQ Logo" class="absolute inset-0 w-full h-full object-contain" />
|
||||
</div>
|
||||
<!-- Menu (hover) -->
|
||||
<div id="menu-trigger" class="flex items-center gap-[10px] cursor-pointer select-none" onmouseenter="showMenu()"
|
||||
onmouseleave="scheduleMenuClose()">
|
||||
<img src="image/icon_menu.svg" alt="" class="w-6 h-6" />
|
||||
<span class="text-white text-sm font-semibold">Danh mục</span>
|
||||
</div>
|
||||
<!-- Search + Nav -->
|
||||
<div class="flex items-center gap-[35px] flex-1">
|
||||
<div class="w-full bg-[#e4057c] h-[68px] flex items-center">
|
||||
<div class="layout-container h-full py-[7px]">
|
||||
<div class="w-full flex items-center gap-9">
|
||||
<!-- Logo -->
|
||||
<div class="h-[54px] w-[79px] relative shrink-0">
|
||||
<img src="image/logo_miq.png" alt="MIQ Logo" class="absolute inset-0 w-full h-full object-contain" />
|
||||
</div>
|
||||
<!-- Menu (hover) -->
|
||||
<div id="menu-trigger" class="flex items-center gap-[10px] cursor-pointer select-none" onmouseenter="showMenu()"
|
||||
onmouseleave="scheduleMenuClose()">
|
||||
<img src="image/icon_menu.svg" alt="" class="w-6 h-6" />
|
||||
<span class="text-white text-sm font-semibold">Danh mục</span>
|
||||
</div>
|
||||
<!-- Search + Nav -->
|
||||
<div class="flex items-center gap-[35px] flex-1 justify-end">
|
||||
<!-- Search Input + Popup -->
|
||||
<div class="relative w-[465px] shrink-0">
|
||||
<div class="relative flex-1 min-w-[465px]">
|
||||
<form action="/search" method="get" class="relative h-9">
|
||||
<div class="absolute inset-0 bg-white rounded-full"></div>
|
||||
<img src="image/icon_search.svg" alt="" class="absolute left-[15px] top-[8px] w-5 h-5" />
|
||||
@@ -132,40 +133,43 @@
|
||||
<img src="image/icon_arrow_next.svg" alt="" class="w-[20.844px] h-[18.688px]" />
|
||||
<span class="text-white text-sm font-semibold">Giỏ hàng</span>
|
||||
</div>
|
||||
<!-- Showroom (click) -->
|
||||
<div id="btn-showroom"
|
||||
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
|
||||
onclick="toggleShowroom()">
|
||||
<div class="flex items-center gap-[10px]">
|
||||
<img src="image/icon_map.svg" alt="" class="w-[15.5px] h-5" />
|
||||
<span class="text-white text-[13px]">Showroom</span>
|
||||
<!-- Showroom (click) -->
|
||||
<div id="btn-showroom"
|
||||
class="bg-[#b70061] h-8 rounded-full flex items-center justify-between pl-[11px] pr-[7px] w-[199px] cursor-pointer select-none"
|
||||
onclick="toggleShowroom()">
|
||||
<div class="flex items-center gap-[10px]">
|
||||
<img src="image/icon_map.svg" alt="" class="w-[15.5px] h-5" />
|
||||
<span class="text-white text-[13px]">Showroom</span>
|
||||
</div>
|
||||
<img src="image/icon_cart.svg" alt="" id="showroom-arrow"
|
||||
class="w-[6px] h-[10.7px] transition-transform duration-200" />
|
||||
</div>
|
||||
<img src="image/icon_cart.svg" alt="" id="showroom-arrow"
|
||||
class="w-[6px] h-[10.7px] transition-transform duration-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Nav Bar -->
|
||||
<div class="w-full bg-[#ebecf0] h-8 flex items-center justify-center">
|
||||
<div class="flex items-center gap-[20px] text-[#90004b] text-[13px] font-normal tracking-[-0.26px]">
|
||||
<a href="/may-lanh" class="hover:underline">máy lạnh</a>
|
||||
<a href="/tu-lanh" class="hover:underline">tủ lạnh</a>
|
||||
<a href="/may-loc-nuoc" class="hover:underline">máy lọc nước</a>
|
||||
<a href="/quat-suoi" class="hover:underline">quạt sưởi</a>
|
||||
<a href="/noi-chien" class="hover:underline">nồi chiên</a>
|
||||
<a href="/smart-tivi" class="hover:underline">smart tivi</a>
|
||||
<a href="/loa" class="hover:underline">loa</a>
|
||||
<a href="/noi-com-dien" class="hover:underline">nồi cơm điện</a>
|
||||
<a href="/man-hinh-may-tinh" class="hover:underline">màn hình máy tính</a>
|
||||
<div class="w-full bg-[#ebecf0] h-8 flex items-center">
|
||||
<div class="layout-container">
|
||||
<div class="h-8 flex items-center justify-center gap-[20px] text-[#90004b] text-[13px] font-normal tracking-[-0.26px]">
|
||||
<a href="/may-lanh" class="hover:underline">máy lạnh</a>
|
||||
<a href="/tu-lanh" class="hover:underline">tủ lạnh</a>
|
||||
<a href="/may-loc-nuoc" class="hover:underline">máy lọc nước</a>
|
||||
<a href="/quat-suoi" class="hover:underline">quạt sưởi</a>
|
||||
<a href="/noi-chien" class="hover:underline">nồi chiên</a>
|
||||
<a href="/smart-tivi" class="hover:underline">smart tivi</a>
|
||||
<a href="/loa" class="hover:underline">loa</a>
|
||||
<a href="/noi-com-dien" class="hover:underline">nồi cơm điện</a>
|
||||
<a href="/man-hinh-may-tinh" class="hover:underline">màn hình máy tính</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== MEGA MENU (hover, absolute to header) ===== -->
|
||||
<div id="mega-menu" class="hidden absolute top-full left-0 w-full z-50" style="min-width:1440px"
|
||||
<div id="mega-menu" class="hidden absolute top-full left-0 w-full z-50"
|
||||
onmouseenter="cancelMenuClose()" onmouseleave="scheduleMenuClose()">
|
||||
<div class="w-[1200px] mx-auto flex rounded-[4px] overflow-hidden">
|
||||
<div class="layout-container flex rounded-[4px] overflow-hidden">
|
||||
<!-- Left panel -->
|
||||
<div class="w-[231px] shrink-0 bg-[#eaecf0] rounded-tl-[4px] rounded-bl-[4px] flex flex-col">
|
||||
<a href="/chuong-trinh-hot" id="cat-hot" class="cat-item flex items-center h-9 pl-[15px] shrink-0"
|
||||
@@ -612,8 +616,8 @@
|
||||
<!-- ===== SHOWROOM PANEL (click, absolute to header) ===== -->
|
||||
<div id="showroom-panel"
|
||||
class="hidden absolute top-full left-0 w-full z-50 bg-white shadow-[0px_10px_15px_0px_rgba(0,0,0,0.1)]"
|
||||
style="min-width:1440px">
|
||||
<div class="w-[1200px] mx-auto py-[18px]">
|
||||
>
|
||||
<div class="layout-container py-[18px]">
|
||||
<p class="text-center font-semibold text-[16px] text-black uppercase tracking-[-0.32px] mb-4">Địa điểm showroom
|
||||
của MIQ</p>
|
||||
<div class="flex gap-3">
|
||||
@@ -756,8 +760,8 @@
|
||||
</script>
|
||||
|
||||
<!-- ===================== MAIN CONTENT ===================== -->
|
||||
<main class="w-full px-[120px] py-[16px] flex flex-col gap-[27px]" style="min-width:1440px">
|
||||
<div class="w-[1200px] mx-auto flex flex-col gap-[27px]">
|
||||
<main class="w-full py-[16px] flex flex-col gap-[27px]">
|
||||
<div class="layout-container flex flex-col gap-[27px]">
|
||||
|
||||
<!-- Banner Slider -->
|
||||
<div class="w-full h-[364px] rounded-[12px] overflow-hidden relative">
|
||||
@@ -1870,8 +1874,8 @@
|
||||
</main>
|
||||
|
||||
<!-- ===================== FOOTER ===================== -->
|
||||
<footer class="w-full bg-white mt-1" style="min-width:1440px">
|
||||
<div class="flex gap-[95px] px-[120px] py-4 h-[212px] overflow-hidden items-start">
|
||||
<footer class="w-full bg-white mt-1">
|
||||
<div class="layout-container flex gap-[95px] py-4 h-[212px] overflow-hidden items-start">
|
||||
<!-- Tổng đài -->
|
||||
<div class="flex flex-col gap-1 w-[267px] shrink-0">
|
||||
<p class="text-[14px] font-bold text-black leading-[27px]">Tổng đài hỗ trợ</p>
|
||||
@@ -1940,4 +1944,4 @@
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user