文章分类: 退货

如何在退货页面自定义编辑CSS

一、功能说明


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


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



二、CSS 示例

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


1.订单查询页


页面标题

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

表单

.yq-return-order-form { margin: 20px 0 !important; }

输入框

.yq-return-order-input { border-color: rgba(30,30,30,1) !important }

身份验证下拉框(邮箱/邮编/手机号)

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

退货政策文本

.yq-return-order-policy-text { margin: 10px 0 !important; }

退货政策按钮

.yq-return-order-policy-btn { color: rgba(25,70,190,1.00) !important; }

查询订单按钮

.yq-return-order-form button { background-color: #000 !important; }




2.物品选择页/选择退货原因/选择售后方式


页面标题(调整页面标题样式,将同时应用在选择退货商品页面/选择退货原因/选择售后方式页面)

.yq-return-order-apply-title { justify-content: center !important; }

订单项标题

.yq-return-order-apply-items-title { justify-content: center !important; }

下一步按钮

.yq-return-order-apply-next-btn { background-color: #000 !important; }

商品信息

.yq-return-order-apply-product-item { border-radius: 16px !important; }

售后方式

.yq-return-order-apply-solution { padding: 16px !important; }

运输方式

.yq-return-order-apply-shipment { border-radius: 12px !important;}




3.审核申请


提交按钮

.yq-return-order-submit-btn { background-color: #000 !important; }

申请进度条

.yq-return-order-apply-progress { margin: 20px 0 !important; }




4.退货列表


创建退货按钮

.yq-return-order-create-btn { background-color: #000 !important; }




5.售后状态详情页


订单详情卡片

.yq-return-order-list-item { border-radius: 16px !important; }

售后进度条

.yq-return-order-progress { margin: 20px 0 !important; }

退换货物流轨迹

.yq-return-order-tracking-info { border-radius: 16px !important; }

金额摘要

.yq-return-order-summary { padding: 16px !important; }

售后方式

.yq-return-order-solution { margin: 20px 0 !important; }

退货运输方式

.yq-return-order-shipping { border-radius: 16px !important; }




更新于: 09/07/2025

这篇文章有帮助吗?

分享您的反馈意见

取消

谢谢!