<script setup> const headerBg = ref('#fff') const router = useRouter() watch( () => router.currentRoute.value.path, (v) => { if (v === '/') headerBg.value = '#FAF5F1' else headerBg.value = '#fff' }, { immediate: true, }, ) </script> <template> <div class="common-layout"> <el-container class="h-full"> <!-- <DiscountTip /> --> <el-header :style="{ backgroundColor: headerBg }" class="pos-relative"> <AppHeader /> <category-header /> </el-header> <el-main id="app-scroller" class="relative"> <slot /> </el-main> <!-- <el-footer><AppFooter /></el-footer> --> <cookie-tip /> </el-container> </div> </template> <style lang="less"> .common-layout { height: 100vh; .el-header { padding-top: 30px; height: unset; box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06); } .el-main { padding: 0px; } } </style>