style(appShell): 优化应用外壳及底部导航样式与结构
- 在 tailwind 配置中添加应用外壳相关的 safelist 类名 - 替换 App.tsx 中应用外壳容器的类名,去除多余的内边距容器 - 在现代和遗留样式文件中新增移动端全屏、桌面居中列的样式规则 - 新增底部导航外层和内层的样式及响应式布局支持 - appShell.ts 中将样式类改为统一的 x8- 前缀类名 - BottomNav 组件使用新的样式类名以匹配样式调整 - Home 页面 ListRow 组件支持可选缩略图展示,增加界面展示丰富度
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
/** Centered phone-style shell width (desktop / ultrawide). */
|
||||
export const APP_SHELL_MAX_PX = 1180;
|
||||
|
||||
/** Inner column inside horizontal gutters — use with a flex/grid centering parent. */
|
||||
export const appShellColumnClass =
|
||||
"w-full min-w-0 max-w-[min(1180px,100%)]";
|
||||
|
||||
export const appShellGutterClass = "px-4 sm:px-6";
|
||||
/** Responsive rules live in `.x8-app-shell-*` (index.css + index.legacy.css). */
|
||||
export const appShellOuterClass = "x8-app-shell-outer";
|
||||
export const appShellColumnClass = "x8-app-shell-column";
|
||||
export const bottomNavOuterClass = "x8-bottom-nav-outer";
|
||||
export const bottomNavInnerClass = "x8-bottom-nav-inner";
|
||||
|
||||
Reference in New Issue
Block a user