如何在品牌查询页自定义编辑CSS

一、功能说明

你可以通过自定义编辑CSS代码更改查询页的样式，满足品牌店铺不同的展示需求。如发现更改不生效或者需要帮助，请通过在线客服联系我们。

二、CSS 示例

以下为我们常规的CSS类名，帮助你快速找到页面元素：

页面标题

.yq-track-page-title { text-align: center !important; }

查询方式切换按钮

订单号查询 Tab

.yq-track-tab-order-num { color: #000 !important; }

运单号查询 Tab

.yq-track-tab-tracking-num { color: #000 !important; }

Tab 选中效果

.yq-track-num-active { font-weight: 600!important; }

查询表单（输入框等）

输入框

.yq-track-num-form { border-color: rgba(30,30,30,1) !important}

Email/phone 选择框

.yq-track-num-form .ant-select-selector{ border-color: rgba(0,0,0,0.16) !important;}

查询按钮

.yq-track-num-form button { background-color: #000 !important; }

运单信息板块

.yq-track-info-wrap { padding: 16px 24px 12px; }

运单信息-标题

.yq-track-shipment-title { color: #000 !important; }

运单信息-描述：状态/时间

.yq-track-shipment-desc { color: rgba(30,30,30,0.6) !important; }

运单进度条

.yq-track-progress { margin-top: '10px'; }

轨迹信息标题&轨迹翻译器

.yq-track-track-title-wrap {padding-bottom: 20px;}

轨迹内容

运输商

.yq-track-wrap .yq-track-provider { margin-bottom: 24px; }

历史轨迹事件样式

.yq-track-wrap .yq-track-event { padding-bottom: 20px; color: rgba(30,30,30,0.6) !important; }

最新轨迹事件样式

.yq-track-wrap .yq-track-latest-event p { color: #000 !important; }

订单信息模块（容器）

.yq-track-order-info-wrap { }

订单信息内容

.yq-track-product-item{}

订单内商品样式

.yq-track-order-info-item{ padding-bottom: 16px; }

展示更多信息按钮

.yq-track-order-show-toggle { margin-top: '0px'; }

产品推荐组件

.yq-track-productRecommendation-section{ padding: 24px 16px 32px !important; }

产品推荐单个商品样式

.yq-track-product-recommend-item{ padding: 8px 0 !important;}

产品推荐标题

.yq-track-productRecommendation-title { color: #000 !important;}

图集组件

.yq-track-images-section{ padding: 24px 16px 32px !important; }

视频组件

.yq-track-video-section{ padding: 24px 16px 32px !important; }

更新于： 20/04/2026