> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.omegatheme.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 自定义横幅的显示

# 显示模式

提供两种显示模式可选：
* **卡片模式**：以独立卡片形式展示所有可用规则  
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_1x50e3t.png) 
* **下拉列表模式**：通过下拉菜单选择规则后以卡片形式展示  
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_z7r2os.png) 



## 布局设置
### 规则排序
可自定义规则在前端页面、预览界面和规则列表中的显示顺序，支持以下排序方式：
* 创建时间（从新到旧/从旧到新）
* 规则名称首字母（A-Z/Z-A）
* 最小/最大备货/运输天数（升序/降序）

### 横幅标题显示
* **功能**：在卡片模式下ETA信息上方显示标题  
* **操作**：通过开关控制显示/隐藏  
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_i2alvw.png) 

### ETA信息组件
包含以下元素：
* 配送方式名称
* 预估时间文本
* 提示消息
* 国家配送标签
* 自定义文本
* 附加信息文本
* 倒计时消息  
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_1d44ngw.png) 

### 时间轴图示
可视化呈现配送阶段，最多可显示3个阶段：  
1. **订单接收**：下单日期（默认当日，截单时间后顺延）  
2. **备货阶段**：最小/最大备货日期范围  
3. **配送阶段**：最小/最大交付日期范围  

支持以下自定义：  
* 阶段图标/标题/悬浮提示  
* 日期范围方向（水平/垂直）  
* 连接线样式（短横线/箭头）  

![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_2xuzzp.png) 
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_1smv0zd.png) 
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_ogkf0n.png) 
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_bcavd9.png) 



## 视觉外观编辑器
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_np0qkx.png) 
可配置项包括：  
* **主题模板**：快速应用预设样式  
* **文字颜色**：全局文本颜色（规则内单独设置的优先级更高）  
* **时间轴图标颜色**  
* **文字大小**：默认全局统一，规则内设置可覆盖  
* **背景色**：支持透明设置  
* **边框色**：影响横幅和时间轴边框  



## 日期显示设置
* **日期格式**：自定义日/月/年排列顺序  
* **显示模式**：  
* **精确日期**：标准日期格式（如：15/07/2023）  
* **相对日期**：当天显示"今日"，次日显示"明日"  
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_kttbp8.png) 



## 倒计时设置
通过**{TimeCountDown}**变量在消息文本中添加倒计时  

**配置项**：  
* 显示格式（天/时/分/秒）  
* 截单时间后显示开关  
* 两种计算逻辑：  
1. 计算至下一个有效截单时间（含非工作日）  
2. 每日23:59截止  

**注意事项**：  
若关闭倒计时显示，需确保{TimeCountDown}变量独立成行，避免残留无效文本  
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_vb07o0.png) 
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_11nrrhd.png) 



## 邮编验证器
可自定义以下元素：  
* 验证器标题  
* 输入框提示文本  
* 验证按钮文本及颜色  
* 有效/无效邮编提示信息  
![](https://storage.crisp.chat/users/helpdesk/website/8383e5404a31c000/image_hi4weu.png) 



## 自定义CSS
* **功能**：通过CSS代码深度定制组件样式  
* **操作**：在输入框中编写覆盖默认样式的代码