feat(mall): pin home category menu beside hero carousel
Home hero becomes a 450px flex row with a pinned 240x450 category rail (ShellCategoryMenu `pinned` mode) left of the 960px center-cropped carousel; hovering a top-level category expands the mega-menu over the carousel. The header no longer collapses on scroll, and its category dropdown is now hover-only on non-home pages. OpenSpec change: openspec/changes/pin-home-category-menu BREAKING CHANGE: the header logo/search/cart bar no longer auto-hides past 200px of scroll, and the home page no longer shows the header category dropdown (it is pinned in the hero row instead).
This commit is contained in:
@@ -9,7 +9,10 @@ const floors = computed(() => homeFloors().filter((f) => f.products.length > 0))
|
||||
<template>
|
||||
<div>
|
||||
<div class="w1200 hero">
|
||||
<UiCarousel :images="MOCK_BANNERS" :height="450" />
|
||||
<ShellCategoryMenu pinned />
|
||||
<div class="hero-slider">
|
||||
<UiCarousel :images="MOCK_BANNERS" :height="450" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w1200 strip">
|
||||
@@ -49,7 +52,14 @@ const floors = computed(() => homeFloors().filter((f) => f.products.length > 0))
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
display: flex;
|
||||
height: 450px;
|
||||
margin-top: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.hero-slider {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.strip {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user