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

一、功能说明

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

功能权限：Basic及以上的套餐


二、CSS 示例

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

1.页面标题

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


2.查询方式切换按钮

- 订单号查询 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; }


3.查询表单（输入框等）

- 输入框

.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; }


4.运单信息板块

.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'; }


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

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


6.轨迹内容

- 运输商

.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; }


7.订单信息模块（容器）

.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'; }


8.产品推荐组件

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;}


9.图集组件

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


10.视频组件

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

更新于： 05/12/2024