@@ -1802,7 +1802,7 @@ nav.app-tabbar .app-tabbar-label {
|
|||||||
|
|
||||||
.partner-sticky-filter {
|
.partner-sticky-filter {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 56px;
|
top: 0;
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
background: rgba(250, 249, 247, 0.95);
|
background: rgba(250, 249, 247, 0.95);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
@@ -3067,10 +3067,21 @@ body {
|
|||||||
border-top: 1px dashed rgba(166, 29, 36, 0.15);
|
border-top: 1px dashed rgba(166, 29, 36, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与顶栏布局 */
|
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与操作区 */
|
||||||
.app-page-title {
|
.app-page-title {
|
||||||
visibility: hidden;
|
display: none !important;
|
||||||
font-size: 0 !important;
|
}
|
||||||
line-height: 0 !important;
|
|
||||||
color: transparent !important;
|
/* 仅含标题的顶栏一并收起,去掉空白条;有返回/操作的顶栏保留 */
|
||||||
|
header:has(> .app-page-title:only-child),
|
||||||
|
.header.app-page-header:has(> .app-page-title:only-child),
|
||||||
|
.app-page-header:has(> .app-page-title:only-child) {
|
||||||
|
display: none !important;
|
||||||
|
height: 0 !important;
|
||||||
|
min-height: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
+22
-21
@@ -1489,25 +1489,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.shop-records-header {
|
.shop-records-header {
|
||||||
position: fixed;
|
/* 页内标题已隐藏:不再占位;保留类名以免改 JSX */
|
||||||
top: 0;
|
display: none !important;
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 100%;
|
|
||||||
max-width: 480px;
|
|
||||||
height: 56px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 var(--space-page);
|
|
||||||
background: rgba(250, 249, 247, 0.9);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
z-index: 50;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-records-filters {
|
.shop-records-filters {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 56px;
|
top: 0;
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
border-bottom: 1px solid var(--color-surface-container-highest);
|
border-bottom: 1px solid var(--color-surface-container-highest);
|
||||||
@@ -1578,7 +1566,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.shop-records-main {
|
.shop-records-main {
|
||||||
padding-top: 56px;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-records-summary {
|
.shop-records-summary {
|
||||||
@@ -2732,11 +2720,24 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与顶栏布局 */
|
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与操作区 */
|
||||||
.app-page-title {
|
.app-page-title {
|
||||||
visibility: hidden;
|
display: none !important;
|
||||||
font-size: 0 !important;
|
}
|
||||||
line-height: 0 !important;
|
|
||||||
color: transparent !important;
|
/* 仅含标题的顶栏一并收起,去掉空白条;有返回/操作的顶栏保留 */
|
||||||
|
header:has(> .app-page-title:only-child),
|
||||||
|
.shop-home-header:has(> .app-page-title:only-child),
|
||||||
|
.shop-mine-header:has(> .app-page-title:only-child),
|
||||||
|
.shop-records-header:has(> .app-page-title:only-child),
|
||||||
|
.app-page-header:has(> .app-page-title:only-child) {
|
||||||
|
display: none !important;
|
||||||
|
height: 0 !important;
|
||||||
|
min-height: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,11 +5,10 @@ type SubPageHeaderProps = {
|
|||||||
|
|
||||||
export default function SubPageHeader({ title, onBack }: SubPageHeaderProps) {
|
export default function SubPageHeader({ title, onBack }: SubPageHeaderProps) {
|
||||||
return (
|
return (
|
||||||
<header className="sub-page-header">
|
<header className="sub-page-header" aria-label={title}>
|
||||||
<button type="button" className="sub-page-header-back" aria-label="返回" onClick={onBack}>
|
<button type="button" className="sub-page-header-back" aria-label="返回" onClick={onBack}>
|
||||||
<span className="material-symbols-outlined">arrow_back</span>
|
<span className="material-symbols-outlined">arrow_back</span>
|
||||||
</button>
|
</button>
|
||||||
<h1 className="app-page-title">{title}</h1>
|
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,9 +7,13 @@ type TabMainHeaderProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function TabMainHeader({ title, extra, className = '' }: TabMainHeaderProps) {
|
export default function TabMainHeader({ title, extra, className = '' }: TabMainHeaderProps) {
|
||||||
|
// H5:系统标题已展示;无右侧内容时整栏不渲染,避免顶部留白
|
||||||
|
if (!extra) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className={`tab-main-header${className ? ` ${className}` : ''}`}>
|
<header className={`tab-main-header${className ? ` ${className}` : ''}`} aria-label={title}>
|
||||||
<h1 className="app-page-title">{title}</h1>
|
|
||||||
{extra ? <div className="tab-main-header-extra">{extra}</div> : null}
|
{extra ? <div className="tab-main-header-extra">{extra}</div> : null}
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -917,6 +917,11 @@
|
|||||||
z-index: 40;
|
z-index: 40;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 首页有城市栏顶栏时 top=56;无额外内容已不渲染顶栏时贴顶 */
|
||||||
|
.home-page:not(:has(.tab-main-header)) .home-aroma-nav {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.home-aroma-tab {
|
.home-aroma-tab {
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
@@ -5926,3 +5931,20 @@
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 微信 H5 系统标题已展示:隐藏页内重复标题;仅标题顶栏收起 */
|
||||||
|
.app-page-title {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
header:has(> .app-page-title:only-child),
|
||||||
|
.app-page-header:has(> .app-page-title:only-child) {
|
||||||
|
display: none !important;
|
||||||
|
height: 0 !important;
|
||||||
|
min-height: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -13,6 +13,11 @@ const isH5 = process.env.TARO_ENV === 'h5';
|
|||||||
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
||||||
const metrics = useNavBarMetrics();
|
const metrics = useNavBarMetrics();
|
||||||
|
|
||||||
|
// H5:系统标题已展示;无右侧内容时整栏不渲染,避免顶部留白
|
||||||
|
if (isH5 && !extra) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
|
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
|
||||||
{!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
|
{!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
|
||||||
|
|||||||
@@ -65,7 +65,10 @@ export default function HomePage() {
|
|||||||
const onSale = tab === 'QINGXIANG';
|
const onSale = tab === 'QINGXIANG';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell variant="tab" className="home-page">
|
<PageShell
|
||||||
|
variant="tab"
|
||||||
|
className={`home-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
||||||
|
>
|
||||||
<TabMainHeader title="杜康好客" />
|
<TabMainHeader title="杜康好客" />
|
||||||
|
|
||||||
<View className="home-aroma-nav">
|
<View className="home-aroma-nav">
|
||||||
|
|||||||
@@ -210,7 +210,10 @@ export default function MinePage() {
|
|||||||
|
|
||||||
if (!authed) {
|
if (!authed) {
|
||||||
return (
|
return (
|
||||||
<PageShell variant="tab" className="mine-page">
|
<PageShell
|
||||||
|
variant="tab"
|
||||||
|
className={`mine-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
||||||
|
>
|
||||||
<TabMainHeader title="我的" />
|
<TabMainHeader title="我的" />
|
||||||
<View className="mine-header">
|
<View className="mine-header">
|
||||||
<View className="mine-header-texture" />
|
<View className="mine-header-texture" />
|
||||||
@@ -247,7 +250,10 @@ export default function MinePage() {
|
|||||||
const memberLabel = hasWechat ? '好客会员' : canWxBind ? '微信未授权' : '未授权微信';
|
const memberLabel = hasWechat ? '好客会员' : canWxBind ? '微信未授权' : '未授权微信';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell variant="tab" className="mine-page">
|
<PageShell
|
||||||
|
variant="tab"
|
||||||
|
className={`mine-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
||||||
|
>
|
||||||
<TabMainHeader title="我的" />
|
<TabMainHeader title="我的" />
|
||||||
<View className="mine-header">
|
<View className="mine-header">
|
||||||
<View className="mine-header-texture" />
|
<View className="mine-header-texture" />
|
||||||
|
|||||||
@@ -73,7 +73,10 @@ export default function StoresPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell variant="tab" className="store-page">
|
<PageShell
|
||||||
|
variant="tab"
|
||||||
|
className={`store-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
||||||
|
>
|
||||||
<TabMainHeader title="门店" />
|
<TabMainHeader title="门店" />
|
||||||
<View className="store-toolbar">
|
<View className="store-toolbar">
|
||||||
<View className="store-location" onClick={() => setRegionOpen(true)}>
|
<View className="store-location" onClick={() => setRegionOpen(true)}>
|
||||||
|
|||||||
@@ -20,14 +20,13 @@
|
|||||||
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
|
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Tab 主页面顶栏(实底 sticky) ── */
|
/* H5 无 Tab 顶栏:贴顶,去掉标题栏留白 */
|
||||||
.tab-main-header {
|
.page-shell.h5-no-tab-header {
|
||||||
position: sticky;
|
--nav-bar-height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell.h5-no-tab-header .home-aroma-nav {
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 50;
|
|
||||||
background: var(--color-background);
|
|
||||||
box-shadow: var(--shadow-card);
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-main-header__content {
|
.tab-main-header__content {
|
||||||
|
|||||||
@@ -534,7 +534,8 @@ button, input, select, textarea { font: inherit; }
|
|||||||
.page-header-title--spacer {
|
.page-header-title--spacer {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
min-height: 26px;
|
min-height: 0;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Coupon badge (ticket notch) */
|
/* Coupon badge (ticket notch) */
|
||||||
|
|||||||
Reference in New Issue
Block a user