如何在退货页面自定义编辑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
谢谢!